记录：利用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;
}

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