← → SPACE 01 / 20
const deckEl = document.getElementById('deck'); const srcEl = document.getElementById('slides-src'); const templates = srcEl.querySelectorAll('template[data-slide]'); templates.forEach(t => { deckEl.appendChild(t.content.cloneNode(true)); }); // --- Scale stage --- function fit() { const vv = window.visualViewport; const w = vv ? vv.width : window.innerWidth; const h = vv ? vv.height : window.innerHeight; const s = Math.min(w / 1920, h / 1080); deckEl.style.transform = `scale(${s})`; } window.addEventListener('resize', fit); window.addEventListener('orientationchange', () => { // 手机旋转后，浏览器内部 viewport 尺寸有延迟，需多次重算 setTimeout(fit, 50); setTimeout(fit, 250); setTimeout(fit, 600); }); if (window.visualViewport) { window.visualViewport.addEventListener('resize', fit); } // 页面从后台恢复时（如切回 tab / 解锁手机）重新适配 document.addEventListener('visibilitychange', () => { if (!document.hidden) requestAnimationFrame(fit); }); requestAnimationFrame(fit); fit(); // --- Nav --- const slides = Array.from(deckEl.querySelectorAll('section.slide')); const total = slides.length; document.getElementById('tot').textContent = String(total).padStart(2,'0'); // dots const dots = document.getElementById('dots'); slides.forEach((_, i) => { const b = document.createElement('b'); b.addEventListener('click', () => go(i)); dots.appendChild(b); }); let idx = parseInt(localStorage.getItem('vs-deck-idx') || '0', 10); if (isNaN(idx) || idx < 0 || idx >= total) idx = 0; function render() { slides.forEach((s, i) => s.classList.toggle('active', i === idx)); document.querySelectorAll('#dots b').forEach((d, i) => d.classList.toggle('cur', i === idx)); document.getElementById('cur').textContent = String(idx+1).padStart(2,'0'); document.getElementById('progress').style.width = ((idx+1)/total*100) + '%'; localStorage.setItem('vs-deck-idx', idx); try { window.parent && window.parent.postMessage({slideIndexChanged: idx}, '*'); } catch(e){} } function go(n) { idx = Math.max(0, Math.min(total-1, n)); render(); } window.addEventListener('keydown', e => { if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { go(idx+1); e.preventDefault(); } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { go(idx-1); e.preventDefault(); } else if (e.key === 'Home') go(0); else if (e.key === 'End') go(total-1); }); let wheelLock = 0; window.addEventListener('wheel', e => { const now = Date.now(); if (now - wheelLock < 700) return; if (Math.abs(e.deltaY) < 20) return; wheelLock = now; go(idx + (e.deltaY > 0 ? 1 : -1)); }, { passive: true }); render();
VisionStone · 路演版

请横屏观看

⟲

本版本以 1920 × 1080 比例设计，竖屏无法正常显示。

请将手机旋转到横屏模式。

或在手机上使用详读版 →