From b6c363cdc1ea55dbfc1dfdb6a7c27c8fc51fa0e2 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期五, 02 四月 2021 16:13:38 +0800
Subject: [PATCH] 右侧搜索栏统一修改标题。
---
src/components/panel/LegendPanel.vue | 180 ++++++++++++------------------------------------------------
1 files changed, 36 insertions(+), 144 deletions(-)
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 82c7db8..b3c4784 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,163 +1,51 @@
<template>
<div class="legend-panel">
-
<transition name="fade">
- <div class="legend-content map-background" v-show="legendControl">
- <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
- <p><span>{{ item.title }}</span></p>
- <div :class="index === 5 ? '':'map-under-line'"></div>
- <ul >
- <!-- <div >-->
- <li v-for="(ite,inde) in item.items" :key="inde">
+ <div :class="'legend-content map-background'" v-show="legendControl">
+ <div class="legend-content-box" v-for="(item,index) in serviceLayers" :key="index">
+ <p><span>{{ item.name }}</span></p>
+ <div class="map-under-line"></div>
+ <ul>
+ <li v-for="(ite,inde) in item.layers" :key="inde">
<img :src='ite.legendImage' alt=''>
- <span>{{ ite.legendContent }}</span>
+ <span>{{ ite.name }}</span>
</li>
-
- <!-- </div>-->
</ul>
-
</div>
</div>
</transition>
- <el-tooltip popper-class="map-tooltip" effect="dark" content="鍥句緥" placement="left">
- <div class="legend-btn" @click="legendChange()">
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鍥句緥" placement="left">
+ <div :class="this.legendControl?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
+ @click="legendChange()">
<i class="el-icon-more-outline"></i>
-<!-- <span>鍥句緥</span>-->
</div>
</el-tooltip>
-
</div>
</template>
-
<script>
export default {
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: '閿�鍞紒涓�'
- }
- ]
- },
- {
- 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'
- }
- ]
- }
- ]
+ legendControl: false
+ }
+ },
+ computed: {
+ serviceLayers () {
+ return this.$store.state.map.serviceLayers.LayerSewersLine
}
},
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
this.legendControl = !this.legendControl
- if (!this.legendControl) {
- return document.getElementsByTagName('legend-btn')[0].classList.add('btn-active')
- }
- return document.getElementsByTagName('legend-btn')[0].classList.remove('btn-active')
}
}
}
</script>
-<style lang="less" >
-@import '@assets/css/map/_map-variable';
-@import '@assets/css/map/map-elem-ui';
+<style lang="less">
.legend-panel {
position: absolute;
z-index: 502;
@@ -170,6 +58,7 @@
-ms-flex-align: end;
//align-items: flex-end;
transition: all .5s;
+
.legend-btn {
width: .2rem;
height: .2rem;
@@ -193,7 +82,7 @@
background: @background-color;
margin-top: .04167rem;
cursor: pointer;
- color: @color;
+ //color: @color;
margin-left: auto;
font-size: 0.08333rem;
}
@@ -239,6 +128,7 @@
font-size: 0.07292rem;
padding: .10417rem;
border-left: .00521rem solid @background-color-split;
+
p {
text-align: center;
margin: 0 !important;
@@ -249,6 +139,7 @@
-webkit-margin-after: 0.2rem;
margin-block-end: 0.2rem;
margin-bottom: 0.05208rem !important;
+
span {
color: @color-title;
font-size: .08333rem;
@@ -264,22 +155,23 @@
padding-inline: 0;
font-size: .08333rem;
- li {
- list-style: none;
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- margin: 0.05208rem 0;
- img {
- width: .08333rem;
- height: .08333rem;
- margin-right: .01042rem;
- }
+ li {
+ list-style: none;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ margin: 0.05208rem 0;
- span {
- color: @color;
- }
+ img {
+ width: .08333rem;
+ height: .08333rem;
+ margin-right: .01042rem;
}
+
+ span {
+ color: @color;
+ }
+ }
}
}
--
Gitblit v1.8.0