You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.5 KiB
Plaintext
119 lines
3.5 KiB
Plaintext
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 16px;
|
|
// background-color: #f5f5f5;
|
|
|
|
.tabs {
|
|
height: 100%;
|
|
background-color: transparent;
|
|
border-radius: 8px;
|
|
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
:global(.ant-tabs-nav) {
|
|
margin: 0;
|
|
padding: 0 0px;
|
|
background-color: transparent;
|
|
border-bottom: none;
|
|
}
|
|
|
|
:global(.ant-tabs-tab) {
|
|
padding: 16px 24px !important;
|
|
font-size: 14px !important;
|
|
font-weight: 400 !important;
|
|
color: #AFAFAF !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
color: #AFAFAF !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
&.ant-tabs-tab-active {
|
|
color: #009D6F !important;
|
|
background-color: #fff !important;
|
|
border-bottom: none !important;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
// 额外的全局样式覆盖，确保优先级足够高
|
|
:global(.ant-tabs-tab.ant-tabs-tab-active) {
|
|
color: #009D6F !important;
|
|
background-color: #fff !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
// 更强的选择器优先级
|
|
:global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
|
|
color: #009D6F !important;
|
|
background-color: #fff !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
// 针对可能的嵌套结构
|
|
:global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
|
|
color: #009D6F !important;
|
|
background-color: #fff !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
// // 覆盖 Ant Design 5.x 的高优先级样式
|
|
// :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
// color: #009D6F !important;
|
|
// text-shadow: none !important;
|
|
// }
|
|
|
|
// 使用更高优先级的选择器
|
|
:global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
color: #009D6F !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
// 针对 CSS 模块的覆盖
|
|
:global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
color: #009D6F !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
// 最高优先级覆盖
|
|
:global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
|
color: #009D6F !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
// 覆盖Ant Design的默认下划线
|
|
:global(.ant-tabs-ink-bar) {
|
|
background: none !important;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(180deg);
|
|
width: 38.36132812500014px;
|
|
height: 3.3613271713256965px;
|
|
background-color: #009D6F;
|
|
opacity: 1;
|
|
border-radius: 2px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
:global(.ant-tabs-content-holder) {
|
|
height: calc(100% - 60px);
|
|
// padding: 20px;
|
|
|
|
.ant-tabs-content {
|
|
height: 100%;
|
|
|
|
.ant-tabs-tabpane {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |