<template>
  <div class="App">
    <div class="content">
      <div class="app-list">
        <div class="title">网格管理</div>
        <div class="item" v-for="(item, index) in gridAppList" :key="index" @click="linkTo(item.linkUrl)">
          <img :src="item.img" alt="">
          <p>{{ item.title }}</p>
        </div>
      </div>
      <div class="app-list">
        <div class="title">日常办公</div>
        <div class="item" v-for="(item, index) in officeAppList" :key="index" @click="linkTo(item.linkUrl)">
          <img :src="item.img" alt="">
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      gridAppList: [
        {
          img: require('../img/app/app-jmda-icon.png'),
          title: '居民档案',
          linkUrl: '/apps/AppPeopleList/AppPeopleList'
        },
        {
          img: require('../img/app/app-rfdt-icon.png'),
          title: '居民信息',
          linkUrl: '/apps/AppResidentFile/AppResidentFile'
        },
        {
          img: require('../img/app/app-tsrq-icon.png'),
          title: '特殊人群',
          linkUrl: '/apps/AppSpecialGroups/AppSpecialGroups'
        },
        {
          img: require('../img/app/app-wggl-icon.png'),
          title: '网格管理',
          linkUrl: '/apps/AppGridManagement/AppGridManagement'
        }
      ],
      officeAppList: [
        {
          img: require('../img/app/app-zfww-icon.png'),
          title: '走访慰问',
          linkUrl: '/apps/AppWalkask/AppWalkask'
        },
        {
          img: require('../img/app/app-mdtj-icon.png'),
          title: '问卷表单',
          linkUrl: '/apps/AppAskForm/AppAskForm'
        },
        {
          img: require('../img/home/home-xtxf-icon.png'),
          title: '协同宣发',
          linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
        },
        {
          img: require('../img/app/app-xftj-icon.png'),
          title: '宣发统计',
          linkUrl: '/apps/AppPropagandaStatistics/AppPropagandaStatistics'
        },
      ]
    }
  },
  methods: {
    linkTo(url) {
      uni.navigateTo({ url })
    }
  },
  created() {
    
  },
}
</script>

<style lang="scss" scoped>
.App {
  .content {
    padding: 32px 32px 0;
    .app-list {
      width: 100%;
      background: #FFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
      border-radius: 8px;
      margin-bottom: 32px;
      .title {
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 44px;
        padding: 24px 0 8px 32px;
      }
      .item {
        display: inline-block;
        width: 25%;
        text-align: center;
        padding: 24px 0;
        img {
          width: 72px;
          height: 72px;
          margin-bottom: 8px;
        }
        p {
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 36px;
        }
      }
    }
  }
}
</style>
