首页

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="Grid">
+    <div class="banner-img">
+      <img src="../img/grid/grid-banner.png" alt="">
+    </div>
+    <div class="content">
+      <div class="item" v-for="(item, index) in appList" :key="index">
+        <div class="title">{{ item.title }}</div>
+        <div class="text">{{ item.text }}</div>
+        <img :src="item.img" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Grid",
+  data() {
+    return {
+      appList: [
+        {
+          img: require('../img/grid/grid-jmda.png'),
+          title: '居民档案',
+          text: '辖区居民信息全览'
+        },
+        {
+          img: require('../img/grid/grid-tsrq.png'),
+          title: '特殊人群',
+          text: '特殊居民标签化管理'
+        },
+        {
+          img: require('../img/grid/grid-wggl.png'),
+          title: '网格管理',
+          text: '基层网格化精细治理'
+        },
+        {
+          img: require('../img/grid/grid-rfdt.png'),
+          title: '人房地图',
+          text: '图属结合更直观'
+        }
+      ]
+    }
+  },
+  methods: {
+    
+  },
+  created() {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Grid {
+  .banner-img {
+    padding: 32px 32px 16px;
+    img {
+      width: 686px;
+      height: 240px;
+    }
+  }
+  .content {
+    padding-left: 32px;
+    .item {
+      display: inline-block;
+      width: calc(50% - 32px);
+      margin: 0 32px 32px 0;
+      padding: 40px 0 0 40px;
+      position: relative;
+      height: 384px;
+      background-color: #fff;
+      box-sizing: border-box;
+      .title {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 50px;
+      }
+      .text {
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ABB5C4;
+        line-height: 36px;
+      }
+      img {
+        width: 208px;
+        height: 208px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+}
+</style>