commission--yt-commit
This commit is contained in:
336
pages/course/courseDetail/courseDetail.wxss
Normal file
336
pages/course/courseDetail/courseDetail.wxss
Normal file
@ -0,0 +1,336 @@
|
||||
/* pages/course/courseDetail/courseDetail.wxss */
|
||||
|
||||
/* 通用间距 */
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
/* .mt-35 {
|
||||
margin-top: 65.63rpx;
|
||||
} */
|
||||
.mt-15 {
|
||||
margin-top: 28.13rpx;
|
||||
}
|
||||
.mt-7 {
|
||||
margin-top: 13.13rpx;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 1.88rpx;
|
||||
}
|
||||
.ml-15 {
|
||||
margin-left: 28.13rpx;
|
||||
}
|
||||
|
||||
/* 页面容器 */
|
||||
.page {
|
||||
background-color: #f6f7f9;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
padding-bottom: 100rpx; /* 为底部固定栏预留空间 */
|
||||
}
|
||||
|
||||
/* 背景图 */
|
||||
.section {
|
||||
background-image: url('https://ide.code.fun/api/image?token=6858ee4b4ae84d0012334127&name=1f211c9a259577e8af923158ce6e4ab6.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* 顶部遮罩 */
|
||||
.section_2 {
|
||||
padding: 131.25rpx 176.25rpx 101.25rpx;
|
||||
background-color: #00000063;
|
||||
backdrop-filter: blur(9.38rpx);
|
||||
}
|
||||
|
||||
/* 宽度组 */
|
||||
.group {
|
||||
width: 344.34rpx;
|
||||
}
|
||||
|
||||
/* 白色文字 */
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 31.88rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 橙色按钮 */
|
||||
.text-wrapper {
|
||||
padding: 15rpx 0;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 187.5rpx;
|
||||
width: 208.13rpx;
|
||||
}
|
||||
|
||||
/* 橙色小字体 */
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 24.6rpx;
|
||||
color: #ff8d1a;
|
||||
}
|
||||
.text_3 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 选项卡容器 */
|
||||
.section_3 {
|
||||
padding: 0 135rpx 7.5rpx 142.5rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: solid 1.88rpx #9c9c9c;
|
||||
}
|
||||
.group_2 {
|
||||
padding: 22.5rpx 0 11.25rpx;
|
||||
display: flex;
|
||||
justify-content: center; /* 增加选项卡间隔 */
|
||||
}
|
||||
|
||||
/* 标题+价格 */
|
||||
.section_4 {
|
||||
padding: 37.5rpx 7.5rpx 30rpx 22.5rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.group_4 {
|
||||
padding: 0 3.75rpx;
|
||||
}
|
||||
.group_5 {
|
||||
line-height: 28.8rpx;
|
||||
height: 30.58rpx;
|
||||
}
|
||||
.text_6 {
|
||||
color: #f84947;
|
||||
font-size: 37.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
font-weight: 700;
|
||||
line-height: 28.8rpx;
|
||||
}
|
||||
.text_7 {
|
||||
color: #f84947;
|
||||
line-height: 24.43rpx;
|
||||
}
|
||||
.group_6 {
|
||||
margin-right: 453.75rpx;
|
||||
width: 75.02rpx;
|
||||
}
|
||||
.divider {
|
||||
background-color: #8c8c8c;
|
||||
width: 75.02rpx;
|
||||
height: 1.88rpx;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.text_9 {
|
||||
color: #000000;
|
||||
font-size: 33.75rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 41.25rpx;
|
||||
}
|
||||
|
||||
/* 课程概述 */
|
||||
.section_5 {
|
||||
margin-top: 28.13rpx;
|
||||
padding: 0 30rpx 52.5rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.group_7 {
|
||||
padding: 26.25rpx 0;
|
||||
}
|
||||
.image {
|
||||
width: 39.38rpx;
|
||||
height: 39.38rpx;
|
||||
}
|
||||
|
||||
/* 概述内容区 */
|
||||
.section_6 {
|
||||
background-color: #ffffff00;
|
||||
height: 791.25rpx;
|
||||
border-left: solid 1.88rpx #000000;
|
||||
border-right: solid 1.88rpx #000000;
|
||||
border-top: solid 1.88rpx #000000;
|
||||
border-bottom: solid 1.88rpx #000000;
|
||||
}
|
||||
|
||||
/* 目录列表 */
|
||||
.section_7 {
|
||||
padding: 31.88rpx 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.list {
|
||||
margin: 0 22.5rpx;
|
||||
}
|
||||
.group_8 {
|
||||
width: 590.81rpx;
|
||||
display: flex;
|
||||
align-items: center; /* 序号垂直居中 */
|
||||
margin-top: 3rpx !important; /* 视频标题与上方内容的间距 */
|
||||
}
|
||||
.list-item {
|
||||
padding-left: 37.5rpx;
|
||||
padding-bottom: 18.75rpx;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 10.63rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 全局试看按钮 */
|
||||
.text-wrapper_2 {
|
||||
padding: 3.75rpx 0;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 0rpx 9.38rpx 0rpx 9.38rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 24rpx; /* 放大字体 */
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 28rpx; /* 放大行高 */
|
||||
color: #ffffff;
|
||||
}
|
||||
.text_11 {
|
||||
margin: 0 7.5rpx;
|
||||
line-height: 28rpx; /* 放大行高 */
|
||||
}
|
||||
|
||||
/* 列表文本 */
|
||||
.font_5 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 19.24rpx;
|
||||
color: #8f8f8f;
|
||||
}
|
||||
.text_12 {
|
||||
margin-top: 0; /* 垂直居中序号 */
|
||||
align-self: center !important;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 31.88rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* 其他文本 */
|
||||
.text {
|
||||
word-break: break-all;
|
||||
}
|
||||
.text_8 {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.text_2 {
|
||||
color: #ff8d1a;
|
||||
}
|
||||
.group_9 {
|
||||
padding-left: 41.25rpx;
|
||||
padding-right: 20.63rpx;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 19.24rpx;
|
||||
color: #8f8f8f;
|
||||
}
|
||||
.text_13 {
|
||||
line-height: 20.79rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
/* 底部原有按钮组 */
|
||||
.section_8 {
|
||||
padding: 15rpx 26.25rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.image_3 {
|
||||
width: 52.5rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
.text_16 {
|
||||
color: #000000;
|
||||
line-height: 20.94rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 22.5rpx 0;
|
||||
flex: 1 1 268.13rpx;
|
||||
background-color: #a5d63f;
|
||||
border-radius: 75rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 28.8rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.text_14 {
|
||||
line-height: 28.29rpx;
|
||||
}
|
||||
.text-wrapper_4 {
|
||||
padding: 22.5rpx 0;
|
||||
flex: 1 1 268.13rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 75rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_15 {
|
||||
line-height: 28.11rpx;
|
||||
}
|
||||
|
||||
/* 新增：选项卡文字基础样式 */
|
||||
.text-tab {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 38rpx;
|
||||
padding-bottom: 8rpx; /* 文字与下划线之间留白 */
|
||||
margin: 0 80rpx; /* 增大间距 */
|
||||
}
|
||||
|
||||
/* 新增：选中/未选中状态 */
|
||||
.tab-active {
|
||||
color: #ff8d1a;
|
||||
border-bottom: 2rpx solid #ff8d1a;
|
||||
}
|
||||
.tab-inactive {
|
||||
color: #000000;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 覆盖：让 .group_2 居中其子元素，增强间距控制 */
|
||||
.group_2 {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* 新增：底部固定按钮栏 */
|
||||
.section_8_fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
/* 禁止容器内元素换行 */
|
||||
.no-wrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
/* 强制所有 text 不换行 */
|
||||
.no-wrap text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mx-15 {
|
||||
margin-left: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
/* 课程目录的点击状态 */
|
||||
.active-title {
|
||||
color: #ff8d1a; /* 点击后的颜色：橙色 */
|
||||
}
|
||||
Reference in New Issue
Block a user