|
|
@@ -0,0 +1,246 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>提案标题 · 客户名</title>
|
|
|
+<link rel="stylesheet" href="../shared/design-system-light.css">
|
|
|
+<style>
|
|
|
+/* 本文件中的样式是对 design-system-light.css token 的组合,不新增色值 */
|
|
|
+body { margin:0; font-family: var(--font-body); background: var(--bg-0); color: var(--text-1); overflow: hidden; }
|
|
|
+.deck { width:100%; height:100vh; }
|
|
|
+.chapter-bar { position:fixed; top:0; left:0; right:0; height:44px; background:var(--bg-0); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 24px; z-index:100; font-size:0.8rem; }
|
|
|
+.ch-item { cursor:pointer; color:var(--text-3); padding:4px 8px; border-radius:var(--radius-sm); }
|
|
|
+.ch-item.active,.ch-item:hover { color:var(--primary-dark); background:var(--primary-subtle); }
|
|
|
+.ch-sep { color:var(--border-strong); }
|
|
|
+main.deck { padding-top:44px; height:calc(100vh - 44px); overflow-y: scroll; scroll-snap-type: y proximity; }
|
|
|
+section.report-section, section.cover-slide, section.chapter-divider { min-height: calc(100vh - 44px); scroll-snap-align: start; }
|
|
|
+/* Cover */
|
|
|
+.cover-slide { background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-0) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 40px; text-align:center; }
|
|
|
+.cover-slide .eyebrow { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; color:var(--primary-dark); text-transform:uppercase; margin-bottom:16px; }
|
|
|
+.cover-slide .hero-title { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:900; line-height:1.1; margin:0 0 24px; color:var(--text-1); }
|
|
|
+.cover-slide .subtitle { font-size:clamp(1rem,1.5vw,1.2rem); color:var(--text-2); max-width:600px; margin:0 auto 40px; line-height:1.6; }
|
|
|
+.cover-stats { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
|
|
|
+.cover-stat { text-align:center; }
|
|
|
+.cover-stat .num { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:900; color:var(--primary-dark); }
|
|
|
+.cover-stat .lbl { font-size:0.8rem; color:var(--text-3); margin-top:4px; }
|
|
|
+/* Report section */
|
|
|
+.report-section { padding:80px 40px; background:var(--bg-0); }
|
|
|
+.section-inner { max-width:1100px; margin:0 auto; }
|
|
|
+.section-eyebrow { font-size:0.75rem; font-weight:700; letter-spacing:0.12em; color:var(--primary-dark); text-transform:uppercase; margin-bottom:12px; }
|
|
|
+.section-title { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; margin:0 0 16px; }
|
|
|
+.section-sub { font-size:clamp(0.9rem,1.2vw,1rem); color:var(--text-2); max-width:700px; line-height:1.75; margin-bottom:40px; }
|
|
|
+.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:32px; }
|
|
|
+.card { background:var(--bg-1); border-radius:var(--radius-md); padding:24px; border:1px solid var(--border); }
|
|
|
+.card .k { font-weight:700; font-size:1rem; margin-bottom:8px; color:var(--text-1); }
|
|
|
+.card .v { font-size:0.9rem; color:var(--text-2); line-height:1.6; }
|
|
|
+/* Chapter divider */
|
|
|
+.chapter-divider { background:var(--text-1); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 40px; }
|
|
|
+.chapter-divider .ch-num { font-size:0.75rem; font-weight:700; letter-spacing:0.2em; color:var(--primary); text-transform:uppercase; margin-bottom:16px; }
|
|
|
+.chapter-divider h2 { font-size:clamp(2rem,4vw,3.5rem); font-weight:900; margin:0; }
|
|
|
+/* Bottom nav */
|
|
|
+.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:48px; background:var(--bg-0); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; z-index:100; }
|
|
|
+.bottom-nav button { background:none; border:none; cursor:pointer; color:var(--text-2); font-size:0.85rem; padding:6px 12px; border-radius:var(--radius-sm); }
|
|
|
+.bottom-nav button:hover { background:var(--bg-1); color:var(--text-1); }
|
|
|
+#progress-line { position:fixed; bottom:48px; left:0; height:2px; background:var(--primary); transition:width 0.3s; z-index:101; }
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="chapter-bar" id="chapterBar">
|
|
|
+ <span class="ch-item active" data-ch="0">封面</span>
|
|
|
+ <span class="ch-sep">|</span>
|
|
|
+ <span class="ch-item" data-ch="1">现状诊断</span>
|
|
|
+ <span class="ch-sep">|</span>
|
|
|
+ <span class="ch-item" data-ch="2">价值路径</span>
|
|
|
+ <span class="ch-sep">|</span>
|
|
|
+ <span class="ch-item" data-ch="3">行动建议</span>
|
|
|
+</div>
|
|
|
+
|
|
|
+<main class="deck" id="deck">
|
|
|
+
|
|
|
+ <!-- 封面 -->
|
|
|
+ <section class="cover-slide" id="ch0">
|
|
|
+ <div class="eyebrow">AI 落地咨询 · Fmode 团队</div>
|
|
|
+ <h1 class="hero-title">客户名称<br>AI 就绪度评估与<br>价值路径规划</h1>
|
|
|
+ <p class="subtitle">基于深度访谈与数据分析,识别 AI 落地的最高价值入口</p>
|
|
|
+ <div class="cover-stats">
|
|
|
+ <div class="cover-stat">
|
|
|
+ <div class="num" data-count="5" data-suffix="+">0+</div>
|
|
|
+ <div class="lbl">深度访谈</div>
|
|
|
+ </div>
|
|
|
+ <div class="cover-stat">
|
|
|
+ <div class="num" data-count="3" data-suffix="个">0个</div>
|
|
|
+ <div class="lbl">P0 优先场景</div>
|
|
|
+ </div>
|
|
|
+ <div class="cover-stat">
|
|
|
+ <div class="num" data-count="90" data-suffix="天">0天</div>
|
|
|
+ <div class="lbl">陪跑计划</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 章节分隔 -->
|
|
|
+ <section class="chapter-divider" id="ch1-div">
|
|
|
+ <div class="ch-num">01</div>
|
|
|
+ <h2>现状诊断</h2>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 诊断内容 -->
|
|
|
+ <section class="report-section" id="ch1">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-eyebrow">Diagnosis</div>
|
|
|
+ <h2 class="section-title">核心挑战与机会</h2>
|
|
|
+ <p class="section-sub">基于访谈洞察,识别三个核心卡点与对应机会。每个建议均有访谈原话支撑。</p>
|
|
|
+ <div class="cards-grid">
|
|
|
+ <div class="card">
|
|
|
+ <div class="k" style="color:var(--qw1-rose)">卡点 01</div>
|
|
|
+ <div class="v">「这里填写客户原话」——受访者角色,访谈日期<br><br>核心问题:...</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="k" style="color:var(--qw1-rose)">卡点 02</div>
|
|
|
+ <div class="v">「这里填写客户原话」——受访者角色,访谈日期<br><br>核心问题:...</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="k" style="color:var(--df-blue)">机会 01</div>
|
|
|
+ <div class="v">核心机会描述...<br><br>价值潜力:高 / 实施难度:低</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 价值路径 -->
|
|
|
+ <section class="chapter-divider" id="ch2-div">
|
|
|
+ <div class="ch-num">02</div>
|
|
|
+ <h2>价值路径</h2>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="report-section" id="ch2">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-eyebrow">Value Path</div>
|
|
|
+ <h2 class="section-title">90 天价值路径</h2>
|
|
|
+ <p class="section-sub">M1 打底 → M2 规模化 → M3 系统化。每个里程碑有明确 OKR 与成功标准。</p>
|
|
|
+ <div class="cards-grid">
|
|
|
+ <div class="card">
|
|
|
+ <div class="k" style="color:var(--qw2-teal)">M1 · 打底期</div>
|
|
|
+ <div class="v">目标:1 个 AI 工作流在生产运行<br>关键任务:...<br>成功标准:...</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="k" style="color:var(--df-blue)">M2 · 规模化期</div>
|
|
|
+ <div class="v">目标:3 个场景稳定运行<br>关键任务:...<br>成功标准:...</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="k" style="color:var(--qw3-green)">M3 · 系统化期</div>
|
|
|
+ <div class="v">目标:交付评估报告 + 下步规划<br>关键任务:...<br>成功标准:...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 行动建议 -->
|
|
|
+ <section class="chapter-divider" id="ch3-div">
|
|
|
+ <div class="ch-num">03</div>
|
|
|
+ <h2>行动建议</h2>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="report-section" id="ch3">
|
|
|
+ <div class="section-inner">
|
|
|
+ <div class="section-eyebrow">Next Steps</div>
|
|
|
+ <h2 class="section-title">本周就能启动的三件事</h2>
|
|
|
+ <p class="section-sub">Quick Win 路径:最小成本验证 AI 价值,建立团队信心,然后推动规模化。</p>
|
|
|
+ <div class="cards-grid">
|
|
|
+ <div class="card">
|
|
|
+ <div class="k">第一步</div>
|
|
|
+ <div class="v">具体行动描述...<br>负责人:<br>完成时间:</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="k">第二步</div>
|
|
|
+ <div class="v">具体行动描述...<br>负责人:<br>完成时间:</div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="k">第三步</div>
|
|
|
+ <div class="v">具体行动描述...<br>负责人:<br>完成时间:</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+</main>
|
|
|
+
|
|
|
+<div class="bottom-nav">
|
|
|
+ <button onclick="navPrev()">← 上一章</button>
|
|
|
+ <div style="font-size:0.8rem;color:var(--text-3)" id="bn-info">封面 · 1/8</div>
|
|
|
+ <button onclick="navNext()">下一章 →</button>
|
|
|
+</div>
|
|
|
+<div id="progress-line" style="width:0%"></div>
|
|
|
+
|
|
|
+<script src="../shared/canvas-scale.js"></script>
|
|
|
+<script>
|
|
|
+// Sections and chapter navigation
|
|
|
+const sections = Array.from(document.querySelectorAll('section'));
|
|
|
+const chItems = document.querySelectorAll('.ch-item');
|
|
|
+const deck = document.getElementById('deck');
|
|
|
+const progressLine = document.getElementById('progress-line');
|
|
|
+const bnInfo = document.getElementById('bn-info');
|
|
|
+
|
|
|
+function updateNav() {
|
|
|
+ const scrollTop = deck.scrollTop;
|
|
|
+ const total = deck.scrollHeight - deck.clientHeight;
|
|
|
+ const pct = total > 0 ? (scrollTop / total * 100).toFixed(1) : 0;
|
|
|
+ progressLine.style.width = pct + '%';
|
|
|
+
|
|
|
+ // Find active section
|
|
|
+ let active = 0;
|
|
|
+ sections.forEach((s, i) => {
|
|
|
+ if (s.offsetTop - deck.scrollTop <= deck.clientHeight / 2) active = i;
|
|
|
+ });
|
|
|
+ bnInfo.textContent = (sections[active] ? sections[active].querySelector('h1,h2')?.textContent?.slice(0,12) || '' : '') + ' · ' + (active+1) + '/' + sections.length;
|
|
|
+}
|
|
|
+
|
|
|
+deck.addEventListener('scroll', updateNav);
|
|
|
+
|
|
|
+// Counter animation
|
|
|
+document.querySelectorAll('[data-count]').forEach(el => {
|
|
|
+ const target = parseInt(el.dataset.count);
|
|
|
+ const suffix = el.dataset.suffix || '';
|
|
|
+ let start = null;
|
|
|
+ const obs = new IntersectionObserver(entries => {
|
|
|
+ if (entries[0].isIntersecting) {
|
|
|
+ const animate = (ts) => {
|
|
|
+ if (!start) start = ts;
|
|
|
+ const prog = Math.min((ts - start) / 1000, 1);
|
|
|
+ el.textContent = Math.floor(prog * target) + suffix;
|
|
|
+ if (prog < 1) requestAnimationFrame(animate);
|
|
|
+ };
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+ obs.disconnect();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ obs.observe(el);
|
|
|
+});
|
|
|
+
|
|
|
+// Chapter navigation via bar
|
|
|
+chItems.forEach(item => {
|
|
|
+ item.addEventListener('click', () => {
|
|
|
+ const ch = item.dataset.ch;
|
|
|
+ const target = document.getElementById(`ch${ch}`);
|
|
|
+ if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+function navNext() {
|
|
|
+ const scrollTop = deck.scrollTop;
|
|
|
+ for (const s of sections) {
|
|
|
+ if (s.offsetTop > scrollTop + 10) { s.scrollIntoView({ behavior: 'smooth' }); break; }
|
|
|
+ }
|
|
|
+}
|
|
|
+function navPrev() {
|
|
|
+ const scrollTop = deck.scrollTop;
|
|
|
+ for (let i = sections.length - 1; i >= 0; i--) {
|
|
|
+ if (sections[i].offsetTop < scrollTop - 10) { sections[i].scrollIntoView({ behavior: 'smooth' }); break; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+updateNav();
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|