# PPT幻灯片HTML模板

生成PPT时使用slideConverter将HTML转为PPTX。以下为7页标准模板。

## 通用规范

- 尺寸：`width: 720pt; height: 405pt`
- 字体：Arial（全平台安全字体）
- 背景：使用Sharp生成渐变PNG，不可使用CSS gradient
- 文本必须包裹在`<p>`/`<h1>`-`<h6>`/`<ul>`/`<ol>`标签内
- 不可在`<span>`上使用margin/padding
- NODE_PATH=/opt/homebrew/lib/node_modules（macOS环境）

## 背景生成脚本

```javascript
const sharp = require('sharp');
async function genBackgrounds(dir) {
  // 封面/结尾：深色渐变
  const dark = `<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="810">
    <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:#0F2B46"/>
    <stop offset="100%" style="stop-color:#1A5C5C"/>
    </linearGradient></defs>
    <rect width="100%" height="100%" fill="url(#g)"/></svg>`;
  await sharp(Buffer.from(dark)).png().toFile(`${dir}/bg-cover.png`);

  // 内容页：浅色渐变
  const light = `<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="810">
    <defs><linearGradient id="g" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#F7F9FC"/>
    <stop offset="100%" style="stop-color:#EDF2F7"/>
    </linearGradient></defs>
    <rect width="100%" height="100%" fill="url(#g)"/></svg>`;
  await sharp(Buffer.from(light)).png().toFile(`${dir}/bg-content.png`);

  // 策略页：深蓝渐变
  const navy = `<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="810">
    <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" style="stop-color:#1A365D"/>
    <stop offset="100%" style="stop-color:#2D4A7A"/>
    </linearGradient></defs>
    <rect width="100%" height="100%" fill="url(#g)"/></svg>`;
  await sharp(Buffer.from(navy)).png().toFile(`${dir}/bg-strategy.png`);
}
```

## Slide 1: 封面

```html
<!DOCTYPE html>
<html><head><style>
html { background: #0F2B46; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex;
  align-items: center; justify-content: center;
  background-image: url('bg-cover.png'); background-size: cover; }
.wrap { text-align: center; }
h1 { color: #FFFFFF; font-size: 36pt; margin: 0 0 12pt; }
h2 { color: #7ECFCF; font-size: 18pt; font-weight: normal; margin: 0 0 30pt; }
p { color: rgba(255,255,255,0.6); font-size: 11pt; margin: 0; }
</style></head>
<body>
<div class="wrap">
  <h1>{{品牌名}} × 高德地图</h1>
  <h2>品牌广告投放方案</h2>
  <p>基于高德DMP人群洞察的精准营销策略 | {{日期}}</p>
</div>
</body></html>
```

## Slide 2: 人群漏斗

```html
<!DOCTYPE html>
<html><head><style>
html { background: #F7F9FC; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex; flex-direction: column;
  background-image: url('bg-content.png'); background-size: cover; }
.header { margin: 28pt 36pt 0; }
h1 { color: #1A365D; font-size: 22pt; margin: 0 0 4pt; }
.sub { color: #718096; font-size: 10pt; margin: 0 0 16pt; }
.funnel { display: flex; margin: 0 36pt; gap: 6pt; }
.fi { flex: 1; text-align: center; padding: 14pt 4pt; border-radius: 6pt; color: #fff; }
.fi h3 { font-size: 18pt; margin: 0; }
.fi p { font-size: 9pt; margin: 2pt 0 0; opacity: 0.9; }
.arrow { display: flex; align-items: center; margin: 4pt 36pt; }
.arrow p { color: #718096; font-size: 9pt; margin: 0; }
.insights { display: flex; margin: 12pt 36pt 0; gap: 12pt; }
.card { flex: 1; padding: 12pt; border-radius: 6pt; border-left: 3pt solid; }
.card h4 { font-size: 10pt; color: #2D3748; margin: 0 0 4pt; }
.card p { font-size: 9pt; color: #4A5568; margin: 0; }
</style></head>
<body>
<div class="header">
  <h1>人群资产全景：5G漏斗洞察</h1>
  <p class="sub">{{品牌名}}在高德平台的用户行为转化路径</p>
</div>
<div class="funnel">
  <div class="fi" style="background:#4299E1"><h3>{{G1人数}}</h3><p>G1 认知</p></div>
  <div class="fi" style="background:#48BB78"><h3>{{G2人数}}</h3><p>G2 兴趣</p></div>
  <div class="fi" style="background:#ED8936"><h3>{{G3人数}}</h3><p>G3 对比</p></div>
  <div class="fi" style="background:#9F7AEA"><h3>{{G4人数}}</h3><p>G4 决策</p></div>
  <div class="fi" style="background:#E53E3E"><h3>{{G5人数}}</h3><p>G5 转化</p></div>
</div>
<div class="arrow"><p>G1到G5总转化率：{{转化率}}%</p></div>
<div class="insights">
  <!-- 动态填充3个最显著洞察卡片 -->
  <div class="card" style="background:#EBF8FF; border-color:#4299E1">
    <h4>{{洞察1标题}}</h4><p>{{洞察1描述}}</p>
  </div>
  <div class="card" style="background:#F0FFF4; border-color:#48BB78">
    <h4>{{洞察2标题}}</h4><p>{{洞察2描述}}</p>
  </div>
  <div class="card" style="background:#FAF5FF; border-color:#9F7AEA">
    <h4>{{洞察3标题}}</h4><p>{{洞察3描述}}</p>
  </div>
</div>
</body></html>
```

