From 8f5efe744e24eb586ff07932108c7ed7f39bf039 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 05 Jan 2023 11:49:47 +0800
Subject: [PATCH] 样式修改
---
src/components/map/components/mapPopup.vue | 487 +++++++++++++++++++++++++-----------------------------
1 files changed, 226 insertions(+), 261 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 5a02564..0e1e7d9 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,71 +1,69 @@
<template>
<div>
- <div v-if="detailsPopup" id="divFormsDomBox" class="container">
- <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 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-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="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 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 class="b-t-l"></div>
- <div class="b-b-r"></div>
</div>
- <div class="arrow"></div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
</div>
+ <div class="arrow"></div>
</div>
</div>
</div>
@@ -91,222 +89,189 @@
</script>
<style lang="scss" scoped>
-.container {
+// .item {
+// display: flex;
+// flex-direction: row;
+// width: calc(100% - 20px);
+// height: 30px;
+// line-height: 30px;
+// 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);
+// }
+// }
+
+.divForms-dom {
position: fixed;
left: 0;
z-index: 1 !important;
- width: 280px;
- height: 360px;
- // background: $bg-color;
+}
+
+.divForms .arrow {
+ position: absolute;
+ bottom: 50%;
+ left: -8px;
+ width: 45px;
+ height: 2px;
+ transform: rotate(-45deg);
+ background-color: #28bbf0;
+}
+
+.divForms-theme .area {
+ background-image: linear-gradient(135deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50%,
+ transparent 50%),
+ linear-gradient(-45deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50.1%,
+ transparent 50%);
+}
+
+.divForms .area {
+ position: relative;
+ min-width: 420px;
+}
+
+.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: #1831a7;
+ box-shadow: 0 0 10px 2px #1831a7;
+}
+
+.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;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-self: flex-start;
- align-content: flex-start;
- .title {
- height: 40px;
- line-height: 42px;
- width: 100%;
- position: relative;
- background-image: linear-gradient(
- 135deg,
- transparent 25px,
- #29baf1 25px
- );
- .close {
- position: absolute;
- right: 5px;
- top: -2px;
- }
- .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: 30px;
- line-height: 30px;
- margin: 0 10px;
- text-align: left;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+}
- & > div:first-child {
- width: 100px;
- text-align: justify;
- display: inline-block;
- text-align-last: justify;
- margin-right: 20px;
- }
+.divForms .title {
+ position: relative;
+ margin-top: 20px;
+ padding: 0 12px 0 30px;
+ height: 36px;
+ line-height: 36px;
- & > div:nth-of-type(2) {
- width: calc(100% - 120px);
- }
- }
-
- .divForms-dom {
- position: fixed;
- left: 0;
- z-index: 1 !important;
- }
- .box {
- width: 100%;
- height: 100%;
- transform: translate(0, 25%);
- }
-
- .divForms .arrow {
+ .close {
position: absolute;
- bottom: 40%;
- left: 0;
- width: 45px;
- height: 2px;
- transform: rotate(-45deg) translate(5px, -15px);
- background-color: #28bbf0;
+ right: 5px;
+ top: -2px;
}
- .divForms-theme .area {
- background-image: linear-gradient(
- 135deg,
- transparent 30px,
- #1831a79a 30px,
- #3f487ba6 50%,
- transparent 50%
- ),
- linear-gradient(
- -45deg,
- transparent 30px,
- #1831a79a 30px,
- #3f487ba6 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: #1831a7;
- box-shadow: 0 0 10px 2px #1831a7;
- }
-
- .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;
+ .close::before {
+ font-family: element-icons;
+ content: '\e6db';
+ cursor: pointer;
font-size: 16px;
- white-space: nowrap;
- overflow: hidden;
}
- .divForms-theme .title {
- background-image: linear-gradient(
- 135deg,
+ .close:hover::before {
+ color: #3d95f3;
+ }
+}
+
+.divForms-theme .title {
+ background-image: linear-gradient(135deg,
transparent 25px,
- #1c309e9a 25px
- );
- }
+ #1c309e9a 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 .label-content {
- padding: 4px 0;
- }
+.divForms-theme .arrow,
+.divForms-theme .title::before {
+ background-color: #1c309e;
+}
- .divForms-theme .arrow,
- .divForms-theme .title::before {
- background-color: #1c309e;
- }
-
- .divForms .title::before {
- content: '';
- position: absolute;
- bottom: -4px;
- left: 0;
- right: 0;
- z-index: 10;
- height: 2px;
- }
+.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