From f2f4d1f92800150771aeea9bdd97852e05ba6237 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期四, 04 三月 2021 17:49:25 +0800
Subject: [PATCH] 图例
---
src/components/panel/LegendPanel.vue | 211 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 200 insertions(+), 11 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 17431e4..3d8b99c 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,23 +1,155 @@
<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>
+ <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>
+ </ul>
+ <hr class="underLine"/>
+ <p>闄嶆按绛夌骇</p>
+ <ul>
+ <li>
+ <img src="../.././assets/images/map-pages/setting.png" alt="">
+ <span>鏆撮洦绾㈣壊棰勮</span>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
-</div>
</template>
<script>
export default {
- name: 'LegendPanel'
+ name: 'LegendPanel',
+ data () {
+ return {
+ // 鎺у埗鍥句緥 鍐呭鐨� 鏄剧ず/闅愯棌
+ legendCont: false
+ }
+ },
+ methods: {
+ // 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
+ legendChange () {
+ if (this.legendCont === false) {
+ this.legendCont = true
+ } else {
+ this.legendCont = false
+ }
+ }
+ }
}
</script>
<style lang="less" scoped>
-
-.legend-panel{
+.legend-panel {
position: absolute;
z-index: 502;
bottom: .11979rem;
@@ -28,6 +160,63 @@
-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;
+ }
+
+ .legendContent {
+ position: absolute;
+ right: 8rem;
+ bottom: 3rem;
+ width: 30rem;
+ height: 38rem;
+ border-radius: 1rem;
+ background: #3c7699;
+
+ .legendContent_Centent {
+ width: 100%;
+ height: 100%;
+ p {
+ text-align: center;
+ color: #ffffff;
+ font-size: 14px;
+ display: block;
+ margin-block-start: 1rem;
+ margin-block-end: 0;
+ }
+ ul {
+ padding: 0;
+ list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ li {
+ width: 25%;
+ text-align: center;
+ line-height: 1.5rem;
+ img {
+ vertical-align: middle !important;
+ }
+ span {
+ font-size: 12px;
+ color: white;
+ }
+ }
+ }
+ }
+
+ .underLine {
+ border: none;
+ background: none;
+ width: 100%;
+ height: 2px;
+ background: #7bc5ef;
+ }
+ }
+}
</style>
--
Gitblit v1.8.0