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/home/HomeHero.vue
+17 -17
View File
@@ -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>