二级导航页新增需求

src/apps/AppPageBasic/AppPageBasic.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppPageBasic">
-    <AiListPage :label="label" :appList="appList" />
+    <AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
   </div>
 </template>
 
@@ -22,7 +22,8 @@ export default {
           icon: require('./img/shgk.png'),
           url: '../AppServicePublic/AppServicePublic?moduleId=b03d1ea68c8449ecb00685644e3f0192&listName=三务公开'
         }
-      ]
+      ],
+      headerBg: require('./img/header-bg.png'),
     }
   },
 

src/apps/AppPageCivilization/AppPageCivilization.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppPageCivilization">
-    <AiListPage :label="label" :appList="appList" />
+    <AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
   </div>
 </template>
 
@@ -27,7 +27,8 @@ export default {
           icon: require('./img/whjt.png'),
           url: '../AppServicePublic/AppServicePublic?moduleId=6afadf4cd44f4b73be29390b30ca88bb&listName=五好家庭'
         }
-      ]
+      ],
+      headerBg: require('./img/header-bg.png'),
     }
   },
 

src/apps/AppPageInteraction/AppPageInteraction.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppPageInteraction">
-    <AiListPage :label="label" :appList="appList" />
+    <AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
   </div>
 </template>
 
@@ -27,7 +27,8 @@ export default {
           icon: require('./img/wjbd.png'),
           url: '../AppAskForm/AppAskForm'
         }
-      ]
+      ],
+      headerBg: require('./img/header-bg.png'),
     }
   },
 

src/apps/AppPageParty/AppPageParty.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppPageParty">
-    <AiListPage :label="label" :appList="appList" />
+    <AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
   </div>
 </template>
 
@@ -32,7 +32,8 @@ export default {
           icon: require('./img/zxdt.png'),
           url: '../party/AppOnlineAnswer/AppOnlineAnswer'
         }
-      ]
+      ],
+      headerBg: require('./img/header-bg.png'),
     }
   },
 

src/apps/AppPageResident/AppPageResident.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AppPageResident">
-    <AiListPage :label="label" :appList="appList" />
+    <AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
   </div>
 </template>
 
@@ -27,7 +27,8 @@ export default {
           icon: require('./img/jmda.png'),
           url: '../AppResidentDocument/AppResidentDocument'
         }
-      ]
+      ],
+      headerBg: require('./img/header-bg.png'),
     }
   },
 

src/components/AiListPage.vue

@@ -1,5 +1,8 @@
 <template>
   <section class="AppListPage">
+    <div class="header" :style="`backgroundImage: url(${headerBg});`">
+      <p>{{label}}</p>
+    </div>
     <div class="content">
       <div class="title">{{label}}</div>
       <div class="app-list">
@@ -20,6 +23,7 @@ export default {
   props: {
     label: String,
     appList: Array,
+    headerBg: String
   },
   methods: {
     linkTo(url) {
@@ -33,6 +37,21 @@ export default {
 <style lang="scss" scoped>
 .AppListPage {
   padding-top: 20px;
+  .header{
+    width: calc(100% - 36px);
+    height: 240px;
+    margin: 0 18px 20px 18px;
+    background-size: 100% 100%;
+    p{
+      font-size: 46px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #26385C;
+      line-height: 64px;
+      padding: 48px 50px 0 50px;
+      word-break: break-all;
+    }
+  }
   .content{
     margin: 0 20px 20px;
     width: calc(100% - 40px);