记录：利用css改变el-tabs自定义样式，背景色、激活选中样式、tab底部蓝条横线样式等

原生样式：

修改后样式：

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

 
     用户管理 
     配置管理 
     角色管理 
     定时任务补偿 
  

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;
}

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