vue+element ui+tabs标签修改tabs标签样式

第一步：引入tabs标签

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane name="first">
            <span slot="label" class="fontClass">电子信号</span>
            <ElectricSignal />
          </el-tab-pane>

          <el-tab-pane label="态势展示" name="second">
            <span slot="label" class="fontClass">配置管理</span>
            <Station />
          </el-tab-pane>
        </el-tabs>

第二步：修改样式使用了样式穿透

.el-tabs--card ::v-deep .el-tabs__header {
  margin: 0;
}
.el-tabs--card ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  background-color: #ccc;
   &:hover {
    color: #303133;
  }
}
.el-tabs--card ::v-deep .el-tabs__item.is-active {
  color: #303133;
  background-color: #F2F2F2;
}
.fontClass {
    letter-spacing: 0.2em;
  font-size: 20px;
}
.nocommu {
    margin: 0;
    padding: 0;
  
}