dvcp_v2_wxcp_app/library/apps/AppPeopleList/AppPeopleList.vue

<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>
.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>