首页

src/project/saas/AppHome/components/App.vue

@@ -0,0 +1,120 @@
+<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">
+          <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">
+          <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: '居民档案'
+        },
+        {
+          img: require('../img/app/app-wggl-icon.png'),
+          title: '网格管理'
+        },
+        {
+          img: require('../img/app/app-tsrq-icon.png'),
+          title: '特殊人群'
+        },
+        {
+          img: require('../img/app/app-rfdt-icon.png'),
+          title: '人房地图'
+        }
+      ],
+      officeAppList: [
+        {
+          img: require('../img/app/app-mdtj-icon.png'),
+          title: '矛盾调解'
+        },
+        {
+          img: require('../img/app/app-zfww-icon.png'),
+          title: '走访慰问'
+        },
+        {
+          img: require('../img/app/app-swjl-icon.png'),
+          title: '事务记录'
+        },
+        {
+          img: require('../img/app/app-xtxf-icon.png'),
+          title: '协同宣发'
+        },
+        {
+          img: require('../img/app/app-tzgg-icon.png'),
+          title: '通知公告'
+        },
+        {
+          img: require('../img/app/app-wgyjf-icon.png'),
+          title: '网格员积分'
+        },
+      ]
+    }
+  },
+  methods: {
+    
+  },
+  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>