jili2/public/admin/css/cockpit.css

.container1{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.main{
    width: 100vw;
    height: 100vh;
    background-image: url("/admin/img/beijing_1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.main .main1-header{
    width: 100vw;
    height: 10.1vh;
    line-height: 10.1vh;
    background-image: url("/admin/img/top.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #FFFFFF;
}
.main .main2{
    width: 100vw;
    height: 89.9vh;
    padding: 0px 2.7vw;

}
.main .main2 .main2-left{
    width: 22.1vw;
    height: 83.7vh;
    display: inline-block;
    float: left;
    background-image: url("/admin/img/zuo.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.main .main2 .main2-left .main2-left-top{
    width: 100%;
    height: 41.8vh;
}
.main .main2 .main2-left .main2-left-top .work-type-mode{
    width: 100%;
    text-align: right;
    padding-right: 10px;
    /*display: inline-block;*/
    /*float: right;*/
    margin-top: 5vh;
}
select{
    background-color: #0E1E71;
    color: #A6D6FF;
}
select option{
    border: 0;
}
.main2-left .main2-left-top-body{
    width: 100%;
    height: 30vh;
}
.main .main2 .main2-left .main2-left-bottom{
    width: 100%;
    height: 41.8vh;
}
.main2-left-bottom-header{
    width: 100%;
    height: 4vh;
    line-height: 4vh;
}
.main2-left-bottom-header span{
    font-size: 16px;
    /*font-weight: bold;*/
    color: #0BE2DF;
    margin-left: 1vw;
}

.main2-left-bottom-header .work-type-mode{
    width: auto;
    /*text-align: right;*/
    padding-right: 10px;
    display: inline-block;
    float: right;
}
.main2-left-bottom .main2-left-bottom-body{
    width: 100%;
    height: 30vh;
    text-align: center;
    padding-top: 8vh;
}
.main2-left-bottom .main2-left-bottom-body .response-time{
    width: 100%;
    height: 20vh;
    position: relative;
    z-index: 20;
}
.main2-left-bottom .main2-left-bottom-body .response-time .img{
    text-align: center;
    position: absolute;
    z-index: 10;
}
.main2-left-bottom .main2-left-bottom-body .response-time .img img{
    width: 20vw;
    height: 20.8vh;
}
.main2-left-bottom .main2-left-bottom-body .response-time .min{
    width: 100%;
    position: absolute;
    z-index: 8;
    font-size: 32px;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    top: -22px;
}
.main2-left-bottom .main2-left-bottom-body .response-time .min span{
    font-size: 26px;
}
.main2-left-bottom .main2-left-bottom-body .response-time .comparison{
    width: 100%;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #0BE2DF;
    position: absolute;
    text-align: center;
    top: 22px;
}
.main2 .main2-content{
    width: 48vw;
    height: 75vh;
    display: inline-block;
    float: left;
    margin-top: 4vh;
    background-image: url("/admin/img/zhongjian.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 1vw;
    margin-right: 1vw;
}
.main2-content .main2-content-one{
    width: 24vw;
    height: 37.5vh;
    display: inline-block;
    float: left;
    padding-top: 1vh;

}
.main2-content .main2-content-one .main2-content-one-body{
    width: 100%;
    height: 32.5vh;
}
.main2-content .main2-content-two{
    width: 24vw;
    height: 37.5vh;
    display: inline-block;
    float: left;
    padding-top: 1vh;
}
.main2-content .main2-content-two .main2-content-two-body{
    width: 100%;
    height: 32.5vh;
    padding-left: 1vw;
}
.main2-content .main2-content-three{
    width: 24vw;
    height: 37.5vh;
    display: inline-block;
    float: left;
    padding-top: 1vh;
}
.main2-content .main2-content-three .main2-content-three-body{
    width: 100%;
    height: 32.4vh;
    padding-left: 1vw;
    padding-right: 1vw;
}

.main2-content .main2-content-three .main2-content-three-body .type{
    width: 100%;
    height: 5vh;
    line-height: 5vh;
    position: relative;
}
.main2-content .main2-content-three .main2-content-three-body .type span{
    width: 5vw;
    font-size: 14px;
    /*font-weight: bold;*/
    color: #0BE2DF;
    text-align: right;
    display: inline-block;
    overflow: hidden;

}
.main2-content .main2-content-three .main2-content-three-body .type .progress{
    width: 14vw;
    display: inline-block !important;
    float: left;
    position: absolute;
    margin-left: 1vw;
    top: 0.8vh;
    background-color: #278DE4;
}
.main2-content .main2-content-three .main2-content-three-body .type .progress .progress-bar{
    width: 14vw;
    overflow: hidden;

    background-color: #165B9F;
}
.main2-content-three-body text{
    height: 5vh;
    line-height: 5vh;
    color: #72C5FF ;
}
.main2-content .main2-content-fore{
    width: 24vw;
    height: 37.5vh;
    display: inline-block;
    float: left;
    padding-top: 1vh;
}
.main2-right{
    width: 22.1vw;
    height: 83.7vh;
    display: inline-block;
    float: left;
    background-image: url(/admin/img/you.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.main2-right .main2-right-one{
    width: 22.1vw;
    height: 41.8vh;
    padding-top: 5vh;
}
.main2-right .main2-right-one .main2-right-one-body{
    width: 22.1vw;
    height: 32.6vh;
}
.main2-right .main2-right-two{
    width: 22.1vw;
    height: 41.8vh;
    padding-top: 1vh;
}
.main2-right .main2-right-two .main2-right-two-body{
    width: 100%;
    height: 36vh;
    padding-left: 2vw;
    padding-right: 2vw;
}
.main2-right-two-body .waste{
    width: 100%;
    height: 25vh;
    margin-top: 3vh;
    border: 2px solid #165B9F;
    border-radius: 4px;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
}
.main2-right-two-body .waste .title{
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #0BE2DF;
    text-align: center;
    margin-top: 3vh;
}
.main2-right-two-body .waste .kg{
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: #0BE2DF;
    margin-top: 1.5vh;
    text-align: center;
}
.main2-right-two-body .waste .line{
    width: 100%;
    height: 2px;
    background-color: #165B9F;
    opacity: 0.6;
    margin-top: 2vh;
}
.main2-right-two-body .waste .hint{
    width: 100%;
    font-weight: 400;
    color: #0BE2DF;
    margin-top: 1.5vh;
    text-align: center;
    font-size: 10px;
}
.main2-left-top-bottom{
    width: 100%;
    height: 5vh;
    line-height: 5vh;
    margin-top: -2vh;
}
.main2-left-top-bottom .one{
    width: auto;
    height: 5vh;
    display: inline-block;
    float: left;
    padding-left: 4%;
}
.main2-left-top-bottom .one .kuai{
    width: 14px;
    height: 8px;
    display: inline-block;
}
.main2-left-top-bottom .one span{
    font-size: 8px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #AAC9F7;
}
.main2-left-top-bottom .one .color1{
    background: #0263FF;
}
.main2-left-top-bottom .one .color2{
    background: #FFD131;
}
.main2-left-top-bottom .one .color3{
    background: #F96E33;
}