classroom-instruments/src/views/attend-class/component/video.module.less

.videoWrap {
  width: 100%;
  height: 100%;

  .sectionAnimate {
    opacity: 0;
    pointer-events: none;
    transform: translateY(126px);
    transition: all .2s;
  }

  .controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    // backdrop-filter: blur(26px);
    height: 108px;
    padding: 0 330px 0 40px !important;
    display: flex;
    align-items: center;
    transition: all 0.301s;

    .time {
      display: flex;
      justify-content: space-between;
      color: #fff;
      // font-size: 10px;
      padding: 4px 20px 4px;
      font-size: 24px;
      font-weight: 600;
      line-height: 33px;

      &>div {
        font-size: 24px !important;
      }

      .line {
        font-size: 12px;
      }

      :global {
        .plyr__time+.plyr__time:before {
          content: '';
          margin-right: 0;
        }
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    // width: 100%;
    height: 100%;
    color: #fff;
    font-size: 12px;
    align-items: center;

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 60px;
      height: 60px;
      padding: 4px 0;
      background: transparent;
      cursor: pointer;

      &>img {
        width: 100%;
        height: 100%;
      }
    }


    .iconReplay {
      width: 40px;
      height: 39px;
      background-color: transparent;

      &>img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .slider {
    width: 100%;
    padding: 0 20px 0 12px;

    :global {

      .n-slider .n-slider-rail .n-slider-rail__fill,
      .n-slider .n-slider-handles .n-slider-handle-wrapper {
        transition: all .2s;
      }
    }
  }


}


// .videoWrap {
//   width: 100%;
//   height: 100%;
//   --plyr-color-main: #198CFE;
//   --plyr-range-track-height: 4px;
//   --plyr-tooltip-radius: 3px;
//   --plyr-range-thumb-height: 18px;


//   :global {
//     .plyr--video {
//       width: 100%;
//       height: 100%;
//     }

//     .plyr__time {
//       display: block !important;
//     }

//     .plyr__video-wrapper {
//       pointer-events: none;
//     }
//   }
// }

// :global(.bottomFixed).controls {
//   width: 100%;
//   background: rgba(0, 0, 0, 0.6);
//   backdrop-filter: blur(26px);
//   height: 150px;
//   padding: 0 250px 0 40px !important;
//   transition: all 0.5s;

//   .time {
//     display: flex;
//     justify-content: space-between;
//     color: #fff;
//     // font-size: 10px;
//     padding: 4px 0 4px 20px;
//     font-size: 24px;
//     font-weight: 600;
//     line-height: 33px;

//     &>div {
//       font-size: 24px !important;
//     }

//     .line {
//       font-size: 12px;
//     }

//     :global {
//       .plyr__time+.plyr__time:before {
//         content: '';
//         margin-right: 0;
//       }
//     }
//   }

//   .slider {
//     width: 100%;
//     padding: 0 20px 0 12px;

//     :global {
//       .van-slider__button {
//         background: var(--van-primary);
//       }

//       .van-loading {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }

//   .actions {
//     display: flex;
//     justify-content: space-between;
//     color: #fff;
//     font-size: 12px;
//     padding-right: 20px;
//     align-items: center;

//     .actionWrap {
//       display: flex;
//     }

//     .actionBtn {
//       display: flex;
//       // width: 43px !important;
//       // height: 43px !important;
//       width: 82px;
//       height: 82px;
//       padding: 4px 0;
//       background: transparent;
//     }

//     .actionBtn>img {
//       width: 100%;
//       height: 100%;
//     }

//     :global {
//       .van-loading__circular {
//         width: 100%;
//         height: 100%;
//       }
//     }

//     .playIcon {
//       display: none;
//     }

//     .btnPlay img:nth-child(2) {
//       display: block;
//     }

//     .btnPause img:nth-child(3) {
//       display: block;
//     }

//     .btnPlay,
//     .btnPause {
//       :global {
//         .van-loading {
//           display: none;
//         }
//       }
//     }

//     .loopBtn {
//       background-color: transparent;
//       width: 43px;
//       height: 42px;
//       padding: 0;
//       cursor: pointer;

//       :global {
//         .loop {
//           display: block;
//         }

//         .loopActive {
//           display: none;
//         }
//       }
//     }
//   }
// }