From f21ba60dd8cd2f9f021d579fe52325abd37f4af1 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期三, 10 三月 2021 17:27:34 +0800
Subject: [PATCH] 修改已知问题

---
 src/components/panel/LegendPanel.vue |   62 +++++++++++++++---------------
 1 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index 2bb4108..5412fae 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -9,10 +9,12 @@
         <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">
-              <img :src='ite.legendImage' alt=''>
-              <span>{{ ite.legendContent }}</span>
-            </li>
+            <div v-for="(ite,inde) in item.items" :key="inde">
+              <li>
+                <img :src='ite.legendImage' alt=''>
+                <span>{{ ite.legendContent }}</span>
+              </li>
+            </div>
           </ul>
           <div :class="index === 5 ? '':'under-line'"></div>
         </div>
@@ -108,7 +110,7 @@
             },
             {
               legendImage: '../.././assets/images/map-pages/setting.png',
-              legendContent: '娌圭敯浼佷笟'
+              legendContent: '娌圭敯浼佷笟      '
             },
             {
               legendImage: '../.././assets/images/map-pages/setting.png',
@@ -206,11 +208,6 @@
   methods: {
     // 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
     legendChange () {
-      // if (this.legendControl === false) {
-      //   this.legendControl = true
-      // } else {
-      //   this.legendControl = false
-      // }
       this.legendControl = !this.legendControl
     }
   }
@@ -233,7 +230,7 @@
   .legend-icon {
     width: 3.4rem;
     height: 1.6rem;
-    border-radius: .3rem;
+    border-radius: 0.3rem;
     background: white;
     text-align: center;
   }
@@ -243,9 +240,6 @@
       transform: scale(0);
       opacity: 0.3;
     }
-    //50% {
-    //  transform: scale(1.1);
-    //}
     100% {
       transform: scale(1);
       opacity: 1;
@@ -258,18 +252,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: 1rem;
+    right: 0.3rem;
     bottom: 3rem;
     width: 30rem;
-    height: 30rem;
     border-radius: 1rem;
     background: #3c7699;
 
@@ -286,23 +277,32 @@
         list-style: none;
         display: flex;
         flex-wrap: wrap;
-        padding-inline: 20px 0;
-        margin-block: 0;
+        padding: 0;
+        padding-inline: 0;
 
-        li {
+        div {
           width: 25%;
-          height: 1.5rem;
           display: flex;
-          align-items: center;
+          justify-content: center;
+          margin: 0.1rem 0;
 
-          img {
-            height: 18px;
-            width: 18px;
-          }
+          li {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            margin-left: 15px;
+            margin-right: 15px;
 
-          span {
-            font-size: 12px;
-            color: white;
+            img {
+              height: 18px;
+              width: 18px;
+            }
+
+            span {
+              width: 80px;
+              font-size: 12px;
+              color: white;
+            }
           }
         }
       }
@@ -311,7 +311,7 @@
     .under-line {
       height: 2px;
       background: #7bc5ef;
-      margin-block-start: 0.5rem;
+      margin-block-start: 0;
       margin-block-end: 0;
     }
   }

--
Gitblit v1.8.0