.videoWrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.content{
    height: 100%;
    padding: 8% 20px;
}
.contentWrap{
    height: 100%;
    canvas{
        width: 100%;
        height: 100%;
    }
}

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

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

    .actions {
        display: flex;
        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;
                }
            }
        }

    }
}