diff --git a/src/assets/scss/modules/index.scss b/src/assets/scss/modules/index.scss
index ee59af828..c3ff9044a 100644
--- a/src/assets/scss/modules/index.scss
+++ b/src/assets/scss/modules/index.scss
@@ -323,6 +323,16 @@
         border-radius: 2px;
         overflow: hidden;
 
+        .empty {
+            text-align: center;
+            color: #999;
+            img {
+                display: block;
+                width: 120px;
+                margin: 100px auto 20px;
+            }
+        }
+
         .item {
             padding: 16px 0 12px;
             border-bottom: 1px dashed #f0f5fa;
diff --git a/src/views/modules/home/index.vue b/src/views/modules/home/index.vue
index 87fb3a3e0..0e9e0a6e6 100644
--- a/src/views/modules/home/index.vue
+++ b/src/views/modules/home/index.vue
@@ -1,215 +1,282 @@
 <template>
-  <div>
-    <div class="g-row">
-      <div class="g-row-left">
-        <div class="m-box m-search">
-          <div class="wrap">
-            <div class="title">
-              <span>社区查询</span>
-            </div>
-
-            <div class="tabs">
-              <div
-                :class="{ 'z-on': searchData.type == 'jumin' }"
-                @click="searchData.type = 'jumin'"
-              >
-                查居民
-              </div>
-              <div
-                :class="{ 'z-on': searchData.type == 'fangwu' }"
-                @click="searchData.type = 'fangwu'"
-              >
-                查房屋
-              </div>
-            </div>
-
-            <div class="search">
-              <div class="search-input">
-                <div class="input">
-                  <input
-                    type="text"
-                    :placeholder="typePlaceholder[searchData.type]"
-                    v-model="searchData.searchKey"
-                    @keyup.enter="handleClickSearchBtn"
-                  />
-
-                  <div
-                    class="close-btn"
-                    v-if="searchData.searchKey != ''"
-                    @click="searchData.searchKey = ''"
-                  >
-                    <img src="@/assets/img/shequ/close.png" />
-                  </div>
-                </div>
-                <div class="btn" @click="handleClickSearchBtn">查一下</div>
-              </div>
-              <div class="btn2" @click="handleClickSearchBtn">
-                <img src="@/assets/images/index/i-search.png" />
-                智能搜索
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="m-box m-pan">
-          <div class="wrap">
-            <div class="header">
-              <img src="@/assets/images/index/title-icon-sqzl.png" />
-              <span>社区总览</span>
-            </div>
-            <div class="cnt">
-              <div class="cnt-left">
-                <div class="subtitle">
-                  <img src="@/assets/images/index/i-sqjj.png" />
-                  <span>社区简介</span>
-                </div>
-                <p>
-                  {{ pandectData.deptName }}，<span v-if="pandectData.gridCount"
-                    >划分为{{ pandectData.underCount }}个{{
-                      pandectData.underName
-                    }}，</span
-                  >现有居民{{ pandectData.homeCount }}户、{{
-                    pandectData.resiCount
-                  }}人，其中常住人口{{
-                    pandectData.permanentResiCount
-                  }}人，流动人口{{
-                    pandectData.floatingResiCount
-                  }}人，各类群体分布如下：
-                </p>
-
-                <div class="subtitle">
-                  <img src="@/assets/images/index/i-fxjg.png" />
-                  <span>分析结果</span>
-                </div>
-
-                <p class="hint" v-if="resiCategory.list.length > 0">
-                  <i>*</i> 根据数据分析结果，建议重点关注
-                  <b
-                    >{{ resiCategory.list[0].name }}、{{
-                      resiCategory.list[1].name
-                    }}、{{ resiCategory.list[2].name }}</b
-                  >
-                  三类群体，开展相关的社区服务和活动。
-                </p>
-              </div>
-              <div class="cnt-right">
-                <div class="list">
-                  <div
-                    class="item"
-                    @click="handleClickCategory(item)"
-                    :key="item.code"
-                    v-for="(item, index) in resiCategory.list"
-                  >
-                    <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
-                    <div class="item-name">{{ item.name }}</div>
-                    <div class="item-div"></div>
-                    <div class="item-count">{{ item.count }}人</div>
-                    <div class="item-progress">
-                      <b :style="{ width: item.per + '%' }"></b>
-                    </div>
-                    <div class="item-per">{{ item.per }} %</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="g-row-right">
-        <div class="m-box m-tx">
-          <div class="wrap">
-            <div class="header">
-              <img src="@/assets/images/index/title-icon-zntx.png" />
-              <span>智能提醒</span>
-            </div>
-            <div class="more" @click="toNoticePage">更多></div>
-            <div class="cnt">
-              <div
-                @click="handleClickNotice(item)"
-                class="item"
-                :key="'notice' + item.targetId + index"
-                v-for="(item, index) in noticeData"
-              >
-                <div class="item-date">{{ item.createdTime }}</div>
-                <div class="item-title">
-                  {{ item.content }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="m-box m-tb">
-          <div class="wrap">
-            <div class="header">
-              <img src="@/assets/images/index/title-icon-zntb.png" />
-              <span>智能填报</span>
-            </div>
-          </div>
-          <div class="more">更多></div>
-          <div class="cnt">
-            <div class="item">
-              <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
-              <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
-              <div class="item-btns">
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-tx.png" />
-                  <span>填写</span>
-                </div>
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-xz.png" />
-                  <span>下载</span>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
-              <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
-              <div class="item-btns">
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-tx.png" />
-                  <span>填写</span>
-                </div>
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-xz.png" />
-                  <span>下载</span>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
-              <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
-              <div class="item-btns">
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-tx.png" />
-                  <span>填写</span>
-                </div>
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-xz.png" />
-                  <span>下载</span>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <img class="item-tag" src="@/assets/images/index/i-zntb.png" />
-              <div class="item-name">《80-90周岁高龄老人生活补助申请表》</div>
-              <div class="item-btns">
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-tx.png" />
-                  <span>填写</span>
-                </div>
-                <div class="item-btn">
-                  <img src="@/assets/images/index/i-xz.png" />
-                  <span>下载</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <fastcall ref="fastcall" />
-  </div>
+	<div>
+		<div class="g-row">
+			<div class="g-row-left">
+				<div class="m-box m-search">
+					<div class="wrap">
+						<div class="title">
+							<span>社区查询</span>
+						</div>
+
+						<div class="tabs">
+							<div
+								:class="{ 'z-on': searchData.type == 'jumin' }"
+								@click="searchData.type = 'jumin'"
+							>
+								查居民
+							</div>
+							<div
+								:class="{ 'z-on': searchData.type == 'fangwu' }"
+								@click="searchData.type = 'fangwu'"
+							>
+								查房屋
+							</div>
+						</div>
+
+						<div class="search">
+							<div class="search-input">
+								<div class="input">
+									<input
+										type="text"
+										:placeholder="
+											typePlaceholder[searchData.type]
+										"
+										v-model="searchData.searchKey"
+										@keyup.enter="handleClickSearchBtn"
+									/>
+
+									<div
+										class="close-btn"
+										v-if="searchData.searchKey != ''"
+										@click="searchData.searchKey = ''"
+									>
+										<img
+											src="@/assets/img/shequ/close.png"
+										/>
+									</div>
+								</div>
+								<div class="btn" @click="handleClickSearchBtn">
+									查一下
+								</div>
+							</div>
+							<div class="btn2" @click="handleClickSearchBtn">
+								<img src="@/assets/images/index/i-search.png" />
+								智能搜索
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="m-box m-pan">
+					<div class="wrap">
+						<div class="header">
+							<img
+								src="@/assets/images/index/title-icon-sqzl.png"
+							/>
+							<span>社区总览</span>
+						</div>
+						<div class="cnt">
+							<div class="cnt-left">
+								<div class="subtitle">
+									<img
+										src="@/assets/images/index/i-sqjj.png"
+									/>
+									<span>社区简介</span>
+								</div>
+								<p>
+									{{ pandectData.deptName }}，<span
+										v-if="pandectData.gridCount"
+										>划分为{{ pandectData.underCount }}个{{
+											pandectData.underName
+										}}，</span
+									>现有居民{{ pandectData.homeCount }}户、{{
+										pandectData.resiCount
+									}}人，其中常住人口{{
+										pandectData.permanentResiCount
+									}}人，流动人口{{
+										pandectData.floatingResiCount
+									}}人，各类群体分布如下：
+								</p>
+
+								<div class="subtitle">
+									<img
+										src="@/assets/images/index/i-fxjg.png"
+									/>
+									<span>分析结果</span>
+								</div>
+
+								<p
+									class="hint"
+									v-if="resiCategory.list.length > 0"
+								>
+									<i>*</i> 根据数据分析结果，建议重点关注
+									<b
+										>{{ resiCategory.list[0].name }}、{{
+											resiCategory.list[1].name
+										}}、{{ resiCategory.list[2].name }}</b
+									>
+									三类群体，开展相关的社区服务和活动。
+								</p>
+							</div>
+							<div class="cnt-right">
+								<div class="list">
+									<div
+										class="item"
+										@click="handleClickCategory(item)"
+										:key="item.code"
+										v-for="(
+											item, index
+										) in resiCategory.list"
+									>
+										<div>
+											{{
+												("0" + (index + 1)).substr(-2)
+											}}.
+										</div>
+										<div class="item-name">
+											{{ item.name }}
+										</div>
+										<div class="item-div"></div>
+										<div class="item-count">
+											{{ item.count }}人
+										</div>
+										<div class="item-progress">
+											<b
+												:style="{
+													width: item.per + '%',
+												}"
+											></b>
+										</div>
+										<div class="item-per">
+											{{ item.per }} %
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="g-row-right">
+				<div class="m-box m-tx">
+					<div class="wrap">
+						<div class="header">
+							<img
+								src="@/assets/images/index/title-icon-zntx.png"
+							/>
+							<span>智能提醒</span>
+						</div>
+						<div class="more" @click="toNoticePage">更多></div>
+						<div class="cnt" v-if="noticeData.length > 0">
+							<div
+								@click="handleClickNotice(item)"
+								class="item"
+								:key="'notice' + item.targetId + index"
+								v-for="(item, index) in noticeData"
+							>
+								<div class="item-date">
+									{{ item.createdTime }}
+								</div>
+								<div class="item-title">
+									{{ item.content }}
+								</div>
+							</div>
+						</div>
+
+						<div class="cnt" v-else>
+							<div class="empty">
+								<img
+									src="~@/assets/images/shuju/renfang/index/empty.png"
+								/>
+								<span>暂无提醒～</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="m-box m-tb">
+					<div class="wrap">
+						<div class="header">
+							<img
+								src="@/assets/images/index/title-icon-zntb.png"
+							/>
+							<span>智能填报</span>
+						</div>
+					</div>
+					<div class="more">更多></div>
+					<div class="cnt">
+						<div class="item">
+							<img
+								class="item-tag"
+								src="@/assets/images/index/i-zntb.png"
+							/>
+							<div class="item-name">
+								《80-90周岁高龄老人生活补助申请表》
+							</div>
+							<div class="item-btns">
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-tx.png" />
+									<span>填写</span>
+								</div>
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-xz.png" />
+									<span>下载</span>
+								</div>
+							</div>
+						</div>
+						<div class="item">
+							<img
+								class="item-tag"
+								src="@/assets/images/index/i-zntb.png"
+							/>
+							<div class="item-name">
+								《80-90周岁高龄老人生活补助申请表》
+							</div>
+							<div class="item-btns">
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-tx.png" />
+									<span>填写</span>
+								</div>
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-xz.png" />
+									<span>下载</span>
+								</div>
+							</div>
+						</div>
+						<div class="item">
+							<img
+								class="item-tag"
+								src="@/assets/images/index/i-zntb.png"
+							/>
+							<div class="item-name">
+								《80-90周岁高龄老人生活补助申请表》
+							</div>
+							<div class="item-btns">
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-tx.png" />
+									<span>填写</span>
+								</div>
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-xz.png" />
+									<span>下载</span>
+								</div>
+							</div>
+						</div>
+						<div class="item">
+							<img
+								class="item-tag"
+								src="@/assets/images/index/i-zntb.png"
+							/>
+							<div class="item-name">
+								《80-90周岁高龄老人生活补助申请表》
+							</div>
+							<div class="item-btns">
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-tx.png" />
+									<span>填写</span>
+								</div>
+								<div class="item-btn">
+									<img src="@/assets/images/index/i-xz.png" />
+									<span>下载</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<fastcall ref="fastcall" />
+	</div>
 </template>
 
 <script>
