Zhanglj/BigStickNewOfficialWebsite-V2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:完善其余页面

Browse Source
This commit is contained in:
Zhanglj
2026-07-16 16:42:45 +08:00
parent cb9928936b
commit eea6319c41
24 changed files with 12528 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/site/SiteFooter.vue
+251
View File
@@ -0,0 +1,251 @@
<script setup>
const route = useRoute()
const { openConsultation } = useConsultation()
const sourceLabel = computed(() => {
const labels = {
'/services': '营销增长服务',
'/solutions': '行业解决方案',
'/cases': '客户案例',
'/advantages': '核心优势',
'/insights': '增长洞察',
'/about': '关于我们'
}
const base = Object.keys(labels).find(
(path) => route.path === path || route.path.startsWith(`${path}/`)
)
return `${labels[base] || '全站'}页页脚`
})
</script>
<template>
<footer class="subsite-footer" :class="{ 'is-interior': route.path !== '/' }">
<div class="page-width footer-content">
<div class="footer-company">
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
<p>聚焦 AI 搜索增长，用可信内容、全域信源与转化承接帮助品牌建立长期数字资产。</p>
<button type="button" @click="openConsultation({ source: sourceLabel })">
<span>预约免费诊断</span>
<AppIcon name="arrow-right" />
</button>
</div>
<nav class="footer-navigation" aria-label="页脚导航">
<div>
<strong>快速导航</strong>
<NuxtLink to="/">首页</NuxtLink>
<NuxtLink to="/services">营销增长服务</NuxtLink>
<NuxtLink to="/solutions">行业解决方案</NuxtLink>
<NuxtLink to="/cases">客户案例</NuxtLink>
<NuxtLink to="/advantages">核心优势</NuxtLink>
<NuxtLink to="/insights">增长洞察</NuxtLink>
<NuxtLink to="/about">关于我们</NuxtLink>
</div>
<div>
<strong>业务方向</strong>
<NuxtLink to="/services#brand-exposure">品牌曝光</NuxtLink>
<NuxtLink to="/services#lead-conversion">精准获客转化</NuxtLink>
<NuxtLink to="/services#omnichannel">全域营销</NuxtLink>
</div>
<div>
<strong>联系我们</strong>
<span class="contact-line"
><AppIcon name="location" />成都市武侯区芯通科技大厦 B 座 9 楼</span
>
<span class="contact-line"><AppIcon name="phone" />联系电话：待补充</span>
<span class="contact-line"><AppIcon name="message" />商务邮箱：待补充</span>
</div>
</nav>
<div class="footer-qr" aria-label="专属顾问二维码占位">
<span class="qr-pattern" aria-hidden="true"></span>
<strong>扫码添加专属顾问</strong>
<small>获取 1 对 1 GEO 增长建议</small>
</div>
</div>
<div class="footer-legal">
<div class="page-width">
<span>© 2026 成都大马棒传媒有限公司</span><span>备案信息待补充 · 隐私说明</span>
</div>
</div>
</footer>
</template>
<style scoped>
.subsite-footer {
color: #cbd6e1;
background: #12202a;
}
.subsite-footer.is-interior {
background:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 38px 38px,
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 38px 38px,
#12202a;
}
.footer-content {
min-height: 285px;
display: grid;
grid-template-columns: 1.2fr 1.7fr 0.65fr;
align-items: center;
gap: 52px;
padding-top: 42px;
padding-bottom: 42px;
}
.footer-company img {
display: block;
width: 255px;
padding: 8px;
border-radius: 6px;
background: #fff;
}
.is-interior .footer-company img {
border-radius: 5px;
}
.footer-company p {
max-width: 390px;
margin: 20px 0;
color: #b6c2cc;
font-size: 14px;
line-height: 1.8;
}
.footer-company button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
color: #76b7ff;
background: transparent;
font-size: 14px;
font-weight: 600;
}
.footer-company button:hover {
color: #fff;
}
.is-interior .footer-company button {
transition:
color 0.22s ease,
transform 0.22s ease;
}
.is-interior .footer-company button:hover {
transform: translateX(3px);
}
.footer-navigation {
display: grid;
grid-template-columns: 0.8fr 0.9fr 1.45fr;
gap: 32px;
}
.footer-navigation div {
display: grid;
align-content: start;
gap: 12px;
}
.footer-navigation strong {
margin-bottom: 5px;
color: #eff6fb;
font-size: 14px;
}
.footer-navigation a,
.footer-navigation span {
color: #b1bdc7;
font-size: 13px;
line-height: 1.65;
text-decoration: none;
}
.footer-navigation a:hover {
color: #70b5ff;
}
.is-interior .footer-navigation a {
transition:
color 0.2s ease,
transform 0.2s ease;
}
.is-interior .footer-navigation a:hover {
transform: translateX(2px);
}
.footer-navigation .contact-line {
display: grid;
grid-template-columns: 16px 1fr;
align-items: start;
gap: 8px;
}
.footer-navigation .contact-line :deep(.app-icon) {
margin-top: 3px;
color: #70b5ff;
}
.footer-qr {
display: grid;
justify-items: center;
text-align: center;
}
.qr-pattern {
width: 86px;
height: 86px;
display: block;
border: 7px solid #fff;
background:
linear-gradient(90deg, #13212b 25%, transparent 25% 50%, #13212b 50% 75%, transparent 75%) 0 0 /
16px 16px,
linear-gradient(#13212b 25%, transparent 25% 50%, #13212b 50% 75%, transparent 75%) 8px 8px /
16px 16px,
#fff;
}
.footer-qr strong {
margin-top: 13px;
color: #e8f0f6;
font-size: 13px;
}
.footer-qr small {
margin-top: 6px;
color: #aebac4;
font-size: 12px;
}
.footer-legal {
min-height: 54px;
display: grid;
place-items: center;
color: #aeb9c2;
background: #263139;
font-size: 12px;
}
.is-interior .footer-legal {
border-top: 1px solid rgba(255, 255, 255, 0.055);
background: rgba(38, 49, 57, 0.88);
}
.footer-legal .page-width {
display: flex;
justify-content: space-between;
gap: 24px;
}
@media (max-width: 960px) {
.footer-content {
grid-template-columns: 1fr 1.5fr;
}
.footer-qr {
display: none;
}
}
@media (max-width: 680px) {
.footer-content {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 40px;
padding-bottom: 36px;
}
.footer-company img {
width: 230px;
}
.footer-navigation {
grid-template-columns: 1fr 1fr;
gap: 28px 18px;
}
.footer-navigation div:last-child {
grid-column: 1 / -1;
}
.footer-legal .page-width {
display: grid;
justify-content: center;
padding: 14px 0;
text-align: center;
}
}
</style>
components/site/SiteHeader.vue
+328
View File
@@ -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>