From 17e7836b1d0a7bd1a51d44ae071a88423a9f9370 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 08 三月 2021 17:57:16 +0800
Subject: [PATCH] 添加工具栏功能

---
 src/components/panel/LegendPanel.vue |   38 ++++++++++++++++++--------------------
 1 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index bd2c37f..70529c2 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -4,9 +4,9 @@
       <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-centent" v-for="(item,index) in legendContents" :key="index">
+        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
           <p>{{ item.title }}</p>
           <ul>
             <li v-for="(ite,inde) in item.items" :key="inde">
@@ -206,11 +206,12 @@
   methods: {
     // 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
     legendChange () {
-      if (this.legendControl === false) {
-        this.legendControl = true
-      } else {
-        this.legendControl = false
-      }
+      // if (this.legendControl === false) {
+      //   this.legendControl = true
+      // } else {
+      //   this.legendControl = false
+      // }
+      this.legendControl = !this.legendControl
     }
   }
 }
@@ -242,9 +243,9 @@
       transform: scale(0);
       opacity: 0.3;
     }
-    50% {
-      transform: scale(1.2);
-    }
+    //50% {
+    //  transform: scale(1.1);
+    //}
     100% {
       transform: scale(1);
       opacity: 1;
@@ -252,13 +253,15 @@
   }
 
   .fade-enter-active {
-    transform-origin: right center;
-    animation: bounce-in 1s;
+    transform-origin: right bottom;
+    animation: bounce-in .5s;
   }
 
   .fade-leave-active {
-    transform-origin: left center;
-    animation: bounce-in 1s reverse;
+    //transform-origin: right;
+    //animation: bounce-in 1s reverse;
+    transform-origin: right bottom;
+    animation: bounce-in .5s reverse;
   }
 
   .legend-content {
@@ -270,7 +273,7 @@
     border-radius: 1rem;
     background: #3c7699;
 
-    .legend-content-centent {
+    .legend-content-box {
       p {
         text-align: center;
         color: #ffffff;
@@ -300,7 +303,6 @@
           span {
             font-size: 12px;
             color: white;
-            //width: 80%;
           }
         }
       }
@@ -312,10 +314,6 @@
       margin-block-start: 0.5rem;
       margin-block-end: 0;
     }
-
-    //.under-line:last-child {
-    //  display: none;
-    //}
   }
 }
 </style>

--
Gitblit v1.8.0