图例

src/views/LandConsolidation/index.vue

@@ -82,12 +82,23 @@
           ></Qhdb>
         </div>
       </div>
-      <div class="innerContainer legendPane" v-drag>
+      <div
+        class="innerContainer legendPane"
+        :class="showlist ? '' : 'hielegend'"
+        v-drag
+      >
         <div class="xz_box">
           图例
-          <div v-for="(litem, li) in legends" :key="litem.label">
-            <span :class="`legend${li}`" class="lcolor"></span>
-            <span class="legLabel">{{ litem.label }}</span>
+          <div
+            class="eicon"
+            :class="showlist ? 'eyes' : 'close_eyes'"
+            @click="showlist = !showlist"
+          ></div>
+          <div v-if="showlist">
+            <div v-for="(litem, li) in legends" :key="litem.label">
+              <span :class="`legend${li}`" class="lcolor"></span>
+              <span class="legLabel">{{ litem.label }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -160,6 +171,7 @@ export default {
   },
   data() {
     return {
+      showlist: true,
       // htmlContent: htmlContent,
       filelist: [],
       loading: false,
@@ -309,15 +321,32 @@ export default {
   .legendPane {
     width: 130px;
     height: 120px;
-    // top: calc(100% - 500px);
-    top: calc(100% - 150px);
+    top: calc(100% - 500px);
+    // top: calc(100% - 150px);
     left: 460px;
+    // position: relative;
+    .eicon {
+      width: 20px;
+      height: 20px;
+      margin-top: 10px;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 0;
+      right: 20px;
+    }
+    // .eyes {
+    //   background-image: url("/static/images/ghzc/eyes.png");
+    // }
+    // .close_eyes {
+    //   background-image: url("/static/images/ghzc/close_eyes.png");
+    // }
     .lcolor {
       display: inline-block;
       width: 16px;
       height: 16px;
       margin-left: 10px;
     }
+
     .legend0 {
       background: #caf982;
     }
@@ -328,6 +357,9 @@ export default {
       background: #facd91;
     }
   }
+  .hielegend {
+    height: 40px;
+  }
 }
 .newContainer {
   top: 40px !important;