三维按钮抽离

src/components/NavigationBar/index.vue

@@ -227,4 +227,7 @@ export default {
     font-family: "Alibaba-PuHuiTi-Regular.otf";
   }
 }
+::v-deep .el-badge__content.is-fixed {
+  right: 30px;
+}
 </style>

src/components/imageButton/index.vue

@@ -41,6 +41,6 @@ export default {
   padding: 2px 11px 4px 11px;
 }
 .medium {
-  padding: 4px 16px 6px 16px;
+  padding: 4.5px 13px 6px 13px;
 }
 </style>

src/views/components/foldPaneBottom/index.vue

@@ -12,17 +12,7 @@
         />
       </div>
       <div class="fold-buttom">
-        <!-- @handlerClcik="lookSocialSecurity(item.id)" -->
-        <el-tooltip
-          placement="left-start"
-          popper-class="popperclass"
-          :visible-arrow="false"
-        >
-          <div slot="content" class="legend-img"></div>
-          <imageButton size="medium" v-show="queryParamsXiaoqu.buildingId"
-            >查看图例</imageButton
-          >
-        </el-tooltip>
+        <slot name="header"></slot>
       </div>
       <div :class="['panel-main', { collapsed: panel.bottomPanel }]">
         <slot></slot>
@@ -38,7 +28,7 @@ export default {
     return {};
   },
   computed: {
-    ...mapGetters(["panel", "queryParamsXiaoqu"]),
+    ...mapGetters(["panel"]),
   },
 
   created() {},
@@ -64,8 +54,12 @@ export default {
     box-sizing: border-box;
     .fold-btn {
       cursor: pointer;
+      position: absolute;
       margin: auto;
-      transform: translateY(10px) rotate(-90deg);
+      left: 50%;
+      top: -10px;
+      z-index: 20;
+      transform: translateY(-50%) rotate(-90deg);
       height: 40px;
       width: 20px;
       img {
@@ -76,8 +70,9 @@ export default {
     }
     .fold-buttom {
       position: absolute;
-      top: 6px;
-      right: 10px;
+      top: -38px;
+      left: 0;
+      width: 100%;
     }
 
     .panel-main {
@@ -95,11 +90,4 @@ export default {
     }
   }
 }
-
-.legend-img {
-  height: 500px;
-  width: 400px;
-  background: url("~@/assets/images/ui/legend.png");
-  background-size: 100% 100%;
-}
 </style>

src/views/components/index.js

@@ -11,6 +11,7 @@ export { default as buildingStatistics } from "./xiaoqu/leftData/buildingStatist
 
 export { default as mapSearchBox } from "./xiaoqu/mapSearchBox.vue";
 export { default as bottomList } from "./xiaoqu/bottomList.vue";
+export { default as bottomListHeader } from "./xiaoqu/bottomListHeader.vue";
 
 export { default as xiaoquRight } from "./xiaoqu/rightData/index.vue";
 

src/views/components/xiaoqu/bottomListHeader.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="bottom-header">
+    <el-checkbox
+      v-model="mapParmas.sd"
+      label="三维图层"
+      @change="handleMapLayer"
+    ></el-checkbox>
+    <el-tooltip
+      placement="left-start"
+      popper-class="popperclass"
+      :visible-arrow="false"
+    >
+      <div slot="content" class="legend-img"></div>
+      <imageButton size="medium" v-show="queryParamsXiaoqu.buildingId"
+        >查看图例</imageButton
+      >
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["queryParamsXiaoqu", "mapParmas"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bottom-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 6px;
+}
+::v-deep .el-checkbox {
+  margin-right: 0;
+  font-size: 14px;
+  color: #cdfbff;
+  background: url("~@/assets/images/ui/btn_bg.png");
+  background-size: 100% 100%;
+  padding: 9px 13px 10px 13px;
+  .el-checkbox__label {
+    padding-left: 3px;
+  }
+}
+::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #cdfbff;
+}
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+  background: #fff;
+}
+::v-deep .el-checkbox__inner::after {
+  border-color: #16aa2d;
+}
+.legend-img {
+  height: 400px;
+  width: 320px;
+  background: url("~@/assets/images/ui/legend.png");
+  background-size: 100% 100%;
+}
+</style>

