// FZXiaoBiaoSong-B05S  // 方正小标宋_GBK
// Source Han Sans CN   // 思源黑体
// SimHei               // 黑体
@import 'element-variables.scss';

$color-active-light: #57b4fe;
$color-active: #0087fd;
$color-warning: #ff940A;
$color-danger: #E84646;
$color-green: #52BBB2;
$color-block: #1E1E1E;
$color-dark: #6c6c6c;
$color-gary: #9e9e9e;
$color-border: #CECECE;
$color-background: #f2f2f2;
$section-bg: #fff;
*{
    font-family: PingFang SC;
}
div{
    box-sizing: border-box;
}
/* 设置滚动条的样式  background-color: #0f3a5c;*/
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}
.flex{
    display: flex;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-around-column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.flex-space-b{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-space-a{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex-space-start{
    display: flex;
    justify-content: start;
    align-items: center;
}

.mobile-container{
    background-color: $color-background;
    width: 100%;
    height: 100%;
    position: relative;
}
.mobile-container-body{
    height: calc(100% - 214PX); 
    overflow-y: auto;
}
.section{
    margin: 15PX;
    padding: 10PX;
    background-color: $section-bg;
    border-radius: 10PX;
    position: relative;
    width: calc(100% - 30PX);
    box-sizing: border-box;
}
.section-title{
    position: relative;
    font-size: 16PX;
    padding-left: 10PX;
    // font-style: italic;
}
.section-title:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 5PX;
    height: 16PX;
    background: linear-gradient(180deg, $color-active-light 0%, $color-active-light 30%, $color-active 100%);
    transform: translateY(-50%);
    border-radius: 6PX;
}
.scroll-table{
    width: 100%;
    height: 220PX;
    margin-top: 6PX;
}
.scroll-header{
    display: flex;
    align-items: center;
    height: 36PX;
    background-color: #ddecfb;
    color: $color-dark;
}
.scroll-table-body{
    height: 184PX;
    overflow-y: auto;
}
.scroll-table-column{
    display: flex;
    align-items: center;
    // height: 36PX;
}
.scroll-table-column:nth-of-type(2n + 1){
    background-color: #f3f9ff;
}

.column-item-rotate{
    transform: rotateX(180deg);

}
.columnActive{
    color: $color-danger;
}
.column-trend-icon{
    display: inline-block;
    width: 18PX;
    height: 18PX;
    line-height: 18PX;
}
.cqlt-icon-arrow{
    font-size: 16PX;
}
.column-trend-icon-1 {
    color: $color-green;
}
.column-trend-icon-2 {
    color: $color-danger;
}

#reform-brand,#pieChart1, #pieChart2{
    width: 100%;
    height: 200PX;
    margin-top: 10PX;
}
.main-section{
    // margin:10PX 15PX;
    margin-top: 10PX;
}
.section-item{
    position: relative;
    width: 32%;
    height: 80PX;
    border-radius: 10PX;
    padding: 10PX;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(45deg, $color-active-light 0%, $color-active 100%);
    .section-item-num{
        font-size: 20PX;
        color: #fff;
        span{
            font-size: 14PX;
        }
    }
}
.section-item:before{
    content: '';
    position: absolute;
    right: -10PX;
    top: -10PX;
    width: 50PX;
    height: 50PX;
    border-radius: 50PX;
    background-color: rgba(87, 180, 254, 0.6);
}
.section-item:after{
    content: '';
    position: absolute;
    right: 19PX;
    top: 28PX;
    width: 35PX;
    height: 35PX;
    border-radius: 35PX;
    background-color: rgba(87, 180, 254, 0.2);
}

.section-content{
    margin-top: 10PX;
}
.section-plat{
    width: 32%;
    background-color:#f3f9ff;
    text-align: center;
    padding:6PX 10PX;
    border-radius: 10PX;
    .icon-arrow{
        width: 6PX;
        height: 8PX;
        margin-left: 2PX;
    }
}
.section-plat-item{
    color: $color-active;
    font-weight: 700;
    margin-bottom: 6PX; 
}
.item-name-box{
    background-color: $color-active;
    padding: 0 2PX;
    color: #fff;
    margin-top: -2PX;
    font-size: 10PX;
}
.item-name-box.compare1{
    background-color: $color-green;
}
.item-name-box.compare2{
    background-color: $color-warning;
}
.item-name-box.compare3{
    background-color: $color-danger;
}
.item-inner-top{
    color: $color-active;
    font-size: 16PX;
    font-weight: bold;
    background: url('~@/assets/img/bigScreen/img_up1@2x.png') no-repeat center / 140% 100%;
    span{
        font-size: 10px;
        font-weight: normal;
    }
}
.item-inner-top.compare1{
    color: $color-green;
    font-size: 16PX;
    background: url('~@/assets/img/bigScreen/img_up2@2x.png') no-repeat center / 140% 100%;
}
.item-inner-top.compare2{
    color: $color-warning;
    font-size: 16PX;
    background: url('~@/assets/img/bigScreen/img_up5@2x.png') no-repeat center / 140% 100%;
}
.item-inner-top.compare3{
    color: $color-danger;
    font-size: 16PX;
    background: url('~@/assets/img/bigScreen/img_up6@2x.png') no-repeat center / 140% 100%;
}
.btns-container{
    text-align: right;
    position: absolute;
    right: 10PX;
    top: 10PX;
}
.tab-btns-bg{
    display: inline-flex;
    position: relative;
    padding: 0 8PX;
    height: 27PX;
    background-color: $color-background;
    border-radius: 14PX;
}
.tab-btns{
    z-index: 2;
    .tab-btn{
        width: 50PX;
        cursor: pointer;
    }
    .tab-btn.active{
        color: $color-active;
        font-weight: bold;
    }
}
.active-bg{
    position: absolute;
    left: 8PX;
    top: 2.5PX;
    width: 50PX;
    background-color: $section-bg;
    background:linear-gradient(180deg, $section-bg 0%, $section-bg 30%, rgba($color-active-light, 0.1) 100%);
    border-radius: 10PX;
    height: 22PX;
    z-index: 1;
    box-shadow: 2px 2px 12px 6px rgba($color-active-light, 0.2);
    transition: transform 0.2s;
}

.active-bg.active{
    transform: translateX(100%);
}
.single-rank-header{
    height: 30PX;
    line-height: 30PX;
    background-color: #ddecfb;
    color: $color-dark;
    text-align: center;
}

.single-rank-header,.single-rank-column{
    display: flex;
    width: 100%;
}

.single-rank-column:nth-of-type(2n){
    background-color: #f3f9ff;
}
.rank-column-item{
    padding: 8PX 4PX;
    text-align: center;
    font-size: 12PX;
}
.single-item-sn img{
    width: 16PX;
    height: 16PX;
    vertical-align: middle;
    margin-right: 2PX;
}
.header-item{
    text-align: center;
}
.header-long{
    line-height: 114%;
}   
.column-item{
    text-align: center;
    padding: 10PX 6PX;
}
#reform-brand-bar,#deploymentTime,#need-way{
    width: 100%;
    height: 200PX;
    margin-top: 10PX;
}
#need-way{
    margin-top: 15PX;
}
//
.result-list{
    width: 100%;
    margin-top: 10PX;
    .result-list-item{
        height: 66PX;
    }
    .list-item-count{
        width:calc(100% - 100PX);
    }
    .list-item-title{
        text-align: center;
        width: 90PX;
        font-size: 12PX;
        color: $color-active;
        font-weight: bold;
        position: relative;
        padding: 0 8PX;
    }
    // .list-item-title::before{
    //     position: absolute;
    //     left: 8PX;
    //     bottom: -10PX;
    //     content: '';
    //     width: 50PX;
    //     height: 50PX;
    //     border-radius: 4PX;
    //     background-color: rgba($color-active, 0.15);
    // }
    // .list-item-title::after{
    //     position: absolute;
    //     right: 8PX;
    //     top: -10PX;
    //     content: '';
    //     width: 50PX;
    //     height: 50PX;
    //     border-radius: 4PX;
    //     background-color: rgba($color-active, 0.15);
    // }
    .item-count-total{
        padding: 4PX 18PX;
        position: relative;
    }
    .item-count-total:after{
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 4PX;
        background-color: rgba($color-active, 0.15);
        transform: skewX(-10deg);
    }
    .item-count-compare{
        padding: 4PX 18PX;
        position: relative;
    }
    .item-count-compare:after{
        position: absolute;
        left: 0;
        top: 0;
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 4PX;
        background-color: rgba($color-active, 0.15);
        transform: skewX(-10deg);
    }
    .item-count-top{
        color: $color-active;
        font-weight: bold;
        font-size: 16PX;
        span{
            font-weight: normal;
            font-size: 12PX;
        }
    }
    .item-count-name{
        color: $color-active-light;
        font-size: 13PX;
    }
    .icon-arrow{
        width: 6PX;
        height: 8PX;
        margin-left: 2PX;
    }
    .compare1{
        // .list-item-title{
        //     color: #52BBB2;
        // }
        background-color: rgba(#0087fd,0.05);
        border-radius: 10PX;
        .item-count-compare{
            .item-count-name{
                color: #52BBB2;
            }
            .item-count-top{
                color: #52BBB2;
            }
        }
        .item-count-compare:after{
            background-color: rgba(#52BBB2, 0.2);
        }
    }
    .compare2{
        // border-top: 1px dashed #0087fd;
        // border-bottom: 1px dashed #0087fd;
        
        // .list-item-title{
        //     color: #fba638;
        // }
        .item-count-compare{
            .item-count-name{
                color: #fba638;
            }
            .item-count-top{
                color: #fba638;
            }
        }
        .item-count-compare:after{
            background-color: rgba(#fba638, 0.2);
        }
    }
    .compare3{
        // .list-item-title{
        //     color: #f66060;
        // }
        background-color: rgba(#0087fd,0.05);
        border-radius: 10PX;
        .item-count-compare{
            .item-count-name{
                color: #f66060;
            }
            .item-count-top{
                color: #f66060;
            }
        }
        .item-count-compare:after{
            background-color: rgba(#f66060, 0.2);
        }
    }
} 
.section-select-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6PX 0;
    width: 100%;
}
.select-btn-outer{
    position: relative;
    width: 50%;
}
.select-btn{
    position: relative;
    height: 30PX;
    padding: 0 10PX;
    border: 1px solid rgba($color-active-light, 0.5);
    border-radius: 6PX;
    margin: 0 15PX;
    width: calc(100% - 30PX);
    background-color: $section-bg;
    .el-icon-caret-bottom{
        color: $color-dark;
        margin-left: 4PX;
        transform: rotate(0deg);
        transition: transform 0.5s;
    }
    .el-icon-caret-bottom.trans{
        transform: rotate(180deg);
    }
}
.select-options{
    position: absolute;
    width: calc(100% - 30PX);
    top: 106%;
    left: 15PX;
    background-color: $section-bg;
    z-index: 99;
    border: 1px solid $color-border;
    border-radius: 6PX;
    box-shadow: 1PX 2PX 10PX rgba(0,0,0, 0.2);
}
.select-option{
    width: 100%;
    text-align: center;
    padding: 6PX 0;
    color: $color-dark;
}
.select-option + .select-option{
    border-top: 1px solid $color-border;
}
.select-option.disable{
    color: $color-border;
}
.select-option.active{
    color: $color-active;
}
.select-options-mask{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 98;
}
.section-sub-title{
    margin-top: 20PX;
    text-align: center;
    font-size: 14PX;
}
.con-box {
    margin: 15PX;
    margin-bottom: 9PX;
    width: calc(100% -30PX);
    height: auto;
    padding: 16PX;
    box-sizing: border-box;
    background-color: #0087FD;
    border-radius: 16PX;

    ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    li {
        width: calc(100% / 4);
        height: 36PX;
        line-height: 36PX;
        text-align: center;

        span {
        font-size: 16PX;
        font-family: "Microsoft YaHei";
        color: rgba(#ffffff, 0.8);
        cursor: pointer;
        }
    }

    li.active {
        background-color: #FF940A;

        span {
        font-size: 16PX;
        font-weight: bold;
        color: rgba(#ffffff, 0.9);
        }
    }
    }
  }