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

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

        .content-bg-you{
            right: 0;
            top: 0;
            width: 5rem;
            height: 100%;
        }
        
        .map{
            .amap-info-content{
                .marker-info{
                    background: rgba(34, 77, 164, .9);
                    
                    .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%;
            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;

                        .input{
                            border-radius: .12rem;
                            border: $border #46A6D8;
                            background: transparent;
                            height: .3rem;
                            width: 100%;
                            color: #C0D3E6;
                            padding: 0 .3rem 0 .1rem;
                        }
                        
                        .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: 100%;
                            }
                        }

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

                            .active{
                                .item{
                                    background: rgba(12, 112, 164, .8);
                                }
                            }

                            .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: .08rem .1rem;
                                border-bottom: $border rgba(68, 109, 193, 0.8);
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }

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

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

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

    video{
        width: 100%;
        height: 75%;
    }

    .flex-item{
        display: flex;
        font-size: .18rem;
        color: #fff;
        justify-content: space-evenly;
        height: 10%;
        align-items: center;

        p{
            cursor: pointer;
        }
        
        .notActive{
            cursor: context-menu;
            color: #768AA0;
        }
    }
}

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

.layui-layer-page .layui-layer-content{
    background: #1E499B;
    @include scrollbar;
}

#page .card {
    background: #1C4695;
    color: #fff;
}

.viewer-transition{
    z-index: 99999999 !important;
}