首页

src/project/saas/AppHome/AppHome.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="AppHome">
+    <!-- <Home></Home> -->
+    <component :is="tabList[tabIndex].component"/>
+    <div class="tab-list">
+      <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">
+        <img :src="tabIndex == index ? item.activeImg : item.img " alt="">
+        <p :style="tabIndex == index ? 'color: #267EF0;' : ''">{{ item.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Home from './components/Home'
+import Grid from './components/Grid'
+import App from './components/App'
+import My from './components/My'
+export default {
+  name: "AppHome",
+  appName: "首页",
+  data() {
+    return {
+      tabList: [
+        {
+          text: '首页',
+          img: require('./img/tab/home-icon.png'),
+          activeImg: require('./img/tab/home-icon-active.png'),
+          component: Home
+        },
+        {
+          text: '网格',
+          img: require('./img/tab/grid-icon.png'),
+          activeImg: require('./img/tab/grid-icon-active.png'),
+          component: Grid
+        },
+        {
+          text: '应用',
+          img: require('./img/tab/app-icon.png'),
+          activeImg: require('./img/tab/app-icon-active.png'),
+          component: App
+        },
+        {
+          text: '我的',
+          img: require('./img/tab/my-icon.png'),
+          activeImg: require('./img/tab/my-icon-active.png'),
+          component: My
+        }
+      ],
+      tabIndex: 0,
+    }
+  },
+  components: {Home, Grid, App, My},
+  methods: {
+    tabClick(index) {
+      this.tabIndex = index
+    },
+  },
+  onShow() {
+    document.title = "慧政务"
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppHome {
+  width: 100%;
+  height: 100%;
+  background-color: #F5F6F7;
+  padding-bottom: 112px;
+  .tab-list {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    padding: 16px 36px 8px;
+    box-sizing: border-box;
+    background-color: #fff;
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      img {
+        width: 56px;
+        height: 56px;
+      }
+      p {
+        font-size: 20px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #000;
+        line-height: 28px;
+      }
+    } 
+  }
+}
+</style>

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

@@ -0,0 +1,268 @@
+<template>
+  <div class="Home">
+    <div class="tips">
+      <img src="../img/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
+    </div>
+    <div class="content">
+      <div class="user-info">
+        <div class="left">
+          <img src="../img/avatva.jpg" alt="">
+        </div>
+        <div class="right">
+          <p class="name">你好，汪周文</p>
+          <p class="time">您已加入慧政务 <span>15</span>天</p>
+        </div>
+      </div>
+      <div class="app-list">
+        <div class="item" v-for="(item, index) in appList" :key="index">
+          <img :src="item.img" alt="">
+          <p>{{ item.title }}</p>
+        </div>
+      </div>
+      <div class="title">数据统计</div>
+      <div class="tab-content">
+        <div class="item" v-for="(item, index) in tabStatistics" :key="index">
+          <p><span></span>{{ item.title }}</p>
+          <div>{{ item.num }}</div>
+        </div>
+      </div>
+      <div class="title">居民活跃指数</div>
+      <div class="chart-content" id="statistic"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  name: "Home",
+  data() {
+    return {
+      appList: [
+        {
+          img: require('../img/home-jmgl-icon.png'),
+          title: '居民管理'
+        },
+        {
+          img: require('../img/home-zfww-icon.png'),
+          title: '走访慰问'
+        },
+        {
+          img: require('../img/home-mdtj-icon.png'),
+          title: '矛盾调解'
+        },
+        {
+          img: require('../img/home-xftj-icon.png'),
+          title: '宣发统计'
+        }
+      ],
+      tabStatistics: [
+        {
+          title: '网格数',
+          num: 15
+        },
+        {
+          title: '网格员数',
+          num: 35
+        },
+        {
+          title: '辖区户数',
+          num: 1550
+        },
+        {
+          title: '居民群数',
+          num: 15
+        }
+      ],
+      echartData: null
+    }
+  },
+  methods: {
+    chartInit() {
+      this.echartData = echarts.init(document.getElementById('statistic'))
+      var option = {
+        grid: {
+          left: '6%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+            lineStyle: {
+              normal: {
+                color: '#2891FF'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#2891FF',
+              }
+            }
+          }
+        ]
+      };
+      this.echartData.setOption(option)
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Home {
+  .tips {
+    padding: 24px 32px;
+    background-color: #3975C6;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #FFF;
+    line-height: 40px;
+    img {
+      width: 32px;
+      height: 32px;
+      margin-right: 16px;
+      vertical-align: middle;
+    }
+  }
+  .content {
+    padding: 0 32px;
+    .user-info {
+      display: flex;
+      padding: 48px 0 32px 0;
+      .left {
+        width: 96px;
+        height: 96px;
+        margin-right: 32px;
+        img {
+          width: 96px;
+          height: 96px;
+          border-radius: 50%;
+          border: 4px solid #FFFFFF;
+          box-sizing: border-box;
+        }
+      }
+      .right {
+        width: calc(100% - 128px);
+        margin-top: 6px;
+        .name {
+          font-size: 32px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 44px;
+        }
+        .time {
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 40px;
+          span {
+            color: #3975C6;
+          }
+        }
+      }
+    }
+    .app-list {
+      width: 100%;
+      background: #FFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+      border-radius: 8px;
+      display: flex;
+      .item {
+        flex: 1;
+        text-align: center;
+        padding: 24px 0;
+        img {
+          width: 64px;
+          height: 64px;
+          margin-bottom: 8px;
+        }
+        p {
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+        }
+      }
+    }
+    .title {
+      padding: 48px 0 24px 0;
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 44px;
+    }
+    .tab-content {
+      .item {
+        display: inline-block;
+        width: 336px;
+        height: 160px;
+        background: #FFF;
+        box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+        border-radius: 16px;
+        padding: 24px;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        p {
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666;
+          line-height: 40px;
+          margin-bottom: 8px;
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            border: 4px solid #3975C6;
+            margin-right: 8px;
+            box-sizing: border-box;
+          }
+        }
+        div{
+          font-size: 48px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #333;
+          line-height: 64px;
+          padding-left: 24px;
+        }
+        
+      }
+      .item:nth-of-type(2n-1) {
+        margin-right: 14px;
+      }
+      .item:nth-last-of-type(1) {
+        p {
+          span {
+            border-color: #3ACEB3;
+          }
+        }
+      }
+    }
+    .chart-content{
+      width: 686px;
+      height: 514px;
+      background: #FFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+      border-radius: 8px;
+      margin-bottom: 82px;
+    }
+  }
+}
+</style>