@import 'theme.scss';

.container {
    .head .flex-item .item:nth-child(1){
        border-bottom: 0.02rem solid #03BEFE;
        div {
            color: rgba(255, 255, 255, 0.9);
            background: linear-gradient(0deg, #2762E5 0%, #466AF4 26%, #02C0FF 100%);
            border: 0.01rem solid transparent;
        }
    }

    .content {
        width: 100vw;
        height: 100vh;
        display: flex;
        .left-content {
            position: absolute;
            left: .2rem;
            top: .4rem;
            bottom: .3rem;
            width: 4.33rem;
            z-index: 99;

            .card1{
                height: 1.7rem;
                .card-main {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex: 1;
                }
            }
            .card2{
                height: calc(100% - 1.7rem);
            }

            .card-head {
                @include bg('../../img2.0/img_zjgcsjtj.png');
                height: .45rem;
                border-radius: 0px 0px .2rem 0px;
                font-size: .22rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #fff;
                padding: 0 .2rem 0 .22rem;
                .desc{
                    font-size: .14rem;
                }

                .title {
                    font-size: .22rem;
                    font-weight: bold;
                    font-family: PuHuiTi;
                    text-shadow: 0 0 10px #1b74d6, 0 0 20px #1b74d6, 0 0 30px #1b74d6, 0 0 40px #1b74d6;
                }
                .tab{
                    display: flex;
                    align-items: center;
                    .item{
                        font-size: .14rem;
                        background: #093566;
                        border: .01rem solid #0E5FCD;
                        border-radius: .02rem;
                        margin-left: .1rem;
                        height: .25rem;
                        padding: 0 .08rem;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #4783CF;
                    }
                    .active{
                        background: #07196E;
                        border: .01rem solid #07B9FE;
                        color: #fff;
                    }
                }

                .buttonlist {
                    height: 100%;
                    width: 30%;
                    display: flex;
                    margin: 2% 0 2% 23.5%;
                    .right-item1 {
                        width: 0.58rem;
                        height: 0.22rem;
                        background: #093566;
                        border: 1px solid #0E5FCD;
                        border-radius: 2px;
                        font-size: .14rem;
                        font-family: Alibaba PuHuiTi 2.0;
                        font-weight: normal;
                        color: #4783CF;
                        text-align: center;
                        line-height: 0.22rem;
                        float: right;
                        background: #07196E;
                        border: 1px solid #07B9FE;
                        color: #FFFFFF;
                    }

                    .right-item2 {
                        width: 0.58rem;
                        height: 0.22rem;
                        background: #093566;
                        border: 1px solid #0E5FCD;
                        border-radius: 2px;
                        font-size: .14rem;
                        font-family: Alibaba PuHuiTi 2.0;
                        font-weight: normal;
                        color: #4783CF;
                        text-align: center;
                        line-height: 0.22rem;
                        float: right;
                        margin-left: 10%;

                    }
                }

                .right-item3 {
                    font-size: .14rem;
                    font-family: Alibaba PuHuiTi 2.0;
                    font-weight: normal;
                    color: #FFFFFF;
                    margin-left: 38%;
                }

                .active {
                    background: #07196E;
                    border: 1px solid #07B9FE;
                    color: #FFFFFF;
                }
            }

            .card-main {
                .numberAll {
                    background: url(../../img2.0/img_zjgc.png);
                    background-size: 100% 100%;
                    height: 0.99rem;
                    width: 1rem;
                    text-align: center;

                    :nth-child(1) {
                        font-size: .18rem;
                        font-family: Alibaba PuHuiTi 2.0;
                        font-weight: normal;
                        color: #FFFFFF;
                        text-shadow: 0 0 10px #1b74d6, 0 0 20px #1b74d6, 0 0 30px #1b74d6, 0 0 40px #1b74d6;
                    }

                    :nth-child(2) {
                        font-size: .24rem;
                        font-family: DIN;
                        font-weight: bold;
                        color: #33FFFF;
                    }
                }

                .red {
                    background: url(../../img2.0/img_ycgc.png);
                    background-size: 100% 100%;

                    :nth-child(2) {
                        color: #FF6000;
                    }
                }

                .green {
                    background: url(../../img2.0/img_zjzjz.png);
                    background-size: 100% 100%;

                    :nth-child(2) {
                        color: #00D2FF;
                    }
                }

                .org {
                    background: url(../../img2.0/img_yczj.png);
                    background-size: 100% 100%;

                    :nth-child(2) {
                        color: #FFC74C;
                    }
                }
            }

            .flex-item {
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: .66rem;
                display: flex;
                align-items: center;

                input {
                    background: rgba(7, 25, 110, 0.8);
                    border: .01rem solid #0F57BA;
                    border-radius: .18rem;
                    font-size: .14rem;
                    color: #fff;
                    cursor: pointer;
                }

                &>div {
                    display: flex;
                    align-items: center;

                    &::before {
                        content: '';
                        width: .2rem;
                        height: .2rem;
                        position: absolute;
                        margin-left: .10rem;
                    }
                }

                .input1 {
                    width: 45%;

                    &::before {
                        @include bg('../../images/icon/date.png');
                    }

                    input {
                        height: .36rem;
                        width: 100%;
                        padding: 0 .3rem 0 .45rem;
                    }
                }

                .input2 {
                    position: relative;
                    width: 43%;

                    input {
                        padding: 0 .4rem 0 .1rem;
                        height: .36rem;
                        width: 100%;
                    }

                    div {
                        position: absolute;
                        width: .5rem;
                        height: 100%;
                        right: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;

                        img {
                            width: .2rem;
                            height: .2rem;
                        }
                    }
                }
            }

            .card-list {
                width: 100%;
                height: calc(100% - .66rem);
                overflow: auto;
                position: relative;
                @include scrollbar();
                .messageList {
                    width: 100%;
                    margin-bottom: .1rem;
                    .listTop {
                        width: 100%;
                        height: .3rem;
                        padding: 0 .1rem;
                        background: linear-gradient(90deg, #2663E5 0%, #0535BC 98%);
                        display: flex;
                        align-items: center;
                        p {
                            font-size: .14rem;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            color: #fff;
                        }
                    }

                    .item{
                        background: rgba(5, 37, 68, .8);
                        padding: 0 .1rem;
                        .allGet {
                            border-bottom: 1px solid #1163A9;
                        }
                        &:last-child{
                            .allGet {
                                border-bottom: 0;
                            }
                        }
                        &:hover{
                            @include bg('../../images/img/img_zjzj_selected.png');
                        }
                        cursor: pointer;
                    }
                    

                    .listItem {
                        width: 100%;
                        position: relative;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: .05rem 0;

                        .getData {
                            margin-top: .07rem;
                            font-size: .14rem;
                            color: #33FFFF;
                            span {
                                color: #fff;
                            }
                        }

                        .img {
                            margin-right: .1rem;
                            width: 0.36rem;
                            height: 0.36rem;
                            cursor: pointer;
                        }
                        
                        .value-item{

                        }
                        .img-item{
                            display: flex;
                        }
                    }

                    .allGet {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: .1rem 0;
                        font-size: .12rem;

                        .getData3 {
                            font-size: .12rem;
                            color: #00D2FF;
                        }

                        .getData4 {
                            font-size: .12rem;
                            color: white;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }

        .map {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-image: url(../../images/img/img_bg.jpg) !important;
            background-size: 100% 100% !important;
            background-repeat: no-repeat !important;
        }

        .right-content {
            position: absolute;
            right: .2rem;
            top: .4rem;
            bottom: .3rem;
            width: 4.55rem;
            z-index: 99;

            .card1{
                height: 100%;
            }

            .card-head {
                @include bg('../../img2.0/img_zjgcsjtj.png');
                height: .45rem;
                border-radius: 0px 0px .2rem 0px;
                font-size: .22rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #fff;
                padding: 0 .2rem 0 .22rem;

            }

            .card-head2 {
                width: 4.55rem;
                height: 0.44rem;
                background: url(../../img2.0/img_jkyzp.png);
                background-size: 100% 100%;
                margin-top: 4.5%;
                margin-bottom: 2%;
                margin-right: 2%;

                .title {
                    font-size: .22rem;
                    font-family: Alibaba PuHuiTi 2.0;
                    font-weight: normal;
                    color: #FFFFFF;
                    line-height: .44rem;
                    margin-left: 3%;
                }
            }

            .card-main{
                overflow: auto;
                @include scrollbar();
            }

            .videoList {
                background: rgba(5, 38, 96, 0.8);
                border: 1px solid #0270C2;
                margin-top: .11rem;
                .itemList {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: .1rem .12rem;
                    div{
                        display: flex;
                        align-items: center;
                    }

                    :nth-child(2) {
                        font-size: .14rem;
                        font-family: Alibaba PuHuiTi 2.0;
                        font-weight: normal;
                        color: #FFFFFF;
                        float: left;
                    }
                }

                img {
                    width: 0.18rem;
                    height: 0.18rem;
                    float: left;
                }

                button {
                    height: .3rem;
                    background: #07196E;
                    border: 1px solid #07B9FE;
                    border-radius: 14px;
                    color: #fff;
                    padding: 0 .1rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: .12rem;
                    cursor: pointer;
                }

                .imgitem{
                    width: 100%;
                    height: 2.4rem;
                    padding: 0 .12rem .12rem;
                }
                .pictureItem {
                    width: 100%;
                    height: 100%;
                }
            }

        }

    }
}

.marker-info6 {
    background: #0F2E68;
    border: 1px solid #05B9FD;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    color: #fff;

    .marker-top7 {
        width: 100%;
        height: 0.43rem;
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid #0270C2;
        padding: 0 0.1rem;

        .title333 {
            width: 60%;
            font-size: .16rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: .39rem;
        }

        .detail {
            width: 26%;
            font-size: .14rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFCD00;
            line-height: .39rem;
            text-align: right;
            cursor: pointer;
        }
    }

    .marker-main3 {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.1rem 0;
        border-bottom: 1px solid #0270C2;

        .img0 {
            height: 100%;
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: .91rem;
                height: 1.2rem;
            }
        }

        .info8 {
            height: 100%;
            width: 70%;
            display: flex;
            flex-direction: column;

            div {
                padding: 0.04rem 0;
                p {
                    width: 80%;
                    font-size: .12rem;
                    color: #08a1e2;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
    }

    .marker-foot6 {
        width: 100%;
        display: flex;

        .look {
            margin: 0.08rem;
            border: 1px solid;
            border-image: linear-gradient(0deg, #0F2E68, #107DE5) 10 10;
            background: #194aa0;
            padding: 0.08rem 0.1rem;
            flex: 1;

            .look-top {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: .08rem;

                .lookicon {
                    width: 0.16rem;
                    height: 0.16rem;
                    margin-right: .08rem;
                    display: flex;
                }

                .looktext {
                    font-size: .14rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }

            .lookfoot {
                width: 100%;
                display: flex;
                flex-direction: row;

                .lookwatch {
                    border-right: 1px solid #3FD9FF;
                    white-space: nowrap;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50%;
                    padding-right: .08rem;
                    cursor: pointer;

                    .watchimg {
                        width: 0.17rem;
                        height: 0.17rem;
                        margin-right: .08rem;
                        display: flex;
                    }

                    .watchtext {
                        font-size: .14rem;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #768AA0;
                    }
                    
                    .active{
                        color: #00D2FF;
                    }
                }

                .lookwatch1 {
                    white-space: nowrap;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50%;
                    padding-left: .08rem;
                    cursor: pointer;

                    .watchimg {
                        width: 0.17rem;
                        height: 0.17rem;
                        margin-right: .08rem;
                        display: flex;

                    }

                    .watchtext {
                        font-size: .14rem;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #768AA0;
                    }
                    
                    .active{
                        color: #00D2FF;
                    }
                }
            }
        }
    }
}

.amap-info-content {
    background: transparent !important;
}

.oldPicture {
    width: 9.2rem;
    height: 7.14rem;
    background-color: #063572;
    border: 1px solid #107DE5;
    border-radius: 10px;
    display: none;
    margin-top: 9%;
    margin-left: 2%;
    z-index: 10;

    .oldHead {
        width: 100%;
        height: .49rem;
        background-color: #3069f4;
        text-align: center;
        margin-bottom: 1%;

        p {
            height: 100%;
            width: 20%;
            padding: 1% 0;
            margin-left: 40%;
            font-size: .18rem;
            font-weight: 600;
            color: #fff;
        }
    }

    .oldTime {
        width: 97%;
        height: 9%;
        background-color: #113883;
        display: flex;
        margin-left: 1.3%;
        margin-bottom: 1%;

        .oldData {
            height: 100%;
            width: 7%;
            font-size: .14rem;
            color: #fff;
            text-align: center;
            padding: 2.5% 0;
        }

        .changeData {
            height: 100%;
            width: 20%;
            padding: 1.8% 0 0 0;
            margin-right: 1%;

            input {
                width: 100%;
                height: 70%;
            }
        }

        button {
            background-color: #1e9fff;
            border: 1px solid #1e9fff;
            color: #fff;
            height: 52%;
            width: 7%;
            margin-top: 1.5%;
        }
    }

    .oldList {
        height: 81.5%;
        width: 97%;
        margin-left: 1.3%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;

        .oldItem {
            width: 23.5%;
            height: 35%;
            background-color: skyblue;
            margin-right: 1.5%;
            margin-bottom: 1.5%;

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

.information {
    width: 9.2rem;
    height: 7.14rem;
    background-color: #063572;
    border: 1px solid #107DE5;
    border-radius: 10px;
    margin-top: 9%;
    margin-left: 2%;
    z-index: 11;

    .informationTop {
        width: 100%;
        height: 0.49rem;
        background-color: #063B80;
        border-radius: 10px 10px 0px 0px;
        p {
            font-size: .18rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            line-height: .49rem;
            text-align: center;
        }
    }

    .informationItem {
        width: 9rem;
        height: 1.78rem;
        background: rgba(6, 44, 98, 0.9);
        border-radius: 0px 10px 0px 10px;
        margin-left: 1%;
        margin-top: 1%;
        display: flex;
        flex-wrap: wrap;
        padding: 1% 0 1% 1.5%;

        .gcbh {
            width: 2.9rem;
            height: .4rem;
            background: #184080;
            border: 1px solid #00509A;
            display: flex;

            p {
                width: .64rem;
                height: .4rem;
                background: #063B80;
                font-size: .12rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #00D2FF;
                text-align: center;
                padding: 3.5% 0;
            }

            span {
                width: 2.26rem;
                height: 0.4rem;
                font-size: .12rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #98BBFF;
                padding: 3.5% 0 3.5% 2%;
            }

            .addA {
                background-color: #063470;
            }
        }
    }

    .informationFoot {
        width: 9rem;
        height: 4.51rem;
        background: rgba(6, 44, 98, 0.9);
        border-radius: 0px 10px 0px 10px;
        margin-left: 1%;
        margin-top: 1%;
        padding: 1% 1.8% 0 1.8%;
        overflow: auto;

        .allKuang {
            width: 100%;
            height: 0.24rem;
            display: flex;

            .kuang {
                width: 2.9rem;
                height: .24rem;
                background: rgba(0, 210, 255, 0.1);
                border: 1px solid #0270C2;

                p {
                    font-size: .12rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #98BBFF;
                    line-height: .24rem;
                    text-align: center;
                }

            }

            .addC {
                border: 1px solid #00D2FF;

                .addB {
                    color: #00D2FF;
                }
            }
        }

        .jiance {
            width: 100%;
            height: 1.8rem;
            border-left: 1px dashed #FFFFFF;
            margin-top: 1%;
            padding: 0 0 0 1%;

            p {
                font-size: .14rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #00FFA2;
            }

            .jianceItem {
                width: 100%;
                height: 0.28rem;
                margin-top: 0.5%;
                span {
                    color: #96b9fc;
                    font-size: .12rem;
                }

                p {
                    color: #96b9fc;
                    font-size: .12rem;
                }
            }

            .jianceImg {
                width: 100%;
                height: 1.19rem;
                margin-top: 1%;

                img {
                    width: 1.19rem;
                    height: 1.19rem;
                    margin-right: 1%;
                }
            }
        }
    }
}

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

    .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;
            background: #1E9FFF;
            height: 0.3rem;
            outline: none;
            border: none;
        }
    }

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

.layui-layer-page .layui-layer-content{
    height: calc(100% - 50px) !important;
}
.amap-info-content{
    padding: 0 !important;
    line-height: inherit !important;
    overflow: unset !important;
}

.map .amap-info-close{
    top: .15rem !important;
}

.viewer-transition{
    z-index: 9999999999 !important;
}
.layui-layer-shade{
    display: none !important;
}