From 027d237a54bd813b811f77bec4d778be543c2a6d Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期五, 05 三月 2021 14:53:09 +0800
Subject: [PATCH] 图例内容/效果实现
---
src/components/panel/LegendPanel.vue | 308 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 297 insertions(+), 11 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 17431e4..f037a64 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,23 +1,223 @@
<template>
-<div class="legend-panel">
-
- <div class="legend-icon unactive">
-
- <i class="el-icon-more-outline"></i>
- <span >鍥句緥</span>
+ <div class="legend-panel">
+ <div class="legend-icon unactive" @click="legendChange()">
+ <i class="el-icon-more-outline"></i>
+ <span>鍥句緥</span>
+ </div>
+ <transition name="fade">
+ <div class="legend-content" v-show="legendControl">
+ <div class="legend-content-centent" v-for="(item,index) in legendContents" :key="index">
+ <p>{{ item.title }}</p>
+ <ul>
+ <li v-for="(ite,inde) in item.items" :key="inde">
+ <img :src='ite.legendImage' alt=''>
+ <span>{{ ite.legendContent }}</span>
+ </li>
+ </ul>
+ <div :class="index === 5 ? '':'under-line'"></div>
+ </div>
+ </div>
+ </transition>
</div>
-</div>
</template>
<script>
export default {
- name: 'LegendPanel'
+ name: 'LegendPanel',
+ data () {
+ return {
+ // 鎺у埗鍥句緥 鍐呭鐨� 鏄剧ず/闅愯棌
+ 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.legendControl === false) {
+ this.legendControl = true
+ } else {
+ this.legendControl = false
+ }
+ }
+ }
}
</script>
<style lang="less" scoped>
-
-.legend-panel{
+.legend-panel {
position: absolute;
z-index: 502;
bottom: .11979rem;
@@ -28,6 +228,92 @@
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-}
+ .legend-icon {
+ width: 3.4rem;
+ height: 1.6rem;
+ border-radius: .3rem;
+ background: white;
+ text-align: center;
+ }
+
+ @keyframes bounce-in {
+ 0% {
+ transform: scale(0);
+ }
+ 50% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ .fade-enter-active {
+ transform-origin: left center;
+ animation: bounce-in 1s;
+ }g
+
+ .fade-leave-active {
+ transform-origin: left center;
+ animation: bounce-in 1s reverse;
+ }
+
+ .legend-content {
+ position: absolute;
+ right: 8rem;
+ bottom: 3rem;
+ width: 30rem;
+ height: 30rem;
+ border-radius: 1rem;
+ background: #3c7699;
+
+ .legend-content-centent {
+ p {
+ text-align: center;
+ color: #ffffff;
+ font-size: 14px;
+ margin-block-start: 0.3rem;
+ margin-block-end: 0.2rem;
+ }
+
+ ul {
+ list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ padding-inline: 20px 0;
+ margin-block: 0;
+
+ li {
+ width: 25%;
+ height: 1.5rem;
+ display: flex;
+ align-items: center;
+
+ img {
+ height: 18px;
+ width: 18px;
+ }
+
+ span {
+ font-size: 12px;
+ color: white;
+ //width: 80%;
+ }
+ }
+ }
+ }
+
+ .under-line {
+ height: 2px;
+ background: #7bc5ef;
+ margin-block-start: 0.5rem;
+ margin-block-end: 0;
+ }
+
+ //.under-line:last-child {
+ // display: none;
+ //}
+ }
+}
</style>
--
Gitblit v1.8.0