记录：利用css改变el-tabs自定义样式，背景色、激活选中样式、tab底部蓝条横线样式等_.el-tabs__active-bar 背景颜色显示怎么处理

原生样式 ：

修改后样式： 

利用css改变el-tabs样式，背景色、激活样式等 ，代码如下可直接复制

<div class='my-tabs'>
 <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-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</div>

css:

// 修改el-tabs
.my-tabs >>> .el-tabs__item.is-active {
  background: rgba(0, 102, 255, 0.08);
  border-radius: 4px 4px 3px 3px;
}
 
.my-tabs >>> .el-tabs__active-bar {
  background-color: #166fe8; /* 修改底部横杠的颜色 */
  height: 3px; /* 修改底部横杠的高度 */
  // width: 100px !important;
  // left: 30%;
}
.my-tabs /deep/ .el-tabs__active-bar::after{
//给激活的时底部tab横线添加三角
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 39%;
  bottom:2px;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 5px solid #166fe8;
}
.my-tabs /deep/ .el-tabs__item {
  //
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px !important;
  padding: 0 !important;
}
.my-tabs /deep/ .el-tabs__nav.is-top{
  display: flex;
}
.my-tabs /deep/ .el-tabs__nav.is-top > div {
  width: 100px;
  text-align: center;
}

这样就行了如果有其他需求可根据代码自行修改