# 销售培训资料 HTML 幻灯片格式

宝锐销售培训资料的标准化 HTML 幻灯片格式。适用于华为管理体系（LTC/铁三角/五看三定等）向诊断原料销售团队的知识传递。

## 设计原则

- **不讲全流程**：只聚焦用户指定的 1-3 个模块，深度展开
- **30%理论 + 70%实战**：每页有华为方法论引用，但重点在宝锐实际案例
- **对比驱动**：❌传统做法 vs ✅华为做法 的并排卡片是最有效的信息传递方式
- **可执行收尾**：最后必须有"本周每人实践一个模块"的行动清单

## HTML 样式规范

- **主题**：深色背景（`#0f1923` / `#1a2733`），蓝色强调（`#3b82f6`），匹配 BIORI BIOTECH 品牌
- **导航**：顶部固定导航栏（logo + 标题），右侧圆点指示器，键盘 ↑↓/jk 翻页
- **布局**：`min-height:100vh` 每页占满视口，`scroll-snap-align:start` 吸附
- **字体**：`-apple-system, 'PingFang SC', 'Microsoft YaHei'`

## 页面结构模板

| 页 | 类型 | 内容 |
|---|------|------|
| 封面 | 居中大字 | 标题 + 副标题 + 日期/部门 |
| 痛点引入 | 三卡片 | "为什么需要这个？"——用销售真实痛点做引子 |
| 理论 | 华为理论框 + 对比卡 | 方法论引用 + 传统vs华为对比 |
| 案例 | 表格/数据 | 用宝锐真实客户（明日达/微未来/天隆等）的CRM数据 |
| 实践 | 行动清单 | 每模块一个可执行动作 + 课堂练习 |
| 收尾 | 一句话总结 | 不超过3句话的概括 |

## 关键组件 CSS 类名

```css
.box-b  /* 蓝色理论框 - 华为方法论引用 */
.box-g  /* 绿色成功框 - 正面案例/结果 */
.box-y  /* 黄色提示框 - 工具/清单/注意事项 */
.compare /* 左右对比卡：.wrong(红色) vs .right(绿色) */
.cards   /* 三列卡片网格 */
.steps   /* 横向步骤条 */
.tag     /* 标签：.tg绿 .ty黄 .tr红 .tb蓝 */
```

## 真实案例嵌入规范

- 案例必须来自宝锐 CRM/ERP 实际数据
- 包含：客户名、销售员、产品、客户原话（带日期）、竞品信息
- 对比卡中的 ❌ 和 ✅ 条目都要有真实 CRM 记录支撑
- 不得编造客户名、金额、对话

## 输出路径

`~/Desktop/Hermes输出-工作类/培训资料/[主题].html`