vue首页底部导航TabBar

<template>
  <div class="index">
  <div class="mainContent">
     <router-view></router-view>  
  </div>
   <div class="bottomBar">
      <ul>
       <li @click="toColor" > <router-link :to="{name:'MapPlat'}"> 
        ![](../assets/images/ic_map_nor@2x.png)![](../assets/images/ic_map@2x.png)
        <p :class="{bottomBarColorActive:isColor}">展图</p></router-link></li>
       <li @click="toColor2"> <router-link :to="{name:'Agenda'}"> 
       ![](../assets/images/ic_yicheng_nor@2x.png)![](../assets/images/ic_yicheng@2x.png)
       <p :class="{bottomBarColorActive:isColor2}">议程</p></router-link></li>
       <li @click="toColor3"> <router-link :to="{name:'Recommend'}">
        ![](../assets/images/ic_tuijian_nor@2x.png)![](../assets/images/ic_tuijian@2x.png)
        <p :class="{bottomBarColorActive:isColor3}">推荐</p></router-link></li>
       <li @click="toColor4"> <router-link :to="{name:'Attention'}">
        ![](../assets/images/ic_guanzhu_nor@2x.png)
        ![](../assets/images/ic_guanzhu@2x.png)
        <p :class="{bottomBarColorActive:isColor4}">关注</p></router-link></li>
       <li @click="toColor5"> <router-link :to="{name:'Intro'}"> 
       ![](../assets/images/ic_jianjie_nor@2x.png)
       ![](../assets/images/ic_jianjie@2x.png)
       <p :class="{bottomBarColorActive:isColor5}">简介</p></router-link></li>
      </ul>
    </div>  
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
     isColor:true,
     isColor2:false,
     isColor3:false,
     isColor4:false,
     isColor5:false
    }
  },
  methods:{
    toColor:function(){
      this.isColor=true;
      this.isColor2=false;
      this.isColor3=false;
      this.isColor4=false;
      this.isColor5=false;
    },
        toColor2:function(){
      this.isColor=false;
      this.isColor2=true;
      this.isColor3=false;
      this.isColor4=false;
      this.isColor5=false;
    },
        toColor3:function(){
      this.isColor=false;
      this.isColor2=false;
      this.isColor3=true;
      this.isColor4=false;
      this.isColor5=false;
    },
        toColor4:function(){
      this.isColor=false;
      this.isColor2=false;
      this.isColor3=false;
      this.isColor4=true;
      this.isColor5=false;
    },
      toColor5:function(){
      this.isColor=false;
      this.isColor2=false;
      this.isColor3=false;
      this.isColor4=false;
      this.isColor5=true;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  height: 100%;
}
.bottomBar {
  height: 100px;
  width: 100%;
  border: 1px solid #ccc;
  bottom: 0;
  background: rgba(255,255,255,0.90);
  position: fixed;
  bottom: 0;
}
.bottomBar ul {
  display: flex;
  width: 100%;
  justify-content:space-around;
}
.bottomBar  ul li {
  /*width: 20%;*/
}
.bottomBar  ul li img {
  margin: 8px 0;
}
.bottomBar ul li p {
  font-family: "PingFangSC-Regular";
  font-size: 20px;
  color: #D2D7E8;
  letter-spacing: 0;
  line-height: 20px;
}
.mainContent {
  height:-webkit-calc(100% - 100px);
  height:-moz-calc(100% - 100px);
  height:calc(100% - 100px);
}
.bottomBarColorActive {
  color: #4D81EE !important;
}
</style>