From 4d0106c11dba9e86e7d022a61bf625cba1d5cf66 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期四, 04 三月 2021 15:48:16 +0800
Subject: [PATCH] 修改管网先tooltip样式
---
src/components/panel/LegendPanel.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++----------
src/components/helpers/ServiceLayerHelper.js | 2 +-
2 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index c10bef6..d0c1599 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -141,7 +141,7 @@
name = layer.feature.properties.name
}
return name
- }, { direction: 'bottom', offset: [0, 10] })
+ }, { direction: 'bottom', offset: [0, 15], sticky: true })
.on('mouseover', function (e) {
const layer = e.layer
const type = e.layer.feature.geometry.type
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 17431e4..59f982a 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,33 +1,67 @@
<template>
-<div class="legend-panel">
+ <div class="legend-panel">
+ <div class="legend-box" v-if="isShow">
+ <div v-for="item in legendList" :key="item.title">
+ <div class="legend-title">{{ item.title }}</div>
+ <div class="legend-group" v-for="itm in item.details" :key="itm.label">
+ <div class="legend-group-icon"></div>
+ <div class="legend-group-label">{{ itm.label }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="legend-icon unactive" @click="toggle">
- <div class="legend-icon unactive">
+ <i class="el-icon-more-outline"></i>
+ <span>鍥句緥</span>
+ </div>
- <i class="el-icon-more-outline"></i>
- <span >鍥句緥</span>
</div>
-</div>
</template>
<script>
export default {
- name: 'LegendPanel'
+ name: 'LegendPanel',
+ data () {
+ return {
+ isShow: false,
+ legendList: [
+ {
+ title: '姹￠洦姘寸缃�',
+ details: [
+ {
+ icon: '/assets/images/map/涓夐��.png',
+ label: '绠＄嚎'
+ }
+ ]
+ }
+ ]
+ }
+ },
+ methods: {
+ toggle () {
+ this.isShow = !this.isShow
+ }
+ }
}
</script>
<style lang="less" scoped>
-.legend-panel{
+.legend-panel {
position: absolute;
- z-index: 502;
- bottom: .11979rem;
- right: .14583rem;
+ z-index: 1000;
+ color: white;
+ //bottom: .11979rem;
+ bottom: 4rem;
+ //right: .14583rem;
+ right: 20rem;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
+
}
</style>
--
Gitblit v1.8.0