vue实现tab切换样式

现成的vue移动端 点击tab 切换样式功能。需要的拿去根据自己的需求改一下样式 



  .container{
    width: 100%;
    background: #FFFFFF;
    font-family: PingFang-SC-Regular;
  }
  .tab-list{
    width: 92.5%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }

  .tab-li {
    min-width: 1.6rem;
    height: 0.67rem;
    border-radius: 0.27rem;
    text-align: center;
    line-height: 0.67rem;
    font-size: 0.32rem;
    color: #333333;
    margin-top: 0.2rem;
    margin-right: 0.26rem;
    padding: 0 0.2rem;
    color: #333333;
    background:#cccccc;
  }
  /*点击后样式*/
  .Active{
    color: #ffffff;
    background:#FF7E22;
  }

 

 

你可能感兴趣的:(vue,移动端)