根据ToDoList要求修改TabPage组件:1. 设置默认宽度300px和高度250px;2. 配置相对父容器水平和垂直居中;3. 设置背景颜色为#5D6B99;4. 调整标题栏为蓝色渐变背景;5. 确保内容区域为白色背景

This commit is contained in:
zqm
2025-11-05 12:24:19 +08:00
parent 85e65929bf
commit 3a631a8efb

View File

@@ -60,13 +60,17 @@ const closeTab = (tabId) => {
.tab-page { .tab-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 300px;
height: 100%; height: 250px;
background: #ffffff; 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 {
@@ -79,7 +83,7 @@ const closeTab = (tabId) => {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 28px; height: 28px;
background: #f0f0f0; background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
border-bottom: none; border-bottom: none;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@@ -153,6 +157,7 @@ const closeTab = (tabId) => {
overflow: hidden; overflow: hidden;
border-top: 1px solid #c7d2ea; border-top: 1px solid #c7d2ea;
margin-top: -1px; margin-top: -1px;
background: #ffffff;
} }
.tab-panel { .tab-panel {