diff --git a/frontend/src/admin/AdminLayout.tsx b/frontend/src/admin/AdminLayout.tsx index 60ad89e..19fbe6b 100644 --- a/frontend/src/admin/AdminLayout.tsx +++ b/frontend/src/admin/AdminLayout.tsx @@ -227,9 +227,9 @@ export default function AdminLayout() { to="/admin" end className={({ isActive }) => - `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-colors ${ + `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${ isActive - ? 'border-press bg-press-wash/60 font-medium text-press' + ? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active' : 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900' }` } @@ -249,9 +249,9 @@ export default function AdminLayout() { - `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 text-sm transition-colors ${ + `flex min-h-[40px] items-center gap-2.5 border-l-4 px-3 pb-1 text-sm transition-all duration-300 ${ isActive - ? 'border-press bg-press-wash/60 font-medium text-press' + ? 'border-press bg-press-wash/60 font-medium text-press nav-tab-active' : 'border-transparent text-ink-500 hover:bg-paper-100 hover:text-ink-900' }` } @@ -282,8 +282,8 @@ export default function AdminLayout() { {/* ── 主内容区 ── */} -
-
+
+
diff --git a/frontend/src/index.css b/frontend/src/index.css index 827d389..a960d2e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -16,6 +16,40 @@ text-shadow: 0.5px 0.5px 0 currentColor; } +/* 活跃Tab下划线渐变动画 */ +.nav-tab-active { + position: relative; +} +.nav-tab-active::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, transparent, #17140F, transparent); + transition: all 0.3s ease; + transform: translateX(-50%); +} +.nav-tab-active::after { + width: 80%; +} + +/* 页面内容横向轻扫+淡入 */ +.page-content-enter { + animation: pageSlideIn 0.3s ease-out; +} +@keyframes pageSlideIn { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + @layer base { html { -webkit-text-size-adjust: 100%;