<template>
  <div class="AppPeopleList">
    <u-navbar back-icon-color="#000" title="居民管理" title-color="#000" title-width="300" title-size="32" 
        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
    <div class="header-content-bg">
      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
    </div>
    <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: '居民档案',
  customNavigation: true,
  data() {
    return {
      bannerList: [
        {
          img: 'https://cdn.sinoecare.com/i/2024/07/16/66960741d6338.png',
          title: '查看居民档案',
          linkUrl: './PeopleList'
        },
        {
          img: 'https://cdn.sinoecare.com/i/2024/07/16/66960746d79c9.png',
          title: '居民标签管理',
          linkUrl: './TagList'
        }
      ],
      backgroundNavbar: {
        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
        backgroundSize: 'cover',
      },
    }
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: 'black',
      backgroundColor: '#ffffff'
    })
  },
  methods: {
    linkTo(url) {
      uni.navigateTo({url})
    }
  },
}
</script>

<style lang="scss" scoped>
.AppPeopleList{
  height: 100%;
  // padding-top: 16px;
  .header-content-bg {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      height: 592px;
      position: absolute;
      z-index: -1;
    }
  }
  .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>
