ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将Area标题栏的蓝色渐变背景应用到TabPage标签页：1. 添加CSS变量定义蓝色渐变；2. 修改非激活状态标签为蓝色渐变背景；3. 调整文本颜色为白色；4. 更新悬停状态的渐变效果

Browse Source
This commit is contained in:
zqm
2025-11-05 11:09:29 +08:00
parent 32cb0e5676
commit e0e3d444df
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
View File

@@ -69,6 +69,11 @@ const closeTab = (tabId) => {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
:root {
--vs-blue-top: #4f72b3;
--vs-blue-bottom: #3c5a99;
}
/* 标签栏样式 - 模仿Windows Forms */ /* 标签栏样式 - 模仿Windows Forms */
.tab-header { .tab-header {
display: flex; display: flex;
@@ -88,13 +93,13 @@ const closeTab = (tabId) => {
height: 26px; height: 26px;
padding: 0 16px; padding: 0 16px;
margin-left: 1px; margin-left: 1px;
background: #f0f0f0; background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
border-bottom-color: #c7d2ea; border-bottom-color: #c7d2ea;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
color: #333; color: white;
font-size: 12px; font-size: 12px;
user-select: none; user-select: none;
} }
@@ -105,15 +110,17 @@ const closeTab = (tabId) => {
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
border-top-width: 2px; border-top-width: 2px;
border-top-color: #0078d7; border-top-color: #0078d7;
color: #333;
font-weight: 500; font-weight: 500;
} }
.tab-item:hover { .tab-item:hover {
background: #f5f5f5; background: linear-gradient(to bottom, #5a7db8, #4667a4);
} }
.tab-item.active:hover { .tab-item.active:hover {
background: #ffffff; background: #ffffff;
color: #333;
} }
.tab-close { .tab-close {