优化

package-lock.json

@@ -5662,6 +5662,11 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz?cache=0&sync_timestamp=1614705639458&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjquery%2Fdownload%2Fjquery-3.6.0.tgz",
+      "integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "jquery": "^3.6.0",
     "js-cookie": "^2.2.1",
     "lib-flexible": "^0.3.2",
     "node-sass": "^5.0.0",

src/views/homestead/index.vue

@@ -6,7 +6,7 @@
       <div class="positioning_wrap">
         <div class="icon"></div>
       </div>
-      <div class="selectionIcon_wrap">
+      <div class="selectionIcon_wrap" @click="selectionPush">
         <div class="icon"></div>
         <div class="text">列表</div>
       </div>
@@ -14,7 +14,7 @@
     <!--列表拉取详情-->
     <div class="homesteadList_wrap">
       <div class="title_m">
-        <div class="more_icon"></div>
+        <div class="more_icon" @click="homesteadListShrink"></div>
         <div class="name">宅基地列表</div>
       </div>
       <div class="main_m">
@@ -69,17 +69,17 @@
       </div>
       <div class="address_item">
         <div class="portrait"></div>
-        <div class="name">南郊村南郊村</div>
+        <div class="name">南郊村</div>
       </div>
       <div class="address_item more">
         <div class="portrait"></div>
-        <div class="name"></div>
+        <div class="name" @click="addressPush"></div>
       </div>
     </div>
 
     <!--搜索栏目-->
     <div class="searchBar_wrap">
-      <div class="actionBar_wrap">
+      <div class="actionBar_wrap" v-if="searchBarOperVisbile">
         <div class="m_list">
           <div class="tensile active"><div class="icon"></div></div>
         </div>
@@ -100,7 +100,7 @@
         </div>
 
         <div class="m_list">
-          <div class="closes gray">
+          <div class="closes gray" @click="searchBarOperFun('false')">
             <div class="icon"></div>
           </div>
         </div>
@@ -115,7 +115,7 @@
         </div>
         <div class="bar_text">搜索</div>
       </div>
-      <div class="searchBar_more"></div>
+      <div class="searchBar_more" @click="searchBarOperFun('true')"></div>
     </div>
 
     <!--点击房地-显示的搜索--->
@@ -508,10 +508,14 @@
 </template>
 
 <script>
+import $ from "jquery";
 export default {
   name: "homesteadLogin",
   data() {
     return {
+      //搜索栏目-操作栏显隐
+      searchBarOperVisbile: false,
+      //以下删
       message: "",
       showPicker: false,
       columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
@@ -520,6 +524,51 @@ export default {
   },
   mounted() {},
   methods: {
+    searchBarOperFun(statue) {
+      if (statue == "true") {
+        this.searchBarOperVisbile = true;
+      } else {
+        this.searchBarOperVisbile = false;
+      }
+    },
+
+    /*右侧列表 --展开收缩*/
+    selectionPush() {
+      $(".homesteadList_wrap").animate(
+        {
+          right: "0",
+        },
+        300
+      );
+    },
+    homesteadListShrink() {
+      $(".homesteadList_wrap").animate(
+        {
+          right: "-300px",
+        },
+        300
+      );
+    },
+    /*点击顶部村庄--伸缩样式*/
+    addressPush() {
+      let addressWrapBlock = $(".address_wrap .address_item.more .name");
+      let lefValue = 0;
+      if (addressWrapBlock.hasClass("shrink")) {
+        addressWrapBlock.removeClass("shrink");
+        lefValue = "-40px";
+      } else {
+        addressWrapBlock.addClass("shrink");
+        lefValue = "8px";
+      }
+
+      $(".address_wrap").animate(
+        {
+          left: lefValue,
+        },
+        300
+      );
+    },
+    /*以下删*/
     onConfirm(time) {
       this.message = time;
       this.showPicker = false;
@@ -575,10 +624,10 @@ export default {
     }
   }
   .homesteadList_wrap {
-    display: none;
-    // display: flex;
+    // display: none;
+    display: flex;
     position: absolute;
-    right: 0;
+    right: -536px;
     top: 20px;
     bottom: 160px;
     width: 536px;
@@ -676,7 +725,8 @@ export default {
     position: fixed;
     z-index: 9;
     top: 24px;
-    left: 16px;
+    // left: 16px;
+    left: -80px;
     display: flex;
     .address_item {
       display: flex;
@@ -710,6 +760,9 @@ export default {
           width: 40px;
           height: 40px;
           padding: 0;
+          &.shrink {
+            transform: rotate(180deg);
+          }
         }
       }
       .address_suspension {