vue项目中的tab页实现

//需要自己弄雪碧图

<template>
  <div class="tab" id="tab">
      <router-link to="/home" tag="div" class="tab-item">
        <div class="tab-link">
          <i class="icon icon1"></i>
          <p class="app-text">首页</p>
        </div>
      </router-link>
      <router-link to="/finder" class="tab-item">
        <div class="tab-link">
          <i class="icon icon2"></i>
          <p class="app-text">发现</p>
        </div>
      </router-link>
      <router-link to="/fashionStar" class="tab-item">
        <div class="tab-link">
          <i class="icon icon3"></i>
          <p class="app-text">时尚明星</p>
        </div>
      </router-link>
      <router-link to="/personal" class="tab-item">
          <div class="tab-link">
            <i class="icon icon1"></i>
            <p class="app-text f32">个人中心</p>
          </div>
      </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data(){
        return{}
    }
  }
</script>

<style lang="scss">
  #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>
巴特西

vue项目中的tab页实现

最新文章

热门文章
