ElementUI tabs标签页样式改造美化

在ElementUI中，你可以通过覆盖其默认的CSS样式来改造<el-tabs>标签页的样式。以下是一个简单的例子，展示了如何自定义标签页的背景色和文本颜色：

/* 覆盖ElementUI的默认样式 */
.el-tabs__item {
  background-color: #f5f5f5; /* 标签页的背景色 */
  color: #409eff; /* 标签页的文本颜色 */
  padding: 10px 20px; /* 标签页的内边距 */
  border-radius: 5px; /* 标签页的圆角 */
}
 
/* 当标签页处于激活状态时的样式 */
.el-tabs__item.is-active {
  background-color: #409eff; /* 激活状态的背景色 */
  color: white; /* 激活状态的文本颜色 */
}
 
/* 如果需要改变下划线指示器的样式 */
.el-tabs__active-bar {
  background-color: #409eff; /* 指示器的颜色 */
}

在你的Vue组件中，你可以这样使用<el-tabs>：

<template>
  <el-tabs v-model="activeName">
    <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-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  }
};
</script>

请根据你的具体需求调整CSS样式。这个例子展示了如何简单地修改标签页的背景色和文本颜色，你可以进一步自定义其他样式，如边框、阴影、字体大小等。