classroom/src/views/coursewarePlayOld/component/video-item/index.module.scss

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

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

      .plyr__time {
         display: block !important;
      }

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

:global(.bottomFixed).controls {
   width: 100%;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
   padding: 0 !important;
   flex-direction: column;
   transition: all 0.5s;

   .time {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      font-size: 10px;
      padding: 4px 20px;

      :global {
         .plyr__time + .plyr__time:before {
            content: "";
         }
      }
   }

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

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

         .van-loading {
            width: 100%;
            height: 100%;
         }
         .plyr__progress input[type="range"] {
            color: #ff8057 !important;
         }
      }
   }
   .actions {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      font-size: 16px;
      padding: 0 20px;
      align-items: center;
      height: 60px;

      .actionWrap {
         display: flex;
      }

      .actionBtn {
         cursor: pointer;
         display: flex;
         width: 44px;
         height: 44px;
         padding: 0 0;
         background: transparent;
         margin-right: 30px;
         &:last-child {
            margin-right: 0;
         }
      }

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

      :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 {
         :global {
            .loop {
               display: block;
            }

            .loopActive {
               display: none;
            }
         }
      }

      .loopBtn.active {
         :global {
            .loop {
               display: none;
            }

            .loopActive {
               display: block;
            }
         }
      }

      .speedBtn {
         position: relative;
      }

      .popoverGroup {
         position: absolute;
         z-index: 99;
         left: -22px;
         background-color: #fff;
         border-radius: 8px;
         bottom: 38px;
         width: 80px;
         color: #333;
         padding: 4px 0;
         display: none;

         &.active {
            display: block;
         }
      }
   }
}

.sliderPopup {
   position: absolute;
   z-index: 9999;
   left: 168px;
   bottom: 48px;
   display: flex;
   align-items: center;
   flex-direction: column;
   height: 172px;
   width: 45px;
   padding: 10px 0 15px;
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAGaCAMAAAC46aQwAAAAOVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8dlA9AAAAE3RSTlNaAAxUVwdPRSc7MzYsEEoXGgshjXaABwAAAZBJREFUeNrt1GtO40AQReF77X46tvPY/2IHhiCDA0Ez7pb4cb4FHLVaVSU/isM/i360S5+nnIL+Q0h5On+fXuqoQ8a6fJm+VjVQr4/pEtREKPt0VTP1UzpmNZTjh3RWU3lLn9TY6T1d1Fx5S8eg5kL8m57UwfSaHoI6CIPlSV1MlpO6SNaiThbN6mRWVSdVWZ1kJXWSFNRJEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9wnqJGhVJ6uyOsmq6qSqqJOiqzq5yqu6WC3P6mK2HEd1MEbLfZ49+zXtpOaS39IXNXe5p13UWPF72ic1dfKW9ql1eUu7tP2NLf3inNREOnuXflFGHTaWrSdvYsk6JJfoXXoTb1PNabwL+kEY71Ku023r7tOPYv5pFJ6Rn5qfj8KRtC+jvjGefSztYdWX1sFH0k82tUY3SPsWtDfZTdJekj4JN7dKO1Z9kBY3ST+er3x10/R2vqrdOO04BUnp4nbpTVwug30g3cwf1jMLKix6VfsAAAAASUVORK5CYII=")
      no-repeat top center;
   background-size: contain;

   .iconAdd,
   .iconCut {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url("../../image/jia.png") no-repeat center;
      background-size: contain;
      flex-shrink: 0;

      &.disabled {
         opacity: 0.7;
      }
   }

   .iconCut {
      background: url("../../image/jian.png") no-repeat center;
      background-size: contain;
   }
   .el_slider {
      --el-slider-main-bg-color: #ff8057;
      --el-slider-button-size: 16px;
      :global {
         .el-slider__button:hover,
         .el-slider__button.hover,
         .el-slider__button.dragging {
            transform: scale(1.1);
         }
      }
   }
   .sliderPoint {
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
      border-radius: 10px;
      font-size: 16px;
      font-weight: 500;
      color: #ff8057;
      min-width: 35px;
      text-align: center;
      vertical-align: text-bottom;

      span {
         font-size: 16px;
      }
   }

   :global {
      .van-slider {
         margin: 7px 0;
      }
   }
}