自定义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 ,否则不能修改