orchestra-app/src/views/courseList/index.module.less

.courseList {
  min-height: 100vh;
  background-color: #fff;
  background-image: linear-gradient(180deg, #FFE8CE 0%, rgba(251, 233, 213, 0) 198px);
  padding: 20px 0;
  box-sizing: border-box;
}

.periodContent {
  display: flex;
  padding: 20px;

  .cover {
    width: 107px;
    margin-right: 30px;
    border-radius: 4px 8px 8px 4px;
    box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
    overflow: hidden;
    :global{
      .van-image__loading{
        position: relative;
        min-height: 130px;
        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
      }
    }
  }

  .contentTitle {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 22px;
    padding-bottom: 8px;
  }

  .contentLabel {
    font-size: 12px;
    font-weight: 400;
    color: rgb(96, 96, 96);
    line-height: 20px;
  }
}


.periodTitle {
  display: flex;
  align-items: center;
  padding: 20px 20px 0;

  .pIcon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }

  .pTitle {
    font-size: 16px;
    font-weight: 600;
    color: rgba(124, 61, 18, 1);
    margin-right: 8px;
  }

  .pNum {
    font-size: 12px;
    font-weight: 400;
    color: #000;
  }
}

.periodList {
  :global {
    .van-cell-group--inset {
      margin: 0;
    }

    .van-cell-group,
    .van-cell {
      background: transparent;
    }

    .van-cell {
      padding: 18px 20px;
      &::after{
        left: 20px;
        right: 20px;
        border-color: rgba(242, 242, 242, 1);
        transform: none;
      }
      .van-cell__title {
        padding-right: 8px;

        span {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
          line-height: 21px;
          word-break: break-all;
        }

        .van-cell__label {
          font-size: 12px;
          font-weight: 400;
          color: #AAAAAA;
          line-height: 17px;
          margin: 0;
        }
      }

      .van-cell__value {
        flex: inherit;
        flex-shrink: 0;
      }
    }
  }

  .baseBtn {
    width: 73px;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: 0;
    border-radius: 13px;
    flex-shrink: 0;

    &.look {
      background: linear-gradient(180deg, #FFAB71 0%, #FF6E45 100%);
    }

    &.down {
      background: linear-gradient(180deg, #80C6FF 0%, #4296FF 100%);
    }

    &.disable {
      opacity: 1;
      background: linear-gradient(180deg, #D3D3D3 0%, #8F8F8F 100%);
    }
  }
}

.periodItem {
  width: 36px;
  height: 40px;
  margin-right: 8px;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}