<template>
  <div class="">
    <van-tabbar route="" v-model="active" class="tabbar" active-color="#0c2469" inactive-color="#999999">
      <van-tabbar-item replace to="/">
        <span>首页</span>
        <template #icon="props">
          <span v-if="active" class="iconfont icon-shouye"></span>
          <span v-else class="iconfont icon-shouye"></span>
          <!-- <img :src="props.active ? icon.inactive1 : icon.active1" /> -->
        </template>
      </van-tabbar-item>
			<!-- <van-tabbar-item  replace  to="/Logisticslist">
			  <span>运单追踪</span>
			  <template #icon="props">
			    <img :src="props.active ? icon.inactive2 : icon.active2" />
			  </template>
			</van-tabbar-item>
      <van-tabbar-item  replace  to="/Search">
        <span>收件</span>
        <template #icon="props">
          <img :src="props.active ? icon.inactive4 : icon.active4" />
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item  replace  to="/My">
        <span>我的</span>
        <template #icon="props">
          <span v-if="active" class="iconfont icon-wode"></span>
          <span v-else class="iconfont icon-wode"></span>
          <!-- <img :src="props.active ? icon.inactive3 : icon.active3" /> -->
        </template>
      </van-tabbar-item>
     <!-- <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>
<script>
  import {Tabbar,TabbarItem} from 'vant';
  export default {

    data() {
      return {
        active: 0,
        icon: {
          active1: require("../assets/images/icon1.png"),
          inactive1: require("../assets/images/icon11.png"),
          active2: require("../assets/images/icon2.png"),
          inactive2: require("../assets/images/icon22.png"),
          active3: require("../assets/images/icon3.png"),
          inactive3: require("../assets/images/icon33.png"),
		  active4: require("../assets/images/a-12.png"),
		  inactive4: require("../assets/images/a-124.png"),
        },
      };
    },
    methods:{
      // change(num){
      //   this.active=num;
      //   console.log(this.active);
      //   if(num==0){
      //     this.$router.push('/')
      //   }
      //   if(num==1){
      //     this.$router.push('/Yw')
      //   }
      //   if(num==2){
      //     this.$router.push('/My')
      //   }

      // }
    }
  };
</script>

<style lang="less" scoped>
  .tabbar {
    width: 100%;
    max-width: 7.5rem;
    left: 50%;
    margin-left: -3.75rem;
  }

  .van-tabbar-item{
    //font-size: .24rem;

  }

</style>
