便民服务

src/project/fengdu/AppConvenientService/AppConvenientService.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="AppConvenientService">
+    <u-navbar :is-back="false" title="便民服务" title-color="#000" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar>
     <div class="card-list">
-      便民服务
+      <div class="card" >
+        <h2>居民服务</h2>
+        <div class="items-list">
+          <div class="items" v-for="(item, index) in list" :key="index">
+            <img :src="item.pic" alt="">
+            <div class="items-name">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -10,22 +19,94 @@
 export default {
   name: "AppConvenientService",
   appName: "便民服务",
+  customNavigation: true,
   data() {
     return {
-
+      list: [{
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      }, {
+        pic: 'https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png',
+        name: '便民通讯录'
+      },
+      ],
+      backgroundNavbar: {
+        background: '#FFF'
+      }
     }
   },
   methods: {
 
   },
   onShow() {
-
-  }
+    
+  },
+  
 }
 </script>
 
 <style lang="scss" scoped>
 .AppConvenientService {
+  padding: 32px;
+  box-sizing: border-box;
+  .card {
+    background: #FFF;
+    padding: 32px;
+    box-sizing: border-box;
+    border-radius: 16px;
 
+    h2 {
+      color: #333333;
+      font-size: 34px;
+      font-weight: 600;
+    }
+
+    .items-list {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .items {
+        width: 25%;
+        align-self: center;
+        text-align: center;
+        margin-top: 24px;
+        img {
+          width: 108px;
+          height: 108px;
+        }
+        .items-name {
+          margin-top: 8px;
+          color: #1d2229ff;
+          font-size: 26px;
+          font-weight: 400;
+        }
+      }
+    }
+    
+  }
 }
 </style>

src/project/fengdu/AppHome/AppHome.vue

@@ -45,7 +45,7 @@ export default {
       notices: [],
       search: {areaId: ''},
       backgroundNavbar: {
-        // background: linear - gradient(138.6deg, #e3e8fbff 0%, #ecf4fdff 48%, #ffffffff 95%)
+        background: '#FFF'
       }
     }
   },