BigStickNewOfficialWebsite/README.md

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

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

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

## 技术栈

| 类别 | 技术 |
| --- | --- |
| 框架 | [Nuxt 4](https://nuxt.com/) + [Vue 3](https://vuejs.org/) |
| 语言 | JavaScript |
| 样式 | [Tailwind CSS](https://tailwindcss.com/)（通过 `@nuxtjs/tailwindcss` 模块）|
| 动画 | [GSAP](https://gsap.com/) + ScrollTrigger |
| 内容 | 数据驱动（`data/` 目录集中管理）|

## 项目结构

```text
├── 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 中文优先
- **设计风格**: 简洁、专业、数据驱动，强调信任感与品牌力

## 命令

```bash
# 安装依赖
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"`）