feat：主页主体框架
This commit is contained in:
@@ -6,6 +6,9 @@ node_modules/
|
||||
.output/
|
||||
dist/
|
||||
|
||||
# Local Codex agent skills and instructions
|
||||
.agents/
|
||||
|
||||
# Local environment files
|
||||
.env
|
||||
.env.*
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100
|
||||
}
|
||||
+1080
-5
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div class="section-title">
|
||||
<h2><slot /></h2>
|
||||
<p v-if="$slots.subtitle"><slot name="subtitle" /></p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -9,7 +9,11 @@ defineProps({
|
||||
<button
|
||||
:type="type"
|
||||
class="inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="variant === 'outline' ? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' : 'bg-primary text-white shadow-sm hover:bg-blue-600'"
|
||||
:class="
|
||||
variant === 'outline'
|
||||
? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50'
|
||||
: 'bg-primary text-white shadow-sm hover:bg-blue-600'
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxtjs/tailwindcss'],
|
||||
css: ['~/assets/css/main.css'],
|
||||
vite: {
|
||||
server: {
|
||||
watch: {
|
||||
// `.agents` contains local assistant skills. On Windows, chokidar can
|
||||
// fail while resolving it and cause Nuxt's dev server to restart.
|
||||
ignored: ['**/.agents/**']
|
||||
}
|
||||
}
|
||||
},
|
||||
app: {
|
||||
head: {
|
||||
title: '大马棒 · 云途全域 GEO',
|
||||
|
||||
Generated
+24
@@ -7,11 +7,13 @@
|
||||
"name": "damabang-geo-official-site",
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"gsap": "^3.15.0",
|
||||
"nuxt": "^3.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.9.5",
|
||||
"tailwindcss": "^3.4.17"
|
||||
}
|
||||
},
|
||||
@@ -6681,6 +6683,12 @@
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.15.0",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.15.0.tgz",
|
||||
"integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
|
||||
"license": "Standard 'no charge' license: https://gsap.com/standard-license."
|
||||
},
|
||||
"node_modules/gzip-size": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-7.0.0.tgz",
|
||||
@@ -9580,6 +9588,22 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "3.9.5",
|
||||
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.9.5.tgz",
|
||||
"integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-bytes": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-7.1.0.tgz",
|
||||
|
||||
+6
-2
@@ -3,17 +3,21 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "nuxt dev",
|
||||
"dev": "nuxt dev --host 0.0.0.0",
|
||||
"build": "nuxt build",
|
||||
"preview": "nuxt preview"
|
||||
"preview": "nuxt preview",
|
||||
"format": "prettier --write .",
|
||||
"format:check": "prettier --check ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"gsap": "^3.15.0",
|
||||
"nuxt": "^3.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.9.5",
|
||||
"tailwindcss": "^3.4.17"
|
||||
}
|
||||
}
|
||||
|
||||
+343
-161
@@ -1,247 +1,429 @@
|
||||
<script setup>
|
||||
import Button from '~/components/ui/button/Button.vue'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
|
||||
const consultationOpen = ref(false)
|
||||
const notice = ref('')
|
||||
const pageRoot = ref(null)
|
||||
let animationContext
|
||||
|
||||
const navItems = [
|
||||
{ label: '首页', target: 'home' },
|
||||
{ label: '营销增长服务', target: 'model' },
|
||||
{ label: '行业解决方案', target: 'industry' },
|
||||
{ label: '内容生产服务', target: 'advantages' },
|
||||
{ label: '核心优势', target: 'advantages' },
|
||||
{ label: '案例与媒体资源', target: 'cases' },
|
||||
{ label: '关于我们', target: 'footer' }
|
||||
['首页', 'home'],
|
||||
['营销增长服务', 'model'],
|
||||
['行业解决方案', 'industries'],
|
||||
['开放客户案例平台', 'cases'],
|
||||
['核心优势', 'advantages'],
|
||||
['全球营销增长洞察', 'delivery'],
|
||||
['关于我们', 'footer']
|
||||
]
|
||||
|
||||
const logos = [
|
||||
'Bond',
|
||||
'WaSun',
|
||||
'西西能源',
|
||||
'CIIC',
|
||||
'SUNAC',
|
||||
'B+ WORKS',
|
||||
'Bond',
|
||||
'WaSun',
|
||||
'西西能源',
|
||||
'CIIC',
|
||||
'SUNAC',
|
||||
'B+ WORKS'
|
||||
]
|
||||
const stats = [
|
||||
{ value: '300+', label: '服务客户群体' },
|
||||
{ value: '12+', label: '覆盖行业' },
|
||||
{ value: '126%', label: '客户 AI 搜索曝光提升' },
|
||||
{ value: '65%', label: '客户月均精准线索提升' }
|
||||
['300+', '累计服务客户', '/images/lanhu/slices/home-group100-image26@2x.png'],
|
||||
['12+', '覆盖行业', '/images/lanhu/slices/home-group101-image27@2x.png'],
|
||||
['126%', '客户AI搜索曝光平均提升', '/images/lanhu/slices/home-group102-image28@2x.png'],
|
||||
['65%', '客户转化链路效率平均提升', '/images/lanhu/slices/home-group103-image29@2x.png']
|
||||
]
|
||||
|
||||
const valuePoints = [
|
||||
{ title: '曝光', text: '打造 AI 搜索语境下的品牌信任声望，一次布局长期复用。' },
|
||||
{ title: '获客', text: '从曝光到获客全链路承接，避免流量断层，实现品效协同。' }
|
||||
const corePoints = [
|
||||
['曝光', '打造AI搜索语境下的品牌信任声量，一次布局 长期复用'],
|
||||
['获客', '流量，让每一分投入都有回报 让曝光直接落地为可跟进的精准线索，告别无效']
|
||||
]
|
||||
|
||||
const advantages = [
|
||||
{ title: '全域媒体资源优势', detail: '5000+ 权威官媒 + 10万+ 优质自媒体矩阵', image: '/images/lanhu/slices/home-group37-group70-image5@2x.png' },
|
||||
{ title: '真人内容生产优势', detail: '行业独家 5万真人分布式内容生产网络', image: '/images/lanhu/slices/home-group36-group71-image5@2x.png' },
|
||||
{ title: '全链路闭环优势', detail: '从品牌声量到转化增长，形成全链路业务闭环', image: '/images/lanhu/slices/home-group35-group72-image5@2x.png' },
|
||||
{ title: '全客群定制优势', detail: '覆盖全类型经营主体，一对一专属定制方案', image: '/images/lanhu/slices/home-group34-group74-image5@2x.png' }
|
||||
const advantageCards = [
|
||||
['全域媒体资源优势', '5000+权威官媒+10万+优质自媒体矩阵'],
|
||||
['全链路闭环优势', '行业唯一打通「纯曝光+内容资产沉淀+转化闭环」'],
|
||||
['全客群定制优势', '覆盖全类型经营主体，一对一专属定制专属方案']
|
||||
]
|
||||
|
||||
const cases = [
|
||||
{ category: '企业服务', result: 'AI 搜索全域曝光提升 320%，月均精准线索新增 80+' },
|
||||
{ category: '品牌营销', result: '搜索语境占位提升，建立多渠道权威信任背书' },
|
||||
{ category: '本地生活', result: '内容矩阵联动，带动门店咨询与转化增长' },
|
||||
{ category: '消费品牌', result: '真人内容规模化生产，提升品牌声量与转化' }
|
||||
const caseImages = [
|
||||
'/images/lanhu/slices/home-group90-image15@2x.png',
|
||||
'/images/lanhu/slices/home-group91-image16@2x.png',
|
||||
'/images/lanhu/slices/home-group92-image17@2x.png',
|
||||
'/images/lanhu/slices/home-group93-image18@2x.png'
|
||||
]
|
||||
const industryCards = [
|
||||
[
|
||||
'本地生活',
|
||||
'AI搜索全域曝光提升320%月均精准线索新增80+，持续获得品牌声量与业务线索',
|
||||
'/images/lanhu/slices/home-group34-group74-image5@2x.png'
|
||||
],
|
||||
[
|
||||
'快消',
|
||||
'AI搜索全域曝光提升320%月均精准线索新增80+，让内容价值更快兑现',
|
||||
'/images/lanhu/slices/home-group35-group72-image5@2x.png'
|
||||
],
|
||||
[
|
||||
'美妆',
|
||||
'AI搜索全域曝光提升320%月均精准线索新增80+，建立多渠道信任背书',
|
||||
'/images/lanhu/slices/home-group36-group71-image5@2x.png'
|
||||
]
|
||||
]
|
||||
|
||||
const industries = ['本地生活', '快消', '美妆']
|
||||
|
||||
const deliverySteps = [
|
||||
['需求诊断', '一对一沟通，分析品牌现状与增长目标'],
|
||||
['方案定制', '定制专属 GEO 策略，明确关键节点与节奏'],
|
||||
['内容落地', '真人内容生产 + 媒体资源投放，全程跟进'],
|
||||
['数据优化', '定期复盘数据，动态调整策略，持续提升'],
|
||||
['资产沉淀', '沉淀持续增长的品牌资产，实现长效复用']
|
||||
[
|
||||
'需求诊断',
|
||||
'一对一沟通，分析品牌现状与增长痛点',
|
||||
'/images/lanhu/slices/home-group78-image10@2x.png'
|
||||
],
|
||||
[
|
||||
'方案定制',
|
||||
'定制专属GEO策略，明确交付节点与预期效果',
|
||||
'/images/lanhu/slices/home-group80-group77-image9@2x.png'
|
||||
],
|
||||
[
|
||||
'内容落地',
|
||||
'真人内容生产+媒体矩阵投放，全流程同步进度',
|
||||
'/images/lanhu/slices/home-group86-group76-image8@2x.png'
|
||||
],
|
||||
[
|
||||
'数据优化',
|
||||
'定期数据复盘，动态调整策略，持续优化效果',
|
||||
'/images/lanhu/slices/home-group34-group74-image5@2x.png'
|
||||
],
|
||||
[
|
||||
'资产沉淀',
|
||||
'交付完整内容资产与增长报告，实现长效复用',
|
||||
'/images/lanhu/slices/home-group35-group72-image5@2x.png'
|
||||
]
|
||||
]
|
||||
|
||||
function scrollToSection(id) {
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
|
||||
function openConsultation() {
|
||||
consultationOpen.value = true
|
||||
notice.value = ''
|
||||
}
|
||||
|
||||
function submitConsultation() {
|
||||
consultationOpen.value = false
|
||||
notice.value = '已收到您的咨询，我们将尽快与您联系。'
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !pageRoot.value) return
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
animationContext = gsap.context(() => {
|
||||
const reveal = (targets, trigger, options = {}) => {
|
||||
gsap.from(targets, {
|
||||
autoAlpha: 0,
|
||||
y: 34,
|
||||
duration: 0.72,
|
||||
ease: 'power3.out',
|
||||
stagger: 0.1,
|
||||
clearProps: 'transform,opacity,visibility',
|
||||
scrollTrigger: {
|
||||
trigger,
|
||||
start: 'top 82%',
|
||||
once: true
|
||||
},
|
||||
...options
|
||||
})
|
||||
}
|
||||
|
||||
const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
|
||||
heroTimeline
|
||||
.from('.site-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
|
||||
.from('.hero-copy h1', { autoAlpha: 0, y: 32, duration: 0.7, clearProps: 'all' }, '-=0.12')
|
||||
.from(
|
||||
'.hero-points span',
|
||||
{ autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.09, clearProps: 'all' },
|
||||
'-=0.22'
|
||||
)
|
||||
.from(
|
||||
'.button-row button',
|
||||
{ autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
|
||||
'-=0.12'
|
||||
)
|
||||
|
||||
gsap.to('.hero-art', {
|
||||
scale: 1.025,
|
||||
yPercent: 1,
|
||||
duration: 9,
|
||||
ease: 'sine.inOut',
|
||||
repeat: -1,
|
||||
yoyo: true
|
||||
})
|
||||
|
||||
reveal('.intro-section .section-title', '.intro-section')
|
||||
reveal('.stats-panel .stat-item', '.stats-panel', { y: 26, stagger: 0.12 })
|
||||
reveal('.model-layout .ring', '.model-layout', { x: -24, y: 12, stagger: 0.16 })
|
||||
reveal('.core-value', '.model-layout', { x: 28, y: 0, delay: 0.12 })
|
||||
reveal('.advantages-section .section-title', '.advantages-section')
|
||||
reveal('.lead-advantage', '.lead-advantage')
|
||||
reveal('.advantage-grid article', '.advantage-grid', { y: 24, stagger: 0.12 })
|
||||
reveal('.cases-section .section-title', '.cases-section')
|
||||
reveal('.case-panel article', '.case-panel', { y: 24, stagger: 0.1 })
|
||||
reveal('.industry-grid article', '.industry-grid', { y: 26, stagger: 0.12 })
|
||||
reveal('.delivery-banner', '.delivery-banner', { y: 22 })
|
||||
reveal('.delivery-grid article', '.delivery-grid', { y: 22, stagger: 0.1 })
|
||||
reveal('.testimonial-section .section-title', '.testimonial-section')
|
||||
reveal('.testimonial-track article', '.testimonial-track', { y: 22, stagger: 0.1 })
|
||||
reveal('.cta-content', '.cta-section', { y: 26 })
|
||||
}, pageRoot.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => animationContext?.revert())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="home" class="overflow-hidden bg-white text-ink">
|
||||
<header class="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
|
||||
<div class="mx-auto flex h-11 max-w-[1280px] items-center justify-between px-5">
|
||||
<a href="#home" class="shrink-0">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="大马棒营销咨询集团" class="h-9 w-auto object-contain">
|
||||
</a>
|
||||
<nav class="hidden items-center gap-7 text-xs text-slate-600 xl:flex" aria-label="主导航">
|
||||
<button v-for="(item, index) in navItems" :key="item.target" class="whitespace-nowrap transition hover:text-primary" :class="index === 0 ? 'font-semibold text-primary' : ''" @click="scrollToSection(item.target)">
|
||||
{{ item.label }}
|
||||
<main id="home" ref="pageRoot" class="site-shell">
|
||||
<header class="site-header">
|
||||
<div class="page-width header-inner">
|
||||
<a href="#home" class="brand" aria-label="大马棒首页"
|
||||
><img
|
||||
src="/images/lanhu/slices/home-group114-image33@2x.png"
|
||||
alt="成都大马棒传媒有限公司"
|
||||
/></a>
|
||||
<nav class="desktop-nav" aria-label="主导航">
|
||||
<button
|
||||
v-for="([label, target], index) in navItems"
|
||||
:key="target"
|
||||
:class="{ active: index === 0 }"
|
||||
@click="scrollToSection(target)"
|
||||
>
|
||||
{{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
|
||||
</button>
|
||||
</nav>
|
||||
<Button class="h-6 rounded-full px-3 text-[10px]" @click="openConsultation">登录</Button>
|
||||
<button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="relative isolate h-[372px] overflow-hidden bg-[#f5f9ff]">
|
||||
<img src="/images/lanhu/slices/home-container25-image2@2x.png" alt="" class="pointer-events-none absolute inset-0 z-0 h-full w-full max-w-none object-cover" aria-hidden="true">
|
||||
<div class="relative z-10 mx-auto grid h-full max-w-[1280px] items-center px-8 py-12 sm:grid-cols-[48%_52%] sm:px-[12.65%]">
|
||||
<div class="relative z-10 pt-2">
|
||||
<h1 class="text-[48px] font-bold leading-[1.38] tracking-tight text-ink sm:text-[32px]">
|
||||
<span class="block whitespace-nowrap">大马棒 · 云途全域 GEO</span>
|
||||
<span class="block whitespace-nowrap">让品牌在 AI 时代拥有持续增长力</span>
|
||||
</h1>
|
||||
<div class="mt-4 flex flex-wrap gap-x-3 gap-y-2 text-xs text-slate-600">
|
||||
<span>✓ 5万真人内容生产网络</span>
|
||||
<span>✓ 5000+ 自营资源矩阵</span>
|
||||
<span>✓ 全链路转化闭环</span>
|
||||
</div>
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
<Button class="h-10 rounded-[4px] px-5 text-xs" @click="openConsultation">免费定制 <span class="ml-1">→</span></Button>
|
||||
<Button variant="outline" class="h-10 rounded-[4px] px-5 text-xs" @click="scrollToSection('cases')">查看成功案例</Button>
|
||||
<section class="hero-section">
|
||||
<div class="hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width hero-content">
|
||||
<div class="hero-copy">
|
||||
<h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
|
||||
<p class="hero-points">
|
||||
<span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
|
||||
><span>✓ 全链路转化闭环</span>
|
||||
</p>
|
||||
<div class="button-row">
|
||||
<button class="primary-button" @click="openConsultation">免费定制 <b>→</b></button
|
||||
><button class="outline-button" @click="scrollToSection('cases')">查看成功案例</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="border-y border-slate-100 bg-white py-5">
|
||||
<div class="mx-auto flex max-w-[960px] items-center justify-between gap-5 px-4 text-xs font-semibold text-slate-400 sm:text-sm">
|
||||
<span>and</span><span>WaSun</span><span>企业服务</span><span>CiiC</span><span>SUNX</span><span>品牌营销</span>
|
||||
<section class="logo-strip" aria-label="合作品牌">
|
||||
<div class="logo-track">
|
||||
<span
|
||||
v-for="(logo, index) in logos"
|
||||
:key="`${logo}-${index}`"
|
||||
:class="`logo logo-${index % 6}`"
|
||||
>{{ logo }}</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-[960px] px-4 py-16 text-center">
|
||||
<h2 class="text-2xl font-bold tracking-tight">已服务 <span class="text-primary">300+</span> 全类型经营主体，覆盖 <span class="text-primary">12+</span> 主流行业</h2>
|
||||
<p class="mt-2 text-xs text-muted">We have provided services to over 300 full-spectrum business entities </p>
|
||||
<p class="mt-2 text-xs text-muted">spanning more than a dozen mainstream industry sectors</p>
|
||||
<div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<article v-for="(stat, index) in stats" :key="stat.label" class="rounded-xl bg-gradient-to-br from-white to-blue-50 px-3 py-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
|
||||
<img v-if="index === 0" src="/images/lanhu/slices/home-group37-group70-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
|
||||
<img v-else-if="index === 1" src="/images/lanhu/slices/home-group36-group71-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
|
||||
<div class="text-2xl font-bold text-primary">{{ stat.value }}</div>
|
||||
<div class="mt-1 text-xs text-slate-500">{{ stat.label }}</div>
|
||||
<section class="intro-section page-width">
|
||||
<SectionTitle
|
||||
>已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
|
||||
>主流行业<template #subtitle
|
||||
>We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning More
|
||||
Than A Dozen Mainstream Industry Sectors</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="stats-panel">
|
||||
<article v-for="stat in stats" :key="stat[1]" class="stat-item">
|
||||
<img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
|
||||
><span>{{ stat[1] }}</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="model" class="relative overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#e3f4ff_100%)] py-16">
|
||||
<div class="mx-auto max-w-[960px] px-4 text-center">
|
||||
<h2 class="text-2xl font-bold">独创「<span class="text-primary">GEO双环增长模型</span>」，实现品效协同长效增长</h2>
|
||||
<p class="mt-2 text-xs text-muted">Original “GEO Dual-Ring Growth Model” Delivers Long-term Growth Through Integrated Brand Building And Conversion Performance</p>
|
||||
<div class="mt-8 grid items-center gap-6 md:grid-cols-[1fr_1fr_1.1fr]">
|
||||
<img src="/images/lanhu/slices/home-group80-group83-image11@2x.png" alt="品牌声量增长环" class="mx-auto size-40 object-contain">
|
||||
<img src="/images/lanhu/slices/home-group86-group87-image12@2x.png" alt="转化增长环" class="mx-auto size-40 object-contain">
|
||||
<div class="rounded-xl bg-white/70 p-6 text-left shadow-[0_12px_32px_rgba(48,121,255,0.12)]">
|
||||
<h3 class="font-semibold text-primary">业务核心价值点</h3>
|
||||
<div v-for="point in valuePoints" :key="point.title" class="mt-5 border-b border-slate-200 pb-4 last:border-0 last:pb-0">
|
||||
<h4 class="font-medium text-slate-800">{{ point.title }}</h4>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">{{ point.text }}</p>
|
||||
<section id="model" class="model-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
>独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
|
||||
#subtitle
|
||||
>Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
|
||||
Brand Building And Conversion Performance</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="model-layout">
|
||||
<img
|
||||
class="ring"
|
||||
src="/images/lanhu/slices/home-group80-group83-image11@2x.png"
|
||||
alt="声量资产环"
|
||||
/>
|
||||
<img
|
||||
class="ring"
|
||||
src="/images/lanhu/slices/home-group86-group87-image12@2x.png"
|
||||
alt="获客转化环"
|
||||
/>
|
||||
<div class="core-value">
|
||||
<h3>
|
||||
<img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
|
||||
</h3>
|
||||
<div v-for="point in corePoints" :key="point[0]" class="core-point">
|
||||
<h4><i></i>{{ point[0] }}</h4>
|
||||
<p>{{ point[1] }}</p>
|
||||
</div>
|
||||
<Button class="mt-5" @click="openConsultation">了解业务详情 <span class="ml-1">→</span></Button>
|
||||
<button class="primary-button small" @click="openConsultation">
|
||||
了解业务详情 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="advantages" class="bg-[#edf8ff] py-16">
|
||||
<div class="mx-auto max-w-[960px] px-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-primary">四大核心优势</h2>
|
||||
<p class="mt-2 text-xs text-muted">Four Core Advantages</p>
|
||||
<section id="advantages" class="advantages-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">四大核心</span>优势<template #subtitle
|
||||
>Four Core Advantages</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="lead-advantage">
|
||||
<img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
|
||||
<div>
|
||||
<h3>真人内容生产优势</h3>
|
||||
<p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
|
||||
<p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-9 grid gap-4 sm:grid-cols-2">
|
||||
<article v-for="advantage in advantages" :key="advantage.title" class="flex min-h-36 items-center gap-5 rounded-lg bg-white/85 p-5 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
|
||||
<img :src="advantage.image" alt="" class="size-20 shrink-0 object-contain">
|
||||
<div class="advantage-grid">
|
||||
<article v-for="([title, text], index) in advantageCards" :key="title">
|
||||
<img
|
||||
:src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-semibold text-primary">{{ advantage.title }}</h3>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">{{ advantage.detail }}</p>
|
||||
<h3>{{ title }}</h3>
|
||||
<p><b>核心点：</b>{{ text }}</p>
|
||||
<p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cases" class="relative overflow-hidden py-16">
|
||||
<div class="absolute inset-0 bg-[url('/images/lanhu/slices/home-group75-image7@2x.png')] bg-cover bg-center opacity-45" />
|
||||
<div class="relative mx-auto max-w-[960px] px-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-primary">真实落地成果，见证增长实效</h2>
|
||||
<p class="mt-2 text-xs text-muted">Practical Delivered Results That Demonstrate Tangible Growth Outcomes</p>
|
||||
</div>
|
||||
<div class="mt-9 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<article v-for="(item, index) in cases" :key="item.category" class="overflow-hidden rounded-xl bg-white shadow-[0_10px_24px_rgba(48,121,255,0.12)]">
|
||||
<div class="grid h-28 place-items-center bg-gradient-to-br from-blue-100 via-white to-sky-100">
|
||||
<img :src="advantages[index].image" alt="" class="size-16 object-contain">
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="font-semibold text-slate-800">{{ item.category }}</h3>
|
||||
<p class="mt-2 text-xs leading-5 text-slate-500">{{ item.result }}</p>
|
||||
</div>
|
||||
<section id="cases" class="cases-section">
|
||||
<div class="case-background" aria-hidden="true"></div>
|
||||
<div class="page-width case-content">
|
||||
<SectionTitle
|
||||
><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
|
||||
><template #subtitle
|
||||
>Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="case-panel">
|
||||
<article v-for="(image, index) in caseImages" :key="image">
|
||||
<img :src="image" :alt="`客户案例 ${index + 1}`" />
|
||||
<p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="mt-8 text-center"><Button @click="openConsultation">查看全部案例 <span class="ml-1">→</span></Button></div>
|
||||
<div class="center-action">
|
||||
<button class="primary-button small" @click="openConsultation">
|
||||
查看全部案例 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="industry" class="mx-auto max-w-[960px] px-4 py-16">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold">深耕 <span class="text-primary">12+</span> 行业，定制专属 GEO 增长方案</h2>
|
||||
<p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
|
||||
</div>
|
||||
<div class="mt-9 grid gap-5 md:grid-cols-3">
|
||||
<article v-for="(industry, index) in industries" :key="industry" class="relative overflow-hidden rounded-xl bg-gradient-to-br from-sky-50 via-white to-blue-100 p-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
|
||||
<img :src="advantages[index].image" alt="" class="absolute -right-3 -top-2 size-28 opacity-35">
|
||||
<h3 class="relative text-lg font-semibold text-slate-800">{{ industry }}</h3>
|
||||
<p class="relative mt-4 text-sm leading-6 text-slate-600">为 {{ industry }} 品牌定制 AI 搜索内容策略、媒体资源布局与增长转化方案。</p>
|
||||
<div class="relative mt-5 flex gap-2"><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">内容策略</span><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">全域曝光</span></div>
|
||||
<section id="industries" class="industries-section page-width">
|
||||
<SectionTitle
|
||||
>深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
|
||||
>With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
|
||||
Solutions<br />Tailored To Clients’ Needs</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="industry-grid">
|
||||
<article v-for="card in industryCards" :key="card[0]">
|
||||
<h3>{{ card[0] }}</h3>
|
||||
<img :src="card[2]" alt="" />
|
||||
<div class="quote">“</div>
|
||||
<p>某企业服务客户：<br />{{ card[1] }}</p>
|
||||
<div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-[#eff9ff] py-16">
|
||||
<div class="mx-auto max-w-[960px] px-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold"><span class="text-primary">5步标准化</span>交付流程，透明可控效果可追溯</h2>
|
||||
<p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
|
||||
</div>
|
||||
<div class="mt-9 rounded-xl bg-white/80 p-6 shadow-[0_10px_30px_rgba(48,121,255,0.08)]">
|
||||
<ol class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<li v-for="(step, index) in deliverySteps" :key="step[0]" class="flex gap-4 rounded-lg border border-blue-50 bg-white p-4">
|
||||
<span class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-100 text-sm font-bold text-primary">0{{ index + 1 }}</span>
|
||||
<div><h3 class="font-semibold text-slate-800">{{ step[0] }}</h3><p class="mt-1 text-xs leading-5 text-slate-500">{{ step[1] }}</p></div>
|
||||
</li>
|
||||
</ol>
|
||||
<section id="delivery" class="delivery-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
|
||||
>With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
|
||||
Solutions<br />Tailored To Clients’ Needs</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="delivery-banner"></div>
|
||||
<div class="delivery-grid">
|
||||
<article v-for="step in deliverySteps" :key="step[0]">
|
||||
<img :src="step[2]" alt="" />
|
||||
<div>
|
||||
<h3>{{ step[0] }}：</h3>
|
||||
<p>{{ step[1] }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-[960px] px-4 py-16">
|
||||
<div class="text-center"><h2 class="text-2xl font-bold">客户真实评价，见证<span class="text-primary">服务品质</span></h2><p class="mt-2 text-xs text-muted">Genuine Client Testimonials Attest To Our Service Quality</p></div>
|
||||
<div class="mt-8 grid gap-4 md:grid-cols-3">
|
||||
<blockquote v-for="name in ['企业服务客户', '消费品牌客户', '本地生活客户']" :key="name" class="rounded-xl bg-slate-50 p-6 text-sm leading-7 text-slate-500">
|
||||
<span class="text-3xl font-bold text-blue-200">“</span>通过全域 GEO 布局，我们在 AI 搜索场景中持续获得了更高质量的品牌曝光与业务线索。<footer class="mt-4 font-medium text-slate-700">— {{ name }}</footer>
|
||||
</blockquote>
|
||||
<section class="testimonial-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
>客户真实评价，见证<span class="blue">服务品质</span
|
||||
><template #subtitle
|
||||
>Genuine Client Testimonials Attest To Our Service Quality</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="testimonial-track">
|
||||
<article v-for="index in 5" :key="index">
|
||||
<header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
|
||||
<p>
|
||||
创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative overflow-hidden bg-primary py-14 text-center text-white">
|
||||
<img src="/images/lanhu/slices/home-group105-image31@2x.png" alt="" class="absolute inset-0 size-full object-cover opacity-70">
|
||||
<div class="relative mx-auto max-w-2xl px-4"><h2 class="text-2xl font-bold leading-relaxed">AI 搜索增长风口已至，大马棒 · 云途全域 GEO 助力企业打造品牌双环增长体系</h2><p class="mt-3 text-sm text-blue-50">免费获取 1 对 1 GEO 诊断方案</p><Button class="mt-6 bg-white text-primary hover:bg-slate-100" @click="openConsultation">立即咨询 <span class="ml-1">→</span></Button></div>
|
||||
<section class="cta-section">
|
||||
<div class="cta-art"></div>
|
||||
<div class="cta-content">
|
||||
<h2>AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系</h2>
|
||||
<p>免费获取1对1GEO增长诊断方案</p>
|
||||
<button class="primary-button" @click="openConsultation">立即免费咨询 <b>→</b></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer" class="bg-[#111d24] py-10 text-slate-300">
|
||||
<div class="mx-auto grid max-w-[960px] gap-8 px-4 md:grid-cols-[1.2fr_1fr_auto]">
|
||||
<div><h2 class="text-lg font-bold text-white">成都大马棒传媒有限公司</h2><p class="mt-3 text-sm leading-6 text-slate-400">全域增长咨询与内容营销服务，为品牌构建 AI 时代的持续增长力。</p></div>
|
||||
<div class="text-sm leading-7 text-slate-400"><div>服务热线：132-254-2153</div><div>商务合作：business@damabang.com</div><div>工作时间：周一至周五 09:30 - 18:30</div></div>
|
||||
<div class="grid size-24 place-items-center rounded bg-white/10 text-xs text-slate-400">关注我们<br>获取方案</div>
|
||||
<footer id="footer" class="site-footer">
|
||||
<div class="page-width footer-main">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
|
||||
<div class="footer-links">
|
||||
<div v-for="n in 6" :key="n"><b>快捷导航</b><span>企业定位企业定位企业定位</span></div>
|
||||
</div>
|
||||
<div class="qr"><span>▦</span><span>▦</span><small>公众号 微信二维码</small></div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
备案信息 备案信息 备案信息 版权声明版权声明版权声明 友情链接友情链接友情链接
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div v-if="consultationOpen" class="fixed inset-0 z-40 grid place-items-center bg-slate-950/45 px-4" @click.self="consultationOpen = false">
|
||||
<section class="w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl" role="dialog" aria-modal="true" aria-labelledby="consult-title">
|
||||
<h2 id="consult-title" class="text-lg font-bold text-ink">咨询全域 GEO 方案</h2>
|
||||
<p class="mt-2 text-sm leading-6 text-muted">提交后，我们会为您匹配专属增长方案。</p>
|
||||
<div class="mt-6 flex justify-end gap-3"><Button variant="outline" @click="consultationOpen = false">暂不咨询</Button><Button @click="submitConsultation">提交咨询</Button></div>
|
||||
<div v-if="consultationOpen" class="dialog-mask" @click.self="consultationOpen = false">
|
||||
<section class="consult-dialog" role="dialog" aria-modal="true">
|
||||
<button class="close" aria-label="关闭" @click="consultationOpen = false">×</button>
|
||||
<h2>咨询全域 GEO 方案</h2>
|
||||
<p>提交后，我们会尽快为您匹配专属增长方案。</p>
|
||||
<button class="primary-button" @click="submitConsultation">提交咨询</button>
|
||||
</section>
|
||||
</div>
|
||||
<p v-if="notice" class="fixed bottom-5 left-1/2 z-50 -translate-x-1/2 rounded-full bg-slate-900 px-5 py-3 text-sm text-white shadow-xl" role="status">{{ notice }}</p>
|
||||
<p v-if="notice" class="toast">{{ notice }}</p>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user