From e6e0426d250b9b580ac82633c28504913ec42f0e Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Mon, 27 Apr 2026 18:48:17 +0800
Subject: [PATCH] =?UTF-8?q?style(header):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整 AppLogo 的最小宽度，重构 ArcticNewOneHeader 的网格布局以适应移动端
优化 HomeHero 组件的间距和字体大小，提升移动端显示效果
---
 app/components/common/AppLogo.vue             |  3 +-
 app/components/home/HomeHero.vue              | 34 ++++-----
 app/components/layouts/ArcticNewOneHeader.vue | 76 +++++++++++--------
 3 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/app/components/common/AppLogo.vue b/app/components/common/AppLogo.vue
index 84241fb..67898bf 100644
--- a/app/components/common/AppLogo.vue
+++ b/app/components/common/AppLogo.vue
@@ -111,9 +111,8 @@ onBeforeUnmount(() => {
     <div
       v-if="props.showText"
       ref="logoRef"
-      class="relative flex items-center overflow-hidden"
+      class="relative flex items-center overflow-hidden min-w-[70px] md:min-w-[100px]"
       :class="props.compact ? 'h-[1.8rem]' : 'h-10'"
-      style="min-width: 100px;"
     >
       <span class="absolute left-0 text-base font-bold leading-none tracking-wider text-black">{{ t('app.brand') }}</span>
       <span class="absolute left-0 text-xs leading-none text-gray-500 opacity-0 invisible">{{ t('app.name') }}</span>
diff --git a/app/components/home/HomeHero.vue b/app/components/home/HomeHero.vue
index ff1c63d..9b49eeb 100644
--- a/app/components/home/HomeHero.vue
+++ b/app/components/home/HomeHero.vue
@@ -205,12 +205,12 @@ defineExpose({ play })
           </div>
         </div>
       </div>
-      <div ref="heroPanelRef" class="absolute inset-0 flex flex-col justify-between items-center bg-white text-black will-change-transform pt-28 pb-10 md:pt-36 md:pb-12 overflow-hidden">
+      <div ref="heroPanelRef" class="absolute inset-0 flex flex-col justify-between items-center bg-white text-black will-change-transform pt-24 pb-8 md:pt-36 md:pb-12 overflow-hidden">
         <div class="flex flex-col justify-between w-page-container max-w-[calc(100%-2rem)] mx-auto px-4 h-full">
           <!-- Top Section -->
           <div class="flex flex-col md:flex-row justify-between w-full">
             <!-- Top Left: Services List -->
-            <div class="flex flex-col gap-2 font-bold text-base md:text-[1rem] tracking-tight leading-[1.5]">
+            <div class="flex flex-col gap-2 font-bold text-sm md:text-[1rem] tracking-tight leading-[1.5]">
               <p class="hero-fade-up will-change-transform">{{ t('hero.services.webDesign') }}</p>
               <p class="hero-fade-up will-change-transform">{{ t('hero.services.socialMedia') }}</p>
               <p class="hero-fade-up will-change-transform">{{ t('hero.services.marketing') }}</p>
@@ -219,8 +219,8 @@ defineExpose({ play })
             </div>
             
             <!-- Top Right: Description and Button -->
-              <div class="flex flex-col gap-8 max-w-[22rem] mt-10 md:mt-0 text-left">
-                <p class="hero-fade-up will-change-transform font-bold text-[1rem] leading-[1.5] tracking-tight">
+              <div class="flex flex-col gap-6 md:gap-8 max-w-[22rem] mt-8 md:mt-0 text-left">
+                <p class="hero-fade-up will-change-transform font-bold text-sm md:text-[1rem] leading-[1.5] tracking-tight">
                   {{ t('hero.description') }}
                 </p>
                 <div class="hero-fade-up will-change-transform">
@@ -229,7 +229,7 @@ defineExpose({ play })
                       ref="talkBtnRef"
                       @mouseenter="onTalkHover"
                       @mouseleave="onTalkLeave"
-                      class="relative overflow-hidden bg-black text-white px-7 py-3.5 rounded-[2rem] font-semibold text-[1rem] shadow-[0_15px_30px_-5px_rgba(0,0,0,0.3)] flex items-center justify-center group"
+                      class="relative overflow-hidden bg-black text-white px-6 py-3 md:px-7 md:py-3.5 rounded-[2rem] font-semibold text-sm md:text-[1rem] shadow-[0_15px_30px_-5px_rgba(0,0,0,0.3)] flex items-center justify-center group"
                     >
                       <!-- 默认黑色背景层，防止文字动画时漏底 -->
                       <div class="absolute inset-0 bg-black rounded-[2rem]"></div>
@@ -265,40 +265,40 @@ defineExpose({ play })
           </div>
   
           <!-- 中间 Section: 4 small dots -->
-          <div class="flex justify-between w-full items-start flex-1 mt-16 md:mt-24 mb-6 md:mb-0">
-            <div class="hero-fade-up will-change-transform w-2.5 h-2.5 bg-black rounded-full"></div>
-            <div class="hero-fade-up will-change-transform w-2.5 h-2.5 bg-black rounded-full"></div>
-            <div class="hero-fade-up will-change-transform w-2.5 h-2.5 bg-black rounded-full"></div>
-            <div class="hero-fade-up will-change-transform w-2.5 h-2.5 bg-black rounded-full"></div>
+          <div class="flex justify-between w-full items-start flex-1 mt-8 md:mt-24 mb-4 md:mb-0">
+            <div class="hero-fade-up will-change-transform w-1.5 h-1.5 md:w-2.5 md:h-2.5 bg-black rounded-full"></div>
+            <div class="hero-fade-up will-change-transform w-1.5 h-1.5 md:w-2.5 md:h-2.5 bg-black rounded-full"></div>
+            <div class="hero-fade-up will-change-transform w-1.5 h-1.5 md:w-2.5 md:h-2.5 bg-black rounded-full"></div>
+            <div class="hero-fade-up will-change-transform w-1.5 h-1.5 md:w-2.5 md:h-2.5 bg-black rounded-full"></div>
           </div>
 
             <!-- Bottom Section -->
-            <div class="flex flex-col md:flex-row justify-between items-end w-full">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-end w-full">
               <!-- Bottom Left: Brand Name -->
-              <h1 ref="brandNameRef" class="text-[11vw] md:text-[8vw] font-bold leading-[0.8] tracking-tighter m-0 -ml-1 whitespace-nowrap pt-4 pb-2">
+              <h1 ref="brandNameRef" class="text-[13vw] md:text-[8vw] font-bold leading-[0.8] tracking-tighter m-0 -ml-1 whitespace-nowrap pt-2 md:pt-4 pb-1 md:pb-2">
                 <span class="relative inline-flex overflow-visible">
                   <span
                     v-for="(letter, index) in t('app.brand').split('')"
                     :key="`brand-${index}`"
                     class="relative inline-block overflow-hidden"
                   >
-                    <span class="hero-brand-char inline-block will-change-transform opacity-0 invisible pb-4">{{ letter }}</span>
+                    <span class="hero-brand-char inline-block will-change-transform opacity-0 invisible pb-2 md:pb-4">{{ letter }}</span>
                   </span>
                   <span class="hero-brand-tm text-[0.45em] font-black align-super ml-[0.1em] opacity-0 invisible relative -top-[0.2em]">™</span>
                 </span>
               </h1>
               
               <!-- Bottom Right: Studio -->
-              <div class="flex flex-col items-start md:items-end mt-4 md:mt-0">
-                <p class="hero-fade-up will-change-transform text-xs md:text-sm font-semibold text-gray-500 mb-2 md:mb-6 mr-1">© {{ new Date().getFullYear() }} {{ t('app.brand') }}™ {{ t('nav.studio') }}</p>
-                <h2 ref="studioNameRef" class="text-[11vw] md:text-[8vw] font-bold leading-[0.8] tracking-tighter m-0 -mr-1 whitespace-nowrap pt-4 pb-2">
+              <div class="flex flex-col items-start md:items-end mt-4 md:mt-0 self-start md:self-auto">
+                <p class="hero-fade-up will-change-transform text-[10px] md:text-sm font-semibold text-gray-500 mb-1 md:mb-6 mr-1">© {{ new Date().getFullYear() }} {{ t('app.brand') }}™ {{ t('nav.studio') }}</p>
+                <h2 ref="studioNameRef" class="text-[13vw] md:text-[8vw] font-bold leading-[0.8] tracking-tighter m-0 -ml-1 md:-ml-0 md:-mr-1 whitespace-nowrap pt-2 md:pt-4 pb-1 md:pb-2">
                   <span class="relative inline-flex overflow-hidden">
                     <span
                       v-for="(letter, index) in t('nav.studio').split('')"
                       :key="`studio-${index}`"
                       class="relative inline-block overflow-hidden"
                     >
-                      <span class="hero-studio-char inline-block will-change-transform opacity-0 invisible pb-4">{{ letter }}</span>
+                      <span class="hero-studio-char inline-block will-change-transform opacity-0 invisible pb-2 md:pb-4">{{ letter }}</span>
                     </span>
                   </span>
                 </h2>
diff --git a/app/components/layouts/ArcticNewOneHeader.vue b/app/components/layouts/ArcticNewOneHeader.vue
index cd888b6..5e31b4b 100644
--- a/app/components/layouts/ArcticNewOneHeader.vue
+++ b/app/components/layouts/ArcticNewOneHeader.vue
@@ -232,37 +232,37 @@ onBeforeUnmount(() => {
   </header>
 
   <header ref="bottomHeaderRef" class="site-header-bottom z-50 bg-white/80 backdrop-blur-md">
-    <!-- 左侧菜单 (前两个菜单项) -->
-    <nav class="flex items-center">
-      <NuxtLink v-for="item in navItems.slice(0, 2)" :key="'bottom-' + item.name" :to="item.path"
-        class="group flex items-center overflow-hidden font-semibold tracking-[-0.7px] text-black"
-        style="font-size: 1rem; justify-content: flex-start; position: relative;">
-        <div
-          class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[18px] pr-[18px]">
-          <span class="mr-2 h-2.5 w-2.5 rounded-full bg-black shrink-0"></span>
-          <span>{{ item.name }}</span>
-        </div>
-      </NuxtLink>
-    </nav>
+      <!-- 左侧菜单 (前两个菜单项) -->
+      <nav class="flex items-center justify-evenly md:justify-end gap-3 md:gap-4 w-full">
+        <NuxtLink v-for="item in navItems.slice(0, 2)" :key="'bottom-' + item.name" :to="item.path"
+          class="group flex items-center font-semibold tracking-[-0.7px] text-black text-sm md:text-base whitespace-nowrap md:overflow-hidden"
+          style="justify-content: flex-start; position: relative;">
+          <div
+            class="flex items-center transition-transform duration-300 md:group-hover:translate-x-0 md:-translate-x-[18px] md:pr-[18px]">
+            <span class="hidden md:block mr-1 md:mr-2 h-1.5 w-1.5 md:h-2.5 md:w-2.5 rounded-full bg-black shrink-0"></span>
+            <span>{{ item.name }}</span>
+          </div>
+        </NuxtLink>
+      </nav>
 
-    <!-- 中间 Logo (组件内部自带跳转和动画) -->
-    <div class="flex items-center justify-center">
-      <AppLogo compact click-action="top" />
-    </div>
+      <!-- 中间 Logo (组件内部自带跳转和动画) -->
+      <div class="flex items-center justify-center px-1 md:px-6">
+        <AppLogo compact click-action="top" />
+      </div>
 
-    <!-- 右侧菜单 (中间两个菜单项，留最后一个 contact 给右上角按钮) -->
-    <nav class="flex items-center justify-self-end">
-      <NuxtLink v-for="item in navItems.slice(2, 4)" :key="'bottom-' + item.name" :to="item.path"
-        class="group flex items-center overflow-hidden font-semibold tracking-[-0.7px] text-black"
-        style="font-size: 1rem; justify-content: flex-start; position: relative;">
-        <div
-          class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[18px] pr-[18px]">
-          <span class="mr-2 h-2.5 w-2.5 rounded-full bg-black shrink-0"></span>
-          <span>{{ item.name }}</span>
-        </div>
-      </NuxtLink>
-    </nav>
-  </header>
+      <!-- 右侧菜单 (中间两个菜单项，留最后一个 contact 给右上角按钮) -->
+      <nav class="flex items-center justify-evenly md:justify-start gap-3 md:gap-4 w-full">
+        <NuxtLink v-for="item in navItems.slice(2, 4)" :key="'bottom-' + item.name" :to="item.path"
+          class="group flex items-center font-semibold tracking-[-0.7px] text-black text-sm md:text-base whitespace-nowrap md:overflow-hidden"
+          style="justify-content: flex-start; position: relative;">
+          <div
+            class="flex items-center transition-transform duration-300 md:group-hover:translate-x-0 md:-translate-x-[18px] md:pr-[18px]">
+            <span class="hidden md:block mr-1 md:mr-2 h-1.5 w-1.5 md:h-2.5 md:w-2.5 rounded-full bg-black shrink-0"></span>
+            <span>{{ item.name }}</span>
+          </div>
+        </NuxtLink>
+      </nav>
+    </header>
 </template>
 
 <style scoped>
@@ -270,12 +270,13 @@ onBeforeUnmount(() => {
   border: 1px solid #ffffff47;
   border-radius: 12px;
   grid-template-rows: auto;
-  grid-template-columns: auto minmax(50px, auto) auto;
+  /* 移动端恢复三列，靠 flex 让菜单均匀铺开 */
+  grid-template-columns: 1fr auto 1fr;
   grid-auto-columns: 1fr;
-  place-items: center stretch;
+  place-items: center;
+  width: calc(100% - 1rem);
   max-width: 570px;
-  width: fit-content;
-  padding: 15px 20px;
+  padding: 10px 10px;
   display: grid;
   position: fixed;
   left: 50%;
@@ -285,4 +286,13 @@ onBeforeUnmount(() => {
   opacity: 0;
   box-shadow: 0 -1px #0000001f, 0 12px 30px #0000001a, inset 0 1px #ffffff96;
 }
+
+@media (min-width: 768px) {
+  .site-header-bottom {
+    grid-template-columns: auto minmax(50px, auto) auto;
+    gap: 0;
+    width: fit-content;
+    padding: 15px 20px;
+  }
+}
 </style>