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

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

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

        .content-bg-shang{
            left: 0;
            top: 0;
            width: 100%;
            height: 10%;
        }
        
        .marker-info{
            background: rgba(13, 36, 75, .8);

            .marker-top{
                background: rgba(21, 49, 96, .8);
                @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: #0CF6E5;
                    width: 70%;
                }

                .detail{
                    color: #A5B5C5;
                    font-size: .14rem;
                    cursor: pointer;
                    @include H-V-center;
                }
            }

            .marker-main{
                max-height: 3rem;
                overflow: auto;
                @include scrollbar;

                .item{
                    @include V-center;
                    padding: .1rem .2rem;
                    margin-bottom: .15rem;
                    border-bottom: $border rgba(70, 166, 216, .8);
                    min-width: 3.5rem;

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

                    .img{
                        width: 25%;
                        height: 1rem;

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

                    .info{
                        width: 60%;
                        padding: 0 .1rem;
                        font-size: .14rem;
                        color: #C0D3E6;
                    }

                    .icon{
                        width: 15%;
                        @include H-V-center;

                        p{
                            font-size: .25rem;
                            border-radius: 50%;
                            padding: .1rem;
                            color: #46A6D8;
                            background: rgba(70, 166, 216, .2);
                            cursor: pointer;
                        }
                    }
                }
            }
        }

        .panel-item{
            .panel-title{
                height: .54rem;
                color: #46A6D8;
                font-size: .16rem;
                @include V-center;
                padding-left: .1rem;
            }

            .panel-info{
                height: calc(100% - .54rem);
                overflow: auto;
                @include scrollbar;
            }
        }

        .map{
            right: 0;
            top: 0;
            width: calc(100% - 3rem);
            height: calc(100% - 2rem);
        }

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

            .panel1{
                height: 55%;

                .layui-timeline{
                    .icon_font{
                        color: #5ABEF2;
                    }

                    .layui-timeline-axis{
                        color: #5ABEF2;
                        left: -4px;
                        font-size: 10px;
                        background: #040D1E;
                    }

                    .layui-timeline-item{
                        cursor: pointer;
                    }

                    .layui-timeline-item:before{
                        background-color: #0D4272;
                    }
                    
                    .layui-timeline-title{
                        margin-bottom: .1rem;
                        color: #56D8F4;
                        font-size: .16rem;
                    }

                    .info{
                        color: #C0D3E6;
                        font-size: .14rem;
                    }
                }
            }

            .panel2{
                height: 45%;
                
                .panel-info{

                    .item{
                        @include V-center;
                        padding: 0 .2rem;
                        margin-bottom: .15rem;
                        width: 100%;

                        .img{
                            width: 25%;
                            height: 1rem;

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

                        .info{
                            width: 60%;
                            padding: 0 .1rem;
                            font-size: .14rem;
                            color: #C0D3E6;
                        }

                        .icon{
                            width: 15%;
                            @include H-V-center;

                            p{
                                font-size: .25rem;
                                border-radius: 50%;
                                padding: .1rem;
                                color: #46A6D8;
                                background: rgba(70, 166, 216, .2);
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }

        .center-item{
            position: absolute;
            top: .16rem;
            left: 4rem;
            width: 1.41rem;
            font-size: .14rem;
            color: #ECECEC;
            z-index: 9;

            .card{
                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%);
                margin: 0;
                padding: 0;
                border-radius: 0;
                box-shadow: none;

                .item{
                    width: 100%;
                    text-align: center;
                    padding: .05rem 0;
                    cursor: pointer;
                }

                .active{
                    background: linear-gradient(90deg, #0A53AE 0%, #2B72C9 49%, #0A53AE 100%);
                }
            }
            
            .card1{
                .item:before{
                    content: "\e970";
                    margin-right: .1rem;
                }
            }

            .card2{
                max-height: 5rem;
                overflow: auto;
                @include scrollbar;
            }
        }

        .right-item{
            position: absolute;
            @include V-center;
            padding: .1rem;
            top: 0;
            right: 0;
            color: #A5B5C5;
            font-size: .14rem;
            z-index: 9;

            p{
                margin-left: .3rem;
                @include H-V-center;

                span{
                    font-size: .1rem;
                    margin-right: .1rem;
                }
            }
        }

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

            .panel-item{
                height: 100%;

                .panel-title{
                    justify-content: space-between;

                    .tab{
                        font-size: .14rem;
                        color: #A5B5C5;
                        @include V-center;

                        p{
                            margin-left: .3rem;
                            padding: .03rem .12rem;
                            cursor: pointer;
                        }

                        .active{
                            color: #46A6D8;
                            border: $border #46A6D8;
                            border-radius: .12rem;
                        }
                    }
                }
                
                .panel-info{
                    border: 1px solid #0D4272;
                    position: relative;
                    overflow: inherit;
                    padding: .1rem;
                    display: flex;

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

                    .list{
                        width: 35%;
                        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;
                        }

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

                    .chart{
                        width: 65%;

                        .chart-value{
                            height: .5rem;
                            @include H-V-center;
                            color: #A5B5C5;
                            font-size: .14rem;
                            
                            .number{
                                margin: 0 .15rem;
                                font-size: .22rem;
                            }

                            .icon_font{
                                color: #245887;
                                margin: 0 .1rem;
                            }
                        }

                        .chart-main{
                            height: calc(100% - .5rem);

                            .item{
                                width: 100%;
                                height: 100%;
                            }
                        
                            .tooltips-time{
                                border-bottom: $border #fff;
                                margin-bottom: 0.05rem;
                                padding-bottom: 0.05rem;
                            }
                        }
                    }
                    
                }
            }
        }
    }
}

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

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

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

.bottom-center .amap-info-sharp{
    margin-left: -3px;
}