duidui_mini_program/pages/camp_detail/index.wxss

/* 自定义导航栏 */
.custom-nav-bar {
      position: relative;
      width: 100%;
      background: #fff;
      z-index: 999;
      flex-shrink: 0;
}

.nav-bar-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12rpx;
      position: relative;
}

.nav-back-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
}

.nav-back-arrow {
      width: 20rpx;
      height: 20rpx;
      border-left: 4rpx solid #333;
      border-bottom: 4rpx solid #333;
      transform: rotate(45deg);
      margin-left: 8rpx;
}

.nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 34rpx;
      font-weight: 500;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}

.nav-bar-right {
      width: 80rpx;
      flex-shrink: 0;
}

.camp-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background: #fff;
      overflow: hidden;
}

/* 视频区域 */
.video-container {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 25px;
      background-size: cover;
      background-position: center;
      /* 使用padding-top来创建16:9的宽高比 */
      padding-top: 56.25%;
      /* 9/16 = 0.5625 = 56.25% */
}

.video-container.with-background {
      background-image: url('{{bannerImageUrl}}');
}

.play-button {
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
}

.play-button:active {
      transform: scale(0.95);
      background: rgba(255, 255, 255, 0.3);
}

.play-icon {
      width: 40rpx;
      height: 40rpx;
      border-left: 20rpx solid #fff;
      border-top: 12rpx solid transparent;
      border-bottom: 12rpx solid transparent;
      margin-left: 6rpx;
}

.play-pause-img {
      width: 32rpx;
      height: 32rpx;
}

.video-duration {
      position: absolute;
      bottom: 20rpx;
      color: #fff;
      font-size: 28rpx;
}

/* 打卡卡片基础样式 */
.highlight-card {
      height: 29px;
      min-height: 29px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-top: 15px;
}

/* 打卡营进行中 样式 */
.highlight-card.inProgress {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/images/dakaying_button_inprogrss.png');
      background-repeat: no-repeat;
      background-size: contain;
}

/* 重启打卡样式(粉色) */
.highlight-card.important {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/images/dakaying_button_pink.png');
      background-repeat: no-repeat;
      background-size: contain;
}

/* 开启打卡样式(蓝色) */
.highlight-card.normal {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/images/dakaying_button_blue.png');
      background-repeat: no-repeat;
      background-size: contain;
}

.highlight-text {
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
}

/* 滚动区域 */
.section-scroll {
      flex: 1;
      height: 0;
      overflow-y: auto;
}

/* 章节列表 */
.section-list {
      padding: 20rpx 30rpx;
}

/* 章节项基础样式 */
.section-item {
      margin-bottom: 20rpx;
}

/* 左侧彩色边框 - 只应用于章节标题行 */
.section-header::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 12rpx;
}

/* 不同颜色的左侧边框 */
.pink-border .section-header::before {
      background-color: #FD77B0;
      border-radius: 5px 0 0 5px;
}

.blue-border .section-header::before {
      background-color: #49D9DE;
      border-radius: 5px 0 0 5px;
}

.gray-border .section-header::before {
      background-color: #ccc;
      border-radius: 5px 0 0 5px;
}

/* 章节标题行样式 */
.section-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 30rpx 24rpx 40rpx;
      position: relative;
      border-radius: 12rpx;
      background: #F8F8F8;
}

.section-title {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
}

.section-unlock-countdown {
      width: 100%;
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #ff6b00;
}

/* 箭头样式 */
.section-arrow {
      width: 28rpx;
      height: 16rpx;
      transition: transform 0.3s;
}

.section-arrow.up {
      background: url('https://ndnd.duiduiedu.com/uploads/pics/itemlistup.png') no-repeat center;
      background-size: contain;
}

.section-arrow.down {
      background: url('https://ndnd.duiduiedu.com/uploads/pics/itemlistdown.png') no-repeat center;
      background-size: contain;
}

/* 任务列表样式 */
.task-list {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 0;
}

.task-list.expanded {
      max-height: 1000rpx;
      opacity: 1;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
}

.task-list.collapsed {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
}

/* 任务项样式 - 设置宽度并居中 */
.task-item {
      display: flex;
      align-items: center;
      padding: 24rpx 20rpx;
      background-color: #f8f9fa;
      border: 1rpx solid rgba(0, 0, 0, 0.1);
      border-bottom: 0;
      width: 90%;
      box-sizing: border-box;
      border-radius: 8rpx;
}

.task-item:last-child {
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      margin-bottom: 10rpx;
}

.task-item:first-child {
      margin-top: 10rpx;
}

.task-number {
      width: 40rpx;
      font-size: 28rpx;
      color: #666;
}

.task-title {
      flex: 1;
      font-size: 28rpx;
      color: #333;
}

