<template>
  <div class="AppPageInteraction">
    <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>
    <AiListPage :label="label" :appList="appList" :headerBg="headerBg"/>
  </div>
</template>

<script>
export default {
  name: 'AppPageInteraction',
  appName: '居民管理',
  customNavigation: true,
  data() {
    return {
      label: '居民管理',
      appList: [
        {
          name: '居民信息管理',
          icon: 'https://cdn.sinoecare.com/i/2024/07/10/668ddad302ae9.png',
          url: '/mods/AppResidentFile/AppResidentFile'
        },
        {
          name: '居民档案',
          icon: 'https://cdn.sinoecare.com/i/2024/07/10/668ddad1bb61d.png',
          url: '/mods/AppPeopleList/AppPeopleList'
        },
        // {
        //   name: '小程序公告',
        //   icon: 'https://cdn.sinoecare.com/i/2024/07/10/668ddad4445c1.png,        
        //   url: '../AppUniMsg/AppUniMsg'
        // }
      ],
      headerBg: 'https://cdn.sinoecare.com/i/2024/07/10/668ddacfbac60.png',
      backgroundNavbar: {
        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
        backgroundSize: 'cover',
      },
    }
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: 'black',
      backgroundColor: '#ffffff'
    })
  },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}

.AppPageInteraction {
  height: 100%;
  .header-content-bg {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      height: 592px;
      position: absolute;
      z-index: -1;
    }
  }
}
</style>
