touyun_liuyun/sysmgr-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(layout): 页签改为胶囊盒子样式

Browse Source 
- 圆角盒子 + tab 间距，当前页签主色浅底+主色浅边框
- 保留底部条分隔线、关闭图标仅当前页签

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-16 11:18:09 +08:00
parent 8478738f3b
commit c3901e3772
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ty-tabs.vue
View File

@ -97,7 +97,8 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
<style scoped lang="scss"> <style scoped lang="scss">
.ty-tabs { .ty-tabs {
@apply bg-bg-base; @apply bg-bg-base border-b border-solid;
border-color: var(--wm-border-color-light);
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
@apply m-0 px-2; @apply m-0 px-2;
@ -108,25 +109,32 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
} }
:deep(.el-tabs__nav-wrap::after) { :deep(.el-tabs__nav-wrap::after) {
height: 1px; @apply hidden;
background: var(--wm-border-color-light); }
:deep(.el-tabs__active-bar) {
@apply hidden;
} }
:deep(.el-tabs__item) { :deep(.el-tabs__item) {
@apply h-9 px-3 text-sm text-text-regular; @apply mr-1 h-8 rounded-base px-3 text-sm text-text-regular;
border: 1px solid transparent;
} }
:deep(.el-tabs__item:hover) { :deep(.el-tabs__item:hover) {
color: var(--el-color-primary); color: var(--el-color-primary);
@apply bg-bg-page;
} }
:deep(.el-tabs__item.is-active) { :deep(.el-tabs__item.is-active) {
color: var(--el-color-primary); color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
border-color: var(--el-color-primary-light-5);
} }
:deep(.el-tabs__nav-prev), :deep(.el-tabs__nav-prev),
:deep(.el-tabs__nav-next) { :deep(.el-tabs__nav-next) {
@apply h-9 text-text-regular; @apply h-8 text-text-regular;
} }
} }