@import 'theme.scss';
.container{
    .content{
        .content-bg{
            position: absolute;
        }

        .content-bg-zuo{
            left: 0;
            top: 0;
            width: 4.5rem;
            height: 100%;
        }
        
        .content-bg-xia{
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4rem;
        }

        .content-bg-you{
            right: 0;
            top: 0;
            width: 4.5rem;
            height: 100%;
        }

        .content-bg-shang{
            left: 0;
            top: 0;
            width: 100%;
            height: 10%;
        }

        .map{
            right: 0;
            top: 0;
            width: 100%;
            height: calc(100% - 2rem);
            
            .marker-info{
                @include H-V-center;
                height: 2.3rem;

                .marker-info-left{
                    background: rgba(21, 49, 96, .8);
                    height: 100%;
                    padding: .1rem .2rem;
                    overflow: auto;
                    @include scrollbar;

                    .name{
                        font-size: .16rem;
                        color: #0CF6E5;
                        padding: 0 .1rem;
                        @include V-center;
                    }

                    .info{
                        @include V-center;
                        margin-top: .1rem;

                        .img{
                            width: 1.8rem;
                            height: 1.5rem;

                            img{
                                width: 100%;
                                height: 100%;
                                float: left;
                            }
                        }

                        .value{
                            font-size: .14rem;
                            color: #fff;
                            margin: 0 .2rem;
                            height: 100%;

                            P{
                                height: 25%;
                                @include V-center;
                            }
                        }
                        
                        .item{
                            color: #fff;
                            font-size: .14rem;
                            padding: 0 0.4rem;
                            text-align: center;
                            width: 50%;

                            .number{
                                font-size: .24rem;
                            }
                        }
                    }

                    .date{
                        font-size: .1rem;
                        color: #fff;
                        text-align: right;
                        margin-top: 0.1rem;
                    }
                }
                
                .marker-info-right{
                    background: rgba(31, 66, 123, .8);
                    color: #0CF6E5;
                    font-size: .16rem;
                    height: 100%;
                    padding: 0 0.2rem;
                    cursor: pointer;

                    p{
                        height: 30%;
                        text-align: center;
                    }

                    .icon_font{
                        height: 70%;
                        font-size: .8rem;
                        @include H-V-center;
                    }
                }
            }
        }

        .panel-item{
            .panel-title{
                height: .44rem;
                @include V-center;
                justify-content: space-between;
                padding: 0 .1rem 0 .2rem;

                .name{
                    font-size: .16rem;
                    color: #46A6D8;
                    word-break: keep-all;
                }

                .value{
                    font-size: .14rem;
                    @include H-V-center;
                    color: #FFF;

                    p{
                        margin-left: .4rem;
                    }

                    .number{
                        margin-left: .1rem;
                        font-size: .2rem;
                    }

                    .date{
                        color: #A5B5C5;
                        cursor: pointer;

                        span{
                            margin: 0 .05rem;
                        }
                    }
                }
            }
            
            .panel-info{
                height: calc(100% - .44rem);

                .chart{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
        .top-item{
            position: absolute;
            top: .2rem;
            height: .34rem;
            z-index: 9;
            left: 50%;
            transform: translateX(-50%);
            @include H-V-center;
            color: #ECECEC;
            font-size: .14rem;

            .tab{
                display: flex;

                p{
                    padding: .1rem .33rem;
                    margin: 0 .4rem;
                    border: $border #078FCE;
                    background: linear-gradient(90deg, rgba(27, 55, 110, .8) 0%, rgba(23, 92, 177, .8) 49%, rgba(27, 55, 110, .8) 100%);
                    cursor: pointer;
                }

                .active{
                    background: linear-gradient(90deg, #0A53AE 0%, #2B72C9 49%, #0A53AE 100%);
                }
            }
        }

        .left-item{
            position: absolute;
            width: 4rem;
            top: 0;
            height: calc(100% - 3.2rem);
            z-index: 9;

            .panel-item1,
            .panel-item2,
            .panel-item3{
                height: 33.33%;
            }
        }

        .center-item{
            position: absolute;
            right: 4.1rem;
            bottom: 3.3rem;
            z-index: 9;
            font-size: .14rem;
            color: #fff;

            p{
                background: rgba(13, 66, 114, .5);
                padding: .05rem .1rem;
                border-bottom: $border #0D4272;
                @include V-center;

                span{
                    margin-right: .05rem;
                }
            }
        }

        .right-item{
            position: absolute;
            width: 4rem;
            top: 0;
            right: 0;
            height: calc(100% - 3.2rem);
            z-index: 9;

            .panel-item1{
                height: 65%;

                .panel-info{
                    padding: 0 0.1rem;
                    overflow: auto;
                    @include scrollbar;
                    
                    .item{
                        @include H-V-center;
                        font-size: .16rem;
                        color: #fff;
                        margin-bottom: .12rem;

                        .name{
                            width: 12%;
                        }

                        .bar-item{
                            width: 69%;
                            height: .1rem;
                            position: relative;

                            .bar-bg{
                                width: 100%;
                                height: 100%;
                                border-radius: .04rem;
                                background: linear-gradient(90deg, #FF3C40 0%, #FFCD6B 53%, #4BFF8B 100%);
                            }
                            
                            .bar-rate{
                                position: absolute;
                                background: #1d3668;
                                height: 100%;
                                right: 0;
                                top: 0;
                                border-radius: 0 .03rem .03rem 0;
                            }
                        }

                        .rate{
                            width: 19%;
                            display: flex;
                            justify-content: flex-end;
                        }
                    }
                }
            }

            .panel-item2{
                height: 35%;
                
                .panel-info{
                    padding: 0 .1rem;
                    display: -webkit-box;
                    overflow-x: auto;
                    @include scrollbar;

                    .item{
                        position: relative;
                        height: 100%;
                        width: 1.5rem;
                        overflow: hidden;
                        @include H-V-center;
                        margin: 0 .1rem;

                        img{
                            width: 100%;
                            height: auto;
                        }

                        .name{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            @include H-V-center;
                            font-size: .14rem;
                            color: #fff;
                            padding: .05rem 0;
                            background: rgba(0, 0, 0, .6);
                        }
                    }
                }
            }
        }

        .bottom-item{
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 3.2rem;
            z-index: 9;
            padding-bottom: .1rem;
            @include V-center;

            .panel-item{
                width: 50%;
                height: 100%;

                .panel-info{
                    border: 1px solid #0D4272;
                    position: relative;
                    margin: 0 0.1rem;
                    overflow: inherit;

                    .icon-icon_zs-01,
                    .icon-icon_zx-01,
                    .icon-icon_yx-01,
                    .icon-icon_ys-01{
                        position: absolute;
                        color: #00BDE5;
                        font-size: .16rem;
                        z-index: 9;
                    }

                    .icon-icon_zs-01{
                        left: 0;
                        top: -.03rem;
                    }

                    .icon-icon_ys-01{
                        right: 0;
                        top: -.03rem;
                    }

                    .icon-icon_zx-01{
                        left: 0;
                        bottom: -0.04rem;
                    }

                    .icon-icon_yx-01{
                        right: 0;
                        bottom: -0.04rem;
                    }

                    .list{
                        width: 100%;
                        height: 100%;
                        overflow: auto;
                        @include scrollbar;

                        table{
                            width: 100%;
                        }

                        th, td{
                            font-size: .14rem;
                            text-align: center;
                            font-weight: 300;
                        }

                        th{
                            color: #A5B5C5;
                            padding: .08rem 0;
                            background: #061c35;
                        }

                        td{
                            color: #C0D3E6;
                            padding: .1rem 0;

                            span{
                                font-size: 10px;
                                margin-left: .05rem;
                            }
                        
                            .icon-xinpian-01-01{
                                font-size: .22rem;
                            }

                            .gray-xp{
                                color: rgba(192, 211, 230, .8);
                            }
                            
                            .blue-xp{
                                color: rgba(56, 220, 255, .9);
                            }
                        }

                        .table-head{
                            position: sticky;
                            top: 0;
                        }
                    }

                }
            }
        }
    }
}

.popup-info{
    width: 100%;
    height: calc(100% - 42px);
    background: #1E499B;
    overflow: auto;
    padding: .1rem;
    @include scrollbar;

    .sub-menu{
        margin-bottom: .1rem;
        display: flex;
        align-items: center;
        padding: 0 .2rem;
        color: #fff;
        font-size: .14rem;
        background: #113883;
        height: 0.5rem;

        p {
            padding: 0 .1rem;
            cursor: pointer;
            margin-right: .2rem;
        }

        .active {
            color: #00FFFF;
            border-bottom: .01rem solid #00FFFF;
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
    
    .popup-content{
        display: flex;
        height: calc(100% - 0.7rem);
        
        .content-panel{
            background: #113883;
            overflow: auto;
            @include scrollbar;
        }
    }

    .popup-content1{
        .content-panel1{
            width: calc(67% - .1rem);
            margin-right: .1rem;
            padding: .1rem;
            position: relative;

            .map{
                width: 100%;
                height: 100%;

                .amap-marker-label{
                    background: rgba(0, 0, 0,.6);
                    border: 0;
                    border-radius: 4px;
                    color: #00FFFF;
                    padding: 0;
                }
            }
        }

        .content-panel-group{
            width: 33%;

            .content-panel2{
                height: 33%;
                color: #00FFFF;
                font-size: .14rem;
                padding: .2rem;
                text-align: left;

                p{
                    margin-bottom: 0.1rem;
                    @include V-center;
                }
            }

            .content-panel3{
                height: calc(67% - 0.1rem);
                margin-top: 0.1rem;
                padding-bottom: .1rem;

                img{
                    width: calc(50% - .2rem);
                    margin: .1rem;
                    float: left;
                }
            }
        }
    }

    .popup-content2,
    .popup-content3{
        .content-panel1{
            width: 100%;
            height: 100%;
            padding: .1rem;
            position: relative;

            .TestPic{
                width: calc(25% - 0.2rem);
                margin: 0.1rem;
                float: left;
            }

            .search-group{
                height: .6rem;
                @include V-center;
                padding: .1rem .2rem;
                border-bottom: .01rem solid #3e7070;
                color: #00FFFF;
                font-size: .14rem;

                select{
                    outline: none;
                    background: #293F97;
                    border: 0;
                    width: auto;
                    margin-left: .1rem;
                    height: .3rem;
                    color: rgba(255, 255, 255, 0.8);
                }
            }

            .main{
                height: calc(100% - .6rem);
                padding: .1rem 0 .1rem .1rem;
                overflow: auto;
                @include scrollbar;

                .container{
                    width: calc(33.33% - 0.2rem);
                    margin: 0.1rem;
                    height: auto;
                    position: unset;
                    background: #293F97;
                    padding: .2rem;
                    float: left;

                    .highcharts-container{
                        width: 100% !important;
                        height: 100% !important;

                        svg{
                            width: 100%;
                            height: auto;

                            text{
                                color: #fff !important;
                                fill: #fff !important;
                            }

                            rect{
                                fill: #224DA4;
                            }
                        }
   
                        .highcharts-label-box{
                            fill: rgba(41,63,152, .41);
                        }

                        .red-line .highcharts-tracker{
                            stroke: red !important;
                            stroke-width: 2 !important;
                        }

                        .red-line .highcharts-graph{
                            stroke: red !important;
                        }

                        .red-line .highcharts-point{
                            fill: red !important;
                        }
                    }
                }
            }
        }
    }

    .popup-content4{
        .content-panel1{
            width: calc(67% - .1rem);
            margin-right: .1rem;
            padding: .1rem;
            position: relative;

            iframe{
                width: 100%;
                height: 100%;
            }
        }
        
        .content-panel-group{
            width: 33%;
            color: #00FFFF;

            .content-panel2{
                height: 33%;
                font-size: .14rem;
                padding: .2rem;
                text-align: left;

                .item{
                    @include V-center;
                    margin-bottom: .1rem;

                    .value{
                        margin-left: .1rem;
                    }
                }
            }

            .content-panel3{
                height: calc(67% - 0.1rem);
                margin-top: 0.1rem;
                background: transparent;

                .content-panel{
                    margin-bottom: .1rem;
                    padding: 0.1rem 0.1rem 0;
                }

                .item{
                    @include V-center;
                    margin-bottom: .1rem;

                    p{
                        @include V-center;
                    }
                }

                .bg-icon::after{
                    content: '';
                    width: .25rem;
                    height: .25rem;
                    float: right;
                    margin-left: .1rem;
                    background-size: 100% 100% !important;
                }

                .bgqf::after{
                    background: url(../../images/dui.png) no-repeat;
                }
                
                .bgsh::after{
                    background: url(../../images/tanhao.png) no-repeat;
                }
                
                .bgbj::after{
                    background: url(../../images/cuowu1.png) no-repeat;
                }
            }
        }
    }
}