Zhanglj
2ff1064de7
这一提交完成了多项功能升级与优化： 1. 新增全局浮动客服组件，集成腾讯云TRTC聊天能力并添加错误格式化工具 2. 新增图片资源并调整部分静态文件结构 3. 优化案例页面：重构筛选逻辑、新增空状态处理、添加加载更多功能 4. 优化首页布局：修复统计数字动画、调整移动端适配样式、优化轮播逻辑 5. 重构官方内容获取工具：添加缓存机制、优化媒体资源处理 6. 优化API代理配置，移除默认本地代理并新增环境变量配置 7. 新增页面数据恢复刷新逻辑，优化页面交互体验 8. 修复按钮组件冗余代码，调整头部导航移动端样式
332 lines
7.7 KiB
Vue
332 lines
7.7 KiB
Vue
<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;
|
|
overflow: visible;
|
|
}
|
|
.subsite-brand {
|
|
width: 158px;
|
|
}
|
|
.subsite-nav,
|
|
.header-consult {
|
|
display: none;
|
|
}
|
|
.subsite-menu {
|
|
position: relative;
|
|
width: 42px;
|
|
height: 42px;
|
|
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: absolute;
|
|
z-index: 29;
|
|
top: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
display: block;
|
|
height: calc(100dvh - 58px);
|
|
overflow-y: auto;
|
|
border-top: 1px solid rgba(48, 112, 192, 0.08);
|
|
background: rgba(247, 251, 255, 0.98);
|
|
box-shadow: 0 18px 34px rgba(61, 116, 185, 0.12);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.subsite-mobile-nav .page-width {
|
|
display: grid;
|
|
padding-top: 20px;
|
|
padding-bottom: 28px;
|
|
}
|
|
.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>
|