feat:完善其余页面
This commit is contained in:
@@ -0,0 +1,328 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const mobileOpen = ref(false)
|
||||
const { openConsultation } = useConsultation()
|
||||
|
||||
const navItems = [
|
||||
{ label: '首页', to: '/' },
|
||||
{ label: '营销增长服务', to: '/services' },
|
||||
{ label: '行业解决方案', to: '/solutions' },
|
||||
{ label: '客户案例', to: '/cases' },
|
||||
{ label: '核心优势', to: '/advantages' },
|
||||
{ label: '增长洞察', to: '/insights' },
|
||||
{ label: '关于我们', to: '/about' }
|
||||
]
|
||||
|
||||
function isActive(item) {
|
||||
if (item.to.includes('#')) return false
|
||||
if (item.to === '/') return route.path === '/'
|
||||
return route.path === item.to || route.path.startsWith(`${item.to}/`)
|
||||
}
|
||||
|
||||
function requestDiagnosis() {
|
||||
mobileOpen.value = false
|
||||
const current = navItems.find((item) => {
|
||||
if (item.to === '/') return route.path === '/'
|
||||
return route.path === item.to || route.path.startsWith(`${item.to}/`)
|
||||
})
|
||||
openConsultation({
|
||||
title: '预约免费 GEO 诊断',
|
||||
source: `${current?.label || '全站'}页顶部导航`
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
mobileOpen.value = false
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="subsite-header" :class="{ 'is-interior': route.path !== '/' }">
|
||||
<div class="page-width subsite-header-inner">
|
||||
<NuxtLink to="/" class="subsite-brand" aria-label="大马棒云途全域 GEO 首页">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
|
||||
</NuxtLink>
|
||||
|
||||
<nav class="subsite-nav" aria-label="主导航">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.label"
|
||||
:to="item.to"
|
||||
:class="{ active: isActive(item) }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<button class="header-consult" type="button" @click="requestDiagnosis">
|
||||
<AppIcon name="message" />
|
||||
<span>免费诊断</span>
|
||||
</button>
|
||||
<button
|
||||
class="subsite-menu"
|
||||
type="button"
|
||||
:aria-expanded="mobileOpen"
|
||||
aria-controls="subsite-mobile-navigation"
|
||||
:aria-label="mobileOpen ? '关闭导航' : '打开导航'"
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
>
|
||||
<AppIcon :name="mobileOpen ? 'close' : 'menu'" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Transition name="mobile-navigation">
|
||||
<nav
|
||||
v-if="mobileOpen"
|
||||
id="subsite-mobile-navigation"
|
||||
class="subsite-mobile-nav"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
<div class="page-width">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="`mobile-${item.label}`"
|
||||
:to="item.to"
|
||||
:class="{ active: isActive(item) }"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
<AppIcon name="arrow-right" />
|
||||
</NuxtLink>
|
||||
<button type="button" @click="requestDiagnosis">
|
||||
<span>预约免费诊断</span>
|
||||
<AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</Transition>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.subsite-header {
|
||||
position: sticky;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid rgba(84, 142, 216, 0.1);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10px 30px rgba(61, 116, 185, 0.06);
|
||||
backdrop-filter: blur(18px) saturate(1.16);
|
||||
}
|
||||
.subsite-header.is-interior {
|
||||
border-bottom-color: rgba(84, 142, 216, 0.12);
|
||||
background: rgba(250, 253, 255, 0.88);
|
||||
box-shadow:
|
||||
0 12px 32px rgba(61, 116, 185, 0.07),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.88);
|
||||
backdrop-filter: blur(20px) saturate(1.12);
|
||||
}
|
||||
.subsite-header-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
.subsite-brand {
|
||||
width: 190px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.is-interior .subsite-brand {
|
||||
padding: 6px 8px;
|
||||
border-radius: 5px;
|
||||
transition:
|
||||
background 0.22s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
.is-interior .subsite-brand:hover {
|
||||
background: rgba(228, 241, 255, 0.72);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.subsite-brand img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.subsite-nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(15px, 1.8vw, 34px);
|
||||
margin-left: auto;
|
||||
}
|
||||
.subsite-nav a {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
color: #44546a;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.22s;
|
||||
}
|
||||
.subsite-nav a::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background: #287cf9;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.24s ease;
|
||||
}
|
||||
.is-interior .subsite-nav a::after {
|
||||
right: 20%;
|
||||
left: 20%;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: linear-gradient(90deg, #287cf9, #61c4ee);
|
||||
}
|
||||
.subsite-nav a:hover,
|
||||
.subsite-nav a.active {
|
||||
color: #2078eb;
|
||||
font-weight: 600;
|
||||
}
|
||||
.subsite-nav a:hover::after,
|
||||
.subsite-nav a.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.header-consult {
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 17px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #087dfb;
|
||||
box-shadow: 0 6px 15px rgba(30, 127, 255, 0.2);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
.is-interior .header-consult {
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(105deg, #1877ee, #2e9def);
|
||||
box-shadow: 0 8px 18px rgba(30, 127, 255, 0.2);
|
||||
}
|
||||
.header-consult:hover {
|
||||
background: #056ee2;
|
||||
box-shadow: 0 9px 20px rgba(30, 127, 255, 0.28);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.header-consult:active {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
.subsite-menu,
|
||||
.subsite-mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 1080px) {
|
||||
.subsite-nav {
|
||||
gap: 14px;
|
||||
}
|
||||
.subsite-nav a {
|
||||
font-size: 13px;
|
||||
}
|
||||
.subsite-brand {
|
||||
width: 165px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.subsite-header {
|
||||
height: 58px;
|
||||
}
|
||||
.subsite-brand {
|
||||
width: 158px;
|
||||
}
|
||||
.subsite-nav,
|
||||
.header-consult {
|
||||
display: none;
|
||||
}
|
||||
.subsite-menu {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
color: #287cf9;
|
||||
background: #edf6ff;
|
||||
}
|
||||
.is-interior .subsite-menu {
|
||||
border: 1px solid rgba(61, 137, 225, 0.12);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.subsite-menu :deep(.app-icon) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.subsite-mobile-nav {
|
||||
position: fixed;
|
||||
z-index: 29;
|
||||
top: 58px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
background: rgba(247, 251, 255, 0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.subsite-mobile-nav .page-width {
|
||||
display: grid;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.subsite-mobile-nav a,
|
||||
.subsite-mobile-nav button {
|
||||
min-height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4px;
|
||||
border-bottom: 1px solid rgba(48, 112, 192, 0.1);
|
||||
color: #4b5c72;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.subsite-mobile-nav a.active {
|
||||
color: #1478fb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.subsite-mobile-nav button {
|
||||
min-height: 50px;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding: 0 20px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: linear-gradient(100deg, #453cff, #00adf6);
|
||||
}
|
||||
}
|
||||
.mobile-navigation-enter-active,
|
||||
.mobile-navigation-leave-active {
|
||||
transition:
|
||||
opacity 0.22s,
|
||||
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.mobile-navigation-enter-from,
|
||||
.mobile-navigation-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user