From 8a1d680f32d9a691f122e8ba9bf9606c53af2a5d Mon Sep 17 00:00:00 2001
From: liuminjian <517059477@qq.com>
Date: Sun, 18 Jul 2021 12:01:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=85=E5=9F=BA=E5=9C=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js             |   2 +-
 src/router/index.js           |  15 +-
 src/views/homestead/index.vue | 318 ++++++++++++++++++++++++++++++++++
 3 files changed, 331 insertions(+), 4 deletions(-)
 create mode 100644 src/views/homestead/index.vue

diff --git a/src/permission.js b/src/permission.js
index 5d5dba55..528cacd0 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 NProgress.configure({ showSpinner: false })
 
 const whiteList = ['/index', '/login', '/auth-redirect', '/bind', '/register', '/news/index', '/notice/index', '/supply/index'
-  , '/interaction/index', '/register/index', '/register/registerType', '/register/userRegister', '/register/companyRegister', '/homestead/login']
+  , '/interaction/index', '/register/index', '/register/registerType', '/register/userRegister', '/register/companyRegister', '/homestead/login', '/homestead/index']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/src/router/index.js b/src/router/index.js
index 09908277..5f27c24b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -320,7 +320,18 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/user/supply/supplyAdd'], resolve)
-  }, {
+  }, 
+  //两清三化宅基地
+  {
+    path: '/homestead/index',
+    name: 'homesteadIndex',
+    meta: {
+      title: '两清三化宅基地',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/homestead/index'], resolve)
+  },
+  {
     path: '/homestead/login',
     name: 'homesteadLogin',
     meta: {
@@ -328,8 +339,6 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/homestead/login'], resolve)
-
-
   }
 
 
diff --git a/src/views/homestead/index.vue b/src/views/homestead/index.vue
new file mode 100644
index 00000000..c8b362ec
--- /dev/null
+++ b/src/views/homestead/index.vue
@@ -0,0 +1,318 @@
+<template>
+    <div class="app-container" @touchmove.prevent>
+        <div class="map_area"></div>
+        <!--选择地址-->
+        <div class="address_wrap">
+            <div class="address_item">
+                <div class="portrait"></div>
+                <div class="name">羊亭镇</div>
+
+                <div class="address_suspension">
+                    <div class="address_suspension_scroll">
+                        <div class="items">全部</div>
+                        <div class="items">北上夼</div>
+                        <div class="items">大北山</div>
+                        <div class="items">南郊村</div>
+                        <div class="items">上路村</div>
+                        <div class="items">下路村</div>
+                        <div class="items">南郊村</div>
+                        <div class="items">上路村</div>
+                        <div class="items">下路村</div>
+                        <div class="items">南郊村</div>
+                        <div class="items">上路村</div>
+                        <div class="items">下路村</div>
+                        <div class="items">南郊村</div>
+                        <div class="items">上路村</div>
+                        <div class="items">下路村</div>
+                    </div>    
+                </div>
+            </div>
+            <div class="address_item">
+                <div class="portrait"></div>
+                <div class="name">南郊村南郊村</div>
+            </div>
+            <div class="address_item more">
+                <div class="portrait"></div>
+                <div class="name"></div>
+            </div>
+        </div>
+
+        <!--搜索栏目-->
+        <div class="searchBar_wrap">
+            <div class="searchBar_area">
+                <div class="bar_ipt">
+                    <input type="text" placeholder="请输入宗地或权利人信息" />
+                </div>
+                <div class="bar_text">搜索</div>
+            </div>
+            <div class="searchBar_more"></div>
+        </div>
+
+        <!--点击房地-显示的搜索--->
+        <div class="landHomestead_wrap">
+            <div class="landHomestead_search">
+                <div class="bar_ipt">
+                    <input type="text" placeholder="请输入宗地或权利人信息" />
+                </div>
+                <div class="bar_text">搜索</div>
+            </div>
+            <div class="landHomestead_body">
+                <!--1--->
+                <div class="body_flex">
+                    <div class="attribute">
+                        <div class="names">孙全礼</div>
+                        <div class="address">南郊村东二街30号</div>
+                        <div class="nature">性质：农村宅基地</div>
+                    </div>
+                    <div class="distance">
+                        <div class="size">103</div>
+                        <div class="probably">大约120㎡ </div>
+                    </div>
+                    <div class="others">
+                        <div class="information"></div>
+                        <div class="editor"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "homesteadLogin",
+  data() {
+    return {
+      message: "",
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.app-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  .map_area{
+      width: 100vw;
+      height: 100vh;
+      background: #ddd;
+      position: absolute;
+      left: 0;
+      top: 0;
+  }
+  .address_wrap{
+      position:fixed;
+      z-index: 9;
+      top: 24px;
+      left: 16px;
+      display: flex;
+      .address_item{
+          display: flex;
+          flex-direction: column;
+          margin-right: 8px;
+          justify-content: center; /* 相对父元素水平居中 */
+          align-items: center; /*  子元素相对父元素垂直居中 */
+          position: relative;
+          .portrait{
+              width: 76px;
+              height: 76px;
+              background:#000;
+              border-radius: 50%;
+              margin-bottom: 20px;
+          }
+          .name{
+              font-size: 14px;
+              background: #fff;
+              padding:2px 6px;
+              border-radius: 8px;
+          }
+          &.more{
+              .portrait{
+                  width: 40px;
+                  background: none;
+              }
+              .name{
+                background: #fff;
+                width: 40px;
+                height: 40px;
+                padding:0;
+              }
+          }
+          .address_suspension{
+              display: none;
+              position: absolute;
+              left: calc(100% + 8px);
+              top: 100px;
+              z-index: 10;
+              padding:10px 8px 10px 15px;
+              background: #fff;
+              border-radius: 10px;
+              width: auto;
+              .address_suspension_scroll{
+                height: 200px;
+                overflow-y:auto;
+                padding-right: 8px;
+              }
+              .items{
+                  white-space: nowrap
+              }
+          }
+      }
+  }
+  .searchBar_wrap{
+      display: none;
+    //   display: flex;
+      position:fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding:28px 16px;
+      background: #fff;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      .searchBar_area{
+          flex: 1;
+          height: 80px;
+          background: #f1f1f1;
+          border: 1px solid #dfdfdf;
+          border-radius: 10px;
+          padding: 0 28px;
+          display: flex;
+          .bar_ipt{
+              flex: 1;
+              input{
+                  width: 100%;
+                  height: 100%;
+                  background:none;
+                  border:0 none;
+                  font-size: 32px;
+              }
+          }
+          .bar_text{
+              flex: 0 0 80px;
+              font-size: 32px;
+              color: #333333;
+              font-family: PingFang SC, PingFang SC-Regular;
+              font-weight: 400;
+              display: flex;
+              justify-content: center; /* 相对父元素水平居中 */
+              align-items: center; /*  子元素相对父元素垂直居中 */
+          }
+      }
+      .searchBar_more{
+          flex: 0 0 80px;
+          background: #333;
+          margin-left: 18px;
+      }
+  }
+  .landHomestead_wrap{
+      position:fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 16px;
+      .landHomestead_search{
+          height: 80px;
+          background: #f1f1f1;
+          border: 1px solid #dfdfdf;
+          border-radius: 10px;
+          padding: 0 28px;
+          display: flex;
+          margin-bottom: 10px;
+          .bar_ipt{
+              flex: 1;
+              input{
+                  width: 100%;
+                  height: 100%;
+                  background:none;
+                  border:0 none;
+                  font-size: 32px;
+              }
+          }
+          .bar_text{
+              flex: 0 0 80px;
+              font-size: 32px;
+              color: #333333;
+              font-family: PingFang SC, PingFang SC-Regular;
+              font-weight: 400;
+              display: flex;
+              justify-content: center; /* 相对父元素水平居中 */
+              align-items: center; /*  子元素相对父元素垂直居中 */
+          }
+      }
+      .landHomestead_body{
+          background: #fff;
+          padding:30px 20px;
+          border-top-left-radius: 12px;
+          border-top-right-radius: 12px;
+          position: relative;
+          .body_flex{
+              display: flex;
+              .attribute{
+                  flex: 0.42;
+                  display: flex;
+                  .names{
+                    flex: 0 0 60px;
+                    font-size: 40px;
+                    color: #333333;
+                  }
+              }
+              .distance{
+                  flex: 0.29;
+              }
+              .others{
+                  flex: 0.29;
+              }
+
+
+//    <div class="attribute">
+//                         <div class="names">孙全礼</div>
+//                         <div class="address">南郊村东二街30号</div>
+//                         <div class="nature">性质：农村宅基地</div>
+//                     </div>
+//                     <div class="distance">
+//                         <div class="size">103</div>
+//                         <div class="probably">大约120㎡ </div>
+//                     </div>
+//                     <div class="others">
+//                         <div class="information"></div>
+//                         <div class="editor"></div>
+//                     </div>
+
+
+          }
+      }
+      
+  }
+
+}
+
+
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+}
+ 
+::-webkit-scrollbar:vertical {
+    width: 8px;
+    border-radius: 8px;
+}
+ 
+::-webkit-scrollbar:horizontal {
+    height: 8px;
+    border-radius: 8px;
+}
+ 
+::-webkit-scrollbar-thumb {
+    background-color: #9f9f9f;;
+    border-radius: 8px;
+    border: 1px solid #ffffff;
+}
+ 
+::-webkit-scrollbar-track {
+    border-radius: 8px; 
+    background-color: #ffffff;
+}
+</style>
\ No newline at end of file