自定義element的tab欄樣式

項目中需要實現的tab欄樣式:

 

 無底部分割線,無選中時的底部邊框,修改tab欄大小,設置選中時的背景和字體顏色變化

html部分:

<el-tabs  v-model="activeName"
          @tab-click="handleClick">
  <el-tab-pane label="用戶管理"
                name="first"></el-tab-pane>
  <el-tab-pane label="配置管理"
                name="second"></el-tab-pane>
  <el-tab-pane label="角色管理"
                name="third"></el-tab-pane>
</el-tabs>

CSS部分:

.el-tabs{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      .el-tabs__nav-scroll{
        .el-tabs__nav{
          .el-tabs__active-bar{
            display: none;
          }
          .el-tabs__item{
            width: 200px;
            height: 80px;
            padding: 0;
            text-align: center;
            line-height: 80px;
            font-size: 30px;
            color: #FFE8A9;
            border-radius: 40px;
          }
          .el-tabs__item.is-active{
            color: #ffffff;
            background: linear-gradient(45deg, #DD2E9B 0%, #F47039 99%);
          }
        }
      }
    }
  }
  .el-tabs__nav-wrap::after{
    display: none;
  }
}

需要在tab欄組件添加自定義類名,如本代碼的 .table-tab ,增加 ::v-deep ,否則不能修改