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

        .content-bg-zuo{
            left: 0;
            top: 0;
            width: 4.5rem;
            height: 100%;
        }
        
        .map{   
            .info-item{
                cursor: pointer;
                padding: 12px 27px 10px 12px;
            }
            .bottom-center .amap-info-sharp{
                border-top-color: rgba(0, 0, 0, 0.6);
            }
        }

        .left-item{
            position: absolute;
            width: 3.82rem;
            left: .1rem;
            height: 100%;
            z-index: 9;

            .top-item{
                height: .7rem;
                margin-top: .12rem;
                @include V-center;
                justify-content: space-between;

                .flex-item{
                    @include H-V-center;
                    height: 100%;
                    color: #C6D5E4;
                    font-size: .12rem;
                    background: rgba(42, 93, 197, .6);
                    width: 48%;

                    .item{
                        text-align: center;
                        width: 50%;

                        &:first-child{
                            border-right: $border rgba(255, 255, 255, .2);
                        }

                        .number{
                            font-size: .22rem;
                        }
                    }
                }
            }
            .bottom-item{
                height: calc(100% - .9rem);

                .head-item{
                    color: #3FD9FF;
                    font-size: .14rem;
                    @include V-center;
                    justify-content: space-between;
                    padding: .23rem 0 .1rem 0;

                    .search-item{
                        position: relative;
                        width: 50%;
                        @include V-center;
                        justify-content: flex-end;
                        .icon{
                            width: .5rem;
                            height: .3rem;
                            @include H-V-center;
                            cursor: pointer;
                            img{
                                width: auto;
                                height: 75%;
                            }
                        }

                        .input{
                            border-radius: .12rem;
                            border: $border #46A6D8;
                            background: transparent;
                            height: .3rem;
                            width: 100%;
                            color: #C0D3E6;
                            padding: 0;
                            text-align: center;
                        }
                        
                        .icon_font{
                            color: rgba(255, 255, 255, .7);
                            font-size: .14rem;
                            cursor: pointer;
                            position: absolute;
                            right: .1rem;
                        }
                    }
                }
                .head-item2{
                    padding-top: 0;
                    .search-item{
                        width: 100%;
                    }
                    .input{
                        text-align: left !important;
                        padding: 0 .3rem 0 .1rem !important;
                    }
                }

                .info-item{
                    height: calc(100% - .7rem);
                    overflow: auto;
                    @include scrollbar;

                    .panel-item{
                        margin-bottom: .1rem;

                        .panel-head{
                            background: rgba(42, 93, 197, 0.6);
                            color: #3FD9FF;
                            font-size: .14rem;
                            @include V-center;
                            justify-content: space-between;
                            padding: .1rem;
                        }

                        .panel-info{
                            .active{
                                background: #3069F4 !important;
                            }
                            .info-item{
                                color: #C0D3E6;
                                font-size: .14rem;
                                margin-bottom: .1rem;
                                .headHover{
                                    // &:hover{
                                        .icon2{
                                            img{
                                                transform: rotate(180deg);
                                            }
                                        }
                                    // }
                                }
                                .item-head{
                                    background: rgba(22,65,152,0.6);
                                    padding: .11rem .03rem .11rem .06rem;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    cursor: pointer;
                                    border-top: .01rem solid rgba(68,109,193,0.8);
                                    .flex-item{
                                        display: flex;
                                        align-items: center;
                                        .icon{
                                            position: relative;
                                            margin: 0 .1rem;
                                            img{
                                                width: .19rem;
                                                height: .19rem;
                                            }
                                        }
                                        .showTip{
                                            &::after{
                                                content: '';
                                                width: .07rem;
                                                height: .07rem;
                                                background: #E7555C;
                                                border-radius: 50%;
                                                position: absolute;
                                                top: -.06rem;
                                                right: -.06rem;
                                            }
                                        }
                                        .icon2{
                                            img{
                                                width: .15rem;
                                                height: .15rem;
                                                transition: transform 0.5s, top 0.5s;
                                            }
                                        }
                                        .number{
                                            display: flex;
                                            align-items: flex-end;
                                            font-size: .12rem;
                                            line-height: .16rem;
                                            p{
                                                font-size: .16rem;
                                            }
                                            span{
                                                color: #00FFA2;
                                            }
                                        }
                                    }
                                }
                                .item-main{
                                    .flex-item{
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        background: rgba(22,65,152,0.3);
                                        padding: .13rem;
                                        border-top: .01rem solid rgba(68,109,193,0.8);
                                        .green{
                                            color: #00FFA2;
                                        }
                                        .red{
                                            color: #E7555C;
                                        }
                                        .desc{
                                            white-space: nowrap;
                                        }
                                    }
                                }
                                // .time-item{
                                //     padding: .11rem;
                                //     color: #3FD9FF;
                                //     background: rgba(14,56,141,0.6);
                                //     div:last-child{
                                //         margin-top: .11rem;
                                //     }
                                // }
                            }
                            
                        }
                    }
                }
            }
        }
        
        .map-legend{
            position: absolute;
            bottom: .2rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(22,65,152,0.6);
            color: #fff;
            font-size: .14rem;
            display: flex;
            align-items: center;
            div{
                display: flex;
                align-items: center;
                padding: .13rem .25rem;
                border-right: .01rem solid rgba(68,109,193,0.8);
                &:last-child{
                    border-right: 0;
                }
            }
            img{
                width: .2rem;
                height: .2rem;
                margin-right: .13rem;
            }
        }
    }
}


