图例

chenzeping

2021-03-04 f2f4d1f92800150771aeea9bdd97852e05ba6237

图例

 src/components/panel/LegendPanel.vue

@@ -1,22 +1,154 @@
<template>
<div class="legend-panel">

  <div  class="legend-icon unactive">

    <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>
        </ul>
        <hr class="underLine"/>
        <p>降水等级</p>
        <ul>
          <li>
            <img src="../.././assets/images/map-pages/setting.png" alt="">
            <span>暴雨红色预警</span>
          </li>
        </ul>
      </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'LegendPanel'
  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;
@@ -28,6 +160,63 @@
  -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: 38rem;
    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>