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