lesson-course-play/src/views/courseList/index.module.less

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

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

  .cover {
    position: relative;
    width: 107px;
    min-height: 130px;
    margin-right: 30px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
    overflow: hidden;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    flex-shrink: 0;

    &>img {
      display: block;
      width: 100%;
      min-height: 140px;
      opacity: 0;
      transition: opacity .3s;
      object-fit: cover;
    }

    :global {
      .van-image__loading {
        position: relative;
        min-height: 130px;
        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
      }
    }

    &::before {
      content: '';
      position: absolute;
      left: 5px;
      width: 5px;
      height: 100%;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }

  .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: #2D3131;
    margin-right: 8px;
  }

  .pNum {
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
  }
}

.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: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: 0;
    border-radius: 13px;
    flex-shrink: 0;

    :global {
      .van-button__text {
        white-space: nowrap;
      }
    }

    &.disabled {
      opacity: 0.6 !important;
    }

    &.look {
      background: linear-gradient(270deg, #4BE0A1 0%, #01C1B5 100%);
    }

    &.down {
      background: linear-gradient(270deg, #4BE0A1 0%, #01C1B5 100%);
      ;
    }

    &.downing {
      background: linear-gradient(270deg, #47CFE5 0%, #2FB3FF 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;
    object-fit: cover;
  }
}

.courseDialog {
  width: 315px;

  :global {
    .van-dialog__header {
      // padding-top: 0;

    }
  }

  .iconCross {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 22px;
    color: #ccc;
    z-index: 99;
  }
}

.periodItemModel {
  position: relative;

  .iconCachePoint {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    object-fit: contain;
    width: 13px;
    height: 13px;
  }

  .periodTip {
    position: absolute;
    left: -7px;
    top: 0;
    max-height: 15px;
    display: block;
    object-fit: contain;
  }

  .downloading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    color: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.btnGroup {
  padding: 20px 25px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid #F2F2F2;
  background-color: #fff;
}

.courseDialog {
  padding: 20px;

  // :global {
  //   .van-popup__close-icon {
  //     color: #333;
  //     top: 24px;
  //   }
  // }
  .iconClose {
    width: 18px;
    height: 19px;
    position: absolute;
    top: 24px;
    right: 23px;
    z-index: 9;
    background: url('./image/icon-close.png') no-repeat center;
    background-size: contain;
  }

  .title {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: #131415;
    line-height: 25px;
    text-align: center;
  }

  .content {
    padding: 20px 0 25px;
    font-size: 16px;
    color: #666666;
    line-height: 24px;
  }

  .popupBtnGroup {
    display: flex;
    align-items: center;

    &>button {
      flex: 1;
      font-weight: 400;

      &:last-child {
        margin-left: 15px;
      }
    }
  }
}