vue项目中的tab页实现

//需要自己弄雪碧图

<template>
  <div class="tab" >
  #tab{
    display: flex;position: fixed;bottom:0;width:100%;border-top:1px solid #ededed;
    height:1rem;background-color: #fff;
    .tab-item{
      -webkit-flex: 1;
      flex: 1;
      width:33%;
      /*border-right: 1px solid #ededed;*/
      margin-top: 0.1rem;
    }
    a{border-bottom: 0;color:#333;text-decoration: none;}
    .icon:before{content: ''; display: inline-block;
      background-image:url('../../../static/cjc_icon.png');
      background-size: 1.3rem 2.2rem;width:0.4rem;height:0.4rem;}
    .icon1:before{background-position: -0.7rem 0;}
    .icon2:before{background-position: -0.7rem -0.58rem;}
    .icon3:before{background-position: -0.7rem -1.18rem;}
    .icon4:before{background-position: -0.7rem 0;}
    .tab-link{
      color:#999;
      font-size: 0.28rem;
    }
    .router-link-active{
      .tab-link{
        color:#29adfd;
        font-size: 0.28rem;
      }
      .icon1:before{background-position: -0.03rem 0;}
      .icon2:before{background-position: -0.03rem -0.58rem;}
      .icon3:before{background-position: -0.03rem -1.18rem;}
      .icon4:before{background-position: -0.03rem 0;}
    }
  }
</style>