qingcheng-xiaochengxu/pages/course/courseDetail/courseDetail.wxss

/* pages/course/courseDetail/courseDetail.wxss */

/* ===== 页面骨架：整页固定、内容滚动、底部栏固定 ===== */
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f7f9;
  overflow: auto; /* 禁止整页滚动 */
  box-sizing: border-box;
  font-family: SourceHanSansCN, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif;
}

/* 独立滚动内容区（隐藏滚动条） */
.content {
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
.no-scrollbar { scrollbar-width: none; }

/* ===== 顶部主图（自适应圆角阴影） ===== */
.hero {
  padding: 24rpx 24rpx 0;
  box-sizing: border-box;
}
.hero-img {
  width: 100%;
  height: 420rpx;                  /* 沉浸横幅高度 */
  border-radius: 20rpx;
  object-fit: cover;
  box-shadow: 0 12rpx 30rpx rgba(0,0,0,0.06);
}

/* ===== 通用卡片容器 ===== */
.card {
  margin: 20rpx 24rpx 0;
  padding: 22rpx;
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* ===== 价格区：券后价 + 原价 ===== */
.price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.price-now { display: inline-flex; align-items: baseline; gap: 8rpx; }
.price-num {
  font-size: 44rpx;
  line-height: 1;
  color: #ff6a00;                  /* 主题橙 */
  font-weight: 700;
}
.price-suffix { font-size: 24rpx; color: #ff6a00; opacity: .9; }
.price-origin .origin-text { font-size: 24rpx; color: #9aa0a6; text-decoration: line-through; }

/* 课程标题 */
.title {
  display: block;
  margin-top: 14rpx;
  font-size: 32rpx;
  line-height: 46rpx;
  color: #111;
  font-weight: 600;
  word-break: break-word;
}

/* ===== 概述标题行 ===== */
.card-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}
.head-icon { width: 34rpx; height: 34rpx; }
.head-text { font-size: 28rpx; color: #111; font-weight: 600; }

/* rich-text 内容排版（图片适配） */
.rt {
  font-size: 26rpx;
  line-height: 42rpx;
  color: #333;
  white-space: normal;
  word-break: break-word;
}
.rt p { margin: 8rpx 0; }
.rt img { max-width: 100%; height: auto !important; border-radius: 12rpx; }

/* 底部占位，避免被购买栏遮挡 */
.bottom-gap {
  height: calc(env(safe-area-inset-bottom));
}

/* ===== 固定底部购买栏（含安全区） ===== */
.buy-bar {
  position: sticky;
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20rpx;
  padding: 12rpx 24rpx calc(12rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  box-shadow: 0 -8rpx 20rpx rgba(0,0,0,0.06);
  z-index: 10;
}

/* 左侧咨询 */
.buy-left {
  display: inline-flex; align-items: center; gap: 10rpx;
  padding: 12rpx 16rpx;
  border-radius: 16rpx;
  background: #f0f2f5;
}
.consult-icon { width: 36rpx; height: 36rpx; }
.consult-text { font-size: 24rpx; color: #333; }

/* 右侧按钮 */
.buy-btn {
  flex: 1;
  height: 72rpx;
  border-radius: 9999rpx;
  background: linear-gradient(90deg, #ff6a00, #ff8a2a);
  box-shadow: 0 10rpx 24rpx rgba(255,106,0,0.26);
  display: flex; align-items: center; justify-content: center;
}
.buy-btn-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1rpx;
}

/* ===== 小的间距工具（保留你原有语义） ===== */
.mt-9 { margin-top: 16rpx; }
.mt-37 { margin-top: 68rpx; }
.mt-1 { margin-top: 2rpx; }

/* 你之前的 class 若仍在别处使用，可继续保留或删去：
.image, .section, .group, .group_2, .group_3, .divider, .pos, .text_4, .section_2, .group_4, .image_2, .font, .text_3, .text_2, .text_5, .section_3, .section_4, .image_3, .text_7, .text-wrapper, .text_6
当前新版未依赖它们。 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}