jiaowu-test/src/components/CourseList/index.css

.course-list-wrapper {
  width: 304px;
  height: 798px;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 16px;
  overflow-y: hidden;

  .course-list-title {
    width: 100%;
    height: 30px;
    position: relative;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    color: #1d2129;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e6eb;
    margin-bottom: 10px;

    &::before {
      content: "";
      position: absolute;
      left: 20px;
      bottom: 5px;
      width: 31px;
      height: 3px;
      background-image: url("@/assets/images/Common/title_icon.png");
      background-size: 100% 100%;
    }
  }

  .course-list-content {
    width: 100%;
    height: 700px;
    overflow-y: auto;

    .course-list {
      width: 100%;

      /* 分割线样式 */
      .course-divider {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0;
        position: relative;
        
        .divider-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, transparent, #e5e6eb 20%, #e5e6eb 80%, transparent);
          border-style: dashed;
          border-width: 1px 0 0 0;
          border-color: #e5e6eb;
        }
        
        .divider-text {
          padding: 0 16px;
          font-size: 14px;
          font-weight: 500;
          color: #86909c;
          background-color: #fff;
          position: relative;
          z-index: 1;
        }
      }

      /* 自定义折叠面板元素 */
      .course-list-item {
        width: 272px;
        margin-bottom: 10px;
        box-sizing: border-box;
        padding: 3px 0;
        color: #4e5969;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        border: none;
        
        &.has-preview-unit {
          .arco-collapse-item-header {
            background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%);
            border: 1px solid #b3d4ff;
            box-shadow: 0 2px 8px rgba(64, 128, 255, 0.1);
          }
        }

        .arco-collapse-item-header {
          border-radius: 8px;
          background-color: #f2f3f5;
        }
        .arco-timeline-item {
          margin-bottom: 10px;
          padding-left: 0;
        }
        .arco-collapse-item-content-expanded {
          background-color: #fff;
        }
        .arco-collapse-item-content-box {
          margin-top: 10px;
          padding: 0 0 0 5px;
          box-sizing: border-box;
        }

        /* 自定义时间轴元素 - 统一使用CSS样式 */
        .time-line-dot-icon {
          width: 12px;
          height: 12px;
          background-color: #10b981;
          border-radius: 50%;
          position: relative;
          
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background-color: #fff;
            border-radius: 50%;
          }
        }

        .time-line-clock-icon {
          width: 12px;
          height: 12px;
          background-color: #3b82f6;
          border-radius: 50%;
          position: relative;
          
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background-color: #fff;
            border-radius: 50%;
          }
        }

        .time-line-lock-icon {
          width: 12px;
          height: 12px;
          background-color: #c9cdd4;
          border-radius: 50%;
          position: relative;
          opacity: 0.6;
          
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background-color: #fff;
            border-radius: 50%;
          }
        }
        .time-line-item {
          width: 248px;
          min-height: 74px !important;
          height: auto !important;
          background-color: #f2f3f5;
          border-radius: 8px;
          position: relative;
          box-sizing: border-box;
          padding: 10px;

          > p {
            width: calc(100% - 70px) !important;
            min-height: 22px !important;
            height: auto !important;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            color: #1d2129;
            word-wrap: break-word !important;
            word-break: break-word !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            display: block !important;
            text-overflow: unset !important;
            overflow: visible !important;
            max-width: none !important;
            -webkit-line-clamp: unset !important;
            -webkit-box-orient: unset !important;
            text-rendering: auto !important;
          }

          > .time-line-item-info {
            margin-top: 10px;
            width: 100%;
            min-height: 20px;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            color: #4e5969;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 5px;
          }
        }

        .finish {
          &::before {
            content: "已结束";
            position: absolute;
            right: 10px;
            top: 10px;
            width: 48px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            border-radius: 12px;
            background-color: #c9cdd4;
            color: #86909c;
            font-size: 12px;
            font-weight: 600;
            box-sizing: border-box;
            border: 1px solid #c9cdd4;
          }
        }
        
        .not-started {
          &::before {
            content: "未开始";
            position: absolute;
            right: 10px;
            top: 10px;
            width: 48px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            border-radius: 12px;
            background-color: #e8e8e8;
            color: #86909c;
            font-size: 12px;
            font-weight: 600;
            box-sizing: border-box;
            border: 1px solid #e8e8e8;
          }
        }
        
        .active {
          border: 1px solid #0275f2;

          &::before {
            content: "";
            position: absolute;
            right: 10px;
            top: 10px;
            width: 60px;
            height: 20px;
            background-image: url("@/assets/images/CoursesVideoPlayer/living_icon.png");
            background-size: 100% 100%;
          }
        }
        
        .selected {
          background: linear-gradient(135deg, #e8f4ff 0%, #d4ecff 100%);
          outline: 2px solid #165dff;
          box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
          transform: none;
          transition: all 0.3s ease;
          
          p {
            color: #165dff;
            font-weight: 600;  /* 与默认保持一致 */
          }
          
          .time-line-item-info {
            color: #4080ff;
            font-weight: 500;
          }
        }
        
        .pending {
          opacity: 0.6;
          cursor: not-allowed;
          
          > p {
            color: #86909c;
          }
          
          .time-line-item-info {
            color: #86909c;
          }
        }
        
        .coming {
          &::before {
            content: "即将开始";
            position: absolute;
            right: 10px;
            top: 10px;
            width: 60px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            border-radius: 12px;
            background-color: #f2f3f5;
            color: #ff7d00;
            font-size: 12px;
            font-weight: 600;
            box-sizing: border-box;
            border: 1px solid #ff7d00;
          }
        }
        
        .preview-badge {
          position: absolute;
          left: 50%;
          top: 60%;
          transform: translate(-50%, -50%);
          padding: 4px 12px;
          background: #4080ff;
          color: #fff;
          font-size: 12px;
          font-weight: 600;
          border-radius: 12px;
          z-index: 10;
          box-shadow: 0 3px 8px rgba(64, 128, 255, 0.3);
        }
        
        @keyframes pulse {
          0% {
            transform: scale(1);
            box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
          }
          50% {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
          }
          100% {
            transform: scale(1);
            box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
          }
        }
        
        .has-preview {
          /* 可试看标签已调整到中心位置，不需要额外样式 */
        }
      }
    }
  }
}

/* 强制覆盖Arco Timeline文本省略 */
.course-list .arco-timeline-item-content p {
  text-overflow: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  word-break: break-word !important;
  max-width: calc(100% - 70px) !important;
}

.course-list .time-line-item p {
  text-overflow: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}