diff --git a/src/assets/images/homestead/address_more.png b/src/assets/images/homestead/address_more.png
new file mode 100644
index 00000000..efe46af1
Binary files /dev/null and b/src/assets/images/homestead/address_more.png differ
diff --git a/src/assets/images/homestead/drop-down.png b/src/assets/images/homestead/drop-down.png
new file mode 100644
index 00000000..d61a383b
Binary files /dev/null and b/src/assets/images/homestead/drop-down.png differ
diff --git a/src/assets/images/homestead/edit_icon.png b/src/assets/images/homestead/edit_icon.png
new file mode 100644
index 00000000..eb314784
Binary files /dev/null and b/src/assets/images/homestead/edit_icon.png differ
diff --git a/src/assets/images/homestead/farmlandEditSwitch_bg.png b/src/assets/images/homestead/farmlandEditSwitch_bg.png
new file mode 100644
index 00000000..71023832
Binary files /dev/null and b/src/assets/images/homestead/farmlandEditSwitch_bg.png differ
diff --git a/src/assets/images/homestead/farmlandEditSwitch_close.png b/src/assets/images/homestead/farmlandEditSwitch_close.png
new file mode 100644
index 00000000..a615d60f
Binary files /dev/null and b/src/assets/images/homestead/farmlandEditSwitch_close.png differ
diff --git a/src/assets/images/homestead/landHomestead_home.png b/src/assets/images/homestead/landHomestead_home.png
new file mode 100644
index 00000000..9942743f
Binary files /dev/null and b/src/assets/images/homestead/landHomestead_home.png differ
diff --git a/src/assets/images/homestead/login_bg.jpg b/src/assets/images/homestead/login_bg.jpg
new file mode 100644
index 00000000..b06ff882
Binary files /dev/null and b/src/assets/images/homestead/login_bg.jpg differ
diff --git a/src/assets/images/homestead/nd.png b/src/assets/images/homestead/nd.png
new file mode 100644
index 00000000..3c1716b5
Binary files /dev/null and b/src/assets/images/homestead/nd.png differ
diff --git a/src/assets/images/homestead/nf.png b/src/assets/images/homestead/nf.png
new file mode 100644
index 00000000..19177344
Binary files /dev/null and b/src/assets/images/homestead/nf.png differ
diff --git a/src/assets/images/homestead/operation/positioning.png b/src/assets/images/homestead/operation/positioning.png
new file mode 100644
index 00000000..7525b8ae
Binary files /dev/null and b/src/assets/images/homestead/operation/positioning.png differ
diff --git a/src/assets/images/homestead/operation/positioning_active.png b/src/assets/images/homestead/operation/positioning_active.png
new file mode 100644
index 00000000..7d58e06e
Binary files /dev/null and b/src/assets/images/homestead/operation/positioning_active.png differ
diff --git a/src/assets/images/homestead/operation/scale.png b/src/assets/images/homestead/operation/scale.png
new file mode 100644
index 00000000..2f6955e2
Binary files /dev/null and b/src/assets/images/homestead/operation/scale.png differ
diff --git a/src/assets/images/homestead/operation/scale_active.png b/src/assets/images/homestead/operation/scale_active.png
new file mode 100644
index 00000000..349b4d11
Binary files /dev/null and b/src/assets/images/homestead/operation/scale_active.png differ
diff --git a/src/assets/images/homestead/operation/spacing.png b/src/assets/images/homestead/operation/spacing.png
new file mode 100644
index 00000000..ec873bba
Binary files /dev/null and b/src/assets/images/homestead/operation/spacing.png differ
diff --git a/src/assets/images/homestead/operation/spacing_active.png b/src/assets/images/homestead/operation/spacing_active.png
new file mode 100644
index 00000000..33cb9088
Binary files /dev/null and b/src/assets/images/homestead/operation/spacing_active.png differ
diff --git a/src/assets/images/homestead/operation/tensile.png b/src/assets/images/homestead/operation/tensile.png
new file mode 100644
index 00000000..66f405b8
Binary files /dev/null and b/src/assets/images/homestead/operation/tensile.png differ
diff --git a/src/assets/images/homestead/operation/tensile_active.png b/src/assets/images/homestead/operation/tensile_active.png
new file mode 100644
index 00000000..b225ca2f
Binary files /dev/null and b/src/assets/images/homestead/operation/tensile_active.png differ
diff --git a/src/assets/images/homestead/others_location.png b/src/assets/images/homestead/others_location.png
new file mode 100644
index 00000000..17e670bc
Binary files /dev/null and b/src/assets/images/homestead/others_location.png differ
diff --git a/src/assets/images/homestead/positioning_icon.png b/src/assets/images/homestead/positioning_icon.png
new file mode 100644
index 00000000..5d301485
Binary files /dev/null and b/src/assets/images/homestead/positioning_icon.png differ
diff --git a/src/assets/images/homestead/searchBar_add.png b/src/assets/images/homestead/searchBar_add.png
new file mode 100644
index 00000000..18289c72
Binary files /dev/null and b/src/assets/images/homestead/searchBar_add.png differ
diff --git a/src/assets/images/homestead/searchBar_bar.png b/src/assets/images/homestead/searchBar_bar.png
new file mode 100644
index 00000000..ffd9e6ef
Binary files /dev/null and b/src/assets/images/homestead/searchBar_bar.png differ
diff --git a/src/assets/images/homestead/searchBar_close.png b/src/assets/images/homestead/searchBar_close.png
new file mode 100644
index 00000000..7f3789cb
Binary files /dev/null and b/src/assets/images/homestead/searchBar_close.png differ
diff --git a/src/assets/images/homestead/searchBar_close_gray.png b/src/assets/images/homestead/searchBar_close_gray.png
new file mode 100644
index 00000000..696e65c9
Binary files /dev/null and b/src/assets/images/homestead/searchBar_close_gray.png differ
diff --git a/src/assets/images/homestead/searchBar_save.png b/src/assets/images/homestead/searchBar_save.png
new file mode 100644
index 00000000..9b6ba128
Binary files /dev/null and b/src/assets/images/homestead/searchBar_save.png differ
diff --git a/src/assets/images/homestead/selectionNext_icon.png b/src/assets/images/homestead/selectionNext_icon.png
new file mode 100644
index 00000000..3aaea26a
Binary files /dev/null and b/src/assets/images/homestead/selectionNext_icon.png differ
diff --git a/src/assets/images/homestead/selection_icon.png b/src/assets/images/homestead/selection_icon.png
new file mode 100644
index 00000000..84a0f40e
Binary files /dev/null and b/src/assets/images/homestead/selection_icon.png differ
diff --git a/src/router/index.js b/src/router/index.js
index a0e9a5b5..1fcd77c0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -326,7 +326,29 @@ 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: {
+      title: '登录页',
+      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..f6838a8a
--- /dev/null
+++ b/src/views/homestead/index.vue
@@ -0,0 +1,1410 @@
+<template>
+  <div class="app-container">
+    <div class="map_area"></div>
+    <!--列表 定位-->
+    <div class="rightIcon_wrap">
+      <div class="positioning_wrap">
+        <div class="icon"></div>
+      </div>
+      <div class="selectionIcon_wrap">
+        <div class="icon"></div>
+        <div class="text">列表</div>
+      </div>
+    </div>
+    <!--列表拉取详情-->
+    <div class="homesteadList_wrap">
+      <div class="title_m">
+        <div class="more_icon"></div>
+        <div class="name">宅基地列表</div>
+      </div>
+      <div class="main_m">
+        <!--1-->
+        <div class="flex_block">
+          <div class="name_text">孙全礼</div>
+          <div class="square_text">80㎡</div>
+          <div class="operation_mian">
+            <div class="describe yph">已盘活</div>
+          </div>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <div class="name_text">杜永俭</div>
+          <div class="square_text">130㎡</div>
+          <div class="operation_mian">
+            <div class="describe dlzdph">待流转待盘活</div>
+          </div>
+        </div>
+      </div>
+      <div class="footerBtn_wrap">
+        <div class="options active">农房</div>
+        <div class="options">农地</div>
+      </div>
+    </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="actionBar_wrap">
+        <div class="m_list">
+          <div class="tensile active"><div class="icon"></div></div>
+        </div>
+        <div class="m_list">
+          <div class="positioning">
+            <div class="icon"></div>
+          </div>
+        </div>
+        <div class="m_list">
+          <div class="spacing">
+            <div class="icon"></div>
+          </div>
+        </div>
+        <div class="m_list">
+          <div class="scale">
+            <div class="icon"></div>
+          </div>
+        </div>
+
+        <div class="m_list">
+          <div class="closes gray">
+            <div class="icon"></div>
+          </div>
+        </div>
+        <div class="m_list">
+          <div class="correct"></div>
+        </div>
+      </div>
+      <div class="searchBar_area">
+        <div class="bar_icon"></div>
+        <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_icon"></div>
+        <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号南郊村东二街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 class="location"></div>
+              <div class="status_text">已盘活</div>
+            </div>
+            <div class="editor">
+              <div class="editor_icon"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--房地全部信息展示-->
+    <div class="landHomesteadDetails_wrap">
+      <div class="content_mian">
+        <!--内容-->
+        <div class="serial_flex">
+          <div class="number">农房编号<span>31</span></div>
+          <div class="localhref"></div>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">房屋所有人名称</span
+          ><span class="content">孙全礼</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">村名</span><span class="content">南郊村</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">地址</span
+          ><span class="content">东二街30号</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">是否有审批手续</span
+          ><span class="content">是</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">房屋所有权证号</span
+          ><span class="content">15-76-105</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">建筑面积</span
+          ><span class="content">大约80㎡</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">土地证号</span
+          ><span class="content">38718490184</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">土地性质</span
+          ><span class="content">农村宅基地</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">土地面积</span
+          ><span class="content">大约130㎡</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">现状情况</span
+          ><span class="content">已盘活</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">是否有流转意向</span
+          ><span class="content"></span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">租赁人</span
+          ><span class="content">李福任</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">租赁年限</span
+          ><span class="content">10年</span>
+        </div>
+        <!--1-->
+        <div class="flex_block">
+          <span class="describe">租赁合同截止日期</span
+          ><span class="content">2021.7.1-2031.6.30</span>
+        </div>
+        <!--上传图片-->
+        <div class="uploadPictures_block">
+          <div class="statusQuo">
+            <div class="picture"></div>
+            <div class="describe">现<br />状<br />图<br />片</div>
+          </div>
+          <div class="statusQuo">
+            <div class="picture"></div>
+            <div class="describe">历<br />史<br />图<br />片</div>
+          </div>
+        </div>
+        <!--编辑-->
+        <div class="editor_block">
+          <div class="editor_icon"></div>
+        </div>
+      </div>
+    </div>
+    <!--房地全部信息编辑-->
+    <div class="landHomesteadEdit_wrap">
+      <div class="content_mian">
+        <div class="info_title">录入宗地信息</div>
+        <div class="flex_main">
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">农房编号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="农房编号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">房屋所有人名称</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="房屋所有人名称"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s60 mr50">
+              <div class="title_m">地址</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="地址"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s40">
+              <div class="title_m">农房权属</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="农房权属"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s35 mr50">
+              <div class="title_m">是否有审批手续</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="审批手续"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+            <div class="number_s35 mr50">
+              <div class="title_m">建筑面积</div>
+              <div class="input_m about">
+                <span class="about_symbol">≈</span>
+                <van-field
+                  v-model="message"
+                  placeholder="建筑面积"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s30">
+              <div class="title_m">现状情况</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="现状情况"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">房屋所有权证号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="房屋所有权证号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">土地证号</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="土地证号"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s35 mr50">
+              <div class="title_m">土地性质</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="土地性质"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s35 mr50">
+              <div class="title_m">土地面积</div>
+              <div class="input_m about">
+                <span class="about_symbol">≈</span>
+                <van-field
+                  v-model="message"
+                  placeholder="土地面积"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s30">
+              <div class="title_m">是否有流转意向</div>
+              <div class="input_m select">
+                <i class="dropDown_icon"></i>
+                <van-field
+                  v-model="message"
+                  readonly
+                  clickable
+                  name="picker"
+                  placeholder="是否有流转意向"
+                  class="landHomesteadEdit_input"
+                  @click="showPicker = true"
+                />
+                <van-popup v-model="showPicker" position="bottom">
+                  <van-picker
+                    show-toolbar
+                    :columns="columns"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                  />
+                </van-popup>
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s50 mr50">
+              <div class="title_m">租赁人</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="租赁人"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+            <div class="number_s50">
+              <div class="title_m">租赁年限</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="租赁年限"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+          <!--1-->
+          <div class="flex_block">
+            <div class="number_s100">
+              <div class="title_m">租赁人</div>
+              <div class="input_m">
+                <van-field
+                  v-model="message"
+                  placeholder="租赁人"
+                  class="landHomesteadEdit_input"
+                />
+              </div>
+            </div>
+          </div>
+          <!--2-->
+          <div class="uploadPicturesFlex_block">
+            <div class="title_m">上传图片</div>
+            <div class="main_m">
+              <van-uploader v-model="fileList" multiple :max-count="2" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer_main">
+        <div class="cancel">取消</div>
+        <div class="save">保存</div>
+      </div>
+    </div>
+    <!--农地农房选择-->
+    <div class="farmlandEditSwitch_wrap">
+      <div class="mains">
+        <div class="close_btn"></div>
+        <div class="farmhouse">
+          <div class="icons"></div>
+          <p class="names">农房</p>
+        </div>
+        <div class="farmland">
+          <div class="icons"></div>
+          <p class="names">农地</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "homesteadLogin",
+  data() {
+    return {
+      message: "",
+      showPicker: false,
+      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
+      fileList: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    onConfirm(time) {
+      this.message = time;
+      this.showPicker = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.app-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  .rightIcon_wrap {
+    position: absolute;
+    right: 16px;
+    bottom: 160px;
+    .selectionIcon_wrap {
+      width: 74px;
+      background: #fff;
+      border-radius: 10px;
+      padding: 14px 0;
+
+      .icon {
+        width: 38px;
+        height: 38px;
+        background: url("../../assets/images/homestead/selection_icon.png")
+          no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto 4px;
+      }
+      .text {
+        font-size: 24px;
+        text-align: center;
+      }
+    }
+    .positioning_wrap {
+      width: 74px;
+      background: #fff;
+      margin-bottom: 16px;
+      border-radius: 10px;
+      height: 74px;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中*/
+      .icon {
+        width: 38px;
+        height: 38px;
+        background: url("../../assets/images/homestead/positioning_icon.png")
+          no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto;
+      }
+    }
+  }
+  .homesteadList_wrap {
+    display: none;
+    // display: flex;
+    position: absolute;
+    right: 0;
+    top: 20px;
+    bottom: 160px;
+    width: 536px;
+    background: #fff;
+    z-index: 999;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+
+    flex-direction: column;
+
+    .title_m {
+      color: #333;
+      line-height: 36px;
+      padding: 20px 40px 32px;
+      .name {
+        font-size: 40px;
+        line-height: 42px;
+        height: 42px;
+      }
+      .more_icon {
+        width: 38px;
+        height: 38px;
+        background: url("../../assets/images/homestead/selectionNext_icon.png")
+          no-repeat;
+        float: right;
+        margin-top: 2px;
+      }
+    }
+
+    .main_m {
+      overflow-y: auto;
+      padding: 0 40px;
+      // height: 300px;
+      flex: 1;
+      .flex_block {
+        height: 70px;
+        display: flex;
+        // justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        .name_text {
+          font-size: 34px;
+          flex: 1;
+        }
+        .square_text {
+          font-size: 34px;
+          flex: 0.8;
+        }
+        .operation_mian {
+          flex: 0 0 150px;
+          .describe {
+            font-size: 20px;
+            padding: 6px 12px;
+            float: right;
+            color: #fff;
+            &.yph {
+              background: #3cbf5b;
+              border-radius: 30px;
+            }
+          }
+        }
+      }
+    }
+    .footerBtn_wrap {
+      flex: 0 0 90px;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+
+      .options {
+        flex: 1;
+        font-size: 38px;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        height: 90px;
+        &:first-child {
+          border-bottom-left-radius: 15px;
+        }
+        &.active {
+          background: #3cbf5b;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .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: url("../../assets/images/homestead/address_more.png")
+            no-repeat;
+          background-size: 100% 100%;
+          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 28px 13px;
+    background: #fff;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    .actionBar_wrap {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      background: #fff;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      .m_list {
+        flex: 1;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+
+        .tensile,
+        .positioning,
+        .spacing,
+        .scale {
+          width: 76px;
+          height: 72px;
+          background: #ffffff;
+          border-radius: 8px;
+          box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
+          .icon {
+            width: 76px;
+            height: 72px;
+          }
+          &.active {
+            background: #333;
+            &.tensile {
+              .icon {
+                background: url("../../assets/images/homestead/operation/tensile_active.png")
+                  center center no-repeat;
+                background-size: 38px 50px;
+              }
+            }
+            &.positioning {
+              .icon {
+                background: url("../../assets/images/homestead/operation/positioning_active.png")
+                  center center no-repeat;
+                background-size: 38px 48px;
+              }
+            }
+            &.spacing {
+              .icon {
+                background: url("../../assets/images/homestead/operation/spacing_active.png")
+                  center center no-repeat;
+                background-size: 46px 46px;
+              }
+            }
+            &.scale {
+              .icon {
+                background: url("../../assets/images/homestead/operation/scale_active.png")
+                  center center no-repeat;
+                background-size: 48px 48px;
+              }
+            }
+          }
+        }
+        .tensile {
+          .icon {
+            background: url("../../assets/images/homestead/operation/tensile.png")
+              center center no-repeat;
+            background-size: 38px 50px;
+          }
+        }
+        .positioning {
+          .icon {
+            background: url("../../assets/images/homestead/operation/positioning.png")
+              center center no-repeat;
+            background-size: 38px 48px;
+          }
+        }
+        .spacing {
+          .icon {
+            background: url("../../assets/images/homestead/operation/spacing.png")
+              center center no-repeat;
+            background-size: 46px 46px;
+          }
+        }
+        .scale {
+          .icon {
+            background: url("../../assets/images/homestead/operation/scale.png")
+              center center no-repeat;
+            background-size: 48px 48px;
+          }
+        }
+        .closes {
+          background: url("../../assets/images/homestead/searchBar_close.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: 72px;
+          height: 72px;
+          &.gray {
+            background: url("../../assets/images/homestead/searchBar_close_gray.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .correct {
+          background: url("../../assets/images/homestead/searchBar_save.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: 72px;
+          height: 72px;
+        }
+      }
+    }
+    .searchBar_area {
+      flex: 1;
+      height: 80px;
+      background: #f1f1f1;
+      border: 1px solid #dfdfdf;
+      border-radius: 10px;
+      padding: 0 28px;
+      display: flex;
+      .bar_icon {
+        width: 50px;
+        height: 50px;
+        background: url("../../assets/images/homestead/searchBar_bar.png")
+          center center no-repeat;
+        background-size: 100% 100%;
+        margin-top: 14px;
+        margin-right: 15px;
+      }
+      .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: url("../../assets/images/homestead/searchBar_add.png") center
+        center no-repeat;
+      background-size: 80% 80%;
+      margin-left: 15px;
+    }
+  }
+  .landHomestead_wrap {
+    display: none;
+    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_icon {
+        width: 50px;
+        height: 50px;
+        background: url("../../assets/images/homestead/searchBar_bar.png")
+          center center no-repeat;
+        background-size: 95% 95%;
+        margin-top: 14px;
+        margin-right: 15px;
+      }
+      .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: block;
+        overflow: hidden;
+        .attribute {
+          width: 42%;
+          float: left;
+
+          .names {
+            height: 54px;
+            padding-left: 46px;
+            background: url("../../assets/images/homestead/landHomestead_home.png")
+              left center no-repeat;
+            background-size: 38px 36px;
+            font-size: 40px;
+            line-height: 54px;
+            color: #333333;
+            margin-bottom: 12px;
+          }
+          .address {
+            height: 48px;
+            line-height: 48px;
+            font-size: 28px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-break: break-all;
+            margin-right: 8px;
+          }
+          .nature {
+            height: 48px;
+            font-size: 28px;
+          }
+        }
+        .distance {
+          width: 29%;
+          float: left;
+          .size {
+            height: 54px;
+            line-height: 54px;
+            font-size: 40px;
+            color: #333333;
+            margin-bottom: 12px;
+          }
+          .probably {
+            line-height: 48px;
+            font-size: 28px;
+            height: 48px;
+          }
+        }
+        .others {
+          width: 29%;
+          float: left;
+          .information {
+            height: 54px;
+            margin-bottom: 12px;
+            .status_text {
+              color: #fff;
+              font-size: 24px;
+              background: #3cbf5b;
+              border-radius: 20px;
+              padding: 8px 15px;
+              float: right;
+            }
+            .location {
+              width: 36px;
+              height: 36px;
+              background: url("../../assets/images/homestead/others_location.png")
+                no-repeat;
+              float: right;
+              margin: 8px 0 0 20px;
+            }
+          }
+          .editor {
+            height: 96px;
+            .editor_icon {
+              width: 72px;
+              height: 72px;
+              float: right;
+              background: #000;
+              margin-top: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .landHomesteadDetails_wrap {
+    display: none;
+    // display: flex;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: calc(100% - 190px);
+
+    .content_mian {
+      flex: 1;
+      margin: 0 16px;
+      padding: 28px 40px 28px 40px;
+      background: #fff;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      display: flex;
+      flex-direction: column;
+      .serial_flex {
+        flex: 0 0 60px;
+        margin-bottom: 15px;
+        font-size: 40px;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        color: #333;
+        display: flex;
+        .number {
+          flex: 1;
+          span {
+            padding-left: 30px;
+          }
+        }
+        .localhref {
+          height: 36px;
+          flex: 0 0 36px;
+          background: url("../../assets/images/homestead/others_location.png")
+            no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .flex_block {
+        flex: 1;
+        font-size: 28px;
+        .describe {
+          color: #555;
+          padding-right: 30px;
+        }
+        .content {
+          font-size: #333;
+        }
+      }
+      .uploadPictures_block {
+        flex: 0 0 160px;
+        display: flex;
+        max-width: 90%;
+        .statusQuo {
+          flex: 1;
+          display: flex;
+          &:first-child {
+            margin-right: 36px;
+          }
+          .picture {
+            flex: 1;
+            background: #000;
+          }
+          .describe {
+            flex: 0 0 32px;
+            display: flex;
+            justify-content: center; /* 相对父元素水平居中 */
+            align-items: center; /*  子元素相对父元素垂直居中 */
+            margin-left: 6px;
+          }
+        }
+      }
+      .editor_block {
+        flex: 0 0 72px;
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+        .editor_icon {
+          width: 70px;
+          height: 70px;
+          background: url("../../assets/images/homestead/edit_icon.png")
+            no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      //  <div class="editor_block">
+      //   <div class="editor_icon"></div>
+      // </div>
+    }
+  }
+  .landHomesteadEdit_wrap {
+    display: none;
+    // display: flex;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: calc(100% - 190px);
+    flex-direction: column;
+    .content_mian {
+      flex: 1;
+      margin: 0 16px;
+      padding: 28px 25px 28px 40px;
+      background: #fff;
+      border-top-left-radius: 15px;
+      border-top-right-radius: 15px;
+      display: flex;
+      flex-direction: column;
+      .info_title {
+        flex: 0 0 60px;
+        margin-bottom: 15px;
+        font-size: 40px;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        color: #333;
+      }
+      .flex_main {
+        height: 890px;
+        padding-right: 15px;
+        overflow-y: auto;
+      }
+      .flex_block {
+        height: 100px;
+        margin-bottom: 20px;
+        .number_s50 {
+          width: 50%;
+          display: flex;
+          float: left;
+          flex-direction: column;
+        }
+        .number_s100 {
+          width: 100%;
+          float: left;
+          display: flex;
+          flex-direction: column;
+        }
+        .number_s60 {
+          // flex: 0.6;
+          width: 60%;
+          float: left;
+          display: flex;
+          flex-direction: column;
+        }
+        .number_s40 {
+          // flex: 0.4;
+          width: 40%;
+          display: flex;
+          flex-direction: column;
+        }
+        .number_s35 {
+          width: 35%;
+          float: left;
+          display: flex;
+          flex-direction: column;
+        }
+        .number_s30 {
+          width: 30%;
+          display: flex;
+          float: left;
+          flex-direction: column;
+        }
+        .title_m {
+          font-size: 28px;
+          flex: 0 0 50px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+          align-items: center; /*  子元素相对父元素垂直居中 */
+        }
+        .input_m {
+          &.select {
+            position: relative;
+            .dropDown_icon {
+              width: 20px;
+              height: 16px;
+              background: url("../../assets/images/homestead/drop-down.png")
+                no-repeat;
+              background-size: 100% 100%;
+              display: block;
+              position: absolute;
+              right: 8px;
+              top: 12px;
+              z-index: 99;
+            }
+          }
+          &.about {
+            position: relative;
+            .about_symbol {
+              position: absolute;
+              left: 8px;
+              top: 5px;
+              z-index: 99;
+            }
+            /deep/ {
+              .van-field__control {
+                padding-left: 38px;
+              }
+            }
+          }
+
+          .van-cell {
+            padding: 0;
+            /deep/ {
+              .van-field__control {
+                border-bottom: 1px solid #707070;
+                &:focus {
+                  border-color: #3cbf5b;
+                  color: #3cbf5b;
+                }
+              }
+            }
+          }
+        }
+        .mr50 {
+          padding-right: 50px;
+        }
+      }
+      .uploadPicturesFlex_block {
+        .title_m {
+          font-size: 28px;
+          flex: 0 0 50px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+          align-items: center; /*  子元素相对父元素垂直居中 */
+          margin-bottom: 20px;
+        }
+        .main_m {
+        }
+      }
+    }
+    .footer_main {
+      flex: 0 0 120px;
+      background: #fff;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      .cancel,
+      .save {
+        width: 260px;
+        height: 75px;
+        border-radius: 75px;
+        background: #cccccc;
+        font-size: 32px;
+        color: #fff;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+      .save {
+        background: #3cbf5b;
+        margin-left: 50px;
+      }
+    }
+  }
+  .farmlandEditSwitch_wrap {
+    display: none;
+    width: 100vw;
+    height: 100vh;
+    background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png")
+      no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1001;
+    .mains {
+      width: 544px;
+      height: 480px;
+      background: #fff;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -272px 0 0 -240px;
+      z-index: 1002;
+      border-radius: 30px;
+      padding: 0 30px;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      .close_btn {
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        background: url("../../assets/images/homestead/farmlandEditSwitch_close.png")
+          no-repeat;
+        background-size: 100% 100%;
+        right: 40px;
+        top: 40px;
+      }
+      .farmhouse {
+        flex: 1;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+      .farmland {
+        flex: 1;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+      .farmhouse,
+      .farmland {
+        flex-direction: column;
+        .icons {
+          width: 146px;
+          height: 146px;
+          margin-bottom: 14px;
+        }
+        .names {
+          font-size: 40px;
+          color: #3cbf5b;
+        }
+      }
+      .farmhouse {
+        .icons {
+          background: url("../../assets/images/homestead/nf.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .farmland {
+        .icons {
+          background: url("../../assets/images/homestead/nd.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      // <div class="farmhouse">
+      //     <div class="icons"></div>
+      //     <p class="names">农房</p>
+      //   </div>
+      //   <div class="farmland">
+      //     <div class="icons"></div>
+      //     <p class="names">农地</p>
+      //   </div>
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar:vertical {
+  width: 10px;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 10px;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #eee;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #ffffff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/homestead/login.vue b/src/views/homestead/login.vue
new file mode 100644
index 00000000..0217fcc3
--- /dev/null
+++ b/src/views/homestead/login.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="app-container">
+    <div class="login_header"></div>
+    <div class="login_content">
+      <div class="homestead_wrap">
+        <div class="key_title">两清三化宅基地</div>
+        <div class="slogan">随时随地管理宅基地</div>
+      </div>
+      <div class="from_wrap">
+        <div class="from_content">
+          <div class="signIn_container">
+            <div class="signIn_input_wrap">
+              <van-field
+                v-model="message"
+                autosize
+                placeholder="请输入手机号"
+              />
+            </div>
+          </div>
+          <div class="signIn_container">
+            <div class="signIn_input_wrap">
+              <van-field v-model="message" autosize placeholder="请输入密码" />
+            </div>
+          </div>
+          <div class="signIn_container">
+            <div class="signIn_input_wrap">
+              <div class="verification_code">
+                <van-field
+                  v-model="message"
+                  autosize
+                  placeholder="请输入验证码"
+                />
+              </div>
+              <div class="verification_images"></div>
+            </div>
+          </div>
+          <div class="signIn_container">
+            <div class="remember_num">
+              <van-radio-group v-model="radio">
+                <van-radio name="1" icon-size="16px" checked-color="#3CBF5B"
+                  >记住密码</van-radio
+                >
+              </van-radio-group>
+            </div>
+          </div>
+        </div>
+        <div class="from_btn">登录</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "homesteadLogin",
+  data() {
+    return {
+      message: "",
+      radio: "2",
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  .login_header {
+    flex: 0.35;
+    background: url("../../assets/images/homestead/login_bg.jpg") center bottom
+      no-repeat;
+    background-size: 100% 100%;
+  }
+  .login_content {
+    flex: 0.65;
+    display: flex;
+    flex-direction: column;
+
+    .homestead_wrap {
+      flex: 0.28;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      flex-direction: column;
+      .key_title {
+        font-size: 56px;
+        margin-bottom: 10px;
+      }
+      .slogan {
+        font-size: 32px;
+        color: #9f9f9f;
+      }
+    }
+    .from_wrap {
+      flex: 0.72;
+      padding-bottom: 14%;
+      flex-direction: column;
+      display: flex;
+      margin: 0 40px;
+      .from_content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 14%;
+        .signIn_container {
+          flex: 1;
+          display: flex;
+          margin-bottom: 18px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          .signIn_input_wrap {
+            flex: 1;
+            display: flex;
+            .verification_code {
+              flex: 1;
+            }
+            .verification_images {
+              flex: 0 0 220px;
+              margin-left: 20px;
+            }
+            .van-cell {
+              border: 2px solid #f1f0f5;
+              border-radius: 46px;
+              font-size: 32px;
+            }
+          }
+          .remember_num {
+            margin-left: 14px;
+            font-size: 28px;
+            color: #3cbf5b;
+          }
+        }
+      }
+      .from_btn {
+        display: flex;
+        flex: 0 0 80px;
+        background: #3cbf5b;
+        border-radius: 40px;
+        font-size: 36px;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file