ElementUI中Tabs标签页样式修改------胶囊Tab切换栏

在ElementUI中，要修改Tabs标签页的样式，可以通过CSS覆盖默认的样式。以下是一个示例，展示如何通过CSS修改Tabs的样式，特别是改变背景色和文本颜色。

首先，确保你已经在项目中引入了ElementUI并正确使用了Tabs组件。

然后，在你的Vue组件的<style>标签中或者单独的CSS文件中，添加以下CSS样式：

/* 修改Tabs的背景色 */
.el-tabs__content {
  background-color: #f0f2f5; /* 你想要的背景色 */
}
 
/* 修改Tabs标签文本颜色 */
.el-tabs__item {
  color: #606266; /* 默认文本颜色 */
  &:hover {
    color: #409EFF; /* 鼠标悬停时的文本颜色 */
  }
}
 
/* 修改激活状态下的Tabs标签样式 */
.el-tabs__item.is-active {
  color: #409EFF; /* 激活状态下的文本颜色 */
  background-color: #fff; /* 激活状态下的背景色 */
  border-bottom-color: #fff; /* 修改底部边框色 */
}
 
/* 如果需要修改导航栏下边框的颜色 */
.el-tabs__nav {
  border-color: #fff; /* 修改边框颜色 */
}
 
/* 如果需要修改边框圆角 */
.el-tabs__header {
  border-radius: 4px; /* 修改边框圆角大小 */
}

将上述CSS添加到你的Vue组件或CSS文件中，并确保它被正确加载，ElementUI的Tabs组件的样式就会被相应修改。

请注意，具体的样式名称和属性可能随着ElementUI版本的更新而变化，请参考ElementUI官方文档以获取最新信息。