feat:完善其余页面
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Bottom,
|
||||
Check,
|
||||
Close,
|
||||
Location,
|
||||
Menu,
|
||||
Message,
|
||||
Phone,
|
||||
Plus,
|
||||
Search
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: 'arrow-right'
|
||||
}
|
||||
})
|
||||
|
||||
const icons = {
|
||||
'arrow-left': ArrowLeft,
|
||||
'arrow-right': ArrowRight,
|
||||
bottom: Bottom,
|
||||
check: Check,
|
||||
close: Close,
|
||||
location: Location,
|
||||
menu: Menu,
|
||||
message: Message,
|
||||
phone: Phone,
|
||||
plus: Plus,
|
||||
search: Search
|
||||
}
|
||||
|
||||
const icon = computed(() => icons[props.name] || ArrowRight)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="icon" class="app-icon" aria-hidden="true" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
overflow: visible;
|
||||
vertical-align: -0.12em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,485 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const { isOpen, context, form, closeConsultation } = useConsultation()
|
||||
const formElement = ref(null)
|
||||
const nameInput = ref(null)
|
||||
const errors = ref({})
|
||||
const status = ref('idle')
|
||||
const submitError = ref('')
|
||||
|
||||
const industries = ['企业服务', '教育培训', '本地生活', '医疗健康', '电商零售', '其他行业']
|
||||
const needs = ['品牌曝光', '精准获客转化', '全域营销', 'GEO 诊断', '内容与媒体分发']
|
||||
|
||||
function validate() {
|
||||
const nextErrors = {}
|
||||
if (!form.value.name.trim()) nextErrors.name = '请填写您的姓名'
|
||||
if (!form.value.company.trim()) nextErrors.company = '请填写公司名称'
|
||||
if (!form.value.contact.trim()) {
|
||||
nextErrors.contact = '请填写手机号或邮箱'
|
||||
} else if (
|
||||
!/^(1\d{10}|[\w.+-]+@[\w.-]+\.[A-Za-z]{2,}|[\d\s()+-]{6,})$/.test(form.value.contact.trim())
|
||||
) {
|
||||
nextErrors.contact = '联系方式格式不正确'
|
||||
}
|
||||
if (!form.value.consent) nextErrors.consent = '请确认允许工作人员与您联系'
|
||||
errors.value = nextErrors
|
||||
return Object.keys(nextErrors).length === 0
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
submitError.value = ''
|
||||
if (!validate()) return
|
||||
|
||||
status.value = 'submitting'
|
||||
try {
|
||||
// 后续接入 CRM 或官网线索接口时，在此替换为真实请求。
|
||||
await new Promise((resolve) => setTimeout(resolve, 650))
|
||||
status.value = 'success'
|
||||
} catch {
|
||||
status.value = 'error'
|
||||
submitError.value = '暂时无法提交，请稍后重试或通过页脚联系方式咨询。'
|
||||
}
|
||||
}
|
||||
|
||||
function resetAndClose() {
|
||||
status.value = 'idle'
|
||||
errors.value = {}
|
||||
submitError.value = ''
|
||||
closeConsultation()
|
||||
}
|
||||
|
||||
function onKeydown(event) {
|
||||
if (event.key === 'Escape' && isOpen.value) resetAndClose()
|
||||
}
|
||||
|
||||
watch(isOpen, async (open) => {
|
||||
if (!import.meta.client) return
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
if (open) {
|
||||
status.value = 'idle'
|
||||
errors.value = {}
|
||||
await nextTick()
|
||||
nameInput.value?.focus()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown))
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="consultation">
|
||||
<div v-if="isOpen" class="consultation-mask" @mousedown.self="resetAndClose">
|
||||
<section
|
||||
class="consultation-panel"
|
||||
:class="{ 'is-interior': route.path !== '/' }"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="
|
||||
status === 'success' ? 'consultation-success-title' : 'consultation-title'
|
||||
"
|
||||
>
|
||||
<button
|
||||
class="consultation-close"
|
||||
type="button"
|
||||
aria-label="关闭咨询弹窗"
|
||||
@click="resetAndClose"
|
||||
>
|
||||
<AppIcon name="close" />
|
||||
</button>
|
||||
|
||||
<div v-if="status === 'success'" class="consultation-success">
|
||||
<div class="success-mark" aria-hidden="true"><AppIcon name="check" /></div>
|
||||
<p class="modal-kicker">提交成功</p>
|
||||
<h2 id="consultation-success-title">需求已经记录</h2>
|
||||
<p>我们会根据您填写的行业与目标匹配顾问，请保持联系方式畅通。</p>
|
||||
<button class="modal-primary" type="button" @click="resetAndClose">完成</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<header class="consultation-heading">
|
||||
<p class="modal-kicker">1 对 1 增长沟通</p>
|
||||
<h2 id="consultation-title">{{ context.title }}</h2>
|
||||
<p>留下基本信息，我们会结合您的业务阶段提供针对性建议。</p>
|
||||
</header>
|
||||
|
||||
<form
|
||||
ref="formElement"
|
||||
class="consultation-form"
|
||||
novalidate
|
||||
@submit.prevent="submitForm"
|
||||
>
|
||||
<div class="form-grid">
|
||||
<label>
|
||||
<span>姓名 <b>*</b></span>
|
||||
<input
|
||||
ref="nameInput"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
placeholder="怎么称呼您"
|
||||
/>
|
||||
<small v-if="errors.name">{{ errors.name }}</small>
|
||||
</label>
|
||||
<label>
|
||||
<span>公司名称 <b>*</b></span>
|
||||
<input
|
||||
v-model="form.company"
|
||||
type="text"
|
||||
autocomplete="organization"
|
||||
placeholder="请输入公司名称"
|
||||
/>
|
||||
<small v-if="errors.company">{{ errors.company }}</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span>联系方式 <b>*</b></span>
|
||||
<input
|
||||
v-model="form.contact"
|
||||
type="text"
|
||||
autocomplete="tel"
|
||||
placeholder="手机号或工作邮箱"
|
||||
/>
|
||||
<small v-if="errors.contact">{{ errors.contact }}</small>
|
||||
</label>
|
||||
|
||||
<div class="form-grid">
|
||||
<label>
|
||||
<span>所属行业</span>
|
||||
<select v-model="form.industry">
|
||||
<option value="">请选择</option>
|
||||
<option v-for="industry in industries" :key="industry" :value="industry">
|
||||
{{ industry }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>核心需求</span>
|
||||
<select v-model="form.need">
|
||||
<option value="">请选择</option>
|
||||
<option v-for="need in needs" :key="need" :value="need">{{ need }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span>当前问题与目标</span>
|
||||
<textarea
|
||||
v-model="form.message"
|
||||
rows="3"
|
||||
placeholder="例如：希望提升品牌在主流 AI 平台的推荐率"
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<label class="consent-row">
|
||||
<input v-model="form.consent" type="checkbox" />
|
||||
<span>我同意工作人员根据以上信息与我联系，并妥善使用本次咨询信息。</span>
|
||||
</label>
|
||||
<small v-if="errors.consent" class="consent-error">{{ errors.consent }}</small>
|
||||
|
||||
<p v-if="submitError" class="submit-error">{{ submitError }}</p>
|
||||
<p class="source-note">咨询来源：{{ context.source }}</p>
|
||||
|
||||
<button class="modal-primary" type="submit" :disabled="status === 'submitting'">
|
||||
<span v-if="status === 'submitting'" class="submit-dots" aria-hidden="true"
|
||||
><i></i><i></i><i></i
|
||||
></span>
|
||||
<template v-else>提交咨询 <AppIcon name="arrow-right" /></template>
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.consultation-mask {
|
||||
position: fixed;
|
||||
z-index: 80;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(15, 35, 62, 0.48);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.consultation-panel {
|
||||
position: relative;
|
||||
width: min(620px, 100%);
|
||||
max-height: min(820px, calc(100dvh - 48px));
|
||||
overflow-y: auto;
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.74);
|
||||
border-radius: 20px;
|
||||
background:
|
||||
radial-gradient(circle at 88% 8%, rgba(78, 158, 255, 0.16), transparent 31%),
|
||||
rgba(255, 255, 255, 0.98);
|
||||
box-shadow:
|
||||
0 30px 80px rgba(28, 83, 155, 0.24),
|
||||
inset 0 1px 0 #fff;
|
||||
}
|
||||
.consultation-panel.is-interior {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.consultation-close {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
color: #4f647d;
|
||||
background: #edf5ff;
|
||||
}
|
||||
.is-interior .consultation-close {
|
||||
border: 1px solid rgba(72, 139, 219, 0.12);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.consultation-close :deep(.app-icon) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.consultation-heading {
|
||||
padding-right: 38px;
|
||||
}
|
||||
.modal-kicker {
|
||||
margin: 0 0 8px;
|
||||
color: #207bf2;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
.consultation-heading h2,
|
||||
.consultation-success h2 {
|
||||
margin: 0;
|
||||
color: #24364d;
|
||||
font-size: clamp(25px, 4vw, 34px);
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.consultation-heading > p:last-child,
|
||||
.consultation-success > p {
|
||||
max-width: 32em;
|
||||
margin: 12px 0 0;
|
||||
color: #758399;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.consultation-form {
|
||||
display: grid;
|
||||
gap: 17px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
.consultation-form label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
.consultation-form label > span {
|
||||
color: #41536a;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.consultation-form label > span b {
|
||||
color: #2a80ef;
|
||||
}
|
||||
.consultation-form input:not([type='checkbox']),
|
||||
.consultation-form select,
|
||||
.consultation-form textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #dbe7f5;
|
||||
border-radius: 8px;
|
||||
outline: 0;
|
||||
background: rgba(247, 251, 255, 0.82);
|
||||
color: #2f4056;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
.consultation-form input:not([type='checkbox']),
|
||||
.consultation-form select {
|
||||
height: 46px;
|
||||
padding: 0 13px;
|
||||
}
|
||||
.consultation-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 90px;
|
||||
padding: 12px 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.consultation-form input:focus,
|
||||
.consultation-form select:focus,
|
||||
.consultation-form textarea:focus {
|
||||
border-color: #66a8fa;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(43, 128, 239, 0.1);
|
||||
}
|
||||
.consultation-form small,
|
||||
.consent-error,
|
||||
.submit-error {
|
||||
color: #d54b55;
|
||||
font-size: 12px;
|
||||
}
|
||||
.consent-row {
|
||||
grid-template-columns: 18px 1fr;
|
||||
align-items: start;
|
||||
gap: 9px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.consent-row input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 2px 0 0;
|
||||
accent-color: #247df0;
|
||||
}
|
||||
.consent-row span {
|
||||
color: #5f6e81 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.source-note {
|
||||
margin: -4px 0 0;
|
||||
color: #718095;
|
||||
font-size: 12px;
|
||||
}
|
||||
.modal-primary {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: linear-gradient(100deg, #453cff, #00a7ef);
|
||||
box-shadow: 0 12px 24px rgba(35, 111, 231, 0.2);
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s,
|
||||
opacity 0.2s;
|
||||
}
|
||||
.modal-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 30px rgba(35, 111, 231, 0.28);
|
||||
}
|
||||
.modal-primary:active {
|
||||
transform: translateY(1px) scale(0.99);
|
||||
}
|
||||
.modal-primary:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.72;
|
||||
}
|
||||
.submit-dots {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.submit-dots i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation: submit-dot 0.8s infinite alternate;
|
||||
}
|
||||
.submit-dots i:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.submit-dots i:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.consultation-success {
|
||||
min-height: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.consultation-success .modal-primary {
|
||||
max-width: 220px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.success-mark {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, #2a86f5, #65c7f4);
|
||||
box-shadow: 0 16px 30px rgba(45, 131, 239, 0.25);
|
||||
font-size: 30px;
|
||||
}
|
||||
.is-interior .success-mark {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.consultation-enter-active,
|
||||
.consultation-leave-active {
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.consultation-enter-active .consultation-panel,
|
||||
.consultation-leave-active .consultation-panel {
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 0.22s;
|
||||
}
|
||||
.consultation-enter-from,
|
||||
.consultation-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.consultation-enter-from .consultation-panel,
|
||||
.consultation-leave-to .consultation-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(18px) scale(0.98);
|
||||
}
|
||||
@keyframes submit-dot {
|
||||
to {
|
||||
transform: translateY(-4px);
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.consultation-mask {
|
||||
align-items: end;
|
||||
padding: 0;
|
||||
}
|
||||
.consultation-panel {
|
||||
width: 100%;
|
||||
max-height: calc(100dvh - 24px);
|
||||
padding: 32px 20px 24px;
|
||||
border-radius: 22px 22px 0 0;
|
||||
}
|
||||
.consultation-panel.is-interior {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.consultation-close {
|
||||
top: 13px;
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.submit-dots i {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const progress = ref(0)
|
||||
const showBackToTop = ref(false)
|
||||
let observer
|
||||
let frame
|
||||
|
||||
function updateScrollState() {
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop
|
||||
const scrollable = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)
|
||||
progress.value = Math.min(100, Math.max(0, (scrollTop / scrollable) * 100))
|
||||
showBackToTop.value = scrollTop > Math.min(window.innerHeight * 0.72, 620)
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if (frame) return
|
||||
frame = window.requestAnimationFrame(() => {
|
||||
frame = 0
|
||||
updateScrollState()
|
||||
})
|
||||
}
|
||||
|
||||
function prepareSectionReveals() {
|
||||
observer?.disconnect()
|
||||
const page = document.querySelector(
|
||||
'.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .case-detail-page, .insights-page, .article-page'
|
||||
)
|
||||
if (!page || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
page.classList.add('interior-reveal-ready')
|
||||
const sections = [
|
||||
...page.querySelectorAll('main > section, main > article > div, main > article > header')
|
||||
]
|
||||
sections.forEach((section, index) => {
|
||||
section.classList.add('interior-reveal')
|
||||
if (index === 0 || section.getBoundingClientRect().top < window.innerHeight * 0.92) {
|
||||
section.classList.add('is-revealed')
|
||||
}
|
||||
})
|
||||
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) return
|
||||
entry.target.classList.add('is-revealed')
|
||||
observer?.unobserve(entry.target)
|
||||
})
|
||||
},
|
||||
{ rootMargin: '0px 0px -9% 0px', threshold: 0.08 }
|
||||
)
|
||||
|
||||
sections
|
||||
.filter((section) => !section.classList.contains('is-revealed'))
|
||||
.forEach((section) => observer.observe(section))
|
||||
}
|
||||
|
||||
function backToTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
window.addEventListener('resize', onScroll, { passive: true })
|
||||
await nextTick()
|
||||
updateScrollState()
|
||||
prepareSectionReveals()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async () => {
|
||||
await nextTick()
|
||||
updateScrollState()
|
||||
prepareSectionReveals()
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
observer?.disconnect()
|
||||
if (frame) window.cancelAnimationFrame(frame)
|
||||
window.removeEventListener('scroll', onScroll)
|
||||
window.removeEventListener('resize', onScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="reading-progress" aria-hidden="true">
|
||||
<span :style="{ transform: `scaleX(${progress / 100})` }"></span>
|
||||
</div>
|
||||
<Transition name="back-top">
|
||||
<button
|
||||
v-if="showBackToTop"
|
||||
class="back-to-top"
|
||||
type="button"
|
||||
aria-label="回到页面顶部"
|
||||
title="回到顶部"
|
||||
@click="backToTop"
|
||||
>
|
||||
<AppIcon name="bottom" />
|
||||
</button>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.reading-progress {
|
||||
position: fixed;
|
||||
z-index: 45;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.reading-progress span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: linear-gradient(90deg, #166ff3, #62c8f1);
|
||||
box-shadow: 0 1px 8px rgba(27, 124, 240, 0.34);
|
||||
transform-origin: left center;
|
||||
will-change: transform;
|
||||
}
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
z-index: 28;
|
||||
right: clamp(18px, 2.7vw, 42px);
|
||||
bottom: clamp(18px, 3vw, 40px);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(91, 151, 224, 0.22);
|
||||
border-radius: 6px;
|
||||
color: #2379e8;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 14px 34px rgba(37, 94, 160, 0.16);
|
||||
backdrop-filter: blur(14px);
|
||||
transition:
|
||||
color 0.22s ease,
|
||||
background 0.22s ease,
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease;
|
||||
}
|
||||
.back-to-top :deep(.app-icon) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.back-to-top:hover {
|
||||
color: #fff;
|
||||
background: #207bf2;
|
||||
box-shadow: 0 17px 36px rgba(31, 121, 236, 0.25);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.back-to-top:active {
|
||||
transform: translateY(1px) scale(0.97);
|
||||
}
|
||||
.back-top-enter-active,
|
||||
.back-top-leave-active {
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.24s ease;
|
||||
}
|
||||
.back-top-enter-from,
|
||||
.back-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.back-to-top {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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