添加工具栏功能

chenzeping

2021-03-08 17e7836b1d0a7bd1a51d44ae071a88423a9f9370

 src/components/panel/LegendPanel.vue

@@ -4,7 +4,7 @@
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>
    <transition name="fade">
    <`transition` name="fade">
      <div class="legend-content" v-show="legendControl">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
@@ -241,12 +241,14 @@
  @keyframes bounce-in {
    0% {
      transform: scale(0);
      opacity: 0.3;
    }
    //50% {
    //  transform: scale(1.1);
    //}
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

@@ -256,13 +258,15 @@
  }

  .fade-leave-active {
    //transform-origin: right;
    //animation: bounce-in 1s reverse;
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
  }

  .legend-content {
    position: absolute;
    right: 8rem;
    right: 1rem;
    bottom: 3rem;
    width: 30rem;
    height: 30rem;
@@ -299,7 +303,6 @@
          span {
            font-size: 12px;
            color: white;
            //width: 80%;
          }
        }
      }
@@ -311,10 +314,6 @@
      margin-block-start: 0.5rem;
      margin-block-end: 0;
    }

    //.under-line:last-child {
    //  display: none;
    //}
  }
}
</style>