diff --git a/src/api/home/index.js b/src/api/home/index.js
new file mode 100644
index 0000000..6354065
--- /dev/null
+++ b/src/api/home/index.js
@@ -0,0 +1,181 @@
+/*
+ * @Author: 许宏杰
+ * @Date: 2022-03-31 15:28:43
+ * @LastEditors: 许宏杰
+ * @LastEditTime: 2022-05-24 09:48:55
+ * @FilePath: \taicangpopulationpc\src\api\home\index.js
+ */
+import request from "@/utils/request";
+
+// 获取网格员id
+export function getNetWorkId(params) {
+  return request({
+    url: "/taicangpop/data/getparentid",
+    method: "GET",
+    params,
+  });
+}
+
+//查询总数统计数据列表
+export function getTotaldata(params) {
+  return request({
+    url: "/taicangpop/data/totaldata",
+    method: "GET",
+    params,
+  });
+}
+//查询颜色列表
+export function getColorList(params) {
+  return request({
+    url: "/taicangpop/data/grouphousedata",
+    method: "GET",
+    params,
+  });
+}
+//页面初始化（加载网格排名）
+export function initGetNetWorkData(params) {
+  return request({
+    url: "/taicangpop/data/parenttimedata",
+    method: "GET",
+    params,
+  });
+}
+//根据网格园名字进行排名
+export function netWorkNameP(params) {
+  return request({
+    url: "/taicangpop/data/parentpersondata",
+    method: "GET",
+    params,
+  });
+}
+//echatr图标数据
+export function echartsData(params) {
+  return request({
+    url: "/taicangpop/data/timedata",
+    method: "GET",
+    params,
+  });
+}
+
+//输入框搜索
+
+export function inputSearch(params) {
+  return request({
+    url: "/taicangpop/data/getxinxi",
+    method: "GET",
+    params,
+  });
+}
+
+//网格员帅选简介
+export function getNectWorkOffice(params) {
+  return request({
+    url: "/taicangpop/data/getpeopellist",
+    method: "GET",
+    params,
+  });
+}
+//根据person查询数据
+export function getPersonData(params) {
+  return request({
+    url: "/taicangpop/data/persontimedata",
+    method: "GET",
+    params,
+  });
+}
+//根据person时间百分比查询数据
+export function getPersonTimePm(params) {
+  return request({
+    url: "/taicangpop/data/personparenttimedata",
+    method: "GET",
+    params,
+  });
+}
+//根据person人百分比查询数据
+export function getPersonremPm(params) {
+  return request({
+    url: "/taicangpop/data/personparentpersondata",
+    method: "GET",
+    params,
+  });
+}
+//获取小区信息
+export function getxiaoqu(deptId) {
+  return request({
+    url: `/taicangpop/data/${deptId}`,
+    method: "GET",
+  });
+}
+//预警列表
+export function getWarningList(params) {
+  return request({
+    url: "/taicangpop/data/getyujing",
+    method: "GET",
+    params,
+  });
+}
+//回收中心
+export function getRecycleList(params) {
+  return request({
+    url: "/taicangpop/recycle/list",
+    method: "GET",
+    params,
+  });
+}
+//导出搜索中心
+export function exportSearch(params) {
+  return request({
+    url: "/taicangpop/data/exportxinxi",
+    method: "GET",
+    params,
+  });
+}
+//导出预警列表
+export function exportyujing(params) {
+  return request({
+    url: "/taicangpop/data/exportyujing",
+    method: "GET",
+    params,
+  });
+}
+
+// 回收站导出
+export function exportHuishou(params) {
+  return request({
+    url: "/taicangpop/recycle/export",
+    method: "GET",
+    params,
+  });
+}
+//回收表恢复
+export function recoverData(data) {
+  return request({
+    url: "/taicangpop/recycle",
+    method: "POST",
+    data,
+  });
+}
+//删除回收中心数据
+export function removeData(ids) {
+  return request({
+    url: `/taicangpop/recycle/${ids}`,
+    method: "DELETE",
+  });
+}
+
+//获取日志中心list
+export function getLog(params) {
+  return request({
+    url: "/taicangpop/log/list",
+    method: "GET",
+    params,
+  });
+}
+//导出日志中心数据
+export function exportLog(params) {
+  return request({
+    url: "/taicangpop/log/export",
+    method: "GET",
+    params,
+  });
+}
diff --git a/src/api/taicangpop/block.js b/src/api/taicangpop/block.js
new file mode 100644
index 0000000..8f10bff
--- /dev/null
+++ b/src/api/taicangpop/block.js
@@ -0,0 +1,71 @@
+import request from "@/utils/request";
+
+// 查询街区管理列表
+export function listBlock(query) {
+  return request({
+    url: "/taicangpop/block/list",
+    headers: {
+      isToken: false,
+    },
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询街区管理详细
+export function getBlock(id) {
+  return request({
+    url: "/taicangpop/block/" + id,
+    headers: {
+      isToken: false,
+    },
+    method: "get",
+  });
+}
+
+// 新增街区管理
+export function addBlock(data) {
+  return request({
+    url: "/taicangpop/block",
+    headers: {
+      isToken: false,
+    },
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改街区管理
+export function updateBlock(data) {
+  return request({
+    url: "/taicangpop/block",
+    headers: {
+      isToken: false,
+    },
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除街区管理
+export function delBlock(id) {
+  return request({
+    url: "/taicangpop/block/" + id,
+    headers: {
+      isToken: false,
+    },
+    method: "delete",
+  });
+}
+
+// 导出街区管理
+export function exportBlock(query) {
+  return request({
+    url: "/taicangpop/block/export",
+    headers: {
+      isToken: false,
+    },
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/api/taicangpop/building.js b/src/api/taicangpop/building.js
new file mode 100644
index 0000000..23aaad3
--- /dev/null
+++ b/src/api/taicangpop/building.js
@@ -0,0 +1,68 @@
+import request from "@/utils/request";
+
+// 查询楼栋管理列表
+export function listBuilding(query) {
+  return request({
+    url: "/taicangpop/building/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询楼栋管理详细
+export function getBuilding(id) {
+  return request({
+    url: "/taicangpop/building/" + id,
+    method: "get",
+  });
+}
+
+// 新增楼栋管理
+export function addBuilding(data) {
+  return request({
+    url: "/taicangpop/building",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改楼栋管理
+export function updateBuilding(data) {
+  return request({
+    url: "/taicangpop/building",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除楼栋管理
+export function delBuilding(id) {
+  return request({
+    url: "/taicangpop/building/" + id,
+    method: "delete",
+  });
+}
+
+// 导出楼栋管理
+export function exportBuilding(query) {
+  return request({
+    url: "/taicangpop/building/export",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询楼栋管理排摸
+export function listPaimoBuilding(id) {
+  return request({
+    url: "/taicangpop/building/getListNew?deptid=" + id,
+    method: "get",
+  });
+}
+
+// export function listPaimoBuilding(id) {
+//   return request({
+//     url: "/taicangpop/building/getListNew2?deptId=" + id,
+//     method: "get",
+//   });
+// }
diff --git a/src/api/taicangpop/check.js b/src/api/taicangpop/check.js
new file mode 100644
index 0000000..93a8698
--- /dev/null
+++ b/src/api/taicangpop/check.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询巡检记录管理列表
+export function listCheck(query) {
+  return request({
+    url: '/taicangpop/check/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询巡检记录管理详细
+export function getCheck(id) {
+  return request({
+    url: '/taicangpop/check/' + id,
+    method: 'get'
+  })
+}
+
+// 新增巡检记录管理
+export function addCheck(data) {
+  return request({
+    url: '/taicangpop/check',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改巡检记录管理
+export function updateCheck(data) {
+  return request({
+    url: '/taicangpop/check',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除巡检记录管理
+export function delCheck(id) {
+  return request({
+    url: '/taicangpop/check/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出巡检记录管理
+export function exportCheck(query) {
+  return request({
+    url: '/taicangpop/check/export',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file
diff --git a/src/api/taicangpop/data.js b/src/api/taicangpop/data.js
new file mode 100644
index 0000000..612e991
--- /dev/null
+++ b/src/api/taicangpop/data.js
@@ -0,0 +1,46 @@
+import request from "@/utils/request";
+
+// 修改户主
+export function updateHolder(data) {
+  return request({
+    url: `/taicangpop/data/sethouse?id=${data.id}&houseid=${data.houseid}`,
+    method: "post",
+  });
+}
+
+export function getNum(data) {
+  return request({
+    url: `/taicangpop/data/getnum?buildingid=${data.buildingid}`,
+    method: "get",
+  });
+}
+
+export function getPeopellist(data) {
+  return request({
+    url: `/taicangpop/data/getpeopellist?deptid=${data.deptid}&deptname=${data.deptname}`,
+    method: "get",
+  });
+}
+// 获取社保信息
+export function getPeopelShebaoInfo(data) {
+  return request({
+    url: `/taicangpop/datasql/diaoyong?SFZH=${data.SFZH}`,
+    method: "get",
+  });
+}
+
+// 获取社区List-ID
+export function getCommunitylist() {
+  return request({
+    url: `/taicangpop/data/getshequ`,
+    method: "get",
+  });
+}
+
+// 获取小区List-ID
+export function getXiaoqulist() {
+  return request({
+    url: `taicangpop/data/getxiaoqulist`,
+    method: "get",
+  });
+}
diff --git a/src/api/taicangpop/house.js b/src/api/taicangpop/house.js
new file mode 100644
index 0000000..081019e
--- /dev/null
+++ b/src/api/taicangpop/house.js
@@ -0,0 +1,69 @@
+import request from "@/utils/request";
+
+// 查询住户管理列表
+export function listHouse(query) {
+  return request({
+    url: "/taicangpop/house/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询住户管理详细
+export function getHouse(id) {
+  return request({
+    url: "/taicangpop/house/" + id,
+    method: "get",
+  });
+}
+
+// 新增住户管理
+export function addHouse(data) {
+  return request({
+    url: "/taicangpop/house",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改住户管理
+export function updateHouse(data) {
+  return request({
+    url: "/taicangpop/house",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除住户管理
+export function delHouse(id) {
+  return request({
+    url: "/taicangpop/house/" + id,
+    method: "delete",
+  });
+}
+
+// 导出住户管理
+export function exportHouse(query) {
+  return request({
+    url: "/taicangpop/house/export",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询住户管理排摸
+// export function listPaimoHouse(id) {
+//   return request({
+//     url: "/taicangpop/house/getweigengxin?buildingid=" + id,
+//     method: "get",
+//   });
+// }
+
+// 查询住户管理排摸
+export function listPaimoHouse(id) {
+  return request({
+    url: "/taicangpop/house/getweigengxinnew?buildingid=" + id,
+    method: "get",
+  });
+}
diff --git a/src/api/taicangpop/person.js b/src/api/taicangpop/person.js
new file mode 100644
index 0000000..77410d4
--- /dev/null
+++ b/src/api/taicangpop/person.js
@@ -0,0 +1,53 @@
+import request from "@/utils/request";
+
+// 查询居民管理列表
+export function listPerson(query) {
+  return request({
+    url: "/taicangpop/person/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询居民管理详细
+export function getPerson(id) {
+  return request({
+    url: "/taicangpop/person/" + id,
+    method: "get",
+  });
+}
+
+// 新增居民管理
+export function addPerson(data) {
+  return request({
+    url: "/taicangpop/person",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改居民管理
+export function updatePerson(data) {
+  return request({
+    url: "/taicangpop/person",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除居民管理
+export function delPerson(id) {
+  return request({
+    url: "/taicangpop/person/" + id,
+    method: "delete",
+  });
+}
+
+// 导出居民管理
+export function exportPerson(query) {
+  return request({
+    url: "/taicangpop/person/export",
+    method: "get",
+    params: query,
+  });
+}
diff --git a/src/api/taicangpop/recycle.js b/src/api/taicangpop/recycle.js
new file mode 100644
index 0000000..4c38eb1
--- /dev/null
+++ b/src/api/taicangpop/recycle.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function listRecycle(query) {
+  return request({
+    url: '/taicangpop/recycle/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询【请填写功能名称】详细
+export function getRecycle(id) {
+  return request({
+    url: '/taicangpop/recycle/' + id,
+    method: 'get'
+  })
+}
+
+// 新增【请填写功能名称】
+export function addRecycle(data) {
+  return request({
+    url: '/taicangpop/recycle',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改【请填写功能名称】
+export function updateRecycle(data) {
+  return request({
+    url: '/taicangpop/recycle',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除【请填写功能名称】
+export function delRecycle(id) {
+  return request({
+    url: '/taicangpop/recycle/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出【请填写功能名称】
+export function exportRecycle(query) {
+  return request({
+    url: '/taicangpop/recycle/export',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 85dc934..de7ef1c 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -189,3 +189,8 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+.input-general-width {
+  //input常规宽度
+  width: 140px;
+}
diff --git a/src/components/ColorCell/index.vue b/src/components/ColorCell/index.vue
new file mode 100644
index 0000000..06a32d1
--- /dev/null
+++ b/src/components/ColorCell/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="grid-item-main">
+    <div class="corlor-grid">
+      <div class="left-color" :style="{ background: item.leftColor }"></div>
+      <div class="rigth-color">
+        <div :style="{ background: item.rightTopColor }"></div>
+        <div
+          class="rigth-bottom"
+          v-show="item.color == 'HF' || item.color == 'NF'"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.grid-item-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .corlor-grid {
+    position: relative;
+    height: 20px;
+    width: 48px;
+    border: 1px solid white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left-color {
+      flex: 1;
+      height: 100%;
+    }
+    .rigth-color {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      border-left: 1px solid white;
+      & > div {
+        flex: 1;
+        width: 100%;
+      }
+      .rigth-bottom {
+        background: red;
+        border-top: 1px solid white;
+      }
+    }
+    .house_number {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      font-size: 0.23rem;
+    }
+    .grid-islable {
+      position: absolute;
+      top: -50%;
+      left: 0;
+      width: 120%;
+      text-align: left;
+      img {
+        display: inline-block;
+        width: 0.22rem;
+        height: 0.22rem;
+      }
+    }
+    .grid-point {
+      position: absolute;
+      right: -25%;
+      height: 0.09rem;
+      width: 0.09rem;
+      border-radius: 50%;
+      border: 0.03rem solid white;
+    }
+  }
+}
+</style>
diff --git a/src/components/NavigationBar/index.vue b/src/components/NavigationBar/index.vue
index 40a3d2c..78f84f9 100644
--- a/src/components/NavigationBar/index.vue
+++ b/src/components/NavigationBar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="navigation-bar">
-    <div class="navigation-left">
+    <div class="navigation-left" v-show="showLeft">
       <el-badge
         :value="item.badge ? item.badge : ''"
         class="item"
@@ -16,7 +16,7 @@
       <div class="main-title" :text="mainTitle">{{ mainTitle }}</div>
       <div class="sub-title" :text="subTitle">{{ subTitle }}</div>
     </div>
-    <div class="navigation-right">
+    <div class="navigation-right" v-show="showRight">
       <div class="reset"></div>
       <el-button type="text">后台管理</el-button>
       <el-button type="text">美丽街区</el-button>
@@ -27,7 +27,7 @@
     </div>
 
     <!-- 四个中心 -->
-    <el-dialog :visible.sync="open" top="25vh" :modal="false" width="1158px">
+    <el-dialog :visible.sync="open" :modal="false" width="990px">
       <div class="dialog-main">
         <div class="dialog-title"><span></span> {{ title }}</div>
         <peopleCentre v-if="title == '搜索中心'" />
@@ -50,6 +50,16 @@ export default {
     logCentre,
   },
   props: {
+    //显示左边四个中心
+    showLeft: {
+      type: Boolean,
+      default: true,
+    },
+    //显示右边
+    showRight: {
+      type: Boolean,
+      default: true,
+    },
     mainTitle: {
       type: String,
       default: "娄东街道人口数据管理系统",
@@ -212,9 +222,9 @@ export default {
 ::v-deep .el-dialog__body {
   background: #009bf4;
   border-radius: 12px;
-  padding: 2px;
+  padding: 1px;
 }
 ::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 23vh !important;
+  margin-top: 10vh !important;
 }
 </style>
diff --git a/src/components/NavigationBar/peopleCentre.vue b/src/components/NavigationBar/peopleCentre.vue
index 4c199ef..1fa796d 100644
--- a/src/components/NavigationBar/peopleCentre.vue
+++ b/src/components/NavigationBar/peopleCentre.vue
@@ -20,19 +20,292 @@
         </el-option>
       </el-select>
     </div>
+    <div class="option-rows">
+      <el-select v-model="value" placeholder="选择网格">
+        <el-option
+          v-for="item in community"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="value" placeholder="选择苑">
+        <el-option
+          v-for="item in xiaoqu"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="value" placeholder="选择楼栋">
+        <el-option
+          v-for="item in xiaoqu"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select v-model="value" placeholder="选择住户">
+        <el-option
+          v-for="item in xiaoqu"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="option-rows">
+      <el-select v-model="value" placeholder="选择分色">
+        <el-option
+          v-for="item in xiaoqu"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-radio-group v-model="radio">
+        <el-radio :label="1">户籍</el-radio>
+        <el-radio :label="2">流动</el-radio>
+      </el-radio-group>
+
+      <el-checkbox-group v-model="checkList">
+        <el-checkbox label="党员"></el-checkbox>
+        <el-checkbox label="困难户"></el-checkbox>
+        <el-checkbox label="信访户"></el-checkbox>
+        <el-checkbox label="退役军人"></el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <div class="three-option">
+      <div class="option-list">
+        <div
+          class="option-list-item"
+          v-for="(item, index) in tabList"
+          :key="index"
+          @click="handleClick(index)"
+          :class="currentIndex == index ? 'activeItme' : ''"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="option-input">
+        <el-select
+          v-model="credentialnoType"
+          placeholder="选择分色"
+          v-show="currentIndex == 0"
+          class="input-general-width"
+        >
+          <el-option
+            v-for="item in optionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-input
+          prefix-icon="el-icon-search"
+          placeholder="请输入内容"
+          v-model="keyWord"
+          class="input-big-width"
+        >
+        </el-input>
+        <el-button type="text" @click="handleSearch()">搜索</el-button>
+        <el-button type="text" @click="handleReset()">重置</el-button>
+        <el-button type="text">导出</el-button>
+      </div>
+    </div>
+
+    <div class="result-list">
+      <div class="list-header">
+        <div class="header-left-total">
+          搜索结果列表 {{ houseTotal }}户 {{ total }}人
+        </div>
+        <div class="header-rigth-total">共{{ total }}条数据</div>
+      </div>
+      <div class="list-table">
+        <div class="table-header">
+          <div class="table-cell0">序号</div>
+          <div class="table-cell1">姓名</div>
+          <div class="table-cell1">证件号</div>
+          <div class="table-cell1">手机号</div>
+          <div class="table-cell2">家庭地址</div>
+          <div class="table-cell1">分色</div>
+        </div>
+        <div class="table-body" style="overflow: auto" v-infinite-scroll="load">
+          <div
+            class="body-rows"
+            v-for="(item, index) in list"
+            :key="'rows' + index"
+          >
+            <div class="table-cell0">{{ index + 1 }}</div>
+            <div class="table-cell1">{{ item.name }}</div>
+            <div class="table-cell1">{{ item.credentialNo }}</div>
+            <div class="table-cell1">{{ item.phone }}</div>
+            <div class="table-cell2">
+              {{
+                item.shequ_name +
+                item.xiaoqu_name +
+                item.deptname +
+                item.buildingname +
+                item.housename
+              }}
+            </div>
+            <div class="table-cell1 cell-flex">
+              <ColorCell :item="item" />
+              <span style="margin-left: 3px">{{ item.color }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { getNetWorkId, inputSearch } from "@/api/home/index.js";
+import { mapGetters } from "vuex";
+import ColorCell from "@/components/ColorCell";
 export default {
+  components: { ColorCell },
+  computed: {
+    ...mapGetters(["leftColor", "rightTopColor"]),
+  },
   data() {
     return {
+      input3: "",
+      currentIndex: 0,
+      credentialnoType: 0,
+      tabList: [
+        { name: "身份证", value: 0 },
+        { name: "手机号", value: 1 },
+        { name: "姓名", value: 2 },
+      ],
+      optionList: [
+        { name: "完整身份证号", value: 0 },
+        { name: "省级(前2位)", value: 1 },
+        { name: "市级(前4位)", value: 2 },
+        { name: "县级(前6位)", value: 3 },
+      ],
+      checkList: [],
+      radio: "",
       value: "",
-      queryParams: {},
+      keyWord: "",
+      queryParams: {
+        credentialno: undefined, //身份证(全)
+        cre1: undefined, //身份证(2)
+        cre2: undefined, //身份证(4)
+        cre3: undefined, //身份证(6)
+        phone: undefined,
+        name: undefined,
+        pageNum: 1,
+        pageSize: 10,
+      },
       community: [],
       xiaoqu: [],
+      list: [],
+      houseTotal: 0,
+      total: 0,
     };
   },
+  mounted() {},
+  methods: {
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.reset();
+      if (this.currentIndex == 0) {
+        if (this.credentialnoType == 0) {
+          this.queryParams.credentialno = this.keyWord;
+        } else {
+          this.queryParams["cre" + this.credentialnoType] = this.keyWord;
+        }
+      }
+      if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
+      if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
+
+      this.load();
+    },
+
+    /**
+     * 重置操作
+     */
+    handleReset() {
+      this.keyWord = "";
+      this.credentialnoType = 0;
+      this.reset();
+      this.load();
+    },
+    /**
+     * 三个输入方式
+     */
+    handleClick(index) {
+      if (this.currentIndex == index) return;
+      this.keyWord = "";
+      this.currentIndex = index;
+    },
+    /**
+     * 加载更多
+     */
+    load() {
+      if (this.list.length > 0 && this.list.length >= this.total) return;
+      this.getList();
+    },
+    /**
+     * 获取list
+     */
+    async getList() {
+      let result = await inputSearch(this.queryParams);
+      let handleColor = this.handleColor(result.data.xinxilist.rows);
+      this.list = [...this.list, ...handleColor];
+      this.houseTotal = result.data.count;
+      this.total = result.data.xinxilist.total;
+      this.queryParams.pageNum++;
+    },
+
+    /**
+     * 处理颜色
+     */
+    handleColor(list) {
+      list.map((item) => {
+        if (!item.color) {
+          item.leftColor = "#7b75ff";
+          item.rightTopColor = "#7b75ff";
+          return;
+        }
+        for (let key in this.leftColor) {
+          if (item.color == key) {
+            item.leftColor = this.leftColor[key];
+            item.rightTopColor = this.rightTopColor[key];
+          }
+        }
+      });
+      return list;
+    },
+
+    /**
+     * 重置
+     */
+    reset() {
+      this.queryParams.credentialno = undefined; //身份证(全)
+      this.queryParams.cre1 = undefined; //身份证(2)
+      this.queryParams.cre2 = undefined; //身份证(4)
+      this.queryParams.cre3 = undefined; //身份证(6)
+      this.queryParams.phone = undefined;
+      this.queryParams.name = undefined;
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+      this.list = [];
+      this.houseTotal = 0;
+      this.total = 0;
+    },
+  },
 };
 </script>
 
@@ -40,6 +313,145 @@ export default {
 .search-container {
   margin-top: 10px;
   flex: 1;
-  border: 1px solid red;
+  ::v-deep .option-rows {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #003869;
+    padding: 15px 0;
+    .el-select {
+      margin-right: 10px;
+      width: 140px;
+    }
+    .el-radio-group {
+      margin: 0 30px 0 10px;
+    }
+    .el-checkbox__label,
+    .el-radio__label {
+      font-size: 16px;
+      color: #aabace;
+      font-weight: 500;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+  }
+  .three-option {
+    margin-top: 15px;
+
+    .option-list {
+      position: relative;
+      top: 2px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      & > div {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        margin-right: 8px;
+        background: #0059a2;
+        border-radius: 4px 4px 0px 0px;
+        font-size: 16px;
+        color: #aee0ff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .option-input {
+      height: 80px;
+      background: #042854;
+      border: 1px solid #006cc5;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      .input-general-width {
+        margin-right: 10px;
+      }
+      .input-big-width {
+        width: 300px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .result-list {
+    margin-top: 15px;
+    .list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      .header-left-total {
+        color: #ffa11b;
+        font-weight: 500;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+      }
+      .header-rigth-total {
+        color: #aacfff;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+    }
+    .list-table {
+      margin-top: 10px;
+      .table-header {
+        padding: 5px 0;
+        font-size: 16px;
+        color: #eff8ff;
+        background: linear-gradient(90deg, #007b9f, #0066d8);
+        font-family: "Alibaba-PuHuiTi-Regular.otf";
+      }
+      .table-body {
+        height: 350px;
+
+        .body-rows {
+          padding: 7px 0;
+          font-size: 14px;
+          color: #ffffff;
+          font-family: "Alibaba-PuHuiTi-Medium.otf";
+        }
+        & > .body-rows:nth-child(even) {
+          background: #033159;
+        }
+      }
+      .table-header,
+      .body-rows {
+        display: flex;
+        align-items: center;
+        & > div {
+          text-align: center;
+        }
+        .table-cell0 {
+          width: 50px;
+        }
+        .table-cell1 {
+          flex: 1;
+        }
+        .table-cell2 {
+          flex: 2;
+        }
+        .cell-flex {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .el-button {
+    font-size: 14px;
+    color: #cdfbff;
+    font-weight: 400;
+    background: url("~@/assets/images/ui/btn_bg.png");
+    background-size: 100% 100%;
+    padding: 12px 20px 14px 20px;
+    font-family: "Alibaba-PuHuiTi-Regular.otf";
+  }
+}
+.activeItme {
+  color: #ffffff !important;
+  border: 1px solid #006cc5 !important;
+  border-bottom: 0 !important;
+  background: #042854 !important;
 }
 </style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 8adb1b6..7ab2a51 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,19 +1,21 @@
 const getters = {
-  sidebar: state => state.app.sidebar,
-  size: state => state.app.size,
-  device: state => state.app.device,
-  dict: state => state.dict.dict,
-  visitedViews: state => state.tagsView.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  introduction: state => state.user.introduction,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes,
-  topbarRouters:state => state.permission.topbarRouters,
-  defaultRoutes:state => state.permission.defaultRoutes,
-  sidebarRouters:state => state.permission.sidebarRouters,
-}
-export default getters
+  sidebar: (state) => state.app.sidebar,
+  size: (state) => state.app.size,
+  device: (state) => state.app.device,
+  dict: (state) => state.dict.dict,
+  visitedViews: (state) => state.tagsView.visitedViews,
+  cachedViews: (state) => state.tagsView.cachedViews,
+  token: (state) => state.user.token,
+  avatar: (state) => state.user.avatar,
+  name: (state) => state.user.name,
+  introduction: (state) => state.user.introduction,
+  roles: (state) => state.user.roles,
+  permissions: (state) => state.user.permissions,
+  permission_routes: (state) => state.permission.routes,
+  topbarRouters: (state) => state.permission.topbarRouters,
+  defaultRoutes: (state) => state.permission.defaultRoutes,
+  sidebarRouters: (state) => state.permission.sidebarRouters,
+  leftColor: (state) => state.taicang.leftColor,
+  rightTopColor: (state) => state.taicang.rightTopColor,
+};
+export default getters;
diff --git a/src/store/index.js b/src/store/index.js
index 97aaef8..59c4ffe 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,14 +1,15 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import app from './modules/app'
-import dict from './modules/dict'
-import user from './modules/user'
-import tagsView from './modules/tagsView'
-import permission from './modules/permission'
-import settings from './modules/settings'
-import getters from './getters'
+import Vue from "vue";
+import Vuex from "vuex";
+import app from "./modules/app";
+import dict from "./modules/dict";
+import user from "./modules/user";
+import tagsView from "./modules/tagsView";
+import permission from "./modules/permission";
+import settings from "./modules/settings";
+import taicang from "./modules/taicang";
+import getters from "./getters";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
@@ -17,9 +18,10 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    taicang,
   },
-  getters
-})
+  getters,
+});
 
-export default store
+export default store;
diff --git a/src/store/modules/taicang.js b/src/store/modules/taicang.js
new file mode 100644
index 0000000..bff4533
--- /dev/null
+++ b/src/store/modules/taicang.js
@@ -0,0 +1,32 @@
+const state = {};
+const mutations = {};
+const actions = {};
+
+const taicang = {
+  state: {
+    leftColor: {
+      HZ: "#008c5e",
+      HL: "#008c5e",
+      HO: "#008c5e",
+      HF: "#008c5e",
+      NZ: "#7f8c95",
+      NL: "#7f8c95",
+      NO: "#7f8c95",
+      NF: "#7f8c95",
+    },
+    rightTopColor: {
+      HZ: "#008c5e",
+      HL: "red",
+      HO: "#7f8c95",
+      HF: "#008c5e",
+      NZ: "#008c5e",
+      NL: "red",
+      NO: "#7f8c95",
+      NF: "#008c5e",
+    },
+  },
+  mutations: {},
+  actions: {},
+};
+
+export default taicang;
diff --git a/src/views/login.vue b/src/views/login.vue
index e429914..37bb688 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <NavigationBar />
+    <NavigationBar :showLeft="false" :showRight="false" />
     <el-form
       ref="loginForm"
       :model="loginForm"
@@ -215,7 +215,7 @@ export default {
   border-radius: 6px;
   background-image: url("../assets/images/ui/img_frame.png");
   background-size: 100% 100%;
-  width: 500px;
+  width: 450px;
   padding: 35px 35px 5px 35px;
   .el-input {
     height: 50px;