评测

src/components/TabBar.vue

@@ -3,6 +3,13 @@
     <van-tabbar fixed route v-model="active" @change="handleChange">
       <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
         {{ item.title }}
+        <template #icon="props" v-if="!item.icon">
+          <van-image
+            :src="props.active ? item.activeIcon : item.normalIcon"
+            fit="contain"
+            style="display: block; width: 24.5px; height: 24.5px;"
+          />
+        </template>
       </van-tabbar-item>
     </van-tabbar>
   </div>

src/plugins/vant.js

@@ -13,7 +13,8 @@ import {
   Dialog,
   PullRefresh,
   Empty,
-  Overlay
+  Overlay,
+  Image
 } from 'vant'
 Vue.use(Button)
   .use(Cell)
@@ -28,3 +29,4 @@ Vue.use(Button)
   .use(PullRefresh)
   .use(Empty)
   .use(Overlay)
+  .use(Image)

src/router/router.config.js

@@ -33,6 +33,12 @@ export const constantRouterMap = [
         name: 'home',
         component: () => import('@/views/home/index'),
         meta: { title: '课程中心', keepAlive: false }
+      },
+      {
+        path: 'test',
+        name: 'Test',
+        component: () => import('@/views/test/index'),
+        meta: { title: '评测中心', keepAlive: false }
       }
     ]
   },

src/views/layouts/index.vue

@@ -6,7 +6,7 @@
       </keep-alive>
       <router-view v-else></router-view>
     </div>
-    <div class="layout-footer" v-if="false">
+    <div class="layout-footer" v-if="true">
       <TabBar :data="tabbars" @change="handleChange" />
     </div>
   </div>
@@ -14,6 +14,7 @@
 
 <script>
 import TabBar from '@/components/TabBar'
+
 export default {
   name: 'AppLayout',
   data() {
@@ -25,14 +26,15 @@ export default {
             path: '/home'
           },
           icon: 'home-o'
+        },
+        {
+          title: '评测中心',
+          to: {
+            path: '/test'
+          },
+          activeIcon: require('../../assets/images/course/audio.png'),
+          normalIcon: require('../../assets/images/course/comment.png')
         }
-        // {
-        //   title: '关于我',
-        //   to: {
-        //     path: 'About'
-        //   },
-        //   icon: 'user-o'
-        // }
       ]
     }
   },

src/views/test/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    评测
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Test',
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped></style>