确权首页

src/views/contracted/village/map/map.vue

@@ -14,10 +14,10 @@
 
     <div style="position:relative;">
       <div class="mapBox" id="landMapBox"></div>
-      <div class="legend_main">
+      <div class="legend_main" v-if="showLegend">
         <div class="legend">
           <p class="legend_tt">图例
-            <img src="../../../../../static/images/contracted/map_icon_01.png" alt="">
+            <img src="../../../../../static/images/contracted/map_icon_01.png" @click="showLegend = false" alt="">
           </p>
           <van-checkbox-group v-model="landCategory" @change="filterLandLayer">
             <van-checkbox name="10" shape="square" checked-color="#16e90f"><div><p>承包地</p><i class="i1"></i></div></van-checkbox>
@@ -33,6 +33,9 @@
           </p>
         </div>
       </div>
+      <div class="openLegend" v-if="!showLegend" @click="showLegend = true">
+        <span class="sanjiao-left"></span>
+      </div>
     </div>
 
     <div class="landPopup">
@@ -215,6 +218,8 @@
         isDisabled: false,                // 是否禁用
         taskStatus: null,                 // 调查任务的完成状态：1表示已完成，2表示未完成
         landCategory: ['10'],             // 地块类别
+
+        showLegend:true
       };
     },
     created() {
@@ -679,6 +684,27 @@
     right: 2vw;
   }
 
+  .openLegend{
+    position: absolute;
+    top: 2vh;
+    right: 0vw;
+    background-color: rgba(255,255,255,.5);
+    width: 20PX;
+    height: 70PX;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top-left-radius: 10PX;
+    border-bottom-left-radius: 10PX;
+    .sanjiao-left {
+      display: inline-block;
+      border-right: 8PX solid #999999;
+      border-right-color: initial;
+      border-top: 5PX solid transparent;
+      border-bottom: 5PX solid transparent;
+    }
+  }
+
   .legend_second{
     background: rgba(255,255,255,.5);
     padding: 2vh;