cirry/simple-element-plus-template
1
0
Fork 0
mirror of https://github.com/fugary/simple-element-plus-template.git synced 2026-02-23 06:37:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

opt: 优化多标签样式

Browse Source
This commit is contained in:
gary
2026-02-01 14:57:19 +08:00
parent 4072fca22a
commit f87cfaedf7
1 changed files with 90 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/common-tabs-view/index.vue
View File

@@ -121,7 +121,96 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.common-tabs .el-tabs__header {
:deep(.el-tabs__header) {
margin: 0;
border-bottom: 1px solid var(--el-border-color-light) !important;
position: relative;
}
:deep(.el-tabs__nav) {
border: 0 !important;
}
/* Allow pseudo-elements to overflow and cover the header border */
:deep(.el-tabs__nav-wrap),
:deep(.el-tabs__nav-scroll) {
overflow: visible !important;
}
:deep(.el-tabs__item) {
border: 1px solid transparent !important;
margin: 0 4px 0 0;
border-radius: 4px 4px 0 0;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
/* Default inactive background */
background-color: var(--el-fill-color-light);
}
/* Bottom border for inactive tabs */
:deep(.el-tabs__item:not(.is-active)) {
border-bottom: 1px solid var(--el-border-color-light) !important;
}
/* Specific styling for active tab to look "connected" to content */
:deep(.el-tabs__item.is-active) {
background-color: var(--el-bg-color);
border-left: 1px solid var(--el-border-color-light) !important;
border-right: 1px solid var(--el-border-color-light) !important;
border-top: 1px solid var(--el-border-color-light) !important;
border-bottom: 1px solid transparent !important;
position: relative;
font-weight: 600;
}
/* Cover the header bottom border under active tab */
:deep(.el-tabs__item.is-active)::before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 4px;
background-color: var(--el-bg-color);
z-index: 10;
}
/* Top highlight line for active tab */
:deep(.el-tabs__item.is-active)::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: 2px;
background-color: var(--el-color-primary);
border-radius: 4px 4px 0 0;
}
:deep(.el-tabs__item:not(.is-active):hover) {
background-color: var(--el-fill-color);
color: var(--el-color-primary);
}
/* Dark mode adjustments */
.dark :deep(.el-tabs__header) {
border-bottom: 1px solid var(--el-border-color-darker) !important;
}
.dark :deep(.el-tabs__item) {
background-color: var(--el-bg-color-overlay);
}
.dark :deep(.el-tabs__item:not(.is-active)) {
border-bottom: 1px solid var(--el-border-color-darker) !important;
}
.dark :deep(.el-tabs__item.is-active) {
background-color: var(--el-bg-color);
border-color: var(--el-border-color-darker) !important;
border-bottom-color: transparent !important;
}
.dark :deep(.el-tabs__item.is-active)::before {
background-color: var(--el-bg-color);
}
</style>