diff --git a/src/apps/AppResidentFile/AppResidentFile.vue b/src/apps/AppResidentFile/AppResidentFile.vue
index 55459323..fe2c6d4b 100644
--- a/src/apps/AppResidentFile/AppResidentFile.vue
+++ b/src/apps/AppResidentFile/AppResidentFile.vue
@@ -2,7 +2,7 @@
   <div class="AppResidentFile">
     <u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>
 
-    <div v-if="currentTabBar == 0">
+    <div class="currentTabBar0" v-if="currentTabBar == 0">
       <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
 
       <div class="peopleGroup" v-if="currentTabs == 0">
@@ -66,9 +66,41 @@
       </div>
     </div>
 
-    <div v-if="currentTabBar == 1">1</div>
+    <div class="currentTabBar1" v-if="currentTabBar == 1">
+      <AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
 
-    <div v-if="currentTabBar == 2">2</div>
+      <div class="line"></div>
+
+      <div class="peopleCard">
+        <u-tabs :list="tabPeopleList" :is-scroll="false" :current="currentPeople" height="96" inactive-color="#000" active-color="#1365DD" @change="changePeople"></u-tabs>
+
+        <div class="seachObj">
+          <u-search v-model="keyword" :clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#E2E8F1" color="#666" height="58" @search="handerSearch" @clear="handerClear"></u-search>
+        </div>
+
+        <div class="datas" v-if="data.length > 0">
+          <div class="datass" v-for="(item, i) in data" :key="i" @click="toDetailCard(item)">
+            <div class="left">
+              <img :src="item.photo" alt="" v-if="item.photo" />
+              <img src="./components/img/4.png" alt="" v-else />
+            </div>
+
+            <div class="right">
+              <div class="rightTop">{{ item.name }}</div>
+              <div class="rightBottom">
+                <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
+
+                <span>{{ item.phone }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty v-else></AiEmpty>
+      </div>
+    </div>
+
+    <div class="currentTabBar2" v-if="currentTabBar == 2">2</div>
   </div>
 </template>
 
@@ -117,6 +149,19 @@ export default {
       ],
       Echarts1: null,
       Echarts2: null,
+      areaId: '',
+      currentPeople: 0,
+      tabPeopleList: [
+        {
+          name: '本地居民',
+        },
+        {
+          name: '流动人员',
+        },
+      ],
+      current: 1,
+      keyword: '',
+      data: [],
     }
   },
   computed: {
@@ -125,11 +170,31 @@ export default {
   watch: {},
   onLoad() {
     this.getEchart()
+    this.areaId = this.user.areaId
   },
   mounted() {
     this.Echarts1 = echarts.init(document.getElementById('echarts1'))
   },
   methods: {
+    getList() {
+      this.$http
+        .post('/app/appresident/list', null, {
+          params: {
+            size: 10,
+            current: this.current,
+            areaId: this.areaId,
+            con: this.keyword,
+            residentType: this.currentPeople == 0 ? '0' : '1',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
     getEchart() {
       this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
         if (res.code === 0) {
@@ -233,8 +298,33 @@ export default {
       options && this.Echarts2.setOption(options)
     },
 
+    toDetailCard(item) {
+      uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
+    },
+
+    areaSelect(e) {
+      console.log(e)
+      this.areaId = e.id
+      this.getList()
+    },
+
+    handerSearch(e) {
+      this.keyword = e
+      this.current = 1
+      this.getList()
+    },
+
+    handerClear() {
+      this.keyword = ''
+      this.current = 1
+      this.getList()
+    },
+
     changeTab(e) {
       this.currentTabBar = e
+      if (this.currentTabBar == 1) {
+        this.getList()
+      }
     },
 
     change(index) {
@@ -247,14 +337,16 @@ export default {
         }
         this.getEchart()
       })
+    },
 
-      // this.getList()
-      // this.getEchart()
+    changePeople(e) {
+      this.currentPeople = e
+      this.getList()
     },
   },
   onReachBottom() {
-    // this.current = this.current + 1
-    // this.getList()
+    this.current = this.current + 1
+    this.getList()
   },
 }
 </script>
@@ -265,72 +357,125 @@ uni-page-body {
 }
 .AppResidentFile {
   height: 100%;
-  .peopleGroup,
-  .people {
-    .topcard {
-      position: relative;
-      background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
-      // background: url(http://respub.sinoecare.net/20211221/44-20211221095613.png) no-repeat;
-      background-size: 100% 100%;
-      height: 320px;
-      .cards {
-        box-sizing: border-box;
-        position: absolute;
-        bottom: -35px;
-        width: 92%;
-        box-sizing: border-box;
-        margin: 0 32px;
-        height: 232px;
-        background: #ffffff;
-        border-radius: 8px;
-        z-index: 999;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        .items {
+  .currentTabBar0 {
+    .peopleGroup,
+    .people {
+      .topcard {
+        position: relative;
+        background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
+        // background: url(http://respub.sinoecare.net/20211221/44-20211221095613.png) no-repeat;
+        background-size: 100% 100%;
+        height: 320px;
+        .cards {
+          box-sizing: border-box;
+          position: absolute;
+          bottom: -35px;
+          width: 92%;
+          box-sizing: border-box;
+          margin: 0 32px;
+          height: 232px;
+          background: #ffffff;
+          border-radius: 8px;
+          z-index: 999;
           display: flex;
-          flex-direction: column;
+          justify-content: space-around;
           align-items: center;
-          span {
-            font-size: 30px;
-            font-weight: 500;
-            color: #999999;
-          }
-          .items1 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #354fc7;
-          }
-          .items2 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #868686;
-          }
-          .items3 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #5fba95;
-          }
-          .items4 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #f09535;
+          .items {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            span {
+              font-size: 30px;
+              font-weight: 500;
+              color: #999999;
+            }
+            .items1 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #354fc7;
+            }
+            .items2 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #868686;
+            }
+            .items3 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #5fba95;
+            }
+            .items4 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #f09535;
+            }
           }
         }
       }
+
+      .echartes {
+        margin-top: 64px;
+        height: 616px;
+        background: #fff;
+        box-sizing: border-box;
+
+        .echartss {
+          margin: 0 32px;
+          height: 100%;
+          padding-top: 16px;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+
+  .currentTabBar1 {
+    height: 100%;
+    background: #fff;
+    .AiAreaPicker {
+      padding: 16px 0 14px 12px;
     }
 
-    .echartes {
-      margin-top: 64px;
-      height: 616px;
-      background: #fff;
-      box-sizing: border-box;
+    .line {
+      height: 16px;
+      background: #f5f5f5;
+    }
 
-      .echartss {
-        margin: 0 32px;
-        height: 100%;
-        padding-top: 16px;
-        box-sizing: border-box;
+    .peopleCard {
+      background: #fff;
+      .seachObj {
+        border-bottom: 2px solid #f5f5f5;
+        border-top: 2px solid #f5f5f5;
+        padding: 20px 32px;
+      }
+      .datas {
+        .datass {
+          display: flex;
+          padding: 24px 32px;
+          .left {
+            img {
+              width: 80px;
+              height: 80px;
+              border-radius: 50%;
+            }
+          }
+          .right {
+            display: flex;
+            flex-direction: column;
+            margin-left: 32px;
+            width: 100%;
+            .rightTop {
+              font-size: 32px;
+              font-weight: 500;
+              color: #333333;
+            }
+            .rightBottom {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 8px;
+            }
+          }
+        }
       }
     }
   }
diff --git a/src/apps/AppResidentFile/DetailCard.vue b/src/apps/AppResidentFile/DetailCard.vue
new file mode 100644
index 00000000..e7910196
--- /dev/null
+++ b/src/apps/AppResidentFile/DetailCard.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="DetailCard">
+    <div class="top"></div>
+
+    <div class="middle">
+      <div class="hint">家庭地址</div>
+
+      <div class="areaHint">
+        <u-icon name="map-fill" color="#73ABFF"></u-icon>
+        <span>{{ currentAreaName }}</span>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="hints">家庭成员</div>
+
+      <div v-if="data.family && data.family.length > 0">
+        <div class="card" v-for="(item, i) in data.family" :key="i" @click="toDetailPeople(item)">
+          <div class="photos">
+            <img :src="item.photo" alt="" v-if="item.photo" />
+            <img src="./components/img/2.png" alt="" v-else />
+          </div>
+
+          <div class="right">
+            <div class="rightTop">
+              <div class="rightTop-lefts">
+                <span class="names">{{ item.name }}</span>
+                <span class="householdNames" v-if="item.householdName == 1">户主</span>
+                <span class="householdNames" v-else>
+                  {{ $dict.getLabel('householdRelation', item.householdName) }}
+                </span>
+              </div>
+
+              <div class="rightTop-rights">
+                <u-section :show-line="false" sub-title="详情"></u-section>
+              </div>
+            </div>
+
+            <div class="rightBottom">
+              <span>身份证号：</span>
+              <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <AiEmpty v-else></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetailCard',
+  components: {},
+  props: {},
+  data() {
+    return {
+      id: '',
+      data: [],
+      currentAreaName: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.$dict.load('householdRelation').then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          this.$nextTick(() => {
+            this.currentAreaName = res.data.resident.currentAreaName
+          })
+        }
+      })
+    },
+
+    toDetailPeople(item) {
+      uni.navigateTo({ url: `./DetailPeople?id=${item.id}` })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.DetailCard {
+  height: 100%;
+  .top {
+    height: 112px;
+    background: #3975c6;
+  }
+
+  .middle {
+    margin: -80px 32px 0 32px;
+    padding: 38px 30px 78px 28px;
+    background: #ffffff;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    z-index: 999;
+    .hint {
+      font-size: 32px;
+      font-weight: 500;
+      color: #333333;
+    }
+    .areaHint {
+      margin-top: 38px;
+      span {
+        margin-left: 14px;
+      }
+    }
+  }
+
+  .bottom {
+    margin: 32px 30px 48px 30px;
+    background: #fff;
+    padding: 38px 30px 30px 30px;
+    .hints {
+      margin-bottom: 38px;
+    }
+    .card {
+      display: flex;
+      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 16px;
+      padding: 48px 32px;
+      .photos {
+        img {
+          width: 96px;
+          height: 96px;
+          border-radius: 50%;
+        }
+      }
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        margin-left: 40px;
+        width: 100%;
+        .rightTop {
+          display: flex;
+          justify-content: space-between;
+          .rightTop-lefts {
+            .names {
+              font-size: 32px;
+              font-weight: 600;
+            }
+            .householdNames {
+              margin-left: 30px;
+              font-size: 26px;
+              font-weight: 500;
+              color: #5aad6a;
+            }
+          }
+          .rightTop-rights {
+            ::v-deep .u-section {
+              .u-section__right-info {
+                color: #3975c6 !important;
+                .u-section__right-info__icon-arrow {
+                  .u-icon {
+                    .u-icon__icon {
+                      color: #3975c6 !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .rightBottom {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppResidentFile/DetailPeople.vue b/src/apps/AppResidentFile/DetailPeople.vue
new file mode 100644
index 00000000..e9cd6a9e
--- /dev/null
+++ b/src/apps/AppResidentFile/DetailPeople.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="DetailPeople">DetailPeople</div>
+</template>
+
+<script>
+export default {
+  name: 'DetailPeople',
+  components: {},
+  props: {},
+  data() {
+    return {
+      id: '',
+      data: [],
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.$dict.load('householdRelation').then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          // this.$nextTick(() => {
+          //   this.currentAreaName = res.data.resident.currentAreaName
+          // })
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.DetailPeople {
+  height: 100%;
+}
+</style>
diff --git a/src/apps/AppResidentFile/components/img/4.png b/src/apps/AppResidentFile/components/img/4.png
new file mode 100644
index 00000000..d7cee623
Binary files /dev/null and b/src/apps/AppResidentFile/components/img/4.png differ
diff --git a/src/apps/AppResidentFile/components/img/44.png b/src/apps/AppResidentFile/components/img/44.png
new file mode 100644
index 00000000..ae49d85f
Binary files /dev/null and b/src/apps/AppResidentFile/components/img/44.png differ
diff --git a/src/apps/AppResidentFile/components/img/装饰.png b/src/apps/AppResidentFile/components/img/装饰.png
new file mode 100644
index 00000000..41c8ce0d
Binary files /dev/null and b/src/apps/AppResidentFile/components/img/装饰.png differ
diff --git a/src/apps/AppResidentFile/components/img/装饰@2x.png b/src/apps/AppResidentFile/components/img/装饰@2x.png
new file mode 100644
index 00000000..5f29baaa
Binary files /dev/null and b/src/apps/AppResidentFile/components/img/装饰@2x.png differ