@import '../../styles/utils.scss';
.base-layout-container {
    height: 100%;
    background-image: url('../../assets/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    .dahua-content {
        position: fixed;
        top: 0;
        left: 0;
        &.display {
            visibility: visible!important;
            width: 100%;
            height: 100%;
            z-index: 10;
        }
    }
    .videoifram {
        background: url("../../assets/card-bg/videoplayfram.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: px2rem(550px * 2);
        height: px2rem(400px * 2);
        position: absolute;
        left: 40%;
        top: 30%;
        z-index: 11;
        // padding: px2rem(24px * 2);
        // padding-top: px2rem(80px * 2);
        .title {
            position: absolute;
            top: px2rem(0px * 2);
            left: px2rem(24px * 2);
            color: white;
            line-height: px2rem(80px * 2);
            font-size: px2rem(20px * 2);
        }
        .closebtn {
            position: absolute;
            right: px2rem(24px * 2);
            top: px2rem(24px * 2);
            img {
                width: px2rem(30px * 2);
                height: px2rem(30px * 2);
            }
        }
        #vPlayArea {
            // background: red;
            position: absolute;
            top:px2rem(80px * 2);
            left:px2rem(20px * 2);
            width: px2rem(500px * 2);
            height: px2rem(310px * 2);
        }
    }
    header {
        width: 100%;
        height: 94px * 2;
        height: px2rem(94px * 2);
        background: transparent;
        // background-image: url('../../assets/header.png');
        background-image: url('../../assets/header@2x.png');
        background-repeat: no-repeat;
        background-size: contain;
        // background-position: center;
        position: fixed;
        top: 0;
        z-index: 1;
        .back-to-home {
            position: absolute;
            width: px2rem(600px * 2);
            cursor: pointer;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
        .time-text {
            font-size: px2rem(16px * 2);
            color: #39d6fe;
            font-weight: 400;
            line-height: px2rem(15px * 5);
            float: right;
            padding-right: px2rem(18px * 2);
             :first-child {
                font-weight: 700;
                margin-right: px2rem(55px * 2);
            }
             :last-child {
                margin-left: px2rem(13px * 2);
            }
        }
    }
    main {
        display: flex;
        flex-direction: column;
        min-height: calc(100%);
        position: relative;
        .el-button--small {
            min-height: px2rem(32px * 4);
            padding: px2rem(9px * 2) px2rem(15px * 5);
            font-size: px2rem(12px * 4);
        }
        .yjld_btn {
            background: url("../../assets/icons/detail/btn_yjld@2x.png");
            width: px2rem(83px * 2);
            height: px2rem(88px * 2);
            z-index: 22;
            position: absolute;
            background-size: 100% 100%;
            bottom: px2rem(24px * 2);
            right: px2rem(45px * 2);
            
	        animation-iteration-count: infinite;
        }
    }
}