## Slide 3: 三大目标人群

```html
<!DOCTYPE html>
<html><head><style>
html { background: #F7F9FC; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex; flex-direction: column;
  background-image: url('bg-content.png'); background-size: cover; }
.header { margin: 28pt 36pt 0; }
h1 { color: #1A365D; font-size: 22pt; margin: 0 0 4pt; }
.sub { color: #718096; font-size: 10pt; margin: 0 0 16pt; }
.cols { display: flex; margin: 0 36pt; gap: 14pt; flex: 1; }
.col { flex: 1; padding: 16pt; border-radius: 8pt; display: flex; flex-direction: column; }
.col h3 { font-size: 13pt; margin: 0 0 8pt; color: #fff; }
.col p { font-size: 9pt; margin: 0 0 5pt; color: rgba(255,255,255,0.9); }
.bottom { margin: 12pt 36pt 20pt; }
.bottom p { font-size: 9pt; color: #4A5568; margin: 0; }
</style></head>
<body>
<div class="header">
  <h1>三大核心目标人群</h1>
  <p class="sub">基于G5高转化人群特征提炼</p>
</div>
<div class="cols">
  <!-- 3列：根据TGI最高的3个维度动态填充 -->
  <div class="col" style="background:#2B6CB0">
    <h3>{{人群1名称}}</h3>
    <p>{{人群1特征1}}</p>
    <p>{{人群1特征2}}</p>
    <p>{{人群1特征3}}</p>
    <p>TGI {{人群1TGI}}</p>
  </div>
  <div class="col" style="background:#2F855A">
    <h3>{{人群2名称}}</h3>
    <p>{{人群2特征1}}</p>
    <p>{{人群2特征2}}</p>
    <p>{{人群2特征3}}</p>
    <p>TGI {{人群2TGI}}</p>
  </div>
  <div class="col" style="background:#9B2C2C">
    <h3>{{人群3名称}}</h3>
    <p>{{人群3特征1}}</p>
    <p>{{人群3特征2}}</p>
    <p>{{人群3特征3}}</p>
    <p>TGI {{人群3TGI}}</p>
  </div>
</div>
<div class="bottom">
  <p>{{人群总结洞察}}</p>
</div>
</body></html>
```

## Slide 4: OAIPL策略

```html
<!DOCTYPE html>
<html><head><style>
html { background: #1A365D; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex; flex-direction: column;
  background-image: url('bg-strategy.png'); background-size: cover; }
.header { margin: 20pt 36pt 0; }
h1 { color: #FFFFFF; font-size: 20pt; margin: 0 0 2pt; }
.sub { color: rgba(255,255,255,0.6); font-size: 9pt; margin: 0 0 10pt; }
.table { margin: 0 36pt; flex: 1; }
.row { display: flex; gap: 1pt; margin-bottom: 1pt; }
.cell { padding: 8pt 8pt; font-size: 9pt; }
.hd { background: rgba(255,255,255,0.15); color: #7ECFCF; font-weight: bold; }
.bd { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }
.c1 { width: 60pt; } .c2 { width: 100pt; } .c3 { width: 130pt; } .c4 { flex: 1; }
.note { margin: 6pt 36pt 14pt; }
.note p { color: rgba(255,255,255,0.5); font-size: 8pt; margin: 0; }
</style></head>
<body>
<div class="header">
  <h1>OAIPL分层投放策略</h1>
  <p class="sub">基于人群行为阶段的差异化触达方案</p>
</div>
<div class="table">
  <!-- 表头 + 5行OAIPL策略，动态填充策略描述 -->
  <div class="row">
    <div class="cell hd c1"><p>阶段</p></div>
    <div class="cell hd c2"><p>目标</p></div>
    <div class="cell hd c3"><p>推荐资源</p></div>
    <div class="cell hd c4"><p>策略</p></div>
  </div>
  <!-- 5行数据，根据品牌特征动态调整策略描述 -->
</div>
<div class="note"><p>{{案例参考}}</p></div>
</body></html>
```

## Slide 5: 资源组合

