From 71a7d1da8a740f1579a8d9f658182e6f9d2e116a Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 15 Nov 2022 14:44:53 +0800
Subject: [PATCH] 弹窗样式内容
---
src/components/map/components/mapPopup.vue | 104 ++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 97 insertions(+), 7 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index f771936..520a729 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3