init project

pages/bookClassesDetail/index.wxss

@@ -0,0 +1,212 @@
+/* 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;
+}