东莞市万江疫情最新消息_网络优化大师手机版_免费搭建网站的软件_网图识别在线百度

前言

        好久不见！真的是很久很久啦！本来开了个新专栏（收费的，又穷了我，好想赚钱啊）可是又忙又懒，写了好几篇草稿，但是都不满意，导致一直没发，最近很忙，主要现在项目太多啦！前端后端一起搞，我我我！真的，又菜又厉害~

正文

        今日问题：如何在Vue Element-ui的el-tabs组件中，实现切换时，改变字体颜色大小效果！

<template><el-tabs type="border-card"><el-tab-pane label="User">User</el-tab-pane><el-tab-pane label="Config">Config</el-tab-pane></el-tabs>
</template>

  效果很好，我很满意！！！

        用户一看：不行！字体太小了，看不见；没有颜色，我要五彩斑斓的黑；我要绚烂的特效，这样变大那样变小。我...我当然是：好的，收到！

<template><div class='my-tabs'><el-tabs type="border-card"><el-tab-pane label="User">User</el-tab-pane><el-tab-pane label="Config">Config</el-tab-pane></el-tabs></div>
</template>

来个div 定个class='my-tabs'（为什么要这样？不能直接改el-tabs咩！呜呜呜~ 我不行，有点菜）

<style scoped>/*设置固定高度*/
.my-tabs >>> .el-tabs__header {height: 40px;
}
/*因为每个tab样式不一样，所以用了id写样式*/
.my-tabs >>> #tab-first {background: #f8f9fa;font-size: 15px;color: #4796f0;height: 40px;line-height: 40px;
}
/*.is-active点击选择tab按钮样式*/
.my-tabs >>> #tab-first.is-active {background: rgba(161, 100, 100, 0.87);font-size: 20px;color: cornsilk;height: 40px;line-height: 40px;
}.my-tabs >>> #tab-second {background: #f8f9fa;font-size: 15px;color: #4796f0;height: 40px;line-height: 40px;
}.my-tabs >>> #tab-second.is-active {background: #d4bc20;font-size: 20px;color: cornsilk;height: 40px;line-height: 40px;
}</style>

结束啦！