图例添加按钮，添加展开隐藏功能

src/components/Combinations/LayerManage/LayerLegend.vue

@@ -6,9 +6,13 @@
       checkedVector.length > 0 &&
       ($route.path !== '/overview' || !store.state.viewer_flag)
     "
+    :class="{ hidelegends: !showlist }"
   >
-    图例
-    <el-collapse accordion v-model="activeNames">
+    <span @click="showlist = !showlist">
+      图例
+      <div class="eicon" :class="showlist ? 'eyes' : 'close_eyes'"></div>
+    </span>
+    <el-collapse v-if="showlist" accordion v-model="activeNames">
       <el-collapse-item
         :name="vector.id"
         v-for="(vector, index) in vectors"
@@ -36,6 +40,7 @@ export default {
   props: {},
   data() {
     return {
+      showlist: false,
       activeNames: [],
       vectors: [],
     };
@@ -87,7 +92,7 @@ export default {
 .legends {
   position: absolute;
   left: 40px;
-  top: 70vh;
+  top: 60vh;
   width: 150px;
   height: 250px;
   cursor: pointer;
@@ -100,6 +105,21 @@ export default {
   line-height: 40px;
   overflow-x: hidden;
   overflow-y: auto;
+  .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");
+  }
   .legLabel {
     width: 100px;
     display: inline-block;
@@ -141,6 +161,11 @@ export default {
     padding-bottom: 10px;
   }
 }
+.hidelegends {
+  position: absolute;
+  height: 40px;
+  top: 90vh !important;
+}
 
 // @import "../../../views/complianceAnalysis/ghzc.scss";
 </style>