From c1da2963d20ec55040fc1280e48f735a4c247d05 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Sun, 26 Apr 2026 22:33:14 +0800
Subject: [PATCH] =?UTF-8?q?style(layouts):=20=E8=B0=83=E6=95=B4=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加头部组件高度，优化logo和导航链接的尺寸及间距
改进导航链接的悬停动画效果
统一底部组件高度与头部一致
---
 app/components/layouts/ArcticNewOneHeader.vue | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/components/layouts/ArcticNewOneHeader.vue b/app/components/layouts/ArcticNewOneHeader.vue
index 4af0ccc..f5bea92 100644
--- a/app/components/layouts/ArcticNewOneHeader.vue
+++ b/app/components/layouts/ArcticNewOneHeader.vue
@@ -92,47 +92,50 @@ onBeforeUnmount(() => {
 <template>
   <header
     ref="topHeaderRef"
-    class="site-header-top fixed left-0 right-0 top-0 z-50 mx-auto flex h-[70px] w-page-container max-w-[calc(100%-2rem)] items-center justify-between px-4 py-5"
+    class="site-header-top fixed left-0 right-0 top-0 z-50 mx-auto flex h-[100px] w-page-container max-w-[calc(100%-2rem)] items-center justify-between px-4 py-5"
   >
     <!-- 左侧：Logo 和 标题 -->
-    <div class="flex items-center gap-3">
-      <div class="logo-icon flex h-8 w-8 items-center justify-center rounded-full bg-black text-white">
+    <div class="flex items-center gap-4">
+      <div class="logo-icon flex h-10 w-10 items-center justify-center rounded-full bg-black text-white">
         <!-- 简单的极简风格 SVG Logo -->
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-6 w-6">
           <circle cx="12" cy="12" r="10" />
           <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
           <path d="M2 12h20" />
         </svg>
       </div>
       <div class="flex flex-col justify-center">
-        <span class="text-sm font-bold leading-none tracking-wider text-black">北极新一</span>
-        <span class="mt-1 text-[10px] leading-none text-gray-500">ArcticNewOne</span>
+        <span class="text-base font-bold leading-none tracking-wider text-black">北极新一</span>
+        <span class="mt-1 text-xs leading-none text-gray-500">ArcticNewOne</span>
       </div>
     </div>
 
     <!-- 中间：导航链接 -->
-    <nav class="hidden md:flex items-center gap-8">
+    <nav class="hidden md:flex items-center gap-20 lg:gap-28">
       <a
         v-for="item in navItems"
         :key="item.name"
         :href="item.path"
-        class="group relative flex items-center text-sm font-medium text-black"
+        class="group flex items-center overflow-hidden font-semibold tracking-[-0.7px] text-black"
+        style="font-size: 1.125rem; justify-content: flex-start; position: relative;"
       >
-        <span class="absolute -left-3 h-1.5 w-1.5 rounded-full bg-black opacity-0 transition-all duration-300 group-hover:opacity-100"></span>
-        <span class="transition-transform duration-300 group-hover:translate-x-2">{{ item.name }}</span>
+        <div class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-3">
+          <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-black"></span>
+          <span>{{ item.name }}</span>
+        </div>
       </a>
     </nav>
 
     <!-- 右侧：菜单图标 (使用 div 绘制) -->
-    <div class="menu-icon group flex h-8 w-8 cursor-pointer flex-col items-end justify-center gap-[6px]">
-      <div class="h-[2px] w-6 bg-black transition-all duration-300 group-hover:translate-y-[1px]"></div>
-      <div class="h-[2px] w-6 bg-black transition-all duration-300 group-hover:-translate-y-[1px]"></div>
+    <div class="menu-icon group flex h-12 w-12 cursor-pointer flex-col items-end justify-center gap-[8px]">
+      <div class="h-[2px] w-10 bg-black transition-all duration-300 group-hover:translate-y-[2.5px]"></div>
+      <div class="h-[2px] w-10 bg-black transition-all duration-300 group-hover:-translate-y-[2.5px]"></div>
     </div>
   </header>
 
   <header
     ref="bottomHeaderRef"
-    class="fixed bottom-0 left-0 right-0 z-50 mx-auto h-[70px] w-page-container max-w-[calc(100%-2rem)] bg-blue-200 px-4 py-5"
+    class="fixed bottom-0 left-0 right-0 z-50 mx-auto h-[100px] w-page-container max-w-[calc(100%-2rem)] bg-blue-200 px-4 py-5"
     style="visibility: hidden; opacity: 0;"
   >
     <nav>Bottom Navigation</nav>