diff --git a/src/apps/AppVillagersCircle/commentList.vue b/src/apps/AppVillagersCircle/commentList.vue
index 24986122..92d22eef 100644
--- a/src/apps/AppVillagersCircle/commentList.vue
+++ b/src/apps/AppVillagersCircle/commentList.vue
@@ -2,6 +2,16 @@
   <div class="commentList">
     <!-- tab栏 -->
     <div style="position: fixed; top: 0; left: 0;width: 100%;">
+      <div style="display:flex;justify-content:space-between; padding: 0 18px;height: 40px; line-height: 40px;background: #FFFF;">
+        <div>区域选择</div>
+        <div>
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="changeArea" :name.sync="areaName">
+            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-right" color="#666" size="28" style="margin-left: 4px" />
+          </AiAreaPicker>
+        </div>
+      </div>
       <div class="tab-select">
         <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item}}<span></span></div>
       </div>
@@ -28,13 +38,14 @@
         </div>
       </div>
     </div>
-    <AiEmpty description="暂无数据" class="emptyWrap" v-else style="padding-top: 100px;"></AiEmpty>
+    <AiEmpty description="暂无数据" class="emptyWrap" v-else style="padding-top: 150px;"></AiEmpty>
     <u-select v-model="showType" :list="list" label-name="dictName" value-name="dictValue"
             @confirm="confirmTypeSelect"/>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'commentList',
   data () {
@@ -47,10 +58,14 @@ export default {
       topic: '',
       topicType: '',
       data: [],
-      list:[]
+      list:[],
+      areaId: '',
+      areaName: '',
     }
   },
   created() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
     this.$dict.load('villagerCircleTopic','auditStatus').then(()=>{
       this.getList()
       uni.$on('update',()=>{
@@ -61,6 +76,9 @@ export default {
     let all = [{ dictName: '全部', dictValue: '', dictColor: null }]
     this.list = [...all, ...this.$dict.getDict('villagerCircleTopic')]
   },
+  computed: {
+    ...mapState(['user'])
+  },
   methods: {
     tabClick(index) {
       this.tabIndex = index
@@ -70,7 +88,10 @@ export default {
       this.data = [],
       this.getList()
     },
-
+    changeArea(e) {
+      this.areaId = e,
+      this.getList()
+    },
     confirmTypeSelect(e) {
       this.topic = e[0].value,
       this.topicType = e[0].label
@@ -86,7 +107,7 @@ export default {
           topic:this.topic,
           content: this.content,
           auditType: this.tabIndex==0? '': this.tabIndex==1? 0 : 1,
-          
+          areaId: this.areaId,
         }
       }).then(res=>{
         if(res?.data) {
@@ -116,7 +137,7 @@ export default {
     width: 100%;
     height: 96px;
     line-height: 96px;
-    background: #3975C6;
+    background: #FFF;
     display: flex;
 
     .item{
@@ -124,18 +145,20 @@ export default {
       text-align: center;
       font-size: 28px;
       font-family: PingFangSC-Regular, PingFang SC;
-      color: #CDDCF0;
+      color: #333;
+      border-top: 1px solid #ddd;
+      border-bottom: 1px solid #ddd;
     }
 
     .active{
       font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
+      font-weight: 600;
       position: relative;
-      color: #fff;
+      color: #3975C6;
       span{
         width: 48px;
         height: 4px;
-        background: #FFF;
+        background: #3975C6;
         position: absolute;
         bottom: 14px;
         left: 50%;
@@ -174,7 +197,7 @@ export default {
 
   .card-list {
     width: 100%;
-    padding: 200px 32px 20px 32px;
+    padding: 280px 32px 20px 32px;
     box-sizing: border-box;
     background: #f5f5f5;
 
diff --git a/src/apps/AppVillagersCircle/infoList.vue b/src/apps/AppVillagersCircle/infoList.vue
index f67bccd8..932dfac1 100644
--- a/src/apps/AppVillagersCircle/infoList.vue
+++ b/src/apps/AppVillagersCircle/infoList.vue
@@ -2,6 +2,16 @@
   <div class="infoList">
     <!-- tab栏 -->
     <div style="position: fixed; top: 0; left: 0;width: 100%;">
+      <div style="display:flex;justify-content:space-between; padding: 0 18px;height: 40px; line-height: 40px;background: #FFFF;">
+        <div>区域选择</div>
+        <div>
+          <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="changeArea" :name.sync="areaName">
+            <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+            <span v-else>请选择</span>
+            <u-icon name="arrow-right" color="#666" size="28" style="margin-left: 4px" />
+          </AiAreaPicker>
+        </div>
+      </div>
       <div class="tab-select">
         <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item}}<span></span></div>
       </div>
@@ -26,13 +36,14 @@
         </div>
       </div>
     </div>
-    <AiEmpty description="暂无数据" class="emptyWrap" style="padding-top:100px" v-else></AiEmpty>
+    <AiEmpty description="暂无数据" class="emptyWrap" style="padding-top:150px" v-else></AiEmpty>
     <u-select v-model="showType" :list="list" label-name="dictName" value-name="dictValue"
             @confirm="confirmTypeSelect"/>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: 'infoList',
   data () {
@@ -47,9 +58,16 @@ export default {
       topic: '',
       topicType: '',
       list: [],
+      areaId: '',
+      areaName: '',
     }
   },
+  computed: {
+    ...mapState(['user'])
+  },
   onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
     this.getList()
     this.$dict.load('villagerCircleTopic','auditStatus').then(()=>{
       uni.$on('update',()=>{
@@ -69,13 +87,19 @@ export default {
       this.villagerList = [],
       this.getList()
     },
+    changeArea(e) {
+      console.log(e);
+      this.areaId = e
+      this.getList()
+    },
     getList() {
       this.$http.post('app/appvillagercircleinfo/list',null,{
         params: {
           current: this.current,
           auditType: this.tabIndex == 0 ? '': this.tabIndex == 1 ? 0 : 1,
           topic: this.topic,
-          content: this.content
+          content: this.content,
+          areaId: this.areaId
         }
       }).then(res=>{
         if(res?.data) {
@@ -113,26 +137,28 @@ export default {
     width: 100%;
     height: 96px;
     line-height: 96px;
-    background: #3975C6;
+    background: #FFFFFF;
     display: flex;
+    border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
 
     .item{
       flex: 1;
       text-align: center;
       font-size: 28px;
       font-family: PingFangSC-Regular, PingFang SC;
-      color: #CDDCF0;
+      color: #333;
     }
 
     .active{
       font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
+      font-weight: 600;
       position: relative;
-      color: #fff;
+      color: #3975C6;
       span{
         width: 48px;
         height: 4px;
-        background: #FFF;
+        background: #3975C6;
         position: absolute;
         bottom: 14px;
         left: 50%;
@@ -171,7 +197,7 @@ export default {
 
   .card-list {
     width: 100%;
-    padding: 200px 32px 20px 32px;
+    padding: 280px 32px 20px 32px;
     box-sizing: border-box;
     background: #f5f5f5;