BigStickNewOfficialWebsite/README.md

大马棒·云途全域 GEO — 官网

独立抽离出的 Nuxt 官网工程，承接原 cloneWeb 中已完成的克隆站点内容，并作为后续新官网的迭代基础。

品牌「大马棒·云途全域 GEO」致力于帮助品牌在 AI 搜索时代建立曝光 → 信任 → 线索 → 转化的全域增长闭环，打造长期可复用的增长资产。

技术栈

类别	技术
框架	Nuxt 4 + Vue 3
语言	JavaScript
样式	Tailwind CSS（通过 @nuxtjs/tailwindcss 模块）
动画	GSAP + ScrollTrigger
内容	数据驱动（data/ 目录集中管理）

项目结构

├── app.vue                      # 入口组件
├── nuxt.config.js               # Nuxt 配置
├── tailwind.config.js           # Tailwind 配置（品牌色、阴影、动画）
├── assets/
│   └── css/
│       └── main.css             # 全局样式 + 组件级工具类
├── components/
│   ├── SiteHeader.vue           # 顶部导航栏
│   ├── SiteFooter.vue           # 页脚
│   ├── WebsiteShell.vue         # 页面布局壳（Header + 公告栏 + Footer + 滚动恢复）
│   ├── AnnouncementBar.vue      # 公告栏
│   ├── AnimatedStat.vue         # 数字动画组件
│   ├── CtaSection.vue           # CTA 咨询区块
│   ├── SectionRouteLinks.vue    # 区块内部导航链接
│   └── sections/                # 首页各区块（按功能拆分）
│       ├── DambangHeroSection.vue
│       ├── ClientLogosSection.vue
│       ├── GeoLoopModelSection.vue
│       ├── AdvantageGridSection.vue
│       ├── CaseGridSection.vue
│       ├── SolutionGridSection.vue
│       ├── ProcessTimelineSection.vue
│       ├── TestimonialsSection.vue
│       ├── StatsSection.vue
│       ├── MetricGridSection.vue
│       ├── PageHeroSection.vue
│       ├── ServiceHeroSection.vue
│       ├── ServiceOverviewSection.vue
│       ├── ServiceModelSection.vue
│       ├── ServiceProblemSection.vue
│       ├── ServiceProcessSection.vue
│       ├── ServiceResultsSection.vue
│       ├── ServiceDirectionSection.vue
│       ├── ServiceDetailSection.vue
│       ├── SolutionMappingSection.vue
│       ├── InsightGridSection.vue
│       ├── BlogSection.vue
│       ├── DetailContentSection.vue
│       ├── CapabilityCompareSection.vue
│       └── RoiSection.vue
├── composables/                 # Vue composables
│   ├── useGsapReveal.js         # GSAP 滚动进入动画
│   └── usePageShellMotion.js    # 页面切换过渡动画
├── data/                        # 结构化内容数据
│   ├── site.js                  # 统一导出入口
│   ├── navigation.js            # 品牌信息、导航、CTA、页脚
│   ├── home.js                  # 首页数据（Hero、数据、案例、流程等）
│   ├── services.js              # 营销增长服务
│   ├── solutions.js             # 行业解决方案
│   ├── cases.js                 # 客户案例
│   ├── advantages.js            # 核心优势
│   ├── insights.js              # 全域营销增长洞察
│   └── about.js                 # 关于我们
├── pages/                       # 页面路由
│   ├── index.vue                # 首页
│   ├── services/
│   │   ├── index.vue            # 服务总览
│   │   └── [slug].vue           # 服务详情
│   ├── solutions/
│   │   ├── index.vue            # 方案总览
│   │   └── [slug].vue           # 方案详情
│   ├── cases/
│   │   ├── index.vue            # 案例列表
│   │   └── [slug].vue           # 案例详情
│   ├── advantages.vue           # 核心优势
│   ├── insights/
│   │   ├── index.vue            # 洞察列表
│   │   └── [slug].vue           # 洞察详情
│   ├── about.vue                # 关于我们
│   └── contact.vue              # 联系我们
├── plugins/
│   └── gsap.client.js           # GSAP 客户端插件注册
├── public/
│   ├── brand/                   # Logo 资源
│   └── images/                  # 图片资源
└── package.json

页面功能

路由	页面	说明
/	首页	Hero、数据统计、GEO 双环模型、核心优势、精选案例、行业方案、交付流程、客户评价、CTA
/services	营销增长服务	服务概览、品牌曝光/精准获客/全域营销详情
/solutions	行业解决方案	按行业定制的 GEO 增长方案（企服、电商、本地生活、职教、医疗等）
/cases	客户案例	真实落地案例展示
/advantages	核心优势	四大核心差异化竞争力
/insights	增长洞察	行业干货、白皮书内容
/about	关于我们	品牌介绍与发展历程
/contact	联系我们	咨询表单入口

品牌设计

• 品牌色: #1bd629（gm-green，活力绿），#005ce6（gm-blue）
• 字体: PingFang SC / Microsoft YaHei 中文优先
• 设计风格: 简洁、专业、数据驱动，强调信任感与品牌力

命令

# 安装依赖
npm install

# 本地开发（默认 http://localhost:3000）
npm run dev

# 生产构建
npm run build

# 预览构建产物
npm run preview

开发说明

• 内容与视图分离：所有文案、数据集中存放在 data/ 目录，组件只管渲染
• 动画系统：GSAP + ScrollTrigger 实现滚动触发动画，通过 composables/useGsapReveal.js 统一管理
• 页面过渡：composables/usePageShellMotion.js 处理页面切换过渡效果
• 布局：WebsiteShell.vue 统一包裹全局导航、公告栏、页脚及滚动恢复逻辑
• 所有页面均适配中文（lang="zh-CN"）