/* pages/culture/index.wxss */ .fixed-top { position: fixed; left: 0; right: 0; height: 200rpx; background: white; } .types { height: 80rpx; display: flex; justify-content: space-between; } .types .type { width: 50%; text-align: center; font-size: 30rpx; color: #333; line-height: 80rpx; position: relative; } .types .type.active { color: #0F9095; font-weight: bold; } .types .type.active::after { content: "1"; font-size: 0; width: 40rpx; height: 6rpx; position: absolute; left: 50%; margin-left: -20rpx; bottom: 10rpx; background: #0F9095; display: block; border-radius: 3rpx; } .date-box { height: 86rpx; background: rgba(15, 144, 149, 0.08); display: flex; justify-content: space-between; align-items: center; padding: 17rpx 0; padding-left: 20rpx; } .date-item { font-size: 24rpx; color: #999; text-align: center; display: flex; flex-direction: column; justify-content: center; width: 86rpx; height: 86rpx; } .date-item.active { font-weight:500; background: #0B898E; border-radius: 50%; color: #fff; font-size: 24rpx; color: #fff; } .date-item view:nth-child(1){ font-size: 28rpx; color: #333; } .date-item.active view:nth-child(1){ color: #fff; font-size: 28rpx; } .calendar-img { width: 70rpx; padding-left: 10rpx; height: 80rpx; display: flex; align-items: center; justify-content: flex-start; border-radius: 30rpx 0px 0px 30rpx; } .calendar-img image { width: 56rpx; height: 60rpx; display: block; } .calendar-img.active { background-color: #0B898E; } .left-fixed { position: fixed; left: 0; width: 140rpx; bottom: 0; text-align: center; line-height: 80rpx; font-size: 24rpx; color: #999; background: #F2F2F2; margin-top: 0; } .tags { overflow-y: auto; } .tag.active { background: white; color: #333; } .item { margin: 40rpx 20rpx; margin-top: 20rpx; display: flex; margin-left: 150rpx; font-size: 24rpx; color: #999; } .item image { width: 160rpx; height: 160rpx; flex-shrink: 0; display: block; margin-right: 10rpx; border-radius: 10rpx; } .item .textOver2 { font-size: 30rpx; color: #333; line-height: 42rpx; height: 84rpx; } .info-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; } .info-bottom .info-btn { width: 140rpx; height: 40rpx; background: #0F9095; border-radius: 20rpx; line-height: 40rpx; text-align: center; color: #fff; flex-shrink: 0; } .right-info { flex: 1; width: 400rpx; } .info-bottom .info-btn.borderbtn { background: white; box-sizing: border-box; border: 2rpx solid #0F9095; color: #0F9095; display: flex; justify-content: center; align-items: center; }