lesson-course-play/src/views/coursewarePlay/component/video.module.less

// .videoWrap {
//     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%;
//             }
//         }
//     }

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

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

//         .actionBtn {
//             display: flex;
//             width: 38px;
//             height: 38px;
//             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{
//             :global{
//                 .loop{
//                     display: block;
//                 }
//                 .loopActive{
//                     display: none;
//                 }
//             }
//         }
//         .loopBtn.active{
//             :global{
//                 .loop{
//                     display: none;
//                 }
//                 .loopActive{
//                     display: block;
//                 }
//             }
//         }

//     }
// }

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

  .videoSection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
  }
}

.content {
  position: relative;
  height: 100%;
}

.contentWrap {
  height: 100%;

  video {
    width: 100%;
    height: 100%;
  }
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.5s;
  width: 100%;
  z-index: 9;

  &.hide {
    transform: translateY(100%);
  }

  .time {
    display: flex;
    flex-shrink: 0;
    // justify-content: space-between;
    // width: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0 4px 0;
    width: 96px;
  }

  .slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // width: 100%;
    padding: 0 40px 0;
    --van-slider-button-width: 13px !important;
    --van-slider-button-height: 13px !important;

    :global {
      .n-slider {
        --n-handle-size: 13px !important;
        --n-fill-color: var(--van-primary-color) !important;
        --n-fill-color-hover: var(--van-primary-color) !important;
      }

      .van-loading {
        width: 100%;
        height: 100%;
      }
      .van-slider__button {
        box-shadow: none;
      }
    }
  }

  .actionSection {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px 12px 36px;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }

  .actions {
    display: flex;
    // width: 100%;
    color: #fff;
    font-size: 12px;

    align-items: center;

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 28px;
      height: 28px;
      margin-right: 16px;
      background: transparent;
      box-sizing: content-box;

      &.btnLoop {
        width: 33px;
        height: 28px;
      }
      >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 {
      :global {
        .loop {
          display: block;
        }

        .loopActive {
          display: none;
        }
      }
    }

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

        .loopActive {
          display: block;
        }
      }
    }

  }
}

