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

.videoSection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 80px;
  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;
    justify-content: space-between;
    // width: 100%;
    color: #fff;
    font-size: 10px;
    padding: 4px 20px;
  }

  .slider {
    // width: 100%;
    padding: 0 20px;
    --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%;
      }
    }
  }

  .actionSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 8px 15px;

    .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: 24px;
      height: 24px;
      padding: 4px 0;
      background: transparent;

      &+.actionBtn {
        margin-left: 12px;
      }
    }

    .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;
        }
      }
    }

  }
}