/* 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; /* 点击后的颜色:橙色 */ }