From 1348c11eceeecc172e2a069b67e197de90aa5827 Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期四, 11 三月 2021 10:00:32 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/panel/LegendPanel.vue | 428 ++++++++++++++++++++++++++++++----------------------
1 files changed, 247 insertions(+), 181 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index caa82aa..a70ef75 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -4,157 +4,22 @@
<i class="el-icon-more-outline"></i>
<span>鍥句緥</span>
</div>
- <div class="legendContent" v-show="legendCont">
- <div class="legendContent_Centent">
- <p>棰勮</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>浼佷笟</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>姘存儏</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>绠＄嚎</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>鍙伴</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
- <hr class="underLine"/>
- <p>闄嶆按绛夌骇</p>
- <ul>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- <li>
- <img src="../.././assets/images/map-pages/setting.png" alt="">
- <span>鏆撮洦绾㈣壊棰勮</span>
- </li>
- </ul>
+ <transition name="fade">
+ <div class="legend-content" v-show="legendControl">
+ <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
+ <p>{{ item.title }}</p>
+ <ul>
+ <div v-for="(ite,inde) in item.items" :key="inde">
+ <li>
+ <img :src='ite.legendImage' alt=''>
+ <span>{{ ite.legendContent }}</span>
+ </li>
+ </div>
+ </ul>
+ <div :class="index === 5 ? '':'under-line'"></div>
+ </div>
</div>
- </div>
+ </transition>
</div>
</template>
@@ -164,17 +29,186 @@
data () {
return {
// 鎺у埗鍥句緥 鍐呭鐨� 鏄剧ず/闅愯棌
- legendCont: false
+ legendControl: false,
+ // 鍥鹃噷瀛樺偍鏁版嵁
+ legendContents: [
+ {
+ title: '棰勮',
+ items: [
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮洦绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮洦姗欒壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮洦榛勮壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮洦钃濊壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮绾㈣壊棰勮'
+ }
+ ]
+ },
+ {
+ title: '浼佷笟',
+ items: [
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '涓浗鐭冲寲'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '娌圭敯浼佷笟 '
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鐐煎寲浼佷笟'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '閿�鍞紒涓�'
+ }
+ ]
+ },
+ {
+ title: '姘存儏',
+ items: [
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '姘存枃绔�'
+ }
+ ]
+ },
+ {
+ title: '绠＄嚎',
+ items: [
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '澶╃劧姘旂绾�'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '澶╃劧姘斿満绔�'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鎴愬搧娌圭绾�'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鎴愬搧娌瑰満绔�'
+ }
+ ]
+ },
+ {
+ title: '鍙伴',
+ items: [
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鍙伴瀹炴祴涓績'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鍙伴瀹炴祴璺緞'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鍙伴棰勬祴涓績'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鍙伴棰勬祴璺緞'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鍙伴褰撳墠涓績'
+ }
+ ]
+ },
+ {
+ title: '闄嶆按绛夌骇(鍗曚綅锛歮m)',
+ items: [
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '灏忛洦0-5'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '涓洦5-10'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '澶ч洦10-20'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '鏆撮洦20-50'
+ },
+ {
+ legendImage: '../.././assets/images/map-pages/setting.png',
+ legendContent: '澶ф毚闆�50-100'
+ }
+ ]
+ }
+ ]
}
},
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
- if (this.legendCont === false) {
- this.legendCont = true
- } else {
- this.legendCont = false
- }
+ this.legendControl = !this.legendControl
}
}
}
@@ -196,57 +230,89 @@
.legend-icon {
width: 3.4rem;
height: 1.6rem;
- border-radius: .3rem;
+ border-radius: 0.3rem;
background: white;
text-align: center;
}
- .legendContent {
+ @keyframes bounce-in {
+ 0% {
+ transform: scale(0);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+
+ .fade-enter-active {
+ transform-origin: right bottom;
+ animation: bounce-in .5s;
+ }
+
+ .fade-leave-active {
+ transform-origin: right bottom;
+ animation: bounce-in .5s reverse;
+ }
+
+ .legend-content {
position: absolute;
- right: 8rem;
+ right: 0.3rem;
bottom: 3rem;
width: 30rem;
- height: 41rem;
border-radius: 1rem;
background: #3c7699;
- .legendContent_Centent {
- width: 100%;
- height: 100%;
+
+ .legend-content-box {
p {
text-align: center;
color: #ffffff;
font-size: 14px;
- display: block;
- margin-block-start: 1rem;
- margin-block-end: 0;
+ margin-block-start: 0.3rem;
+ margin-block-end: 0.2rem;
}
+
ul {
- padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
- width: 100%;
- li {
+ padding: 0;
+ padding-inline: 0;
+
+ div {
width: 25%;
- text-align: center;
- line-height: 1.5rem;
- img {
- vertical-align: middle !important;
- }
- span {
- font-size: 12px;
- color: white;
+ display: flex;
+ justify-content: center;
+ margin: 0.1rem 0;
+
+ li {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ margin-left: 15px;
+ margin-right: 15px;
+
+ img {
+ height: 18px;
+ width: 18px;
+ }
+
+ span {
+ width: 80px;
+ font-size: 12px;
+ color: white;
+ }
}
}
}
}
- .underLine {
- border: none;
- background: none;
- width: 100%;
+ .under-line {
height: 2px;
background: #7bc5ef;
+ margin-block-start: 0;
+ margin-block-end: 0;
}
}
}
--
Gitblit v1.8.0