test/pages/culture/index.wxss

/* 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;
}