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

移除TabPage标签页与Panel之间的边距：1. 移除tab-header底部边框；2. 移除tab-item底部边框；3. 在tab-content顶部添加边框并设置负上边距；4. 移除tab-placeholder底部边框

Browse Source
This commit is contained in:
zqm
2025-11-05 11:15:16 +08:00
parent e0e3d444df
commit 97543e297f
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -80,7 +80,7 @@ const closeTab = (tabId) => {
flex-wrap: nowrap; flex-wrap: nowrap;
height: 28px; height: 28px;
background: #f0f0f0; background: #f0f0f0;
border-bottom: 1px solid #c7d2ea; border-bottom: none;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
padding-top: 2px; padding-top: 2px;
@@ -95,7 +95,7 @@ const closeTab = (tabId) => {
margin-left: 1px; margin-left: 1px;
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom)); 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: none;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -107,7 +107,7 @@ const closeTab = (tabId) => {
.tab-item.active { .tab-item.active {
background: #ffffff; background: #ffffff;
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
border-bottom-color: #ffffff; border-bottom: none;
border-top-width: 2px; border-top-width: 2px;
border-top-color: #0078d7; border-top-color: #0078d7;
color: #333; color: #333;
@@ -143,7 +143,7 @@ const closeTab = (tabId) => {
height: 26px; height: 26px;
margin-left: 1px; margin-left: 1px;
border: 1px solid transparent; border: 1px solid transparent;
border-bottom-color: #c7d2ea; border-bottom: none;
} }
/* 内容区域样式 */ /* 内容区域样式 */
@@ -151,6 +151,8 @@ const closeTab = (tabId) => {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-top: 1px solid #c7d2ea;
margin-top: -1px;
} }
.tab-panel { .tab-panel {