| | |
| | | <div class="legend-panel"> |
| | | |
| | | <transition name="fade"> |
| | | <div class="legend-content map-background" v-show="legendControl"> |
| | | <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> |
| | |
| | | </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> |
| | |
| | | // 图标 控制内容的展示与隐藏 |
| | | 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') |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style lang="less" > |
| | | @import '@assets/css/map/_map-variable'; |
| | | @import '@assets/css/map/map-elem-ui'; |
| | | .legend-panel { |
| | | position: absolute; |
| | | z-index: 502; |
| | |
| | | background: @background-color; |
| | | margin-top: .04167rem; |
| | | cursor: pointer; |
| | | color: @color; |
| | | //color: @color; |
| | | margin-left: auto; |
| | | font-size: 0.08333rem; |
| | | } |