@import "../../mixins/clamp";
@import "./var";



.#{$prefix}blank-page-v2{
    min-width: 900px;
    color:$blank-color-text;
    &__main{
        background-color: $blank-color-bg;
        position: relative;
    }
    &__content{
        padding:48px 0 64px 96px;
        position: relative;//为了覆盖背景图片
        z-index: 1;
        min-height: 390px;
        max-width: 680px;
    }
    // 产品logo
    &__logo{
        font-size: 0;
        img{
            width:48px;
        }
        margin-bottom:$blank-space-base*4;
    }

    &__title{
        
        margin-bottom: $blank-space-base*4;
        
        h2{
            font-size: $blank-font-size-title;
            line-height: $blank-line-height-title;
            font-weight: 400;
        }
    }
    &__info{
        color: $blank-color-text-label;
        line-height: $line-height-fz-default;
        margin-bottom: $blank-space-base*4;
        // @include clamp(3);
    }

    &__opreate{
        margin-top: 36px;

        .#{$prefix}link-external{
            margin-right: 8px;
        }

    }
    &__contact{
        margin-top: $blank-space-base*3;
        line-height: 20px;
    }

    &__picture{
        position: absolute;
        right:0;
        bottom:0;
        top:0;
        left:0;
        background-repeat: no-repeat;
        background-position: right bottom;
    }

    &__relative{
    
        padding:48px 0 48px 96px;
    
        &-inner{
            position: relative;
            padding-left: 24px;
            
            &::before{
                content: "";
                display:block;
                position: absolute;
                left:0;
                top:0;
                bottom:0;
                
                border-left:1px solid $color-border;
            }
            
        }  
        &-item{
            display: flex;
            align-items: center;
            margin-bottom: $blank-space-base*4;
            .#{$prefix}icon-notice-blue{
                margin-right: $blank-space-base*2;
            }
            &:last-child{
                margin-bottom: 0;
            }
        } 
    }
    &__step {
        margin-bottom: $blank-space-base*2;
    
        .item {
            font-size: $font-size-default;
            display: inline-block;
            margin-right: $blank-space-base*3;
            margin-bottom: $blank-space-base*2;
            color: $color-text-weight;
        }
    
        .num {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 14px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid $blank-color-text-label;
            color: $blank-color-text-label;
            border-radius: 100%;
            vertical-align: 0;
            margin-right: 4px;
        }
    }
    

    &--general{
       
        .#{$prefix}blank-page-v2__content{

            padding-top:96px;
        }
    }

    // 默认配图
    &.default-error{
        .#{$prefix}blank-page-v2__picture{
            background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/src/assets/image/blank-pages-v2/default-error.svg);
        }
    }
    &.default-arrears{
        .#{$prefix}blank-page-v2__picture{
            background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/src/assets/image/blank-pages-v2/default-arrears.svg);
        }
    }
    &.default-open{
        .#{$prefix}blank-page-v2__picture{
            background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/src/assets/image/blank-pages-v2/default-open.svg);
        }
    }
    &.default-authority{
        .#{$prefix}blank-page-v2__picture{
            background-image: url(//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/src/assets/image/blank-pages-v2/default-authority.svg);
        }
    }
}

@media screen and (max-width:1440px){
    .#{$prefix}blank-page-v2{
        
        &__content{
            max-width:568px;
        }
        &__picture{
            background-position: right -100px bottom;
        }
    }
}
@media screen and (max-width:1220px){
    .#{$prefix}blank-page-v2{
        &__title{ 
            h2{
                font-size: $font-size-xl;
            }
        }
        &__content{
            padding-left: 48px;
            max-width:536px;
        }
        &__relative{
            padding-left: 48px;
        }
        &__picture{
            background-position: right -100px bottom;
        }
    }
}