From 891ec3ccef821295fa4224add37e596ccc4bc3fb Mon Sep 17 00:00:00 2001 From: wing Date: Sat, 15 Nov 2025 07:26:39 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=87=E7=AD=BE=E9=A1=B5=E6=9E=81?= =?UTF-8?q?=E7=AE=80=E5=8C=96=E8=AE=BE=E8=AE=A1=20-=20=E4=B8=8E=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **设计原则：** 黑白灰主色 + 蓝色重点色，与侧边栏保持一致的设计语言 **主要改动：** 1. **移除复杂装饰** - 移除上圆角（`border-radius: top`） - 移除复杂的边框系统（`border: 2px solid`） - 移除 `bottom: -2px` 定位技巧 2. **简化指示方式** - 默认状态：无边框，透明背景 - 活动标签：蓝色底部线条（2px）指示 - 悬停状态：slate-50 背景 + slate-900 文字 3. **统一颜色系统** - 默认：`#64748b` (slate-500) - 悬停：`#0f172a` (slate-900) + `#f8fafc` (slate-50 背景) - 活动：`#2563eb` (blue-600) + 底部蓝色线条 - 容器底部：`#e2e8f0` (slate-200) 4. **更紧凑的尺寸** - padding: `0.625rem 1rem` (10px 16px) - font-size: `0.875rem` (14px) - gap: `0.25rem` (4px) - 移动端: `0.5rem 0.75rem` (8px 12px) 5. **过渡效果** - 从 `0.2s` 改为 `0.15s`，更快速流畅 **对比变化：** - 旧设计：带圆角、复杂边框、连体效果 - 新设计：极简、平面、仅用底部线条指示 **与侧边栏的一致性：** - 相同的 slate 色系 - 相同的蓝色重点色 - 相同的字体大小和过渡速度 - 相同的极简设计理念 **文件改动：** - `css/history_detail/02-layout/layout.css`: 重写标签页样式 **测试要点：** - 标签页切换流畅 - 活动标签清晰可见（蓝色底部线条） - 悬停状态明显但不突兀 - 移动端响应式正常 --- css/history_detail/02-layout/layout.css | 63 ++++++++++--------------- 1 file changed, 26 insertions(+), 37 deletions(-) diff --git a/css/history_detail/02-layout/layout.css b/css/history_detail/02-layout/layout.css index f574ed47..e540ecbf 100644 --- a/css/history_detail/02-layout/layout.css +++ b/css/history_detail/02-layout/layout.css @@ -19,67 +19,56 @@ body { } /* ==================== - * 标签页导航样式 + * 标签页导航样式（极简设计） + * 设计原则：黑白灰主色 + 蓝色重点色，与侧边栏保持一致 * ==================== */ .tabs-container { - border-bottom: 2px solid var(--color-slate-200); - margin-bottom: 24px; /* 增加间距 */ display: flex; - gap: 4px; + gap: 0.25rem; /* 4px */ + border-bottom: 1px solid #e2e8f0; /* slate-200 */ + margin-bottom: 1.5rem; /* 24px */ } .tab-btn { - padding: 10px 20px; + padding: 0.625rem 1rem; /* 10px 16px */ background: transparent; - margin-right: 0; - border-radius: var(--radius-md) var(--radius-md) 0 0; + border: none; + border-bottom: 2px solid transparent; cursor: pointer; - font-size: 0.95rem; + font-size: 0.875rem; /* 14px */ font-weight: 500; - color: var(--text-secondary); - border: 2px solid transparent; - border-bottom: none; - position: relative; - bottom: -2px; - transition: all 0.2s ease; + color: #64748b; /* slate-500 */ + transition: all 0.15s ease; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - min-width: auto; /* 移除强制最小宽度，让内容决定 */ - text-align: center; + position: relative; +} + +.tab-btn:hover:not(.active) { + color: #0f172a; /* slate-900 */ + background: #f8fafc; /* slate-50 */ +} + +.tab-btn.active { + color: #2563eb; /* blue-600 */ + font-weight: 600; + border-bottom-color: #2563eb; /* blue-600 */ } /* 适应较小屏幕的标签页按钮 */ @media (max-width: 768px) { .tab-btn { - padding: 8px 12px; - font-size: 0.9rem; - min-width: 60px; + padding: 0.5rem 0.75rem; /* 8px 12px */ + font-size: 0.8125rem; /* 13px */ } } -.tab-btn:hover:not(.active) { - background: var(--color-slate-100); - color: var(--text-primary); -} - -.tab-btn.active { - background: var(--panel-bg); - color: var(--color-primary-600); - border-color: var(--color-slate-200); - border-bottom: 2px solid var(--panel-bg); - font-weight: 600; -} - /* ==================== * 标签页内容区域样式 * ==================== */ .tab-content { background: var(--panel-bg); - /* border-radius: var(--radius-md); 移除这里的圆角，因为它和上面的 tabs 是连体的 */ - padding: 8px 0; /* 减少内边距，让内容自己控制 */ + padding: 8px 0; min-height: 300px; margin-top: 0; } -