<template>
   <div id="navFooter">
		<van-tabbar v-model="active">
		  <van-tabbar-item icon="shop" url="#/home">
		    <span class="icon-text">首页</span>
		    <template slot="icon" slot-scope="props">
		      <svg class="icon nav-icon" aria-hidden="true">
	              <use xlink:href="#icon-Cduan_tab_huabanfuben"/>
	          </svg>
		    </template>
		  </van-tabbar-item>
		  <van-tabbar-item icon="shop" url="#/serviceHome">
		    <span class="icon-text">服务</span>
		    <template slot="icon" slot-scope="props">
		      <svg class="icon nav-icon" aria-hidden="true">
	              <use xlink:href="#icon-Cduan_tab_huabanfuben3"/>
	          </svg>
		    </template>
		  </van-tabbar-item>
		  <van-tabbar-item icon="shop" url="#/communityActivityHome">
		    <span class="icon-text">社区</span>
		    <template slot="icon" slot-scope="props">
		      <svg class="icon nav-icon" aria-hidden="true">
	              <use xlink:href="#icon-Cduan_tab_huabanfuben2"/>
	          </svg>
		    </template>
		  </van-tabbar-item>
		  <van-tabbar-item icon="shop" url="#/MyPage">
		    <span class="icon-text">我的</span>
		    <template slot="icon" slot-scope="props">
		      <svg class="icon nav-icon" aria-hidden="true">
	              <use xlink:href="#icon-Cduan_tab_huabanfuben1"/>
	          </svg>
		    </template>
		  </van-tabbar-item>
		</van-tabbar>
   </div>
</template>

<script>
//import { mapState } from 'vuex'
let activeMap = {
  home: 0,
  serviceHome: 1,
  communityActivityHome: 2,
  MyPage: 3
};
export default {
  name: "navFooter",
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
    // })
  },
  mounted() {},
  data: function() {
    return {
      name: "template",
      active: activeMap[location.hash.slice(2)] || 0
    };
  },
  methods: {}
};
</script>
<style scoped lang='less'>
.icon-text {
	font-size: 10px;
}
.nav-icon {
	font-size: 22.4px;
}
</style>
