orchestra-app/src/views/coursewarePlay/component/video.module.less

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

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

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

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

    }
}