派生自 wuyushui/SewerAndRainNetwork
src/components/panel/LegendPanel.vue
@@ -1,26 +1,27 @@ <template> <div class="legend-panel"> <div class="legend-icon unactive" @click="legendChange()"> <i class="el-icon-more-outline"></i> <span>图例</span> </div> <transition name="fade"> <div class="legend-content" v-show="legendControl"> <div class="legend-content-centent" v-for="(item,index) in legendContents" :key="index"> <p>{{ item.title }}</p> <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> <li v-for="(ite,inde) in item.items" :key="inde"> <img :src='ite.legendImage' alt=''> <span>{{ ite.legendContent }}</span> </li> </ul> <div :class="index === 5 ? '':'under-line'"></div> </div> </div> </transition> <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> </div> </el-tooltip> </div> </template> <script> export default { name: 'LegendPanel', @@ -31,75 +32,6 @@ // 图里存储数据 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: '暴雨蓝色预警' }, { 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: '暴风红色预警' }, { 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: '暴风红色预警' }, { legendImage: '../.././assets/images/map-pages/setting.png', legendContent: '暴风红色预警' }, { legendImage: '../.././assets/images/map-pages/setting.png', legendContent: '暴风红色预警' } ] }, { title: '企业', items: [ { @@ -108,7 +40,7 @@ }, { legendImage: '../.././assets/images/map-pages/setting.png', legendContent: '油田企业' legendContent: '油田企业 ' }, { legendImage: '../.././assets/images/map-pages/setting.png', @@ -206,17 +138,14 @@ methods: { // 图标 控制内容的展示与隐藏 legendChange () { if (this.legendControl === false) { this.legendControl = true } else { this.legendControl = false } this.legendControl = !this.legendControl } } } </script> <style lang="less" scoped> <style lang="less"> @import '@assets/css/map/_map-variable'; .legend-panel { position: absolute; z-index: 502; @@ -227,23 +156,41 @@ flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; //align-items: flex-end; transition: all .5s; .legend-icon { width: 3.4rem; height: 1.6rem; border-radius: .3rem; background: white; .legend-btn { width: .2rem; height: .2rem; //font-size: .08333rem; border: .00521rem solid @background-color-light; border-radius: @border-radius; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: @background-color; margin-top: .04167rem; cursor: pointer; //color: @color; margin-left: auto; font-size: 0.08333rem; } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0.3; } 50% { transform: scale(1.2); } 100% { transform: scale(1); @@ -252,65 +199,82 @@ } .fade-enter-active { transform-origin: right center; animation: bounce-in 1s; transform-origin: right bottom; animation: bounce-in .2s; } .fade-leave-active { transform-origin: right; animation: bounce-in 1s reverse; transform-origin: right bottom; animation: bounce-in .2s reverse; } .legend-content { position: absolute; right: 1rem; bottom: 3rem; width: 30rem; height: 30rem; border-radius: 1rem; background: #3c7699; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; .legend-content-centent { width: -webkit-max-content; width: -moz-max-content; width: max-content; overflow: hidden; min-height: 1.28646rem; .legend-content-box { font-size: 0.07292rem; padding: .10417rem; border-left: .00521rem solid @background-color-split; p { text-align: center; color: #ffffff; font-size: 14px; margin: 0 !important; //padding: 0; //color: @color-title; -webkit-margin-before: 0.3rem; margin-block-start: 0.3rem; -webkit-margin-after: 0.2rem; margin-block-end: 0.2rem; margin-bottom: 0.05208rem !important; span { color: @color-title; font-size: .08333rem; font-weight: 600; } } ul { list-style: none; display: flex; flex-wrap: wrap; padding-inline: 20px 0; margin-block: 0; margin: 0 !important; padding: 0 !important;; padding-inline: 0; font-size: .08333rem; li { width: 25%; height: 1.5rem; list-style: none; display: flex; -webkit-box-align: center; align-items: center; margin: 0.05208rem 0; img { height: 18px; width: 18px; width: .08333rem; height: .08333rem; margin-right: .01042rem; } span { font-size: 12px; color: white; color: @color; } } } } .under-line { height: 2px; background: #7bc5ef; margin-block-start: 0.5rem; margin-block-end: 0; } } } </style>
