首页完善

src/assets/scss/modules/index.scss

@@ -83,6 +83,7 @@
             border-radius: 2px;
             color: #0056d6;
             text-align: center;
+            cursor: pointer;
             &.z-on {
                 color: #ffffff;
                 background: #0056d6;
@@ -156,7 +157,7 @@
             }
 
             .btn {
-                margin: 8px 9px 8px auto;
+                margin: 7px 9px 0 auto;
                 line-height: 32px;
                 width: 66px;
                 height: 32px;

src/js/store/index.js

@@ -26,14 +26,8 @@ export default new Vuex.Store({
     // 内容, 是否需要刷新
     contentIsNeedRefresh: false,
     // 内容, 标签页(默认添加首页)
-    contentTabs: [
-      {
-        ...window.SITE_CONFIG["contentTabDefault"],
-        name: "indexWork",
-        title: "首页",
-      },
-    ],
-    contentTabsActiveName: "indexWork",
+    contentTabs: [],
+    contentTabsActiveName: "",
 
     mainShuju: {
       menuList: [],

src/router/index.js

@@ -89,10 +89,11 @@ export const moduleRoutes = {
   component: () => import("@/views/main"),
   name: "main",
   redirect: {
-    path: "/main/shequ-index",
+    path: "/main/home",
   },
   meta: {
     title: "主入口布局",
+    isTab: false,
   },
   children: [
     {
@@ -100,7 +101,7 @@ export const moduleRoutes = {
       component: () => import("@/views/modules/home"),
       name: "home",
       meta: {
-        title: "主页",
+        title: "首页",
         isTab: true,
       },
     },
@@ -123,7 +124,6 @@ export const moduleRoutes = {
         isTab: false,
       },
     },
-
     {
       path: "home-notice",
       props: true,
@@ -140,6 +140,16 @@ export const moduleRoutes = {
         ],
       },
     },
+    {
+      path: "shequ-chaxun",
+      props: true,
+      name: "shequ-chaxun",
+      component: () => import("@/views/modules/shequ/chaxun"),
+      meta: {
+        isTab: true,
+        title: "社区查询",
+      },
+    },
   ],
 };
 

src/views/modules/home/index.vue

@@ -15,8 +15,8 @@
               查居民
             </div>
             <div
-              :class="{ 'z-on': searchData.type == '房屋' }"
-              @click="searchData.type = '房屋'"
+              :class="{ 'z-on': searchData.type == 'fangwu' }"
+              @click="searchData.type = 'fangwu'"
             >
               查房屋
             </div>
@@ -59,7 +59,7 @@
           <div class="cnt">
             <div class="cnt-left">
               <div class="subtitle">
-                <img src="@/assets/images/index/title-icon-sqzl.png" />
+                <img src="@/assets/images/index/i-sqjj.png" />
                 <span>社区简介</span>
               </div>
               <p>
@@ -67,7 +67,7 @@
               </p>
 
               <div class="subtitle">
-                <img src="@/assets/images/index/title-icon-sqzl.png" />
+                <img src="@/assets/images/index/i-fxjg.png" />
                 <span>分析结果</span>
               </div>
 
@@ -84,7 +84,7 @@
                   :key="item.code"
                   v-for="(item, index) in warningChart.list"
                 >
-                  <div>{{ ("0" + (index + 1)).substr(0, 2) }}.</div>
+                  <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>
@@ -151,76 +151,64 @@
       <div class="m-box m-tb">
         <div class="wrap">
           <div class="header">
-            <img src="@/assets/images/index/title-icon-zntb.png" />
+            <img src="@/assets/images/index/i-zntb.png" />
             <span>智能填报</span>
           </div>
         </div>
         <div class="more">更多></div>
         <div class="cnt">
           <div class="item">
-            <img
-              class="item-tag"
-              src="@/assets/images/index/title-icon-zntb.png"
-            />
+            <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/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-tx.png" />
                 <span>填写</span>
               </div>
               <div class="item-btn">
-                <img src="@/assets/images/index/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-xz.png" />
                 <span>下载</span>
               </div>
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-tag"
-              src="@/assets/images/index/title-icon-zntb.png"
-            />
+            <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/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-tx.png" />
                 <span>填写</span>
               </div>
               <div class="item-btn">
-                <img src="@/assets/images/index/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-xz.png" />
                 <span>下载</span>
               </div>
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-tag"
-              src="@/assets/images/index/title-icon-zntb.png"
-            />
+            <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/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-tx.png" />
                 <span>填写</span>
               </div>
               <div class="item-btn">
-                <img src="@/assets/images/index/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-xz.png" />
                 <span>下载</span>
               </div>
             </div>
           </div>
           <div class="item">
-            <img
-              class="item-tag"
-              src="@/assets/images/index/title-icon-zntb.png"
-            />
+            <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/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-tx.png" />
                 <span>填写</span>
               </div>
               <div class="item-btn">
-                <img src="@/assets/images/index/title-icon-zntb.png" />
+                <img src="@/assets/images/index/i-xz.png" />
                 <span>下载</span>
               </div>
             </div>
@@ -293,25 +281,22 @@ export default {
       });
     },
 
+    toSearchPage(type, keyword) {
+      this.$router.push({
+        path: "/main/shequ-chaxun",
+        query: {
+          type,
+          keyword,
+        },
+      });
+    },
+
     handleClickSearchBtn() {
       const {
         searchData: { type, keyword },
       } = this;
       if (!keyword) return this.$message.error("请输入搜索条件");
-      if (type == "jumin") {
-        this.searchJumin.pageNo = 1;
-        this.searchJumin.total = 0;
-        this.getSearchJumin();
-      } else if (type == "fangwu") {
-        this.searchFangwu.pageNo = 1;
-        this.searchFangwu.total = 0;
-        this.getSearchFangwu();
-      } else if (type == "xuqiu") {
-        this.searchXuqiu.pageNo = 1;
-        this.searchXuqiu.total = 0;
-        this.getSearchXuqiu();
-      }
-      this.searchStatus = "ing";
+      this.toSearchPage(type, keyword);
     },
 
     async getApiData() {

src/views/modules/home/notice.vue

@@ -1,32 +1,51 @@
 <template>
   <div>
-    <div class="m-box m-tx">
+    <div class="m-tx">
       <div class="wrap">
-        <div class="header">
-          <img src="@/assets/imgs/index/title-icon-zntx.png" />
-          <span>智能提醒</span>
+        <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="btn-clear">清除未读</div> -->
         <div class="cnt">
           <div class="item">
+            <img
+              class="item-tag"
+              src="@/assets/images/index/title-icon-zntb.png"
+            />
             <div class="item-title">
               鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
             </div>
             <div class="item-date">2022-09-12 10:25</div>
           </div>
           <div class="item">
+            <img
+              class="item-tag"
+              src="@/assets/images/index/title-icon-zntb.png"
+            />
             <div class="item-title">
               鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
             </div>
             <div class="item-date">2022-09-12 10:25</div>
           </div>
           <div class="item">
+            <img
+              class="item-tag"
+              src="@/assets/images/index/title-icon-zntb.png"
+            />
             <div class="item-title">
               鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
             </div>
             <div class="item-date">2022-09-12 10:25</div>
           </div>
           <div class="item">
+            <img
+              class="item-tag"
+              src="@/assets/images/index/title-icon-zntb.png"
+            />
             <div class="item-title">
               鞍山路小区12号楼2单元202户房屋状态于2022年9月12日由自住变更为出租，请···
             </div>
@@ -39,7 +58,7 @@
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page.sync="pageNo"
-            :page-sizes="[20, 50, 100, 200]" 
+            :page-sizes="[20, 50, 100, 200]"
             :page-size="parseInt(pageSize)"
             layout="sizes, prev, pager, next, total"
             :total="total"
@@ -60,6 +79,7 @@ export default {
 
   data() {
     return {
+      type: "all",
       pageNo: 1,
       pageSize: window.localStorage.getItem("pageSize") || 20,
       total: 1,
@@ -77,6 +97,9 @@ export default {
     this.getList();
   },
   methods: {
+    handleClickTab(type) {
+      this.getList();
+    },
     handleSizeChange(val) {
       this.pageSize = val;
       localStorage.setItem("pageSize", val);
@@ -106,14 +129,58 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/modules/index.scss" scoped></style>
-
 <style lang="scss" scoped>
+@import "~@/assets/scss/c/function.scss";
+
 .m-tx {
-  margin-top: 20px;
-  height: auto;
+  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 {
-    height: auto;
+    box-sizing: border-box;
+    border-radius: 2px;
+    overflow: hidden;
+    padding: 0 12px;
+
+    .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;
+        height: 22px;
+        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;
@@ -132,4 +199,13 @@ export default {
     text-align: center;
   }
 }
+
+/deep/ .el-tabs__nav-wrap::after {
+  height: 1px;
+  background-color: #f0f5fa;
+}
+
+/deep/ .el-pagination__total {
+  // float: left;
+}
 </style>