virtheart/arcticnewone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(header): 优化移动端布局和样式

Browse Source 
调整 AppLogo 的最小宽度，重构 ArcticNewOneHeader 的网格布局以适应移动端
优化 HomeHero 组件的间距和字体大小，提升移动端显示效果
This commit is contained in:
chenchun
2026-04-27 18:48:17 +08:00
parent afe0dc9492
commit e6e0426d25
3 changed files with 61 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/common/AppLogo.vue
+1 -2
View File
@@ -111,9 +111,8 @@ onBeforeUnmount(() => {
<div <div
v-if="props.showText" v-if="props.showText"
ref="logoRef" 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'" :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-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> <span class="absolute left-0 text-xs leading-none text-gray-500 opacity-0 invisible">{{ t('app.name') }}</span>
app/components/home/HomeHero.vue
+17 -17
View File
@@ -205,12 +205,12 @@ defineExpose({ play })
</div> </div>
</div> </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"> <div class="flex flex-col justify-between w-page-container max-w-[calc(100%-2rem)] mx-auto px-4 h-full">
<!-- Top Section --> <!-- Top Section -->
<div class="flex flex-col md:flex-row justify-between w-full"> <div class="flex flex-col md:flex-row justify-between w-full">
<!-- Top Left: Services List --> <!-- 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.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.socialMedia') }}</p>
<p class="hero-fade-up will-change-transform">{{ t('hero.services.marketing') }}</p> <p class="hero-fade-up will-change-transform">{{ t('hero.services.marketing') }}</p>
@@ -219,8 +219,8 @@ defineExpose({ play })
</div> </div>
<!-- Top Right: Description and Button --> <!-- Top Right: Description and Button -->
<div class="flex flex-col gap-8 max-w-[22rem] mt-10 md:mt-0 text-left"> <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-[1rem] leading-[1.5] tracking-tight"> <p class="hero-fade-up will-change-transform font-bold text-sm md:text-[1rem] leading-[1.5] tracking-tight">
{{ t('hero.description') }} {{ t('hero.description') }}
</p> </p>
<div class="hero-fade-up will-change-transform"> <div class="hero-fade-up will-change-transform">
@@ -229,7 +229,7 @@ defineExpose({ play })
ref="talkBtnRef" ref="talkBtnRef"
@mouseenter="onTalkHover" @mouseenter="onTalkHover"
@mouseleave="onTalkLeave" @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> <div class="absolute inset-0 bg-black rounded-[2rem]"></div>
@@ -265,40 +265,40 @@ defineExpose({ play })
</div> </div>
<!-- 中间 Section: 4 small dots --> <!-- 中间 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="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-2.5 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-2.5 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-2.5 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-2.5 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> </div>
<!-- Bottom Section --> <!-- 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 --> <!-- 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 class="relative inline-flex overflow-visible">
<span <span
v-for="(letter, index) in t('app.brand').split('')" v-for="(letter, index) in t('app.brand').split('')"
:key="`brand-${index}`" :key="`brand-${index}`"
class="relative inline-block overflow-hidden" 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>
<span class="hero-brand-tm text-[0.45em] font-black align-super ml-[0.1em] opacity-0 invisible relative -top-[0.2em]">™</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> </span>
</h1> </h1>
<!-- Bottom Right: Studio --> <!-- Bottom Right: Studio -->
<div class="flex flex-col items-start md:items-end mt-4 md:mt-0"> <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-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> <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-[11vw] md:text-[8vw] font-bold leading-[0.8] tracking-tighter m-0 -mr-1 whitespace-nowrap pt-4 pb-2"> <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 class="relative inline-flex overflow-hidden">
<span <span
v-for="(letter, index) in t('nav.studio').split('')" v-for="(letter, index) in t('nav.studio').split('')"
:key="`studio-${index}`" :key="`studio-${index}`"
class="relative inline-block overflow-hidden" 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>
</span> </span>
</h2> </h2>
app/components/layouts/ArcticNewOneHeader.vue
+43 -33
View File
@@ -232,37 +232,37 @@ onBeforeUnmount(() => {
</header> </header>
<header ref="bottomHeaderRef" class="site-header-bottom z-50 bg-white/80 backdrop-blur-md"> <header ref="bottomHeaderRef" class="site-header-bottom z-50 bg-white/80 backdrop-blur-md">
<!-- 左侧菜单 (前两个菜单项) --> <!-- 左侧菜单 (前两个菜单项) -->
<nav class="flex items-center"> <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" <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" class="group flex items-center font-semibold tracking-[-0.7px] text-black text-sm md:text-base whitespace-nowrap md:overflow-hidden"
style="font-size: 1rem; justify-content: flex-start; position: relative;"> style="justify-content: flex-start; position: relative;">
<div <div
class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[18px] pr-[18px]"> class="flex items-center transition-transform duration-300 md:group-hover:translate-x-0 md:-translate-x-[18px] md:pr-[18px]">
<span class="mr-2 h-2.5 w-2.5 rounded-full bg-black shrink-0"></span> <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> <span>{{ item.name }}</span>
</div> </div>
</NuxtLink> </NuxtLink>
</nav> </nav>
<!-- 中间 Logo (组件内部自带跳转和动画) --> <!-- 中间 Logo (组件内部自带跳转和动画) -->
<div class="flex items-center justify-center"> <div class="flex items-center justify-center px-1 md:px-6">
<AppLogo compact click-action="top" /> <AppLogo compact click-action="top" />
</div> </div>
<!-- 右侧菜单 (中间两个菜单项，留最后一个 contact 给右上角按钮) --> <!-- 右侧菜单 (中间两个菜单项，留最后一个 contact 给右上角按钮) -->
<nav class="flex items-center justify-self-end"> <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" <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" class="group flex items-center font-semibold tracking-[-0.7px] text-black text-sm md:text-base whitespace-nowrap md:overflow-hidden"
style="font-size: 1rem; justify-content: flex-start; position: relative;"> style="justify-content: flex-start; position: relative;">
<div <div
class="flex items-center transition-transform duration-300 group-hover:translate-x-0 -translate-x-[18px] pr-[18px]"> class="flex items-center transition-transform duration-300 md:group-hover:translate-x-0 md:-translate-x-[18px] md:pr-[18px]">
<span class="mr-2 h-2.5 w-2.5 rounded-full bg-black shrink-0"></span> <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> <span>{{ item.name }}</span>
</div> </div>
</NuxtLink> </NuxtLink>
</nav> </nav>
</header> </header>
</template> </template>
<style scoped> <style scoped>
@@ -270,12 +270,13 @@ onBeforeUnmount(() => {
border: 1px solid #ffffff47; border: 1px solid #ffffff47;
border-radius: 12px; border-radius: 12px;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-columns: auto minmax(50px, auto) auto; /* 移动端恢复三列，靠 flex 让菜单均匀铺开 */
grid-template-columns: 1fr auto 1fr;
grid-auto-columns: 1fr; grid-auto-columns: 1fr;
place-items: center stretch; place-items: center;
width: calc(100% - 1rem);
max-width: 570px; max-width: 570px;
width: fit-content; padding: 10px 10px;
padding: 15px 20px;
display: grid; display: grid;
position: fixed; position: fixed;
left: 50%; left: 50%;
@@ -285,4 +286,13 @@ onBeforeUnmount(() => {
opacity: 0; opacity: 0;
box-shadow: 0 -1px #0000001f, 0 12px 30px #0000001a, inset 0 1px #ffffff96; 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> </style>