切换地图样式修改

src/views/homesteadSurvey/index.vue

@@ -109,10 +109,11 @@
 <script>
   import {addTask, complete, delTask, exportTask, getTask, listTask, publish, updateTask} from "@/api/homesteadSurvey/index";
   import {getInfo} from "../../api/login";
-  import circleProccess from "@/components/circleProccess.vue";
+  // import circleProccess from "@/components/circleProccess.vue";
     export default {
       name: "homesteadIndex",
-      components: { circleProccess
+      components: {
+        // circleProccess
       },
       data() {
         return {

src/views/homesteadSurvey/list.vue

@@ -12,18 +12,18 @@
           <p style="color:#fff">{{item.deptName}}</p>
         </template>
       </van-nav-bar>
-      <div style="display:flex;width:90%;margin:0 auto;">
-        <div :class="{activeBtn : activeBtn==1,disactiveBtn :activeBtn!=1 }" @click="activeBtn=1"><van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn1'+(activeBtn!=1?'1':'')+'.png')" />
+      <div style="display:flex;width:94%;margin:0 auto;justify-content:space-between;padding: 10px 0">
+        <div :class="{activeBtn : activeBtn==1,disactiveBtn :activeBtn!=1 }" @click="activeBtn=1"><van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn1'+(activeBtn!=1?'1':'')+'.png')" />
           入户核查
         </div>
-        <div :class="{activeBtn : activeBtn==2,disactiveBtn :activeBtn!=2 }" @click="activeBtn=2,getShyqr()"><van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn2'+(activeBtn!=2?'2':'')+'.png')" />
+        <div :class="{activeBtn : activeBtn==2,disactiveBtn :activeBtn!=2 }" @click="activeBtn=2,getShyqr()"><van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn2'+(activeBtn!=2?'2':'')+'.png')" />
           农户信息
         </div>
-        <div :class="{activeBtn : activeBtn==3,disactiveBtn :activeBtn!=3 }" @click="activeBtn=3,getSyqr()"> <van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn3'+(activeBtn!=3?'3':'')+'.png')" />
+        <div :class="{activeBtn : activeBtn==3,disactiveBtn :activeBtn!=3 }" @click="activeBtn=3,getSyqr()"> <van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn3'+(activeBtn!=3?'3':'')+'.png')" />
           所有权人
         </div>
         <div :class="{activeBtn : activeBtn==4,disactiveBtn :activeBtn!=4 }"  @click="activeBtn=4,mapShow()">
-          <van-icon size="20" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn4'+(activeBtn!=4?'4':'')+'.png')" />
+          <van-icon size="15" style="vertical-align:middle;" :name="require('../../assets/images/housesteadSurvey/btn4'+(activeBtn!=4?'4':'')+'.png')" />
           切换地图
         </div>
       </div>
@@ -370,15 +370,31 @@
         <div id="mapWrapAll" style="width: 100%;height: 100vh"></div>
       <!--图层-->
       <div class="rightZoom_wrap">
+        <img src="../../assets/images/housesteadSurvey/tool1.png">
         <div class="amplification" @click="selectionPushMap">图层</div>
       </div>
       <!--放大缩小-->
       <div class="mapZoom_wrap">
-        <div class="qtMap" @click="">全图</div>
-        <div class="clMap" @click="" id="area">测量</div>
-        <div class="hcMap" @click="">核查</div>
-        <div class="htMap" @click="" id="htMapAll">绘图</div>
-        <div class="dwMap" @click="" id="dwMapAll">定位</div>
+        <div class="qtMap" @click="">
+          <img src="../../assets/images/housesteadSurvey/tool2.png">
+          <p>全图</p>
+        </div>
+        <div class="clMap" @click="" id="area">
+          <img src="../../assets/images/housesteadSurvey/tool3.png">
+          <p>测量</p>
+        </div>
+        <div class="hcMap" @click="">
+          <img src="../../assets/images/housesteadSurvey/tool4.png">
+          <p>核查</p>
+        </div>
+        <div class="htMap" @click="" id="htMapAll">
+          <img src="../../assets/images/housesteadSurvey/tool5.png">
+          <p>绘图</p>
+        </div>
+        <div class="dwMap" @click="" id="dwMapAll">
+          <img src="../../assets/images/housesteadSurvey/tool6.png">
+          <p>定位</p>
+        </div>
       </div>
 
       <!--列表拉取详情-->
@@ -388,20 +404,42 @@
             <div class="more_icon" @click="homesteadListShrink"></div>
             <div class="name">筛选列表</div>
           </div>
-          <div class="noInfo_data">
-            <div class="checkbox">
-              <!-- 全选与不全选模块 -->
-              <div class="thead-checkbox" @click="checkClick">
-                <input type="checkbox" class="checkall">全选
-              </div>
-              <!-- 小复选框选 -->
-              <div class="item-list-checkbox">
-                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>
-                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>
-                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>
-              </div>
-            </div>
+
+          <div style="padding: 10px 15px;">
+            <van-checkbox name="all" shape="square">全选</van-checkbox>
+            <div style="height: 15px;"></div>
+            <van-checkbox-group v-model="checked">
+              <van-checkbox name="a" shape="square" style="margin-bottom: 5px;">
+                <template #default>
+                  附属设施<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
+                </template>
+              </van-checkbox>
+              <van-checkbox name="b" shape="square" style="margin-bottom: 5px;">
+                <template #default>
+                  自<i style="margin-right: 0.5em;"></i>然<i style="margin-right: 0.5em;"></i>幢<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
+                </template>
+              </van-checkbox>
+              <van-checkbox name="b" shape="square" style="margin-bottom: 5px;">
+                <template #default>
+                  宅<i style="margin-right: 0.5em;"></i>基<i style="margin-right: 0.5em;"></i>地<span style="display: inline-block;background: red;height: 5px;width: 20px;vertical-align: middle;margin-left: 10px;"></span>
+                </template>
+              </van-checkbox>
+            </van-checkbox-group>
           </div>
+<!--          <div class="noInfo_data">-->
+<!--            <div class="checkbox">-->
+<!--              &lt;!&ndash; 全选与不全选模块 &ndash;&gt;-->
+<!--              <div class="thead-checkbox" @click="checkClick">-->
+<!--                <input type="checkbox" class="checkall">全选-->
+<!--              </div>-->
+<!--              &lt;!&ndash; 小复选框选 &ndash;&gt;-->
+<!--              <div class="item-list-checkbox">-->
+<!--                <div class="item-checkbox"><input type="checkbox" @click="checkClick('fsssMap')" class="checkitem">附属设施</div>-->
+<!--                <div class="item-checkbox"  @click="checkClick('zrzMap')"><input type="checkbox" class="checkitem">自然幢</div>-->
+<!--                <div class="item-checkbox"  @click="checkClick('zjdMap')"><input type="checkbox" class="checkitem">宅基地</div>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
         </div>
       </div>
 <!--      &lt;!&ndash;列表 定位&ndash;&gt;-->
@@ -859,6 +897,7 @@
       name: "homesteadList",
       data() {
         return {
+          checked:[],
           // 使用权人表单弹出
           showsyqr:false,
           showhncylist:false,
@@ -2377,23 +2416,38 @@
     }
 </script>
 
-<style  scoped lang="scss">
+<style scoped lang="scss">
 
   .bannerBg{
     width: 100%;
     color:#fff;
-    padding:10px;
+    /*padding:10px;*/
     background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
-
   }
   .van-hairline--bottom::after {
     border-bottom-width: 0;
   }
   .activeBtn{
-    flex:1;background:#fff;height:50px;border-radius:25px;margin:10px;color:#7AC943;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
+    background:#fff;
+    height:50px;
+    border-radius:25px;
+    color:#7AC943;
+    line-height:50px;
+    text-align:center;
+    font-size:20px;
+    width: 24%;
+    box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
   }
   .disactiveBtn{
-    flex:1;background:rgba(255,255,255,.4);height:50px;border-radius:25px;margin:10px;color:#fff;line-height:50px;text-align:center;font-size:20px;box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
+    background:rgba(255,255,255,.4);
+    height:50px;
+    border-radius:25px;
+    color:#fff;
+    line-height:50px;
+    text-align:center;
+    font-size:20px;
+    width: 24%;
+    box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.16);
   }
   .van-cell__label{
     color: #969799;
@@ -2415,74 +2469,71 @@
   }
   .rightZoom_wrap {
     position: absolute;
-    right: 16px;
+    right: 3%;
     top: 35%;
-    width: 66px;
     margin-top: -200px;
     background: #fff;
     margin-bottom: 16px;
     border-radius: 10px;
-    height: 60px;
-    .amplification {
-      height: 50px;
-      width: 74px;
+    text-align: center;
+    padding: 15px 20px;
+    img{
+      margin: 0 auto;
     }
     .amplification {
-      background: url("../../assets/images/housesteadSurvey/tool1.png") center center no-repeat;
+      line-height: 1;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      margin-top: 5px;
     }
   }
   .mapZoom_wrap {
     position: absolute;
-    right: 16px;
+    right: 3%;
     top: 50%;
-    width: 66px;
     margin-top: -200px;
     background: #fff;
     margin-bottom: 16px;
     border-radius: 10px;
-    height: 300px;
-
-    .qtMap {
-      height: 50px;
-      width: 74px;
+    padding: 0px 20px;
+    div{
+      padding: 15px 0;
+      border-bottom: 1px solid #C9C9C9;
+      &:last-child{
+        border: none;
+      }
+      p{
+        margin-top: 5px;
+      }
     }
-
     .qtMap {
-      background: url("../../assets/images/housesteadSurvey/tool2.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .clMap {
-      background: url("../../assets/images/housesteadSurvey/tool3.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .hcMap {
-      background: url("../../assets/images/housesteadSurvey/tool4.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .htMap {
-      background: url("../../assets/images/housesteadSurvey/tool5.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
 
     .dwMap {
-      background: url("../../assets/images/housesteadSurvey/tool6.png") center center no-repeat;
       font-size: 18px;
-      padding-top: 35px;
       text-align: center;
+      line-height: 1;
     }
   }
   .rightIcon_wrap {