面板折叠的触发按钮修改

src/views/ComprehensiveAnalysis.vue

@@ -16,15 +16,6 @@
       :tableData="tableData"
       @close="closeEvent"
     />
-    <!-- 右上角工具栏 -->
-    <!--     <div class="comprehensive-analysis-toolbar">
-      <div class="searchbox">
-        <el-input
-          placeholder="请输入地址、地块名称等"
-          v-model="searchInput"
-        ></el-input>
-      </div>
-    </div> -->
     <!-- 图例 -->
 
     <Legend
@@ -54,16 +45,19 @@
     <!-- 左侧面板的显示与隐藏 -->
     <transition name="fade-left">
       <div class="comprehensive-analysis-left" v-show="showLeftBox">
+        <div class="close-btnbox">
+          <div @click="leftPanelDisplay('hide')"><div></div></div>
+        </div>
         <div class="control-container">
           <el-input
             class="control-container-input"
             v-model="filterText"
             placeholder="请输入文本"
           ></el-input>
-          <div
+          <!-- <div
             class="control-container-btn"
             @click="leftPanelDisplay('hide')"
-          ></div>
+          ></div> -->
         </div>
         <div class="contant-container">
           <div class="contant-container-innerbox">
@@ -123,9 +117,12 @@
     <!-- 右侧面板的显示与隐藏 -->
     <transition name="fade-right">
       <div class="comprehensive-analysis-right" v-show="showRightBox">
-        <div class="control-container">
-          <div @click="rightPanelDisplay('hide')"></div>
+        <div class="close-btnbox">
+          <div @click="rightPanelDisplay('hide')"><div></div></div>
         </div>
+        <!-- <div class="control-container">
+          <div @click="rightPanelDisplay('hide')"></div>
+        </div> -->
         <div class="contant-container">
           <div class="contant-container-innerbox">
             <el-collapse v-model="activeNames">
@@ -581,103 +578,7 @@ export default {
       left: 34px;
     }
   }
