修改tabpage页标签

This commit is contained in:
zqm
2025-11-05 13:01:36 +08:00
parent 3a631a8efb
commit 7445fa23c6
2 changed files with 8 additions and 18 deletions

View File

@@ -60,17 +60,13 @@ const closeTab = (tabId) => {
.tab-page { .tab-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 300px; width: 100%;
height: 250px; height: 100%;
background: #5D6B99; background: #5D6B99;
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} }
:root { :root {
@@ -83,7 +79,7 @@ const closeTab = (tabId) => {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 28px; height: 28px;
background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom)); background: transparent;
border-bottom: none; border-bottom: none;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@@ -98,8 +94,7 @@ const closeTab = (tabId) => {
padding: 0 16px; padding: 0 16px;
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-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;
@@ -111,7 +106,7 @@ const closeTab = (tabId) => {
.tab-item.active { .tab-item.active {
background: #ffffff; background: #ffffff;
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
border-bottom: none; border-bottom-color: #ffffff;
border-top-width: 2px; border-top-width: 2px;
border-top-color: #0078d7; border-top-color: #0078d7;
color: #333; color: #333;
@@ -142,12 +137,9 @@ const closeTab = (tabId) => {
} }
.tab-placeholder { .tab-placeholder {
flex: 1;
background: transparent; background: transparent;
height: 26px; border: transparent;
margin-left: 1px; border-bottom-color: #c7d2ea;
border: 1px solid transparent;
border-bottom: none;
} }
/* 内容区域样式 */ /* 内容区域样式 */
@@ -155,9 +147,6 @@ const closeTab = (tabId) => {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-top: 1px solid #c7d2ea;
margin-top: -1px;
background: #ffffff;
} }
.tab-panel { .tab-panel {

View File

@@ -12,6 +12,7 @@
### TabPage ### TabPage
1. 初始添加时默认宽300px高250px。位置相对父容器水平居中垂直居中。 1. 初始添加时默认宽300px高250px。位置相对父容器水平居中垂直居中。
2. 背景颜色为#5D6B99
### Panel ### Panel
1. 填充满父容器。 1. 填充满父容器。