venue_wx/pages/bookClassesDetail/index.wxss

/* pages/bookClassesDetail/index.wxss */

.container {
  padding-bottom: 130rpx;
  min-height: calc(100vh - 330rpx);
}

.header {
  width: 100%;
  height: 350rpx;
}

.header image {
  width: 100%;
  height: 100%;
}

.cell-box {
  margin: 30rpx 30rpx 0 30rpx;
  background: #1a191e;
  border-radius: 10rpx;
}

.cell-box .cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  padding: 0 20rpx;
  border-bottom: 2rpx solid #212025;
}

.cell-box .cell.unline {
  border: none;
}

.cell-box .cell>image {
  width: 34rpx;
  height: 34rpx;
  margin-right: 26rpx;
}

.cell-box .cell>text {
  flex: 1;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.cell-box .cell .more-text {
  flex: 1;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.cell-box .cell .more-text>text:first-child {
  margin-right: 58rpx;
}

.cell-box .cell .cell-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20rpx;
}

.cell-box .cell .cell-right .gps-img {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

.cell-box .cell .cell-right>text {
  height: 20rpx;
  margin-top: 6rpx;
  line-height: 20rpx;
}

.cell-box .coach-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30rpx;
}

.cell-box .coach-info>image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 26rpx;
}

.cell-box .coach-info .coach-text {
  flex: 1;
}

.cell-box .coach-info .coach-text .name {
  height: 26rpx;
  margin-bottom: 20rpx;
  color: #d1b32b;
  font-size: 26rpx;
  line-height: 26rpx;
}

.cell-box .coach-info .coach-text .info {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  line-height: 30rpx;
}

.cell-box .coach-info .coach-text .info.pack-up {
  height: 60rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cell-box .unfold {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30rpx 18rpx 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22rpx;
}

.cell-box .unfold>image {
  width: 12rpx;
  height: 22rpx;
  margin-left: 16rpx;
}

.cell-box .rich-box {
  display: flex;
  padding: 20rpx;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
  line-height: 36rpx;
}

.cell-box .rich-box.pack-up {
  height: 48rpx;
  overflow: hidden;
  /* text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; */
}

.cell-box .cell .title {
  flex: 1;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 24rpx;
}

.cell-box .rich-box {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
  padding: 30rpx 20rpx;
}

.cell-box .rich-box .wscnph {
  width: calc(100% - 10rpx);
  margin-left: 5rpx;
}

.footer-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background: #ffda2e;
  color: #1a191e;
  font-size: 32rpx;
  text-align: center;
  line-height: 100rpx;
}

.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;
}