From b7d6d49de386fd3eee4003b0b6ba504ac45cbaf3 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Thu, 14 Sep 2023 16:39:03 +0800
Subject: [PATCH] 社区弹窗修改
---
src/components/map/components/businessDataPopup.vue | 372 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 276 insertions(+), 96 deletions(-)
diff --git a/src/components/map/components/businessDataPopup.vue b/src/components/map/components/businessDataPopup.vue
index 211c200..a32f4e3 100644
--- a/src/components/map/components/businessDataPopup.vue
+++ b/src/components/map/components/businessDataPopup.vue
@@ -10,46 +10,55 @@
-->
<template>
<div>
- <div v-if="businessDataPopup" class="popup-dom" id="businessDataPopup">
- <div style="transform: translate(-50%, 0);">
- <!-- 样式自己修改 -->
- <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
- <div class="left">
- <div class="item">
- <div class="key">名称:</div>
- <div class="value">{{ businessDataPopupData.name
- }}</div>
+ <div v-if="businessDataPopup" class="divForms-dom" id="businessDataPopup">
+ <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
+ <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
+ <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>{{ businessDataPopupData.name }}</div>
+ </div>
+ <div class="item">
+ <div>类型:</div>
+ <div>{{ businessDataPopupData.third_level }}</div>
+ </div>
+ <div class="item">
+ <div>地址:</div>
+ <div>{{ businessDataPopupData.std_address }}</div>
+ </div>
+ <div class="item">
+ <div>经度:</div>
+ <div>{{ businessDataPopupData.lng }}</div>
+ </div>
+ <div class="item">
+ <div>经度:</div>
+ <div>{{ businessDataPopupData.lat }}</div>
+ </div>
+ <div class="item">
+ <div>图片:</div>
+ <div>暂无图片</div>
+ </div>
+ </div>
+ </div>
</div>
- <div class="item">
- <div class="key">类型:</div>
- <div class="value">{{
- businessDataPopupData.third_level
- }}</div>
- </div>
- <div class="item">
- <div class="key">地址:</div>
- <div class="value">{{
- businessDataPopupData.std_address
- }}</div>
- </div>
- <div class="item">
- <div class="key">经度:</div>
- <div class="value">{{ businessDataPopupData.lng
- }}</div>
- </div>
- <div class="item">
- <div class="key">纬度:</div>
- <div class="value">{{ businessDataPopupData.lat
- }}</div>
- </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
</div>
- <div class="right">
- <div class="img">
- 暂无图片
- </div>
- </div>
+ <div class="arrow"></div>
</div>
- <div class="bottom-arrow"></div>
</div>
</div>
</div>
@@ -86,86 +95,257 @@
},
methods: {
-
+ closePopup () {
+ this.$store.commit('SET_BUSINESSDATAPOPUP', false)
+ },
}
}
</script>
<style lang="scss" scoped>
-.popup-dom {
+.divForms-dom {
position: fixed;
- top: -26px;
left: 0;
z-index: 1 !important;
-
- &>.popup-box {
- position: relative;
- }
-
- .bottom-arrow {
- position: absolute;
- left: 50%;
- bottom: 0px;
- width: 0;
- height: 0;
- border: 10px solid transparent;
- border-top-color: $bg-color;
- transform: translate(-50%, 100%);
- }
.scale-dom {
transform: scale(3);
transform-origin: left;
}
+}
- .content {
- padding: 0.5vh;
- width: 520px;
- background: $bg-color;
- border-radius: 4px;
- color: #fff;
+.divForms .arrow {
+ position: absolute;
+ bottom: 50%;
+ 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,
+ #1831a79a 30px,
+ #3f487ba6 50%,
+ transparent 50%),
+ linear-gradient(-45deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50.1%,
+ transparent 50%);
+}
+
+.divForms .area {
+ position: relative;
+ min-width: 360px;
+}
+
+.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;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+
+ .change-btn {
+ margin-top: 6px;
display: flex;
align-items: center;
- justify-content: left;
+ justify-content: space-around;
- .left {
- width: 300px;
- margin-left: 10px;
-
- .item {
- display: flex;
- text-align: left;
- line-height: 20px;
-
- .key {
- width: 50px;
- }
-
- .value {
- width: 0;
- flex: 1;
- }
- }
+ &>div {
+ width: 36%;
+ height: 36px;
+ line-height: 36px;
+ cursor: pointer;
}
- .right {
- height: 100%;
- width: 0;
- flex: 1;
- padding: 10px;
-
- .img {
- width: 100%;
- height: 120px;
- border: 1px solid #eee;
- border-radius: 2px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
+ &>div.on {
+ color: #3d95f3;
+ border-bottom: 2px solid #3d95f3;
}
-
}
+ .label-content {
+ padding: 10px 0;
+
+ .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: 112px;
+ text-align: justify;
+ display: inline-block;
+ text-align-last: justify;
+ margin-right: 20px;
+ }
+
+ &>div:nth-of-type(2) {
+ width: calc(100% - 120px);
+ max-width: 190px;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+ // white-space: nowrap;
+ }
+
+ }
+
+ .item:nth-of-type(3) {
+ height: 90px;
+
+ &>div:nth-of-type(2) {
+ word-wrap: break-word;
+ white-space: break-spaces;
+ width: 190px;
+ }
+ }
+ }
+
+ .label-content.no-data {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 240px;
+ }
+}
+
+.divForms .title {
+ position: relative;
+ margin-top: 20px;
+ padding: 0 12px 0 30px;
+ height: 36px;
+ line-height: 36px;
+
+ .details-btn {
+ position: absolute;
+ top: 0;
+ right: 28px;
+ height: 100%;
+ cursor: pointer;
+
+ span {
+ font-size: 14px;
+ }
+ }
+
+ .details-btn:hover {
+ color: #3d95f3;
+ }
+
+ .close {
+ position: absolute;
+ right: 5px;
+ top: 0;
+ }
+
+ .close::before {
+ font-family: element-icons;
+ content: '\e6db';
+ cursor: pointer;
+ font-size: 16px;
+ }
+
+ .close:hover::before {
+ color: #3d95f3;
+ }
+}
+
+.divForms-theme .title {
+ background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
+}
+
+.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;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3