首页

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>

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>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="Home">
     <div class="tips">
-      <img src="../img/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
+      <img src="../img/home/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
     </div>
     <div class="content">
       <div class="user-info">
@@ -40,19 +40,19 @@ export default {
     return {
       appList: [
         {
-          img: require('../img/home-jmgl-icon.png'),
+          img: require('../img/home/home-jmgl-icon.png'),
           title: '居民管理'
         },
         {
-          img: require('../img/home-zfww-icon.png'),
+          img: require('../img/home/home-zfww-icon.png'),
           title: '走访慰问'
         },
         {
-          img: require('../img/home-mdtj-icon.png'),
+          img: require('../img/home/home-mdtj-icon.png'),
           title: '矛盾调解'
         },
         {
-          img: require('../img/home-xftj-icon.png'),
+          img: require('../img/home/home-xftj-icon.png'),
           title: '宣发统计'
         }
       ],

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

@@ -0,0 +1,128 @@
+<template>
+  <div class="My">
+    <div class="content">
+      <div class="user-info">
+        <img src="../img/my/my-bg-user.png" alt="" class="bg-img">
+        <div class="top">
+          <div>汪周文</div>
+          <img src="../img/avatva.jpg" alt="">
+        </div>
+        <div class="bottom">武汉中卫慧通</div>
+      </div>
+      <div class="link" v-for="(item, index) in linkList" :key="index">
+        <div class="left">
+          <img :src="item.img" alt="">{{ item.title }}
+        </div>
+        <img src="../img/right-icon-999.png" alt="" class="right-icon">
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: "My",
+  data() {
+    return {
+      linkList: [
+        {
+          title: '头像上传',
+          img: require('../img/my/my-txsc.png')
+        },
+        {
+          title: '意见反馈',
+          img: require('../img/my/my-yjfk.png')
+        },
+        {
+          title: '联系我们',
+          img: require('../img/my/my-lxwm.png')
+        },
+        {
+          title: '帮助文档',
+          img: require('../img/my/my-bzwd.png')
+        }
+      ]
+    }
+  },
+  methods: {
+    
+  },
+  created() {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.My {
+  .content {
+    padding: 32px 32px 0;
+    .user-info{
+      width: 686px;
+      height: 248px;
+      border-radius: 8px;
+      background-color: #fff;
+      position: relative;
+      margin-bottom: 32px;
+      .bg-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .top {
+        display: flex;
+        justify-content: space-between;
+        padding: 28px 32px 36px;
+        border-bottom: 1px solid #eee;
+        div {
+          font-size: 40px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 56px;
+        }
+        img {
+          width: 96px;
+          height: 96px;
+          border: 1px solid #DDD;
+        }
+      }
+      .bottom {
+        padding: 24px 32px;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999;
+        line-height: 40px;
+      }
+    }
+    .link {
+      display: flex;
+      justify-content: space-between;
+      padding: 32px;
+      background-color: #fff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+      .left {
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 42px;
+        img {
+          width: 48px;
+          height: 48px;
+          margin-right: 16px;
+          vertical-align: middle;
+        }
+      }
+      .right-icon {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
+</style>