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/layouts/ArcticNewOneHeader.vue
+43 -33
View File
@@ -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>