consult-template/template/index-light.html

<!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>