|
|
@@ -12,7 +12,7 @@
|
|
|
<style>
|
|
|
/* 页内补充样式：只用 var(--...)，不新增色值（token 唯一来源纪律） */
|
|
|
body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--font-body); }
|
|
|
-.screen { display:none; flex-direction:column; align-items:center; justify-content:center; width:1280px; height:720px; overflow:hidden; padding:0 40px; }
|
|
|
+.screen { display:none; flex-direction:column; align-items:center; justify-content:center; width:1280px; height:720px; overflow:hidden; padding:0 40px; position:absolute; top:0; left:0; }
|
|
|
.s-wrap { width:100%; max-width:1120px; }
|
|
|
.s-foot-tags { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:14px; }
|
|
|
|
|
|
@@ -62,7 +62,7 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
<body>
|
|
|
|
|
|
<!-- ════ P1 · 封面 ════ -->
|
|
|
-<section class="screen" id="p1">
|
|
|
+<section class="screen" id="p1" data-tl="p1">
|
|
|
<div class="s-wrap" style="text-align:center;">
|
|
|
<div class="s-tag" style="letter-spacing:.3em;">AGENT LEARNING RETROSPECTIVE</div>
|
|
|
<h1 class="s-title" style="font-size:56px; margin:18px 0 8px;">豆子 · 学习复盘报告</h1>
|
|
|
@@ -77,7 +77,7 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P2 · 48h 数据全景 ════ -->
|
|
|
-<section class="screen" id="p2">
|
|
|
+<section class="screen" id="p2" data-tl="p2">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag">全景 · 真实采集数据</div>
|
|
|
<h2 class="s-title">48 小时数据全景</h2>
|
|
|
@@ -117,7 +117,7 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P3 · 交付物墙 ════ -->
|
|
|
-<section class="screen" id="p3">
|
|
|
+<section class="screen" id="p3" data-tl="p3">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag">产出 · 能看见的交付</div>
|
|
|
<h2 class="s-title">交付物墙</h2>
|
|
|
@@ -163,7 +163,7 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P4 · 精选工作时刻线 ════ -->
|
|
|
-<section class="screen" id="p4">
|
|
|
+<section class="screen" id="p4" data-tl="p4">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag">过程 · 时间即证据</div>
|
|
|
<h2 class="s-title">精选工作时刻线</h2>
|
|
|
@@ -210,14 +210,16 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P5 · 过去痛点（第一问） ════ -->
|
|
|
-<section class="screen" id="p5">
|
|
|
+<section class="screen" id="p5" data-tl="p5">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag" style="color:var(--brand-3);">第一问 · 过去</div>
|
|
|
<h2 class="s-title">之前不够原生、不够性感的地方</h2>
|
|
|
<div class="s-body">
|
|
|
<div class="q-block q1">
|
|
|
<div class="q-h">痛点与疑惑</div>
|
|
|
-<div class="q-a">不够落地</div>
|
|
|
+ <div class="q-a"></div>
|
|
|
+
|
|
|
+ <div class="q-ev"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="s-foot-tags">
|
|
|
@@ -227,14 +229,16 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P6 · 两天感受（第二问） ════ -->
|
|
|
-<section class="screen" id="p6">
|
|
|
+<section class="screen" id="p6" data-tl="p6">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag">第二问 · 现在</div>
|
|
|
<h2 class="s-title">这两天的感受与收获</h2>
|
|
|
<div class="s-body">
|
|
|
<div class="q-block q2">
|
|
|
<div class="q-h">具体感受 · 有感觉的项目</div>
|
|
|
-<div class="q-a">更了解的ai底层生态</div>
|
|
|
+ <div class="q-a"></div>
|
|
|
+
|
|
|
+ <div class="q-ev"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="s-foot-tags">
|
|
|
@@ -244,14 +248,16 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P7 · 未来方向（第三问） ════ -->
|
|
|
-<section class="screen" id="p7">
|
|
|
+<section class="screen" id="p7" data-tl="p7">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag" style="color:var(--brand-2);">第三问 · 未来</div>
|
|
|
<h2 class="s-title">想回企业落地或探索的方向</h2>
|
|
|
<div class="s-body">
|
|
|
<div class="q-block q3">
|
|
|
<div class="q-h">未来畅想</div>
|
|
|
-<div class="q-a">需要结合项目落地反向进化系统</div>
|
|
|
+ <div class="q-a"></div>
|
|
|
+
|
|
|
+ <div class="q-ev"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="s-foot-tags">
|
|
|
@@ -261,7 +267,7 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P8 · 数据附录 ════ -->
|
|
|
-<section class="screen" id="p8">
|
|
|
+<section class="screen" id="p8" data-tl="p8">
|
|
|
<div class="s-wrap">
|
|
|
<div class="s-tag">附录 · 可溯源明细</div>
|
|
|
<h2 class="s-title">数据附录</h2>
|
|
|
@@ -368,7 +374,7 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</section>
|
|
|
|
|
|
<!-- ════ P9 · 收口金句 ════ -->
|
|
|
-<section class="screen" id="p9">
|
|
|
+<section class="screen" id="p9" data-tl="p9">
|
|
|
<div class="s-wrap" style="text-align:center;">
|
|
|
<div class="s-tag" style="letter-spacing:.3em;">TAKEAWAY</div>
|
|
|
<div class="quote-line" style="margin-top:28px;">工具会过时，<br>把 AI 用成自己手脚的方法不会。</div>
|
|
|
@@ -376,24 +382,6 @@ body { margin:0; background:var(--bg-0); color:var(--text-1); font-family:var(--
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
-<script src="lib/player/deck.js"></script>
|
|
|
-<script type="application/json" class="deck-config">
|
|
|
-{
|
|
|
- "case": "study-report",
|
|
|
- "page": { "id": "report", "title": "豆子 · 学习复盘报告" },
|
|
|
- "chapters": [
|
|
|
- { "id": "p1", "file": "report.html", "title": "封面" },
|
|
|
- { "id": "p2", "file": "report.html", "title": "48h 数据全景" },
|
|
|
- { "id": "p3", "file": "report.html", "title": "交付物墙" },
|
|
|
- { "id": "p4", "file": "report.html", "title": "时刻线" },
|
|
|
- { "id": "p5", "file": "report.html", "title": "过去痛点" },
|
|
|
- { "id": "p6", "file": "report.html", "title": "两天感受" },
|
|
|
- { "id": "p7", "file": "report.html", "title": "未来方向" },
|
|
|
- { "id": "p8", "file": "report.html", "title": "数据附录" },
|
|
|
- { "id": "p9", "file": "report.html", "title": "收口" }
|
|
|
- ]
|
|
|
-}
|
|
|
-</script>
|
|
|
<script>
|
|
|
window.SCREEN_TIMELINES = window.SCREEN_TIMELINES || {};
|
|
|
function baseCtx(el) {
|
|
|
@@ -482,36 +470,94 @@ SCREEN_TIMELINES['p9'] = function(ctx) {
|
|
|
return tl;
|
|
|
};
|
|
|
</script>
|
|
|
+<style>
|
|
|
+/* 导航控制条 */
|
|
|
+.deck-nav { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; z-index:9999; background:var(--bg-2); border:1px solid var(--border-subtle); border-radius:24px; padding:6px 12px; box-shadow:0 2px 12px rgba(0,0,0,.12); }
|
|
|
+.deck-nav button { background:none; border:1px solid var(--border-subtle); border-radius:18px; width:32px; height:32px; font-size:16px; color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
|
|
|
+.deck-nav button:hover { background:var(--brand-1); color:#fff; border-color:var(--brand-1); }
|
|
|
+.deck-nav .deck-dots { display:flex; gap:5px; margin:0 6px; }
|
|
|
+.deck-nav .deck-dot { width:8px; height:8px; border-radius:50%; background:var(--border-subtle); cursor:pointer; transition:all .2s; }
|
|
|
+.deck-nav .deck-dot.active { background:var(--brand-1); width:20px; border-radius:4px; }
|
|
|
+.deck-nav .deck-page { font:600 12px var(--font-mono); color:var(--text-3); margin:0 4px; }
|
|
|
+</style>
|
|
|
+<div class="deck-nav" id="deckNav">
|
|
|
+ <button id="navPrev" title="上一页">←</button>
|
|
|
+ <div class="deck-dots" id="navDots"></div>
|
|
|
+ <span class="deck-page" id="navPage">1 / 9</span>
|
|
|
+ <button id="navNext" title="下一页">→</button>
|
|
|
+</div>
|
|
|
<script>
|
|
|
(function(){
|
|
|
var played = {};
|
|
|
+ var order = ['p1','p2','p3','p4','p5','p6','p7','p8','p9'];
|
|
|
+ var titles = ['封面','48h 数据全景','交付物墙','时刻线','过去痛点','两天感受','未来方向','数据附录','收口'];
|
|
|
+
|
|
|
function show(hash){
|
|
|
if(!hash) hash = 'p1';
|
|
|
document.querySelectorAll('.screen').forEach(function(s){
|
|
|
s.style.display = (s.id === hash) ? 'flex' : 'none';
|
|
|
});
|
|
|
+ /* 确保内容可见（防 GSAP autoAlpha 残留） */
|
|
|
+ var el = document.getElementById(hash);
|
|
|
+ if(el){
|
|
|
+ el.style.visibility = 'visible';
|
|
|
+ el.style.opacity = '1';
|
|
|
+ var wraps = el.querySelectorAll('.s-wrap, .s-tag, .s-title, .s-sub, .stat, .w-card, .tl-item, .q-block, .tbl tbody tr, .s-foot-tags .tag, .quote-line, .dist-row');
|
|
|
+ wraps.forEach(function(w){
|
|
|
+ w.style.visibility = 'visible';
|
|
|
+ w.style.opacity = '1';
|
|
|
+ });
|
|
|
+ }
|
|
|
if(!played[hash] && typeof gsap !== 'undefined'){
|
|
|
played[hash] = true;
|
|
|
var fn = window.SCREEN_TIMELINES[hash];
|
|
|
- var el = document.getElementById(hash);
|
|
|
if(fn && el) fn(baseCtx(el));
|
|
|
}
|
|
|
+ updateNav(hash);
|
|
|
}
|
|
|
- /* 键盘翻页（本报告为单文件九屏，轻量自管；deck.js 兼容单 .screen 模式不冲突） */
|
|
|
- var order = ['p1','p2','p3','p4','p5','p6','p7','p8','p9'];
|
|
|
+
|
|
|
+ function updateNav(hash){
|
|
|
+ var idx = order.indexOf(hash);
|
|
|
+ if(idx < 0) idx = 0;
|
|
|
+ document.getElementById('navPage').textContent = (idx + 1) + ' / ' + order.length;
|
|
|
+ document.getElementById('navPrev').disabled = (idx === 0);
|
|
|
+ document.getElementById('navNext').disabled = (idx === order.length - 1);
|
|
|
+ document.querySelectorAll('.deck-dot').forEach(function(d, i){
|
|
|
+ d.classList.toggle('active', i === idx);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
function step(dir){
|
|
|
var cur = order.indexOf((location.hash || '#p1').slice(1));
|
|
|
+ if(cur < 0) cur = 0;
|
|
|
var next = Math.min(order.length - 1, Math.max(0, cur + dir));
|
|
|
location.hash = '#' + order[next];
|
|
|
}
|
|
|
+
|
|
|
+ /* 构建导航点 */
|
|
|
+ var dotsContainer = document.getElementById('navDots');
|
|
|
+ order.forEach(function(id, i){
|
|
|
+ var dot = document.createElement('div');
|
|
|
+ dot.className = 'deck-dot';
|
|
|
+ dot.title = titles[i];
|
|
|
+ dot.addEventListener('click', function(){ location.hash = '#' + id; });
|
|
|
+ dotsContainer.appendChild(dot);
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 事件绑定 */
|
|
|
+ document.getElementById('navPrev').addEventListener('click', function(){ step(-1); });
|
|
|
+ document.getElementById('navNext').addEventListener('click', function(){ step(1); });
|
|
|
window.addEventListener('hashchange', function(){ show(location.hash.slice(1)); });
|
|
|
window.addEventListener('keydown', function(e){
|
|
|
if(['ArrowDown','ArrowRight','PageDown',' '].includes(e.key)) { e.preventDefault(); step(1); }
|
|
|
if(['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); step(-1); }
|
|
|
});
|
|
|
- if(document.readyState === 'loading'){
|
|
|
- document.addEventListener('DOMContentLoaded', function(){ show(location.hash.slice(1) || 'p1'); });
|
|
|
- } else { show(location.hash.slice(1) || 'p1'); }
|
|
|
+
|
|
|
+ /* 启动 */
|
|
|
+ var initHash = location.hash.slice(1) || 'p1';
|
|
|
+ if(!order.includes(initHash)) initHash = 'p1';
|
|
|
+ location.hash = '#' + initHash;
|
|
|
+ show(initHash);
|
|
|
})();
|
|
|
</script>
|
|
|
</body>
|