/* 任务状态图标 */
.task-status-icon {
      width: 32rpx;
      height: 32rpx;
      /* border-radius: 50%; */
      /* margin-right: 16rpx; */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

.task-status-icon.not-started {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/mini/enter_task.png');
}

.task-status-icon.in-progress {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/camp/user_4982/essay/7268423002415435776/20251218/1766015771907_14491.png');
}

.task-status-icon.completed {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/mini/completed.png');
}

.task-status-icon.reviewing {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/mini/unlock.png');
}

.task-status-icon.rejected {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/mini/error.png');
}

.task-status-icon.no-pay {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/images/no-pay.png');
}

.task-status-icon.already-pay {
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/images/already-pay.png');
}

/* 特殊图标 */
.task-icon {
      width: 40rpx;
      height: 40rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

.task-icon.hourglass {
      background-image: url('https://ndnd.duiduiedu.com/uploads/pics/hourglass.png');
      width: 32rpx;
      height: 40rpx;
}

.task-icon.calendar {
      background-image: url('https://ndnd.duiduiedu.com/uploads/pics/calendar.png');
      width: 40rpx;
      height: 36rpx;
}

/* 打卡卡片容器 */
.highlight-card-container {
      position: relative;
      height: 80rpx;
      width: 100%;
}

/* 打卡卡片图片 */
.highlight-card-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
}

/* 打卡卡片文字 */
.highlight-text {
      position: absolute;
      right: 40rpx;
      top: 0;
      height: 80rpx;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
      z-index: 2;
}

.unlock-icon {
      width: 32rpx;
      height: 32rpx;
      margin-left: 16rpx;
      flex-shrink: 0;
}

/* 视频播放器样式 */
.camp-video {
      width: 100%;
      height: 100%;
      object-fit: contain;
}

/* 如果需要可以调整视频容器的高度 */
.video-container {
      position: relative;
      width: 100%;
      height: 420rpx;
      background-size: cover;
      background-position: center;
}

.banner {
      width: 100%;
      height: 422rpx;
      min-height: 422rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #000;
}

.banner.with-background {
      background-size: cover;
      background-position: center;
}

.camp-info-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
      color: #fff;
      transition: opacity 0.3s ease;
}

.camp-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
}

.camp-desc {
      font-size: 24rpx;
      opacity: 0.8;
}

.play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 2;
      pointer-events: auto;
}

.play-button:active {
      transform: translate(-50%, -50%) scale(0.95);
      background-color: rgba(0, 0, 0, 0.5);
}

.play-icon {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20rpx 0 20rpx 35rpx;
      border-color: transparent transparent transparent #ffffff;
      margin-left: 8rpx;
}

/* 调整其他内容的位置，避免被视频遮挡 */
.content-wrapper {
      margin-top: 20rpx;
}

.banner-container {
      position: relative;
      width: 100%;
      height: 422rpx;
      background: #000;
}

.banner-image-container {
      width: 100%;
      height: 100%;
      padding: 10px;
      background-color: gainsboro;
}

.banner-image {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      object-fit: cover;
}

/* 视频任务样式 */
.video-task {
      position: relative;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
}

.video-task.playing {
      background: #F0F7FF;
      border: 2rpx solid #1A7CFF;
}

.video-task .task-content {
      flex: 1;
}

.video-task .task-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
}

.video-task .task-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
      flex: 1;
      margin-right: 20rpx;
}

.video-task .task-status {
      font-size: 24rpx;
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
}

.video-task .task-status.completed {
      background: #E6F7E6;
      color: #52C41A;
}

.video-task .task-status.in-progress {
      background: #FFF7E6;
      color: #FA8C16;
}

/* .video-task .task-status.not-started {
    background: #F5F5F5;
    color: #999999;
} */

.video-task .task-info {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
}

.video-task .task-type {
      margin-right: 20rpx;
}

.video-task .task-duration {
      display: flex;
      align-items: center;
}

.video-task .task-duration::before {
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      background: #1A7CFF;
      border-radius: 50%;
      margin-right: 8rpx;
}

.video-task .task-play {
      position: absolute;
      right: 24rpx;
      top: 50%;
      transform: translateY(-50%);
}

.video-task .play-icon {
      position: absolute;
      right: 24rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 64rpx;
      height: 64rpx;
      background: #1A7CFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
}

.video-task .play-icon.playing {
      background: #FF4D4F;
}

.video-task .play-icon .iconfont {
      color: #FFFFFF;
      font-size: 32rpx;
}

.video-task .play-icon.playing .icon-pause {
      font-size: 28rpx;
}

.task-item.selected {
      border: 2rpx solid #1A7CFF;
      background: #E6F7FF;
      box-shadow: 0 2rpx 12rpx rgba(26, 124, 255, 0.08);
}

.task-item.disabled {
      opacity: 0.5;
      pointer-events: none;
      background: #f0f0f0;
      color: #aaa;
}

/* 锁定任务样式 */
.task-item.locked {
      opacity: 0.55;
}

/* 小节处于解锁倒计时时，任务项灰显（不可进入） */
.task-item-section-locked {
      opacity: 0.65;
}

.task-title-locked {
      color: #aaa !important;
}

.task-status-icon.locked-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/camp/user_4982/essay/8683073960000098304/20260225/1771984352482_45232.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

.task-status-icon.loading-spinner {
      border: 3rpx solid #e5e5e5;
      border-top: 3rpx solid #49D9DE;
      border-radius: 50%;
      width: 32rpx;
      height: 32rpx;
      animation: spin 1s linear infinite;
      background: none;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

/* 当视频播放时隐藏遮罩层 */
.video-overlay.hidden {
      opacity: 0;
      pointer-events: none;
}

/* 当页面离开时显示半透明遮罩层 */
.video-overlay.leaving {
      opacity: 0.5;
      pointer-events: none;
}

/* 确保视频控件在遮罩层之上 */
.banner-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
}

/* 确保视频控件可见 */
.banner-video video {
      z-index: 2;
}

/* 全屏时的视频样式 */
.banner-video.fullscreen {
      object-fit: contain;
      background: #000;
}