123

src/App.vue

@@ -1,8 +1,13 @@
 <template>
   <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
     <router-view />
-    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route>
-      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">{{tab.title}}</van-tabbar-item>
+    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
+      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
+        <span>{{tab.title}}</span>
+        <template #icon="props">
+          <img :src="props.active ? tab.active: tab.inactive" alt="">
+        </template>
+      </van-tabbar-item>
     </van-tabbar>
   </div>
 </template>
@@ -41,7 +46,7 @@ export default {
       handler(to){
         const path = tabbar.map(tab => tab.path);
         document.title = to.meta.title || '自在福田';
-        this.showTabbar = path.includes(path)
+        this.showTabbar = path.includes(to.path)
       }
     }
   },
@@ -57,7 +62,7 @@ export default {
 
 <style>
 @import '~@/assets/css/reset.css';
-@import '//at.alicdn.com/t/font_2897403_4wpxnjzf9qy.css';
+@import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -68,8 +73,8 @@ export default {
   margin-right: auto;
 }
 .tabbar{
-  padding-top: .57rem;
-  background: url('~@/assets/img/bg.png') top center no-repeat;
-  background-size: contain;
+  /* padding-top: .57rem; */
+  /* background: url('~@/assets/img/bg.png') top center no-repeat; */
+  /* background-size: contain; */
 }
 </style>