sass

src/sass/AppHome/AppHome.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="AppHome">
+    <div>111111</div>
+    <div class="tabs">
+      <div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
+        <img :src="tabIndex == index ? item.activeImg : item.img" alt="" />
+        <p :class="tabIndex == index ? 'color-3267F0' : ''">{{ item.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import home from './home.vue'
+import application from './application.vue'
+import statistics from './statistics.vue'
+import my from './my.vue'
+export default {
+  name: 'AppHome',
+  appName: '首页',
+
+  data() {
+    return {
+      component: 'home',
+      params: {},
+      refresh: true,
+      tabIndex: 0,
+      tabs: [
+        {
+          img: require('./components/img/home-icon.png'),
+          activeImg: require('./components/img/home-icon-active.png'),
+          text: '首页',
+          component: 'home',
+        },
+        {
+          img: require('./components/img/app-icon.png'),
+          activeImg: require('./components/img/app-icon-active.png'),
+          text: '应用',
+          component: 'application',
+        },
+        {
+          img: require('./components/img/statistics-icon.png'),
+          activeImg: require('./components/img/statistics-icon-active.png'),
+          text: '统计',
+          component: 'statistics',
+        },
+        {
+          img: require('./components/img/my-icon.png'),
+          activeImg: require('./components/img/my-icon-active.png'),
+          text: '我的',
+          component: 'my'
+        }
+      ],
+      isTab: true,
+    }
+  },
+
+  components: {
+    home,
+    application,
+    statistics,
+    my,
+  },
+
+  methods: {
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
+    },
+    tabClick(index, component) {
+      this.tabIndex = index
+      this.component = component
+      this.refresh = false
+      this.$nextTick(() => {
+        this.refresh = true
+      })
+    },
+    linkTo(url) {
+      uni.navigateTo({ url })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppHome {
+  .tabs {
+    width: 100%;
+    height: 98px;
+    background: #fff;
+    border-top: 1px solid #ddd;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    .item {
+      flex: 1;
+      text-align: center;
+      img {
+        width: 56px;
+        height: 56px;
+        margin-top: 8px;
+      }
+      p {
+        font-size: 22px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #c4cad4;
+        line-height: 8px;
+      }
+      .color-3267F0 {
+        color: #3267f0;
+      }
+    }
+  }
+}
+</style>