.sliderPopup {
  position: absolute;
  z-index: 9999;
  left: 128px;
  bottom: 46px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 197px;
  width: 46px;
  padding: 10px 0 15px;
  background: url('data:image/png;base64,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') no-repeat top center;
  background-size: contain;

  .iconAdd,
  .iconCut {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAACglBMVEUAAAAPwrJB79In18Mr1cAJt6wk08BE8N4Guas76M8Jva8CtapB7NJE8NQi0r0As6kKvK4i0r486M8FuKw7585E7tMw38cVxrYbzLs76M4LvK865s0Mva896tELwbEl1cAv3cMSw7Q86M46581A7NESxLRI8tcAuakx3scs2sUYyLg14soEuKwq2MIay7oTxLQCtqpF79QAtKkHu64Mv7Ez4ckRw7RG8NQl1cEfz7wAtKlC7tQw3ccEt6sBs6lF8dUAtako18JF8NQBtakbzboAtapI8tgAt6o318pE7tND7tIQwbNC7tFB69Ey3scv3cY55cwNvrALvbAq2cMt3MVH79NF79Ms2cMp1sP///8Rw7MPwbIMv7Al1cAg0L0czbo04ckfz7w148oz4Mky38g7584k078Kva835MwTxLQw3scXyLcWx7Y55sw96c8j0r4JvK4OwLE248si0b4ezrsq2MMt28Uv3cYUxbUBtakby7kZyrk/69E55s0s2sQo1sENv7E86M4YybgIu61C7tJA7dF12NE+6tAo18IUxrYv3MYr2cO37ukCtqon1sEFuKwGuawDt6u+9O0u3MUIwrK68OoPyLZD79Nz19C88usf18AMxbS98+sr2cQj2sO47+pE8tYm3MQb0r35/v33/f132dIp3cYd1cBCysAWzrsTzLkSyrhE99s60MEX0bwev7S69Oys8eij6OJ829Q46tFQ49AQvbABu68IuKzp+vg47dRu1s9q1s1LzMMj1cE1zL8txboOybkIxLMNwrMGvrGy7Oax7OZA89hF9Nc/8NVN380v4sxe0slUzcULzbcjwrYWv7Pq+/lM4c1L38wi1sM2xruAVVerAAAAWXRSTlMAGBcTDAwwC5r4+Pj37Ozs6ePZxJmRkZGLa2tTUzw8Jxj36cXEmzAw+Pf39fXs7Orq4+PZxcPDvr6+vpyckZGMjIuJiV1dJycP9/f16urq6unZ2YyJXV1dXaCaz8kAAAdBSURBVFjDlZf1X1phFMavTqfr7u7u7u7uzR4iIiJiYIMtiMEYiM6YOp0dMzbX3Z3/z8554150c7rzM5/v53mec95zLkJv5e4yfbLnmDUjBw8eeWrtvMnTXdyF/yr3qdvGLH1ufxmMFRHxwvGs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') no-repeat center;
    background-size: contain;
    flex-shrink: 0;

    &.disabled {
      opacity: 0.7;
    }
  }

  .iconCut {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAMAAADUivDaAAACcFBMVEUAAAADt6sRxLM74s4Qu6wCtqpB7dIk08BH8dI15cw258wbzb1C7dMRw7RE8NQi0r0KvK4JvK825MsOwbIFuKwi0r5A7NI04MkFt6pE7tMVxrYCtapF8dUq2cMbzLs76M4LvK8Mva8LwbEl1cAJvK8As6kj079I8tcAuakKvLNE9+Y86M87584x3scYyLhA7NE14soq2MIay7pB7dETxLQCtqo96M86580AtKk65s0AtKkUxbUOv7Az4cgt3MYAtakBtakq2MMbzboAtapC7dEy38hE7tU35sxI8tgAt6oLvrAt2sUr2cQAtKky3scv3cZG79RF79Mfz7w+6tA96s9H79NF79P///8y4Mg7584i0r4v3cYXyLch0L0czboZyrgt28U96c8fz7wPwbI04ckn1sEdzrsVxrYq2MIl1MANv7EQwrM248sTxLQ35Mw14sow3sck079A7NERw7QMvrA55swr2sQUxbUOwLEby7kLva8JvK4Btak65s0q2cMp18Il1cAIu60+69AWx7ZC7dIGuawCtqp02NEu3MUayrko18IEuKu47ukKvK8x38e88etD79O68Osg0L122dEby7pE8dUf1sETxLW+8+1019Al3MQc1L4Wz7sSy7gOx7UIwrG88+wewLU47NMa0rwZ0bwVzLkQybYLxLMEuaz5/v2v7+d829Ry2NBt1s5AysAGvrEBu6/4/f1G+NtC9tpF9NdA7dJy1s876c5N4c5n1c0o3cZOzcQi2sI5z8FGysEwxboOybkGwrS/9e2j6OJB8tc/8NUs4Mpb0cgnxLgWv7P3/fx32dJS49Ax48wzy74Uu7ABGH7wAAAAV3RSTlMA/hgNDffCMBgYEwr49+zs6dnExMS+m5ubkZGRi4uLa2tTPCf47OMwMBMK+Pj49/X17Ozq6urp6ePZvpyZkZGMiV1dXVNTPDwnJ/j39+zq6uPj49nZXV1ArwVrAAAG9klEQVRYw5WXhVobURCFF627u7u7u7u3CcFphGDBQiAQggVIGkqDlSItVKClBeru7q/Umbl3d7O0EDoP8H/nnJG7K3RXgf7Tp44dOWzozP1Dh43YOHW6f6DwXzVg2oSRQW/fdnRkQVkscY1vGgaNGD9tQK8B/mNXBbW2FhXl5Vmt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') no-repeat center;
    background-size: contain;
  }

  .sliderPoint {
    background: #FFFFFF;
    // box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    // line-height: 20px;
    padding: 2px 0 1px;
    color: rgba(1, 193, 181, 1);
    min-width: 35px;
    text-align: center;
    vertical-align: text-bottom;
    span {
      font-size: 10px;
    }
  }

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

.goPractice {
  position: absolute;
  right: 39px;
  bottom: 12px;
  width: 86px;
  height: 30px;
  background: url('./../image/btn_go_practice.png') no-repeat center;
  background-size: contain;
  // position: absolute;
  // right: 16px;
  // bottom: 60px;
  z-index: 11;
  transition: all .5s ease;


  &.hide {
    transform: translateX(70px);
  }
}