<template>
|
<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>
|
<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>
|
<li>
|
<img src="../.././assets/images/map-pages/setting.png" alt="">
|
<span>暴雨红色预警</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
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 {
|
position: absolute;
|
z-index: 502;
|
bottom: .11979rem;
|
right: .14583rem;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
-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: 41rem;
|
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>
|