.popup-info{
    width: 100%;
    height: 100%;
    background: #1E499B;
    padding: .1rem;
    padding: 0 .1rem .1rem;
    .blue{
        color: #3FD9FF;
    }
    .red{
        color: #E7555C;
    }
    .green{
        color: #00FFA2;
    }
    .head{
        height: .7rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #C0D3E6;
        font-size: .18rem;
    }
    .main{
        display: flex;
        height: calc(100% - .7rem);
        .left-item{
            width: 3.8rem;
            background: #113780;
            overflow: auto;
            @include scrollbar;
            .info-item{
                color: #C0D3E6;
                font-size: .14rem;
                border-bottom: .04rem solid #1E499B;
                .headHover{
                    // &:hover{
                        .icon2{
                            img{
                                transform: rotate(180deg);
                            }
                        }
                    // }
                }
                .item-head{
                    color: #fff;
                    background: #0D3177;
                    padding: .11rem .03rem .11rem .06rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    .flex-item{
                        display: flex;
                        align-items: center;
                        .icon{
                            position: relative;
                            margin: 0 .1rem;
                            img{
                                width: .19rem;
                                height: .19rem;
                            }
                        }
                        .showTip{
                            &::after{
                                content: '';
                                width: .07rem;
                                height: .07rem;
                                background: #E7555C;
                                border-radius: 50%;
                                position: absolute;
                                top: -.06rem;
                                right: -.06rem;
                            }
                        }
                        .icon2{
                            img{
                                width: .15rem;
                                height: .15rem;
                                transition: transform 0.5s, top 0.5s;
                            }
                        }
                        .number{
                            display: flex;
                            align-items: flex-end;
                            font-size: .12rem;
                            line-height: .16rem;
                            p{
                                font-size: .16rem;
                            }
                            span{
                                color: #00FFA2;
                            }
                        }
                    }
                }
                .item-tab{
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    padding: 0 .05rem .1rem;
                    background: #0D3177;
                    div{
                        white-space: nowrap;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid #90A1B1;
                        height: .3rem;
                        flex: 1;
                        margin: 0 .05rem;
                    }
                }
                .item-main{
                    background: #113780;
                    .flex-item{
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        background: rgba(22,65,152,0.3);
                        padding: .13rem;
                        border-top: .01rem solid rgba(68,109,193,0.8);
                        &:nth-child(1){
                            border-top: 0;
                        }
                    }
                    .active{
                        background: #3069F4;
                    }
                }
            }
            .active{
                .item-head,
                .item-tab{
                    background: #3069F4;
                }
            }
        }
        .right-item{
            width: calc(100% - 3.8rem);
            margin-left: .1rem;
            .flex-item{
                display: flex;
                align-items: center;
                padding: 0 .13rem;
                color: #C0D3E6;
                background: #0D3177;
                margin-bottom: .01rem;
                font-size: .14rem;
                min-height: 0.4rem;
                padding: 0.05rem .1rem;
                .value{
                    width: 50%;
                }
                .box{
                    background: rgba(34, 77, 164, .9);
                    height: 92%;
                    display: flex;
                    align-items: center;
                    margin-right: .1rem;
                    padding: 0 .05rem;
                    .img{
                        height: 100%;
                        width: .7rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        img{
                            height: 90%;
                        }
                    }
                    .item{
                        padding: 0 .1rem;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        &>div{
                            word-break: keep-all;
                            white-space: nowrap;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        }
                        .type{
                            color: #fff;
                            .blue{
                                font-size: .16rem;
                            }
                        }
                    }
                }
            }
            .flex-item2 {
                height: 1.15rem;
            }
            .over-flex{
                overflow: auto;
                @include scrollbar;
            }
            .main-item1{
                height: 2rem;
                overflow: auto;
                @include scrollbar;
            }
            .main-item{
                height: calc(100% - 2.11rem);
                background: #0D3177;
                padding: .1rem;
                margin-top: .1rem;
                .item{
                    background: rgba(34, 77, 164, .9);
                    font-size: .16rem;
                    display: flex;
                    padding: .1rem .12rem;
                    margin-bottom: .1rem;
                    &:last-child{
                        margin-bottom: 0;
                    }
                    .value{
                        width: 2.3rem;
                        color: #C0D3E6;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                    }
                    .imgArr{
                        width: calc(100% - 2.3rem);
                        display: flex;
                        align-items: center;
                        overflow: auto;
                        @include scrollbar;
                        img{
                            width: auto;
                            cursor: pointer;
                            height: 1.2rem;
                            margin-right: .1rem;
                        }
                    }
                }
                .ma-i{
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    @include scrollbar;
                }
            }
            .name-item{
                background: #3069F4;
                height: .5rem;
                color: #fff;
                font-size: .18rem;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: .1rem;
            }
            .info-item{
                height: calc(100% - 1.01rem);
                background: #0D3177;
                .desc{
                    height: .5rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: .18rem;
                    color: #fff;
                    padding: 0 .2rem;
                }
                .bw-item{
                    height: calc(100% - .9rem);
                    border: .01rem solid rgba(68,109,193,0.8);
                    border-width: .01rem 0;
                    overflow: auto;
                    padding: 0 .1rem .2rem;
                    @include scrollbar;
                    .item{
                        position: relative;
                        background: #0D3177;
                        border: .01rem solid #90A1B1;
                        font-size: .18rem;
                        color: #C0D3E6;
                        height: .8rem;
                        width: calc(25% - .2rem);
                        margin: .2rem .1rem 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        float: left;
                        cursor: pointer;
                        &:hover{
                            background: rgba(42,210,255,0.2);
                            border: .02rem solid #2AD2FF;
                            color: #2AD2FF;
                            .hoverInfo{
                                display: block;
                            }
                        }
                    }
                    .active{
                        background: rgba(249,3,3,0.2);
                        border: .01rem solid #6B1F49;
                        color: #E7555C;
                    }
                }
                .sub-desc{
                    height: .4rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: .14rem;
                    color: #C0D3E6;
                    padding: 0 .2rem;
                }
            }
        }
        .right-item2{
            display: flex;
            flex-direction: column;
        }
    }
    .hoverInfo{
        position: fixed;
        background: rgba(0,0,0,0.7);
        padding: .1rem 0 0;
        width: calc(.6rem * 4 + .1rem);
        padding-right: .1rem;
        z-index: 9;
        div{
            color: #C0D3E6;
            font-size: .16rem;
            margin-left: .1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(192,211,230,0.1);
            border: 1px solid #C0D3E6;
            width: .5rem;
            height: .4rem;
            float: left;
            margin-bottom: .1rem;
        }
    }
}

.layui-layer-content{
    height: calc(100% - 42px) !important;
}

.swiper{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999999999;
    .mask{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        cursor: pointer;
    }
    .main{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 12rem;
        height: 65%;
        .swiper-container{
            height: 100%;
            img{
                height: 100%;
            }
        }
        .swiper-slide{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .close{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
        cursor: pointer;
        img{
            width: 0.25rem;
            height: 0.25rem;
        }
    }
}