@@ -220,201 +287,203 @@ import nextTick from "dai-js/tools/nextTick";
 import fastcall from "@/views/modules/cpts/fastcall";
 
 export default {
-  components: { fastcall },
-
-  data() {
-    return {
-      searchStatus: "ini", //ing over
-      searchData: {
-        type: "jumin",
-        searchKey: "",
-      },
-
-      typePlaceholder: {
-        jumin: "请输入姓名或电话或身份证号",
-        fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
-        xuqiu: "请输入需求人或需求内容或服务方",
-      },
-
-      resiCategory: {
-        loading: false,
-        total: "",
-        list: [],
-      },
-
-      orgData: {
-        id: "",
-        level: "agency",
-      },
-
-      pandectData: {
-        communityName: "",
-        streetName: "",
-        gridCount: "",
-        resiCount: "",
-        homeCount: "",
-        floatingResiCount: "",
-        permanentResiCount: "",
-      },
-
-      noticeData: [],
-    };
-  },
-  computed: {
-    maxTableHeight() {
-      // return this.clientHeight - 450;
-      return 420;
-    },
-    ...mapGetters(["clientHeight"]),
-  },
-  watch: {
-    "searchData.searchKey": function (val) {
-      if (val == "") {
-        this.searchStatus = "ini";
-      }
-    },
-  },
-  mounted() {
-    this.getApiData();
-    console.log(
-      "dynamicMenuRoutes----------------------------",
-      this.$store.state.sidebarMenuList
-    );
-  },
-  methods: {
-    handleClickCategory(item) {
-      this.$router.push({
-        path: "/main/base-resi",
-        query: {
-          category: item.code,
-        },
-      });
-    },
-
-    handleClickNotice(item) {
-      const { msgType, targetId } = item;
-      if (msgType == "community_house") {
-        this.$refs.fastcall.showHouseInfo(targetId);
-      } else if (msgType == "resident_base_info") {
-        this.$refs.fastcall.showResiInfo(targetId);
-      }
-    },
-
-    toNoticePage() {
-      this.$router.push({
-        path: "/main/home-notice",
-      });
-    },
-
-    toSearchPage(type, searchKey) {
-      this.$router.push({
-        path: "/main/shequ-chaxun",
-        query: {
-          type,
-          searchKey,
-        },
-      });
-    },
-
-    handleClickSearchBtn() {
-      const {
-        searchData: { type, searchKey },
-      } = this;
-      if (!searchKey) return this.$message.error("请输入搜索条件");
-      this.toSearchPage(type, searchKey);
-    },
-
-    async getApiData() {
-      await this.getOrgData();
-      this.getWarningList();
-      this.getPandectData();
-      this.getNoticeData();
-    },
-
-    //加载组织数据
-    async getOrgData() {
-      const url = "/gov/org/agency/maporg";
-      let params = {
-        orgId: "",
-        level: "",
-      };
-
-      const { data, code, msg } = await requestPost(url, params);
-
-      if (code === 0) {
-        this.orgData = data;
-      } else {
-        this.$message.error(msg);
-      }
-    },
-
-    //加载组织数据
-    async getPandectData() {
-      const url = "/actual/base/residentHouseMerge/communityOverview";
-      let params = {
-        // orgId: "",
-        // level: "",
-      };
-
-      const { data, code, msg } = await requestGet(url, params);
-
-      if (code === 0) {
-        if (data) {
-          this.pandectData = data;
-        }
-      } else {
-        this.$message.error(msg);
-      }
-    },
-
-    //加载组织数据
-    async getNoticeData() {
-      const url = "/message/intelligentMessage/list";
-      let params = {
-        last: "6",
-      };
-
-      const { data, code, msg } = await requestGet(url, params);
-
-      if (code === 0) {
-        if (data) {
-          this.noticeData = data;
-        }
-      } else {
-        this.$message.error(msg);
-      }
-    },
-
-    //加载组织数据
-    async getWarningList() {
-      const url = "/actual/base/resiCategory/categoryCountList";
-      let params = {
-        // id: this.orgData.id,
-        // level: "agency",
-      };
-
-      this.resiCategory.loading = true;
-      const { data, code, msg } = await requestGet(url, params);
-      this.resiCategory.loading = false;
-
-      if (code === 0) {
-        if (data) {
-          this.resiCategory.count = data.resiCount;
-          this.resiCategory.list = data.categoryList.map((item) => {
-            return {
-              code: item.categoryName,
-              name: resiCategoryMap[item.categoryName] || "",
-              count: item.categoryCount,
-              per: parseInt((100 * item.categoryCount) / data.resiCount),
-              const: "const",
-            };
-          });
-        }
-      } else {
-        this.$message.error(msg);
-      }
-    },
-  },
+	components: { fastcall },
+
+	data() {
+		return {
+			searchStatus: "ini", //ing over
+			searchData: {
+				type: "jumin",
+				searchKey: "",
+			},
+
+			typePlaceholder: {
+				jumin: "请输入姓名或电话或身份证号",
+				fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
+				xuqiu: "请输入需求人或需求内容或服务方",
+			},
+
+			resiCategory: {
+				loading: false,
+				total: "",
+				list: [],
+			},
+
+			orgData: {
+				id: "",
+				level: "agency",
+			},
+
+			pandectData: {
+				communityName: "",
+				streetName: "",
+				gridCount: "",
+				resiCount: "",
+				homeCount: "",
+				floatingResiCount: "",
+				permanentResiCount: "",
+			},
+
+			noticeData: [],
+		};
+	},
+	computed: {
+		maxTableHeight() {
+			// return this.clientHeight - 450;
+			return 420;
+		},
+		...mapGetters(["clientHeight"]),
+	},
+	watch: {
+		"searchData.searchKey": function (val) {
+			if (val == "") {
+				this.searchStatus = "ini";
+			}
+		},
+	},
+	mounted() {
+		this.getApiData();
+		console.log(
+			"dynamicMenuRoutes----------------------------",
+			this.$store.state.sidebarMenuList
+		);
+	},
+	methods: {
+		handleClickCategory(item) {
+			this.$router.push({
+				path: "/main/base-resi",
+				query: {
+					category: item.code,
+				},
+			});
+		},
+
+		handleClickNotice(item) {
+			const { msgType, targetId } = item;
+			if (msgType == "community_house") {
+				this.$refs.fastcall.showHouseInfo(targetId);
+			} else if (msgType == "resident_base_info") {
+				this.$refs.fastcall.showResiInfo(targetId);
+			}
+		},
+
+		toNoticePage() {
+			this.$router.push({
+				path: "/main/home-notice",
+			});
+		},
+
+		toSearchPage(type, searchKey) {
+			this.$router.push({
+				path: "/main/shequ-chaxun",
+				query: {
+					type,
+					searchKey,
+				},
+			});
+		},
+
+		handleClickSearchBtn() {
+			const {
+				searchData: { type, searchKey },
+			} = this;
+			if (!searchKey) return this.$message.error("请输入搜索条件");
+			this.toSearchPage(type, searchKey);
+		},
+
+		async getApiData() {
+			await this.getOrgData();
+			this.getWarningList();
+			this.getPandectData();
+			this.getNoticeData();
+		},
+
+		//加载组织数据
+		async getOrgData() {
+			const url = "/gov/org/agency/maporg";
+			let params = {
+				orgId: "",
+				level: "",
+			};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				this.orgData = data;
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		//加载组织数据
+		async getPandectData() {
+			const url = "/actual/base/residentHouseMerge/communityOverview";
+			let params = {
+				// orgId: "",
+				// level: "",
+			};
+
+			const { data, code, msg } = await requestGet(url, params);
+
+			if (code === 0) {
+				if (data) {
+					this.pandectData = data;
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		//加载组织数据
+		async getNoticeData() {
+			const url = "/message/intelligentMessage/list";
+			let params = {
+				last: "6",
+			};
+
+			const { data, code, msg } = await requestGet(url, params);
+
+			if (code === 0) {
+				if (data) {
+					this.noticeData = data;
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		//加载组织数据
+		async getWarningList() {
+			const url = "/actual/base/resiCategory/categoryCountList";
+			let params = {
+				// id: this.orgData.id,
+				// level: "agency",
+			};
+
+			this.resiCategory.loading = true;
+			const { data, code, msg } = await requestGet(url, params);
+			this.resiCategory.loading = false;
+
+			if (code === 0) {
+				if (data) {
+					this.resiCategory.count = data.resiCount;
+					this.resiCategory.list = data.categoryList.map((item) => {
+						return {
+							code: item.categoryName,
+							name: resiCategoryMap[item.categoryName] || "",
+							count: item.categoryCount,
+							per: parseInt(
+								(100 * item.categoryCount) / data.resiCount
+							),
+							const: "const",
+						};
+					});
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
 };
 </script>
 
diff --git a/src/views/modules/home/notice.vue b/src/views/modules/home/notice.vue
index 48f12419a..0cc1a9f72 100644
--- a/src/views/modules/home/notice.vue
+++ b/src/views/modules/home/notice.vue
@@ -1,50 +1,59 @@
 <template>
-  <div>
-    <div class="m-tx">
-      <div class="wrap">
-        <div class="tabs">
-          <el-tabs v-model="type" @tab-click="handleClickTab">
-            <el-tab-pane label="全部" name="all"></el-tab-pane>
-            <el-tab-pane label="已读" name="readed"></el-tab-pane>
-            <el-tab-pane label="未读" name="unreaded"></el-tab-pane>
-          </el-tabs>
-        </div>
-        <!-- <div class="btn-clear">清除未读</div> -->
-        <div class="cnt">
-          <div
-            @click="handleClickNotice(item, index)"
-            :class="{ 'z-readed': item.readFlag == 1 }"
-            class="item"
-            :key="'notice' + item.targetId + index"
-            v-for="(item, index) in noticeData"
-          >
-            <img
-              class="item-tag"
-              src="@/assets/images/index/title-icon-zntb.png"
-            />
-            <div class="item-title">
-              {{ item.content }}
-            </div>
-            <div class="item-date">{{ item.createdTime }}</div>
-          </div>
-        </div>
-
-        <div>
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page.sync="pageNo"
-            :page-sizes="[20, 50, 100, 200]"
-            :page-size="parseInt(pageSize)"
-            layout="sizes, prev, pager, next, total"
-            :total="total"
-          >
-          </el-pagination>
-        </div>
-      </div>
-    </div>
-    <fastcall ref="fastcall" />
-  </div>
+	<div>
+		<div class="m-tx">
+			<div class="wrap">
+				<div class="tabs">
+					<el-tabs v-model="type" @tab-click="handleClickTab">
+						<el-tab-pane label="全部" name="all"></el-tab-pane>
+						<el-tab-pane label="已读" name="readed"></el-tab-pane>
+						<el-tab-pane label="未读" name="unreaded"></el-tab-pane>
+					</el-tabs>
+				</div>
+				<!-- <div class="btn-clear">清除未读</div> -->
+				<div class="cnt" v-if="noticeData.length > 0">
+					<div
+						@click="handleClickNotice(item, index)"
+						:class="{ 'z-readed': item.readFlag == 1 }"
+						class="item"
+						:key="'notice' + item.targetId + index"
+						v-for="(item, index) in noticeData"
+					>
+						<img
+							class="item-tag"
+							src="@/assets/images/index/title-icon-zntb.png"
+						/>
+						<div class="item-title">
+							{{ item.content }}
+						</div>
+						<div class="item-date">{{ item.createdTime }}</div>
+					</div>
+				</div>
+
+				<div class="cnt" v-else>
+					<div class="empty">
+						<img
+							src="~@/assets/images/shuju/renfang/index/empty.png"
+						/>
+						<span>暂无提醒～</span>
+					</div>
+				</div>
+
+				<div>
+					<el-pagination
+						@size-change="handleSizeChange"
+						@current-change="handleCurrentChange"
+						:current-page.sync="pageNo"
+						:page-sizes="[20, 50, 100, 200]"
+						:page-size="parseInt(pageSize)"
+						layout="sizes, prev, pager, next, total"
+						:total="total"
+					>
+					</el-pagination>
+				</div>
+			</div>
+		</div>
+		<fastcall ref="fastcall" />
+	</div>
 </template>
 
 <script>
@@ -53,88 +62,90 @@ import nextTick from "dai-js/tools/nextTick";
 import fastcall from "@/views/modules/cpts/fastcall";
 
 export default {
-  components: { fastcall },
-
-  data() {
-    return {
-      type: "all",
-      pageNo: 1,
-      pageSize: window.localStorage.getItem("pageSize") || 20,
-      total: 1,
-      noticeData: [],
-    };
-  },
-  computed: {},
-  watch: {},
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    handleClickNotice(item, index) {
-      const { msgType, targetId } = item;
-      if (msgType == "community_house") {
-        this.$refs.fastcall.showHouseInfo(targetId);
-      } else if (msgType == "resident_base_info") {
-        this.$refs.fastcall.showResiInfo(targetId);
-      }
-      this.read(item, index);
-    },
-
-    async read(item) {
-      if (item.readFlag == 1) return;
-
-      const url = "/message/intelligentMessage/msg/clear";
-      let params = {
-        id: item.id,
-      };
-
-      const { data, code, msg } = await requestPost(url, params);
-
-      if (code === 0) {
-        this.noticeData[index].readFlag = 1;
-        console.log("消息已读");
-      } else {
-        this.$message.error(msg);
-      }
-    },
-
-    handleClickTab(type) {
-      console.log(type);
-      this.getList();
-    },
-    handleSizeChange(val) {
-      this.pageSize = val;
-      localStorage.setItem("pageSize", val);
-      this.getList();
-    },
-    handleCurrentChange(val) {
-      this.pageNo = val;
-      this.getList();
-    },
-    //加载组织数据
-    async getList() {
-      const url = "/message/intelligentMessage/page";
-      let params = {
-        page: this.pageNo,
-        limit: this.pageSize,
-      };
-      const { type } = this;
-      if (type == "readed") {
-        params.readFlag = 1;
-      } else if (type == "unreaded") {
-        params.readFlag = 0;
-      }
-
-      const { data, code, msg } = await requestGet(url, params);
-
-      if (code === 0) {
-        this.total = data.total;
-        this.noticeData = data.list;
-      } else {
-        this.$message.error(msg);
-      }
-    },
-  },
+	components: { fastcall },
+
+	data() {
+		return {
+			type: "all",
+			pageNo: 1,
+			pageSize: window.localStorage.getItem("pageSize") || 20,
+			total: 1,
+			noticeData: [],
+		};
+	},
+	computed: {},
+	watch: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		handleClickNotice(item, index) {
+			const { msgType, targetId } = item;
+			if (msgType == "community_house") {
+				this.$refs.fastcall.showHouseInfo(targetId);
+			} else if (msgType == "resident_base_info") {
+				this.$refs.fastcall.showResiInfo(targetId);
+			}
+			this.read(item, index);
+		},
+
+		async read(item) {
+			if (item.readFlag == 1) return;
+
+			const url = "/message/intelligentMessage/msg/clear";
+			let params = {
+				id: item.id,
+			};
+
+			const { data, code, msg } = await requestPost(url, params);
+
+			if (code === 0) {
+				const { noticeData } = this;
+				noticeData[index].readFlag = 1;
+				this.noticeData = noticeData;
+				console.log("消息已读");
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		handleClickTab(type) {
+			console.log(type);
+			this.getList();
+		},
+		handleSizeChange(val) {
+			this.pageSize = val;
+			localStorage.setItem("pageSize", val);
+			this.getList();
+		},
+		handleCurrentChange(val) {
+			this.pageNo = val;
+			this.getList();
+		},
+		//加载组织数据
+		async getList() {
+			const url = "/message/intelligentMessage/page";
+			let params = {
+				page: this.pageNo,
+				limit: this.pageSize,
+			};
+			const { type } = this;
+			if (type == "readed") {
+				params.readFlag = 1;
+			} else if (type == "unreaded") {
+				params.readFlag = 0;
+			}
+
+			const { data, code, msg } = await requestGet(url, params);
+
+			if (code === 0) {
+				this.total = data.total;
+				this.noticeData = data.list;
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
 };
 </script>
 
@@ -142,82 +153,93 @@ export default {
 @import "~@/assets/scss/c/function.scss";
 
 .m-tx {
-  position: relative;
-  margin: 10px 6px;
-  padding: 12px 20px;
-  background: #ffffff;
-  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
-    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
-  border-radius: 2px;
-
-  .cnt {
-    box-sizing: border-box;
-    border-radius: 2px;
-    overflow: hidden;
-    padding: 0 12px;
-
-    .z-readed {
-      opacity: 0.5;
-    }
-
-    .item {
-      display: flex;
-      align-items: center;
-      padding: 16px 0 12px;
-      border-bottom: 1px dashed #f0f5fa;
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .item-tag {
-        display: block;
-        margin-right: 15px;
-        width: 24px;
-        height: 24px;
-      }
-      .item-title {
-        // @include toe;
-        width: 60%;
-        margin-right: 100px;
-        font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: rgba(0, 0, 0, 0.85);
-        line-height: 22px;
-      }
-      .item-date {
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: rgba(0, 0, 0, 0.45);
-        line-height: 17px;
-      }
-    }
-  }
-  .btn-clear {
-    position: absolute;
-    top: 14px;
-    right: 15px;
-    width: 32px;
-    height: 12px;
-    width: 75px;
-    height: 25px;
-    background: linear-gradient(0deg, #db3b3b 1%, #ff8080 100%);
-    border-radius: 3px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #ffffff;
-    line-height: 25px;
-    text-align: center;
-  }
+	position: relative;
+	margin: 10px 6px;
+	padding: 12px 20px;
+	background: #ffffff;
+	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+		0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+	border-radius: 2px;
+
+	.cnt {
+		box-sizing: border-box;
+		border-radius: 2px;
+		overflow: hidden;
+		padding: 0 12px;
+
+		.empty {
+			margin: 100px 0;
+			text-align: center;
+			color: #999;
+			img {
+				display: block;
+				width: 120px;
+				margin: 20px auto;
+			}
+		}
+
+		.z-readed {
+			opacity: 0.5;
+		}
+
+		.item {
+			display: flex;
+			align-items: center;
+			padding: 16px 0 12px;
+			border-bottom: 1px dashed #f0f5fa;
+			&:last-child {
+				border-bottom: none;
+			}
+
+			.item-tag {
+				display: block;
+				margin-right: 15px;
+				width: 24px;
+				height: 24px;
+			}
+			.item-title {
+				// @include toe;
+				width: 60%;
+				margin-right: 100px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.85);
+				line-height: 22px;
+			}
+			.item-date {
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				line-height: 17px;
+			}
+		}
+	}
+	.btn-clear {
+		position: absolute;
+		top: 14px;
+		right: 15px;
+		width: 32px;
+		height: 12px;
+		width: 75px;
+		height: 25px;
+		background: linear-gradient(0deg, #db3b3b 1%, #ff8080 100%);
+		border-radius: 3px;
+		font-size: 14px;
+		font-weight: 500;
+		color: #ffffff;
+		line-height: 25px;
+		text-align: center;
+	}
 }
 
 /deep/ .el-tabs__nav-wrap::after {
-  height: 1px;
-  background-color: #f0f5fa;
+	height: 1px;
+	background-color: #f0f5fa;
 }
 
 /deep/ .el-pagination__total {
-  // float: left;
+	// float: left;
 }
 </style>