弹窗样式内容

guanqb

2022-11-15 71a7d1da8a740f1579a8d9f658182e6f9d2e116a

 src/components/map/components/mapPopup.vue

@@ -1,6 +1,43 @@
<template>
    <div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="wwwwwwwww">55555555555</div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="container">
            <div class="title">
                详细信息
                <div class="close" @click="closePopup"></div>
            </div>
            <div class="item">
                <div>所属派出所:</div>
                <div>{{dataPopup.policeName}}</div>
            </div>
            <div class="item">
                <div>警情类别:</div>
                <div>{{dataPopup.type}}</div>
            </div>
            <div class="item">
                <div>警情状态:</div>
                <div>{{dataPopup.state}}</div>
            </div>
            <div class="item">
                <div>报警电话:</div>
                <div>{{dataPopup.comingPhone}}</div>
            </div>
            <div class="item">
                <div>接警时间:</div>
                <div>{{dataPopup.dealTime}}</div>
            </div>
            <div class="item">
                <div>经办民警:</div>
                <div>{{dataPopup.dealPolice}}</div>
            </div>
            <div class="item">
                <div>报警人:</div>
                <div>{{dataPopup.callPeople}}</div>
            </div>
            <div class="item">
                <div>报警人联系人:</div>
                <div>{{dataPopup.callPhone}}</div>
            </div>
        </div>
    </div>
</template>

@@ -10,19 +47,72 @@
    name: 'mapPopup',
    computed: {
        ...mapGetters([
            'detailsPopup'
            'detailsPopup',
            'dataPopup'
        ])
    },
    methods: {
        closePopup () {
            this.$store.commit('SET_DETAILSPOPUP', false)
        }
    }
}
</script>

<style>
.wwwwwwwww {
<style lang="scss" scoped>
.container {
    position: fixed;
    left: 0;
    z-index: 1 !important;
    width: 200px;
    height: 300px;
    background: red;
    width: 280px;
    height: 360px;
    background: $bg-color;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: flex-start;
    align-content: flex-start;
    .title {
        height: 40px;
        line-height: 30px;
        width: 100%;
        position: relative;
        .close {
            position: absolute;
            right: 5px;
            top: -5px;
        }
        .close::before {
            font-family: element-icons;
            content: '\e6db';
            cursor: pointer;
            font-size: 16px;
        }
        .close:hover::before {
            color: #3d95f3;
        }
    }
    .item {
        display: flex;
        flex-direction: row;
        width: calc(100% - 20px);
        height: 36px;
        line-height: 36px;
        margin: 0 10px;
        text-align: left;

        & > div:first-child {
            width: 100px;
            text-align: justify;
            display: inline-block;
            text-align-last: justify;
            margin-right: 20px;
        }

        & > div:nth-of-type(2) {
            width: calc(100% - 120px);
        }
    }
}
</style>