venue_wx/pages/bookClasses/index.wxss

/* pages/bookClasses/index.wxss */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 140rpx;
  padding: 0 16rpx;
  background: #1a191e;
}

.header .swiper {
  flex: 1;
  height: 100%;
  margin: 0 10rpx;
}

.header .img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20rpx;
  height: 100%;
  border-radius: 4rpx;
}

.header .img>image {
  width: 20rpx;
  height: 40rpx;
}

.header .swiper .cell {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.header .swiper .cell .item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc((100% - 120rpx)/7);
  /* height: 60rpx; */
  height: 70rpx;
  border: 2rpx solid #57565a;
  border-radius: 10rpx;
  color: #fff;
}

.header .swiper .cell .item .date {
  font-size: 20rpx;
}

.header .swiper .cell .item.isActive {
  /* flex-direction: column; */
  /* width: calc((100% - 140rpx)/7 + 20rpx); */
  /* height: 70rpx; */
  border: 2rpx solid #b39a29;
  color: #9b8627;
}

.header .swiper .cell .item .flg {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(35%, -50%);
  height: 36rpx;
  width: 36rpx;
  font-size: 20rpx;
  background: #ffda2e;
  color: #1a191e;
  line-height: 36rpx;
  text-align: center;
  border-radius: 50%;
  z-index: 100;
}

.header .swiper .cell .item .flg.past {
  background: #989898;
}

.list .cell {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 160rpx;
  margin-top: 30rpx;
  padding: 0 16rpx;
  background: #1a191e;
}

.list .cell .image-box {
  position: relative;
  width: 130rpx;
  height: 110rpx;
  background: orange;
}

.list .cell .image-box>image {
  width: 100%;
  height: 100%;
}

.list .cell .image-box .sold-out {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 20rpx;
  text-align: center;
  line-height: 30rpx;
}

.list .cell .cell-center {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  margin-left: 24rpx;
}

.list .cell .cell-center .title-box {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.list .cell .cell-center .title-box>text {
  color: #fff;
  font-size: 26rpx;
  line-height: 26rpx;
}

.list .cell .cell-center .title-box .tip {
  margin-left: 10rpx;
  font-size: 20rpx;
  line-height: 20rpx;
  color: #a08a27;
  border: 2rpx solid #675a23;
  border-radius: 4rpx;
  padding: 4rpx 6rpx;
}

.list .cell .cell-center>text {
  font-size: 24rpx;
  line-height: 24rpx;
  color: #b89e29;
}

.list .cell .cell-center>text:last-child {
  margin-top: 12rpx;
}

.list .cell .type-btn {
  position: absolute;
  top: calc(50% + 6rpx);
  right: 20rpx;
  transform: translateY(-50%);
  height: 50rpx;
  width: 100rpx;
  background: #767578;
  color: #1a191e;
  text-align: center;
  line-height: 50rpx;
  border-radius: 25rpx;
  font-size: 24rpx;
}

.list .cell .type-btn.isActive {
  background: #ffda2e;
}

.newplot {
  position: fixed;
  top: 270rpx;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28rpx;
}

.newplot>image {
  width: 200rpx;
  height: 200rpx;
  margin-top: -200rpx;
}

.share-btn-box {
  position: fixed;
  right: 30rpx;
  bottom: 130rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110rpx;
  height: 110rpx;
  color: #1a191e;
  font-size: 24rpx;
  border-radius: 50%;
}

.share-btn-box>button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  font-size: 24rpx;
  color: #1a191e;
}
.share-btn-box>button::after {
  border: none;
}