```html
<!DOCTYPE html>
<html><head><style>
html { background: #F7F9FC; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex; flex-direction: column;
  background-image: url('bg-content.png'); background-size: cover; }
.header { margin: 20pt 36pt 0; }
h1 { color: #1A365D; font-size: 20pt; margin: 0 0 2pt; }
.sub { color: #718096; font-size: 9pt; margin: 0 0 10pt; }
.grid { display: flex; margin: 0 36pt; gap: 8pt; flex-wrap: wrap; }
.item { width: 210pt; padding: 10pt; border-radius: 6pt;
  background: #FFFFFF; border: 1pt solid #E2E8F0; }
.item h3 { font-size: 10pt; color: #1A365D; margin: 0 0 4pt; }
.item p { font-size: 8pt; color: #4A5568; margin: 0 0 2pt; }
.item .hi { color: #E53E3E; font-weight: bold; font-size: 9pt; }
.footer { margin: 8pt 36pt 0; }
.footer p { font-size: 8pt; color: #718096; margin: 0; }
</style></head>
<body>
<div class="header">
  <h1>推荐资源组合</h1>
  <p class="sub">攻守兼备的品牌广告矩阵</p>
</div>
<div class="grid">
  <!-- 6个资源卡片：开屏、顶展+精准通、钻展、导结页、品牌地图、AI圈人 -->
</div>
<div class="footer"><p>{{组合建议}}</p></div>
</body></html>
```

## Slide 6: 预期效果

```html
<!DOCTYPE html>
<html><head><style>
html { background: #F7F9FC; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex; flex-direction: column;
  background-image: url('bg-content.png'); background-size: cover; }
.header { margin: 28pt 36pt 0; }
h1 { color: #1A365D; font-size: 22pt; margin: 0 0 4pt; }
.sub { color: #718096; font-size: 10pt; margin: 0 0 16pt; }
.content { display: flex; margin: 0 36pt; gap: 20pt; flex: 1; }
.left { flex: 1; }
.right { width: 260pt; }
.metric { padding: 12pt 16pt; background: #FFFFFF; border-radius: 8pt;
  margin-bottom: 10pt; border-left: 3pt solid #4299E1; }
.metric h4 { font-size: 10pt; color: #718096; margin: 0 0 3pt; }
.metric p { font-size: 16pt; color: #1A365D; font-weight: bold; margin: 0; }
.strategy { padding: 14pt; background: #1A365D; border-radius: 8pt; color: #FFFFFF; }
.strategy h3 { font-size: 12pt; margin: 0 0 10pt; color: #7ECFCF; }
.strategy p { font-size: 9pt; margin: 0 0 6pt; color: rgba(255,255,255,0.85); }
</style></head>
<body>
<div class="header">
  <h1>预期效果与投放建议</h1>
  <p class="sub">参考高德行业标杆案例</p>
</div>
<div class="content">
  <div class="left">
    <!-- 4个指标卡片：CTR预期、搜索覆盖、竞品截流、到店闭环 -->
  </div>
  <div class="right">
    <div class="strategy">
      <!-- 素材策略 + 投放节奏（基于人群洞察动态生成） -->
    </div>
  </div>
</div>
</body></html>
```

## Slide 7: 结尾

```html
<!DOCTYPE html>
<html><head><style>
html { background: #0F2B46; }
body { width: 720pt; height: 405pt; margin: 0; padding: 0;
  font-family: Arial, sans-serif; display: flex;
  align-items: center; justify-content: center;
  background-image: url('bg-cover.png'); background-size: cover; }
.wrap { text-align: center; }
h1 { color: #FFFFFF; font-size: 30pt; margin: 0 0 16pt; }
p { color: rgba(255,255,255,0.7); font-size: 12pt; margin: 0 0 6pt; }
</style></head>
<body>
<div class="wrap">
  <h1>THANK YOU</h1>
  <p>高德地图广告业务部</p>
  <p>让每一次出行都成为品牌连接的机会</p>
</div>
</body></html>
```

## 构建脚本模板

```javascript
const pptxgen = require('pptxgenjs');
const convertSlide = require('/Users/huangwenwu/.qoderwork/skills/pptx/scripts/slideConverter.js');
const path = require('path');

async function build(slidesDir, outputPath) {
    const pptx = new pptxgen();
    pptx.layout = 'LAYOUT_16x9';
    pptx.author = '高德地图广告业务部';
    pptx.title = '品牌广告投放方案';

    for (let i = 1; i <= 7; i++) {
        await convertSlide(path.join(slidesDir, `slide${i}.html`), pptx);
    }
    await pptx.writeFile({ fileName: outputPath });
}
```

## 注意事项

- `<span>`不可使用margin，用`<div>`包裹代替
- 内容不可溢出body（留0.5"底部margin）
- 颜色方案：深蓝#1A365D、青色#7ECFCF、白色#FFFFFF为主色调
- 运行时需 `NODE_PATH=/opt/homebrew/lib/node_modules`
