山东移动居民管理

src/apps/AppPeopleList/AppPeopleList.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="AppPeopleList">
+    <div class="banner" v-for="(item, index) in bannerList" :key="index" @click="linkTo(item.linkUrl)">
+      <img :src="item.img" alt="">
+      <p>{{item.title}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppPeopleList',
+  appName: '居民档案',
+  data() {
+    return {
+      bannerList: [
+        {
+          img: require('./components/img/blue-bg.png'),
+          title: '查看居民档案',
+          linkUrl: './PeopleList'
+        },
+        {
+          img: require('./components/img/green-bg.png'),
+          title: '居民档案审核',
+          linkUrl: './ExamineList'
+        }
+      ]
+    }
+  },
+  onShow() {
+    document.title = '居民档案'
+  },
+  methods: {
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%!important;
+  background-color: #fff!important;
+}
+.AppPeopleList{
+  height: 100%;
+  padding-top: 16px;
+  .banner{
+    padding: 32px 40px 0;
+    position: relative;
+    img{
+      width: 100%;
+      height: 228px;
+    }
+    p{
+      position: absolute;
+      top: 120px;
+      left: 88px;
+      font-size: 44px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #FFF;
+      line-height: 60px;
+    }
+  }
+}
+</style>