teach_sys_Demo/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-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;

        .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;
        }

        /* 自定义时间轴元素 */
        .time-line-dot-icon {
          width: 20px;
          height: 20px;
          background-image: url("@/assets/images/Common/time_line_dot_icon.png");
          background-size: 100% 100%;
        }

        .time-line-clock-icon {
          width: 12px;
          height: 12px;
          background-image: url("@/assets/images/Common/time_line_clock_icon.png");
          background-size: 100% 100%;
        }

        .time-line-lock-icon {
          width: 12px;
          height: 12px;
          background-image: url("@/assets/images/Common/time_line_lock_icon.png");
          background-size: 100% 100%;
          opacity: 0.5;
        }
        .time-line-item {
          width: 248px;
          height: 74px;
          background-color: #f2f3f5;
          border-radius: 8px;
          position: relative;
          box-sizing: border-box;
          padding: 10px;

          > p {
            width: 100%;
            height: 22px;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            color: #1d2129;
          }

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

        .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-color: #f2f8ff;
          border: 1px solid #4080ff !important;
          box-shadow: 0 2px 8px rgba(64, 128, 255, 0.15);
          
          p {
            color: #1d2129;
            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;
          }
        }
      }
    }
  }
}