-  &-toolbar {
-    width: 340px;
-    height: 50px;
-    line-height: 28px;
-    color: #fff;
-    border-radius: 3px;
-    position: absolute;
-    right: 60px;
-    top: 8px;
-    pointer-events: auto;
-
-    .layer-display {
-      width: 40px;
-      height: 40px;
-      background: url("../assets/map/display.png") no-repeat center;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      cursor: pointer;
-      &.display-true {
-        background: url("../assets/map/display_true.png") no-repeat center;
-      }
-    }
 
-    .layers-control-icon {
-      width: 44px;
-      height: 32px;
-      background: url("../assets/map/layer_default.png") no-repeat center;
-      position: absolute;
-      bottom: 4px;
-      left: 40px;
-      cursor: pointer;
-      &.control-true {
-        background: url("../assets/map/layer_selected.png") no-repeat center;
-      }
-    }
-    .searchbox {
-      width: 245px;
-      height: 40px;
-      position: absolute;
-      bottom: 2px;
-      right: 0;
-    }
-    .layercontrol-container {
-      position: absolute;
-      width: 288px;
-      height: 190px;
-      left: -200px;
-      bottom: -200px;
-      border: 1px solid @commonBorderColor;
-      background: rgba(0, 170, 255, 0.2);
-
-      .layer-control-item {
-        width: 100%;
-        height: 30px;
-        display: flex;
-        .left {
-          width: 20%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-right: 1px solid @commonBorderColor;
-          border-bottom: 1px solid @commonBorderColor;
-          &-eye {
-            width: 80%;
-            height: 80%;
-            background: url("../assets/map/eye1.png") no-repeat center;
-            cursor: pointer;
-            .open {
-              background: url("../assets/map/eye2.png") no-repeat center;
-            }
-          }
-        }
-        .right {
-          width: 80%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          border-bottom: 1px solid @commonBorderColor;
-          &-line {
-            width: 3%;
-            height: 90%;
-            border-right: 7px solid red;
-          }
-          &-text {
-            width: 50%;
-            height: 90%;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-          }
-        }
-      }
-    }
-  }
   &-legendbox {
     position: absolute;
     right: 410px;
@@ -693,6 +594,64 @@ export default {
     pointer-events: auto;
     z-index: 99;
   }
+  /* 左侧面板开启按钮 */
+  &-leftopenbox {
+    position: absolute;
+    left: 5px;
+    width: 50px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    & > div {
+      pointer-events: auto;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: rgba(102, 203, 255, 1);
+      position: relative;
+      cursor: pointer;
+      & > div {
+        position: absolute;
+        top: 8px;
+        left: 16px;
+        display: inline-block;
+        width: 0px;
+        height: 0px;
+        border: 12px solid transparent;
+        border-left-color: #fff;
+      }
+    }
+  }
+  /* 右侧面板开启按钮 */
+  &-rightopenbox {
+    position: absolute;
+    right: 0;
+    width: 50px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    & > div {
+      pointer-events: auto;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      cursor: pointer;
+      position: relative;
+      background: rgba(102, 203, 255, 1);
+      & > div {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        display: inline-block;
+        width: 0px;
+        height: 0px;
+        border: 12px solid transparent;
+        border-right-color: #fff;
+      }
+    }
+  }
   /* 左边树状面板 */
   &-left {
     width: 400px;
@@ -703,6 +662,34 @@ export default {
     background: url("../assets/image/tree_background.png") no-repeat center;
     background-size: 100% 100%;
     pointer-events: auto;
+    .close-btnbox {
+      position: absolute;
+      right: -20px;
+      height: 100%;
+      width: 40px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      & > div {
+        pointer-events: auto;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        cursor: pointer;
+        position: relative;
+        background: rgba(102, 203, 255, 1);
+        & > div {
+          position: absolute;
+          top: 8px;
+          right: 16px;
+          display: inline-block;
+          width: 0px;
+          height: 0px;
+          border: 12px solid transparent;
+          border-right-color: #fff;
+        }
+      }
+    }
     .control-container {
       width: 100%;
       height: 8%;
@@ -770,62 +757,7 @@ export default {
       }
     }
   }
-  &-leftopenbox {
-    position: absolute;
-    left: 5px;
-    width: 50px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    & > div {
-      pointer-events: auto;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: rgba(102, 203, 255, 1);
-      position: relative;
-      cursor: pointer;
-      & > div {
-        position: absolute;
-        top: 8px;
-        left: 16px;
-        display: inline-block;
-        width: 0px;
-        height: 0px;
-        border: 12px solid transparent;
-        border-left-color: #fff;
-      }
-    }
-  }
-  &-rightopenbox {
-    position: absolute;
-    right: 0;
-    width: 50px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    & > div {
-      pointer-events: auto;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      cursor: pointer;
-      position: relative;
-      background: rgba(102, 203, 255, 1);
-      & > div {
-        position: absolute;
-        top: 8px;
-        right: 16px;
-        display: inline-block;
-        width: 0px;
-        height: 0px;
-        border: 12px solid transparent;
-        border-right-color: #fff;
-      }
-    }
-  }
+
   /* 右面板 -- 显示标记疑点 */
   &-right {
     width: 400px;
@@ -837,6 +769,35 @@ export default {
     background-size: 100% 100%;
     pointer-events: auto;
     z-index: 2;
+    // 关闭折叠面板
+    .close-btnbox {
+      position: absolute;
+      left: -20px;
+      height: 100%;
+      width: 40px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      & > div {
+        pointer-events: auto;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: rgba(102, 203, 255, 1);
+        position: relative;
+        cursor: pointer;
+        & > div {
+          position: absolute;
+          top: 8px;
+          left: 16px;
+          display: inline-block;
+          width: 0px;
+          height: 0px;
+          border: 12px solid transparent;
+          border-left-color: #fff;
+        }
+      }
+    }
     .control-container {
       width: 100%;
       height: 5%;