ElementUI修改el-tabs标签页组件样式

官网

https://element.eleme.cn/2.13/#/zh-CN/component/tabs

效果

代码片段

html

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="基本信息" name="jbxx">基本信息</el-tab-pane>
        <el-tab-pane label="标签要素" name="bqys">标签要素</el-tab-pane>
        <el-tab-pane label="理化特征" name="lhtz">理化特征</el-tab-pane>
        <el-tab-pane label="危害信息" name="whxx">危害信息</el-tab-pane>
        <el-tab-pane label="应急处理措施" name="yjclcs">应急处理措施</el-tab-pane>
</el-tabs>

css

// el-tabs样式美化
::v-deep .el-tabs--border-card{
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-box-shadow:none;
}
::v-deep .el-tabs--border-card > .el-tabs__header{
  background-color: transparent;
  border-bottom: none;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  margin-left: 8px;
  border: none;
  border-radius: 8px 8px 0 0;
  background-color: #F3F7FE;
  padding: 4px 20px;
  color:#0065D5;
  line-height: 22px;
  height: 30px;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  background-color: #0065D5;
  color: #ffffff;
}