qw_customer/src/App.vue

<template>
  <div id="app">
    <router-view class="main" />
    <Tabbar v-show="isshowNav" route v-model="active">
      <TabbarItem :to="{ name: 'index' }" icon="home-o">首页</TabbarItem>

      <TabbarItem :to="{ name: 'myindex' }" icon="friends-o">我的</TabbarItem>

    </Tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
  data () {
    return {
      active: 0,
    }
  },
  computed: {
    isshowNav () {
      return this.$route.meta.hideNav
    }
  },
  components: {
    Tabbar, TabbarItem
  },

  methods: {

  },
}
</script>
<style lang="scss">
// @import url(@/assets/icon/iconfont.css;);

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  height: 100vh;
  // font-size: 10px; // 相当于1rem = 10px
  position: relative;
}

body {
  width: 100vw;
  height: 100vh;
  // font-size: 10px;
  position: relative;
}

#app {
  display: flex;
  width: 100vw;
  flex-direction: column;
}

#app .main {
  flex: 1;
  overflow: auto;
  padding-bottom: 7vh;
}

.van-tabbar {
  height: 7vh !important;
}

.van-tabbar-item .van-icon {
  font-size: 1rem;
}

.van-tabbar-item .van-toast__text {
  font-size: 18px;
}
</style>