- 更新页码和进度条宽度 Step 4: 交付 - 保存为 .html；工作区根有 `ai.cursor/` 时 **REQUIRED** **`ai-cursor-doc-output`** - 提醒用户在浏览器中打开预览 ``` ## 2. HTML 骨架 ```html 演示标题

``` ## 3. 配色体系（深色科技风） ```css :root { --bg0: #0a0e1a; /* 主背景 */ --bg1: #101529; /* 渐变终点 */ --bg2: #1a2140; /* 次级背景 */ --fg: #e6edf7; /* 主文字 */ --muted: #8aa0c8; /* 次级文字 */ --accent: #35d3ff; /* 主强调色 · 蓝 */ --accent2: #7b5cff; /* 副强调色 · 紫 */ --warn: #ffb454; /* 警告 · 橙 */ --ok: #5af0a8; /* 正面 · 绿 */ --danger: #ff5f7a; /* 危险 · 红 */ --line: rgba(255,255,255,0.08); --card: rgba(255,255,255,0.04); } ``` 每页 `.slide` 背景使用双层 radial-gradient + linear-gradient 营造光晕效果。 ## 4. 页面类型与布局 ### 4.1 封面页（Cover）居中大标题 + 副标题 + 标签胶囊。用 `.cover` 容器 + `h1` 渐变文字。 ```html

副标题文字

主标题

标签 1标签 2

``` ### 4.2 内容页（双栏）左右两栏，每栏内放 `.card` 卡片，用于对比、并列、图文。 ```html

标题

...

标题

...

``` ### 4.3 数据页（KPI + 表格）上方 KPI 指标行，下方数据表格。 ```html

指标名

...

``` ### 4.4 维度网格页 `.dims` 容器 + `.dim` 卡片，每个维度显示编号 + 名称 + 描述。 ### 4.5 总结/收束页 `.stack` 三栏百分比拆分 + 底部总结框。 ## 5. 组件库 ### 5.1 卡片（.card）基础容器。`.card.tight` 减少内边距。可添加彩色背景和边框： ```html

标签

卡片标题

``` ### 5.2 芯片列表（ul.chips）带发光圆点的列表项。通过 class 切换颜色： | class | 颜色 | 语义 | |-------|------|------| | (默认) | `--accent` 蓝 | 中性信息 | | `.ok` | `--ok` 绿 | 正面 / 新增 | | `.warn` | `--warn` 橙 | 现状 / 警告 | | `.danger` | `--danger` 红 | 风险 / 问题 | | `.purple` | `#b9a8ff` 紫 | 特殊 / AI | ```html

正面要点
现状描述
风险项

``` ### 5.3 药丸标签（.pill）行内胶囊。颜色变体同 chips。 ```html

标签 A 标签 B

``` ### 5.4 KPI 指标（.kpi）大号渐变数字 + 下方说明文字。 ### 5.5 表格（table.m）紧凑暗色表格。`th` 大写字母间距，`td` 可用 `.sf` / `.ok` / `.warn` / `.purple` 着色。 ### 5.6 维度卡片（.dim）带编号的特性卡片。`.dim.ai` 变体使用紫色主题。 ### 5.7 演进行（.evo-row）多列网格行，用于对照表。`.evo-row.head` 作表头，`.mag` 列右对齐。 ### 5.8 栈式百分比（.stack > .col-stack）三等分百分比展示。`.col-stack.a` 绿 / `.b` 蓝 / `.c` 紫。 ## 6. 页面通用结构每页 `

` 内： ```text ┌─ .hdr ─────────────────────────────────────┐ │ .brand (logo + name) .page (标签) │ ├─────────────────────────────────────────────┤ │ h2 标题 │ │ .subtitle 副标题 │ ├─ .content ──────────────────────────────────┤ │ .col .col │ │ .card .card │ │ .card .card │ ├─ .footer ───────────────────────────────────┤ │ 脚注页码 │ ├─ .pbar ─────────────────────────────────────┤ │ │ └─────────────────────────────────────────────┘ ``` ## 7. 翻页 JS ```javascript const slides = document.querySelectorAll('.slide'); let cur = 0; function go(i) { cur = (i + slides.length) % slides.length; slides.forEach((s, k) => s.classList.toggle('active', k === cur)); } document.getElementById('next').onclick = () => go(cur + 1); document.getElementById('prev').onclick = () => go(cur - 1); window.addEventListener('keydown', e => { if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') go(cur + 1); else if (e.key === 'ArrowLeft' || e.key === 'PageUp') go(cur - 1); else if (e.key === 'Home') go(0); else if (e.key === 'End') go(slides.length - 1); }); ``` ## 8. Mermaid 集成有 Mermaid 图表时在 `` 引入 CDN，并在 `