From cda4dbbbd4795faeecbca5b3250c963c338a2f8d Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 05 Dec 2022 13:51:46 +0800
Subject: [PATCH] 1
---
src/components/map/components/mapPopup.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 229 insertions(+), 40 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 520a729..a076363 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,41 +1,72 @@
<template>
<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 v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
+ <div class="box">
+ <div class="divForms divForms-theme">
+ <div class="divForms-wrap">
+ <div class="area">
+ <div class="arrow-lt"></div>
+ <div class="b-t"></div>
+ <div class="b-r"></div>
+ <div class="b-b"></div>
+ <div class="b-l"></div>
+ <div class="arrow-rb"></div>
+ <div class="label-wrap">
+ <div class="title">
+ 详细信息
+ <div class="close" @click="closePopup" title="关闭"></div>
+ </div>
+ <div class="label-content">
+ <div class="item">
+ <div>警情类别:</div>
+ <div>{{dataPopup.type}}</div>
+ </div>
+ <div class="item">
+ <div>接警时间:</div>
+ <div>{{dataPopup.dealTime}}</div>
+ </div>
+ <div class="item">
+ <div>警情状态:</div>
+ <div>{{dataPopup.state}}</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.comingPhone}}</div>
+ </div>
+ <div class="item">
+ <div>报警人联系人:</div>
+ <div>{{dataPopup.callPhone}}</div>
+ </div>
+ <div class="item">
+ <div>所属派出所:</div>
+ <div>{{dataPopup.policeName}}</div>
+ </div>
+ <div class="item">
+ <div>经度:</div>
+ <div>{{ dataPopup.position[0] }}</div>
+ </div>
+ <div class="item">
+ <div>纬度:</div>
+ <div>{{ dataPopup.position[1] }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -66,7 +97,7 @@
z-index: 1 !important;
width: 280px;
height: 360px;
- background: $bg-color;
+ // background: $bg-color;
color: #fff;
display: flex;
flex-direction: row;
@@ -75,13 +106,18 @@
align-content: flex-start;
.title {
height: 40px;
- line-height: 30px;
+ line-height: 42px;
width: 100%;
position: relative;
+ background-image: linear-gradient(
+ 135deg,
+ transparent 25px,
+ #29baf1 25px
+ );
.close {
position: absolute;
right: 5px;
- top: -5px;
+ top: -2px;
}
.close::before {
font-family: element-icons;
@@ -97,8 +133,8 @@
display: flex;
flex-direction: row;
width: calc(100% - 20px);
- height: 36px;
- line-height: 36px;
+ height: 30px;
+ line-height: 30px;
margin: 0 10px;
text-align: left;
@@ -115,4 +151,157 @@
}
}
}
+.divForms-dom {
+ position: fixed;
+ left: 0;
+ z-index: 1 !important;
+}
+.box {
+ width: 100%;
+ height: 100%;
+ transform: translate(0, 25%);
+}
+
+.divForms .arrow {
+ position: absolute;
+ bottom: 40%;
+ left: 0;
+ width: 45px;
+ height: 2px;
+ transform: rotate(-45deg) translate(5px, -15px);
+ background-color: #28bbf0;
+}
+
+.divForms-theme .area {
+ background-image: linear-gradient(
+ 135deg,
+ transparent 30px,
+ #28bbf09a 30px,
+ #28bbf0a6 50%,
+ transparent 50%
+ ),
+ linear-gradient(
+ -45deg,
+ transparent 30px,
+ #28bbf09a 30px,
+ #28bbf0a6 50.1%,
+ transparent 50%
+ );
+}
+
+.divForms .area {
+ position: relative;
+ min-width: 320px;
+}
+
+.divForms-wrap {
+ position: relative;
+ overflow: hidden;
+ padding: 30px;
+}
+
+.divForms-theme .b-b,
+.divForms-theme .b-b-r,
+.divForms-theme .b-l,
+.divForms-theme .b-r,
+.divForms-theme .b-t,
+.divForms-theme .b-t-l {
+ background-color: #29baf1;
+ box-shadow: 0 0 10px 2px #29baf1;
+}
+
+.divForms .b-t {
+ position: absolute;
+ top: 0;
+ left: 44px;
+ right: 0;
+ height: 1px;
+ z-index: 10;
+}
+
+.divForms .b-r {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 44px;
+ width: 1px;
+ z-index: 10;
+}
+
+.divForms .b-l {
+ position: absolute;
+ top: 44px;
+ left: 0;
+ bottom: 0;
+ width: 1px;
+ z-index: 10;
+}
+
+.divForms .b-b {
+ position: absolute;
+ left: 0;
+ right: 44px;
+ bottom: 0;
+ height: 1px;
+ z-index: 10;
+}
+
+.divForms .b-b-r {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 1px;
+ height: 62px;
+ transform: rotate(45deg) translate(-52px, 22px);
+ z-index: 10;
+}
+
+.divForms .b-t-l {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1px;
+ height: 62px;
+ transform: rotate(45deg) translate(52px, -22px);
+ z-index: 10;
+}
+
+.divForms .label-wrap {
+ padding: 0 12px;
+ color: #fff;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.divForms-theme .title {
+ background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
+}
+
+.divForms .title {
+ margin-top: 20px;
+ padding: 0 12px 0 30px;
+ height: 36px;
+ line-height: 36px;
+ position: relative;
+}
+
+.divForms .label-content {
+ padding: 4px 0;
+}
+
+.divForms-theme .arrow,
+.divForms-theme .title::before {
+ background-color: #28bbf0;
+}
+
+.divForms .title::before {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ height: 2px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3