From 5aa25a940faf7deb4c1e292e72a7eaa195ea73c7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 13 Feb 2023 14:43:33 +0800
Subject: [PATCH] 警情动态弹框调整
---
src/components/map/components/mapPopup.vue | 59 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 37 insertions(+), 22 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index b97a42f..aa63c3b 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -14,13 +14,21 @@
<div class="label-wrap">
<div class="title">
警情信息
- <div class="details-btn" @click="popupDetailShow">详情>>></div>
+ <div class="details-btn" @click="popupDetailShow">
+ 详情
+ <span>>>></span>
+ </div>
<div class="close" @click="closePopup" title="关闭"></div>
</div>
<div class="change-btn" v-show="showBtn">
- <div @click="currentBtn = '接警信息'" :class="{ on: currentBtn == '接警信息' }">接警信息</div>
- <div @click="currentBtnChange('出警信息')" :class="{ on: currentBtn == '出警信息' }">出警信息
- </div>
+ <div
+ @click="currentBtn = '接警信息'"
+ :class="{ on: currentBtn == '接警信息' }"
+ >接警信息</div>
+ <div
+ @click="currentBtnChange('出警信息')"
+ :class="{ on: currentBtn == '出警信息' }"
+ >出警信息</div>
</div>
<div v-show="currentBtn == '接警信息'" class="label-content">
@@ -62,8 +70,10 @@
</div>
</div>
- <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) != '{}'"
- class="label-content">
+ <div
+ v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) != '{}'"
+ class="label-content"
+ >
<div class="item">
<div>处警单位:</div>
<div>{{ CJdata.CJDWMC }}</div>
@@ -102,10 +112,10 @@
</div>
</div>
- <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) == '{}'"
- class="label-content no-data">
- 暂无数据
- </div>
+ <div
+ v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) == '{}'"
+ class="label-content no-data"
+ >暂无数据</div>
</div>
</div>
<div class="b-t-l"></div>
@@ -208,16 +218,20 @@
}
.divForms-theme .area {
- background-image: linear-gradient(135deg,
+ background-image: linear-gradient(
+ 135deg,
transparent 30px,
#1831a79a 30px,
#3f487ba6 50%,
- transparent 50%),
- linear-gradient(-45deg,
+ transparent 50%
+ ),
+ linear-gradient(
+ -45deg,
transparent 30px,
#1831a79a 30px,
#3f487ba6 50.1%,
- transparent 50%);
+ transparent 50%
+ );
}
.divForms .area {
@@ -310,14 +324,14 @@
align-items: center;
justify-content: space-around;
- &>div {
+ & > div {
width: 36%;
height: 36px;
line-height: 36px;
cursor: pointer;
}
- &>div.on {
+ & > div.on {
color: #3d95f3;
border-bottom: 2px solid #3d95f3;
}
@@ -335,7 +349,7 @@
margin: 0 10px;
text-align: left;
- &>div:first-child {
+ & > div:first-child {
width: 112px;
text-align: justify;
display: inline-block;
@@ -343,7 +357,7 @@
margin-right: 20px;
}
- &>div:nth-of-type(2) {
+ & > div:nth-of-type(2) {
width: calc(100% - 120px);
max-width: 190px;
overflow: hidden;
@@ -351,7 +365,6 @@
white-space: nowrap;
}
}
-
}
.label-content.no-data {
@@ -375,6 +388,10 @@
right: 28px;
height: 100%;
cursor: pointer;
+
+ span {
+ font-size: 14px;
+ }
}
.details-btn:hover {
@@ -400,9 +417,7 @@
}
.divForms-theme .title {
- background-image: linear-gradient(135deg,
- transparent 25px,
- #1c309e9a 25px);
+ background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
}
.divForms-theme .arrow,
--
Gitblit v1.9.3