src/views/components/xiaoqu/mapSearchBox.vue

@@ -1,6 +1,20 @@
 <template>
   <div class="search-box">
     <div class="select-search">
+      <el-select
+        v-model="queryParmas.parentid"
+        placeholder="选择网格"
+        clearable
+        :popper-append-to-body="false"
+        @change="handleNetwork"
+      >
+        <el-option
+          v-for="dict in networkOption"
+          :key="dict.dept_id"
+          :label="dict.dept_name"
+          :value="dict.dept_id"
+        ></el-option>
+      </el-select>
       <el-select
         v-model="queryParmas.color"
         placeholder="选择分色"
@@ -17,20 +31,6 @@
           :value="dict.value"
         ></el-option>
       </el-select>
-      <el-select
-        v-model="queryParmas.parentid"
-        placeholder="选择网格"
-        clearable
-        :popper-append-to-body="false"
-        @change="handleNetwork"
-      >
-        <el-option
-          v-for="dict in networkOption"
-          :key="dict.dept_id"
-          :label="dict.dept_name"
-          :value="dict.dept_id"
-        ></el-option>
-      </el-select>
     </div>
     <el-checkbox-group v-model="checkList" @change="change">
       <el-checkbox
@@ -42,11 +42,6 @@
       <!-- disabled -->
     </el-checkbox-group>
 
-    <el-checkbox
-      v-model="model"
-      label="三维图层"
-      @change="handleMapLayer"
-    ></el-checkbox>
     <el-checkbox
       v-show="queryParamsXiaoqu.xiaoquId == 267"
       label="进入商铺系统"
@@ -68,7 +63,7 @@ export default {
   data() {
     return {
       checkList: [],
-      model: false,
+      //model: false,
       networkOption: [],
       multipleList: [
         { key: "type", label: "户籍", value: 1 },
@@ -102,7 +97,7 @@ export default {
   },
   methods: {
     handleReset() {
-      this.model = false;
+      //this.model = false;
       this.checkList = [];
       this.queryParmas = {
         parentid: undefined,
@@ -216,12 +211,12 @@ export default {
   align-items: center;
 }
 ::v-deep .el-checkbox {
-  margin-right: 4px;
+  margin-right: 0;
   font-size: 14px;
   color: #cdfbff;
   background: url("~@/assets/images/ui/btn_bg.png");
   background-size: 100% 100%;
-  padding: 9px 15px 10px 15px;
+  padding: 9px 13px 10px 13px;
   .el-checkbox__label {
     padding-left: 3px;
   }
@@ -239,7 +234,7 @@ export default {
 
 ::v-deep .select-search {
   .el-select {
-    width: 130px;
+    width: 125px;
     .el-input {
       background: transparent;
     }

src/views/xiaoqu.vue

@@ -26,8 +26,11 @@
       <xiaoquRight v-if="!queryParamsXiaoqu.buildingId" />
     </foldpanelRight>
     <!-- 森茂汽配城不展示 -->
-    <foldPaneBottom v-if="queryParamsXiaoqu.xiaoquId != 267">
-      <bottomList />
+    <foldPaneBottom>
+      <template v-slot:header>
+        <bottomListHeader />
+      </template>
+      <bottomList v-if="queryParamsXiaoqu.xiaoquId != 267" />
     </foldPaneBottom>
     <!-- 森茂汽配城不展示 -->
     <building v-if="queryParamsXiaoqu.xiaoquId != 267" />
@@ -48,6 +51,7 @@ import {
   networkInfo,
   buildingStatistics,
   mapSearchBox,
+  bottomListHeader,
   bottomList,
   building,
   house,
@@ -68,6 +72,7 @@ export default {
     networkInfo,
     buildingStatistics,
     mapSearchBox,
+    bottomListHeader,
     bottomList,
     building,
     house,