使用::v-deep属性,可以轻松改变默认样式,亲测好用
原始样式:
<style scoped>
//标签下长灰线
::v-deep .ant-tabs-top > .ant-tabs-nav::before {
border-bottom: none;
}
//标签蓝色下标
::v-deep .ant-tabs-ink-bar {
background-color: white;
display: none;
}
//标签激活状态样式
::v-deep .ant-tabs-tab-active {
background-color: rgba(236, 242, 254, 1) !important; // 激活状态下的背景颜色
color: #fff; // 激活状态下的文本颜色
border-radius: 30px;
//width: 88px;
padding: 10px;
height: 28px;
}
//标签未激活状态样式
::v-deep .ant-tabs-tab {
background-color: rgba(245, 245, 245, 1);
border-radius: 30px;
padding: 10px;
height: 28px;
color: rgba(128, 128, 128, 1);
}
</style>
结果样式: