@import 'theme.scss';
.container{
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;

    .toggle{
        position: fixed;
        color: $white;
        right: .2rem;
        z-index: 9;
        height: .7rem;
        @include V-center;

        .icon_font{
            font-size: .3rem;
            cursor: pointer;
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            @include H-V-center;
        }
    }

    .content{
        position: absolute;
        width: 100vw;
        height: calc(100% - .7rem);
        left: 0;
        bottom: 0;

        .map{
            position: absolute;
            width: 100vw;
            height: 100%;

            .amap-icon img{
                width: 100%;
                height: 100%;
            }

            .amap-info-close{
                top: .2rem;
                right: .32rem !important;
            }
            
            .amap-info-content{
                background: transparent !important;
                box-shadow: none !important;

                .marker-info{
                    position: relative;
                    background: rgba(34, 77, 164, .9);

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

                    .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;
                    }

                    .top-item{
                        @include V-center;
                        justify-content: space-between;
                        padding: .1rem .4rem .1rem .2rem;
                        border-bottom: $border rgba(70, 166, 216, .95);

                        .title{
                            font-size: .16rem;
                            color: #3FD9FF;
                            width: 70%;
                        }

                        .btn{
                            font-size: .14rem;
                            color: $white;
                            border: $border $white;
                            border-radius: .12rem;
                            padding: .05rem .1rem;
                            cursor: pointer;
                        }
                    }

                    .center-item{
                        @include V-center;
                        justify-content: space-between;
                        padding: .1rem;
                        font-size: .14rem;
                        color: #DEE7F0;
                        border-bottom: $border rgba(70, 166, 216, .95);

                        .img{
                            position: relative;
                            width: 1rem;
                            height: 1.3rem;
                            border: $border #43A1D3;

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

                            .name{
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                font-size: .14rem;
                                color: $white;
                                background: rgba(0, 0, 0, .6);
                                width: 100%;
                                text-align: center;
                                padding: .05rem 0;
                            }
                        }

                        .info{
                            margin-left: .1rem;
                            padding: 0 .3rem 0 .1rem;
                            width: 3rem;
                            border-right: $border #46A6D8;
                            
                            div{
                                margin-bottom: .08rem;
                                @include V-center;

                                p{
                                    word-break: keep-all;
                                }

                                &:last-child{
                                    margin-bottom: 0;
                                }
                            }
                        }

                        .phone{
                            font-size: .14rem;
                            color: #3FD9FF;
                            word-break: keep-all;
                            text-align: center;
                            padding: 0 .3rem;
                            cursor: pointer;

                            .icon_font{
                                font-size: .6rem;
                            }
                        }
                    }

                    .bottom-item{
                        @include V-center;
                        justify-content: space-between;
                        padding: .1rem;

                        .item{
                            border: $border #46A6D8;
                            font-size: .14rem;
                            margin-right: .1rem;

                            &:last-child{
                                margin-right: 0;
                            }

                            .name{
                                color: #DEE7F0;
                                border-bottom: $border #46A6D8;
                                padding: .05rem 0;
                                text-align: center
                            }

                            .status{
                                @include H-V-center;
                                color: #768AA0;
                                padding: .05rem 0;

                                .active{
                                    color: #46A6D8;
                                    cursor: pointer;
                                }

                                p{
                                    padding: 0 .1rem;
                                    word-break: keep-all;
                                    @include V-center;
                                    
                                    .icon_font{
                                        font-size: .12rem;
                                        margin-right: .05rem;
                                    }
                                }

                                .icon-vertical_line{
                                    color: #46A6D8;
                                }
                            }
                        }
                    }
                }
            }
        }

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

            .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;

                        .input{
                            border-radius: .12rem;
                            border: $border #46A6D8;
                            background: transparent;
                            height: .3rem;
                            width: 100%;
                            color: #C0D3E6;
                            padding-right: .3rem;
                        }
                        
                        .icon_font{
                            color: rgba(255, 255, 255, .7);
                            font-size: .14rem;
                            cursor: pointer;
                            position: absolute;
                            right: .1rem;
                        }
                    }
                }

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

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

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

                            .name{
                                width: 90%;
                            }
                        }

                        .panel-info{
                            background: rgba(22, 65, 152, 0.7);

                            .item{
                                padding: .1rem;
                                @include H-V-center;

                                .value{
                                    width: 70%;
                                    color: #DEE7F0;
                                    font-size: .14rem;
                                    cursor: pointer;
                                    
                                    p{
                                        margin-bottom: .05rem;

                                        &:last-child{
                                            margin-bottom: 0;
                                        }
                                    }
                                }

                                .status{
                                    width: 30%;
                                    text-align: center;
                                    color: #768AA0;
                                    @include H-V-center;

                                    .icon_font{
                                        font-size: .25rem;
                                        border: $border #768AA0;
                                        padding: .05rem 0;
                                        width: 50%;

                                        &:first-child{
                                            margin-right: .1rem;
                                        }
                                    }

                                    .zx{
                                        color: #3FD9FF;
                                        border: $border #3FD9FF;
                                        cursor: pointer;
                                    }
                                }
                            }

                            .panel-time{
                                color: #3FD9FF;
                                font-size: .14rem;
                                background: rgba(14, 56, 141, 0.6);
                                padding: 0 .1rem .08rem .1rem;
                                border-bottom: $border rgba(68, 109, 193, 0.8);
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }

        .right-item{
            position: absolute;
            width: 4rem;
            right: .1rem;
            height: 100%;

            .top-item{
                font-size: .14rem;
                @include V-center;
                height: .5rem;
                color: $white;
                
                p{
                    margin-right: .3rem;
                    cursor: pointer;
                }

                .active{
                    color: #3FD9FF;
                }
            }

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

                .panel-item{
                    background: rgba(42, 93, 197, 0.7);
                    margin-bottom: .1rem;

                    .panel-head{
                        color: #DEE7F0;
                        font-size: .14rem;
                        @include V-center;
                        justify-content: space-between;
                        padding: .13rem .1rem;
                        border-bottom: $border rgba(70, 166, 216, .95);
                        
                        .blue-text{
                            cursor: pointer;
                        }
                    }

                    .panel-info{
                        padding: .1rem;
                        height: 2.4rem;

                        img{
                            width: 100%;
                            height: 100%;
                            border: $border $white;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

    .header-item{
        position: absolute;
        height: .7rem;
        background: #072363;
        width: 100%;
        left: 0;
        top: 0;
        padding: 0 .2rem;
        @include V-center;
        justify-content: space-between;

        .name{
            font-size: .24rem;
            color: $white;
            @include H-V-center;

            .icon_font{
                font-size: .32rem;
            }

            .icon-vertical_line{
                color: #6D97C0;
            }
        }

        .right-item{
            @include V-center;
            font-size: .2rem;

            .tab{
                @include H-V-center;
                color: #AFC7DD;

                a{
                    color: #AFC7DD;
                }

                .tab-item{
                    cursor: pointer;
                }

                .active{
                    color: $white;
                }

                .icon_font{
                    margin: 0 .1rem;
                }
            }

            .user-info{
                margin: 0 .7rem 0 .3rem;
                @include H-V-center;

                img{
                    width: .42rem;
                    height: .42rem;
                    background: #1B4C78;
                    border: .02rem solid #407CB2;
                    border-radius: 50%;
                    z-index: 9;
                }

                select{
                    background: #1E3D84;
                    color: $white;
                    font-size: .16rem;
                    padding: .05rem .1rem .05rem .2rem;
                    border-radius: 0 .15rem .15rem 0;
                    margin-left: -0.1rem;
                }
            }
        }
    }
}

.hide-header{
    .header{
        display: none;
    }

    .content{
        height: 100%;
    }

    .toggle{
        .icon_font{
            background: rgba(63, 217, 255, .7);
        }
    }
}

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

    .search-item{
        background: #113883;
        font-size: .14rem;
        color: $white;
        @include V-center;
        height: .6rem;
        padding: 0 .1rem;

        .input{
            height: .3rem;
        }

        .btn{
            color: #fff;
            margin-left: 0.1rem;
            padding: 0 0.1rem;
        }
    }

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

        img{
            width: calc(25% - 0.2rem);
            height: 2rem;
            float: left;
            margin: 0.1rem;
        }
    }
}

.swiper {
    width: 100%;
    height: 100%;
}  

.photo-box{
    overflow: auto;
    @include scrollbar;
}

.bigger-img{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    @include H-V-center;
    z-index: 9;
    
    .img{
        width: 80%;
        height: 70%;
        overflow: auto;
        @include H-V-center;
        @include scrollbar;

        .icon_font{
            position: absolute;
            top: 0;
            right: 0;
            font-size: .3rem;
            color: #DEE7F0;
            cursor: pointer;
        }

        .item{
            position: relative;
            width: auto;
            height: 100%;
        }

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