149 lines
3.8 KiB
Plaintext
149 lines
3.8 KiB
Plaintext
/* 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;
|
|
}
|