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

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