140 lines
6.1 KiB
Markdown
140 lines
6.1 KiB
Markdown
# 大马棒·云途全域 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"`）
|