完成搜索页面

src/App.vue

@@ -1,61 +1,59 @@
 <template>
-  <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
-    <router-view />
-    <van-tabbar  v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
-      <van-tabbar-item replace 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>
+    <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
+        <router-view />
+        <van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
+            <van-tabbar-item replace 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>
 
 <script>
-import { tabbar } from '../src/router'
-import { getWechatSign } from './api'
+import { tabbar } from '../src/router';
+import { getWechatSign } from './api';
 import { signToWechat } from './common/wechat-web';
 
 export default {
-  name: 'App',
-  data(){
-    return {
-      active: '3',
-      tabbar
-    }
-  },
-  provide(){
-    return {
-      root: this,
-      tabbar: this.$refs.tabbar,
-    }
-  },
-  components: {
-  },
-  beforeCreate: () => {
-    getWechatSign(location.href).then(res => {
-      signToWechat(res)
-    })
-  },
-  watch: {
-    '$route': {
-      handler(val){
-        console.log(val)
-         this.active = tabbar.map(v => v.name).indexOf(val.name).toString()
-      }
-    }
-  },
-  computed: {
-    showTabbar(){
-      const path = tabbar.map(tab => tab.path);
-      return path.includes(this.$route.path)
+    name: 'App',
+    data() {
+        return {
+            active: '3',
+            tabbar
+        };
     },
-    paddingBottom(){
-      return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0
+    provide() {
+        return {
+            root: this,
+            tabbar: this.$refs.tabbar
+        };
+    },
+    components: {},
+    beforeCreate: () => {
+        getWechatSign(location.href).then(res => {
+            signToWechat(res);
+        });
+    },
+    watch: {
+        '$route': {
+            handler(val) {
+                this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
+            }
+        }
+    },
+    computed: {
+        showTabbar() {
+            const path = tabbar.map(tab => tab.path);
+            return path.includes(this.$route.path);
+        },
+        paddingBottom() {
+            return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0;
+        }
     }
-  },
-}
+};
 </script>
 
 <style>
@@ -63,16 +61,17 @@ export default {
 @import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
 
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  max-width: 750px;
-  margin-left: auto;
-  margin-right: auto;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    max-width: 750px;
+    margin-left: auto;
+    margin-right: auto;
 }
-.tabbar{
-  /* padding-top: .57rem; */
-  /* background: url('~@/assets/img/bg.png') top center no-repeat; */
-  /* background-size: contain; */
+
+.tabbar {
+    /* padding-top: .57rem; */
+    /* background: url('~@/assets/img/bg.png') top center no-repeat; */
+    /* background-size: contain; */
 }
 </style>