<template>
|
<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">
|
|
<i class="el-icon-more-outline"></i>
|
<span>图例</span>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
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 {
|
position: absolute;
|
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>
|
