首页

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>