警情动态地图弹窗修改

shuishen

2023-01-07 e03f6e1ab619d55a465ceb721faf3a5f21dc43bf

警情动态地图弹窗修改

 src/components/map/components/mapPopup.vue

@@ -2,7 +2,7 @@
    <div>
        <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
            <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
                <div class="divForms divForms-theme">
                <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
                    <div class="divForms-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
@@ -122,15 +122,30 @@
    data () {
        return {
            currentBtn: '接警信息',
            CJdata: {}
            CJdata: {},
            scaleDomFlag: false
        }
    },

    inject: ["getWidth"],

    computed: {
        ...mapGetters([
            'detailsPopup',
            'dataPopup'
        ])
    },

    mounted () {

        if (this.getWidth() > 7000) {
            this.scaleDomFlag = true
        } else {
            this.scaleDomFlag = false
        }

    },

    methods: {
        closePopup () {
            this.currentBtn = '接警信息'
@@ -158,6 +173,11 @@
    position: fixed;
    left: 0;
    z-index: 1 !important;

    .scale-dom {
        transform: scale(3);
        transform-origin: left;
    }
}

.divForms .arrow {

 src/styles/media/index.scss

@@ -2386,94 +2386,6 @@
                    }
                }
            }

            #divFormsDomBox {
                .divForms {
                    .area {
                        min-width: countSizeVw(360, 1920);
                    }

                    .b-t {
                        left: countSizeVh(44);
                        height: countSizeVh(1);
                    }

                    .b-r {
                        bottom: countSizeVh(44);
                        width: countSizeVh(1);
                    }

                    .b-l {
                        top: countSizeVh(44);
                        width: countSizeVh(1);
                    }

                    .b-b {
                        right: countSizeVh(44);
                        height: countSizeVh(1);
                    }

                    .b-b-r {
                        width: countSizeVh(1);
                        height: countSizeVh(62);
                        transform: rotate(45deg) translate(countSizeVw(-52, 1920), countSizeVh(22));
                    }

                    .b-t-l {
                        width: countSizeVh(1);
                        height: countSizeVh(62);
                        transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVh(-22));
                    }

                    .label-content {
                        padding: countSizeVh(10) 0;
                    }


                    .label-wrap {
                        padding: 0 countSizeVw(12, 1920);
                        font-size: countSizeVh(16);

                        .title {
                            margin-top: countSizeVh(20);
                            padding: 0 countSizeVw(12, 1920) 0 countSizeVw(30, 1920);
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);

                            &::before {
                                bottom: countSizeVh(-4);
                                height: countSizeVh(2);
                            }

                            .close {
                                right: countSizeVw(5, 1920);
                            }

                            .close::before {
                                font-size: countSizeVh(16);
                            }
                        }
                    }

                }

                .divForms-theme .area {
                    background-image: linear-gradient(135deg,
                            transparent countSizeVh(30),
                            #1831a79a countSizeVh(30),
                            #3f487ba6 50%,
                            transparent 50%),
                        linear-gradient(-45deg,
                            transparent countSizeVh(30),
                            #1831a79a countSizeVh(30),
                            #3f487ba6 50.1%,
                            transparent 50%);
                }

                .divForms-wrap {
                    padding: countSizeVh(30) countSizeVw(30, 1920);
                }
            }
        }

        .option-css,