48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><title>Comparison</title>
|
|
<link rel="stylesheet" href="../../assets/fonts.css">
|
|
<link rel="stylesheet" href="../../assets/base.css">
|
|
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
|
|
<link rel="stylesheet" href="../../assets/animations/animations.css">
|
|
<style>
|
|
.vs{display:grid;grid-template-columns:1fr 90px 1fr;gap:28px;align-items:stretch;margin-top:30px}
|
|
.vs .side{padding:30px}
|
|
.vs .mid{font-size:56px;font-weight:800;color:var(--text-3);display:flex;align-items:center;justify-content:center}
|
|
.vs .bad-side{border-top:3px solid var(--bad)}
|
|
.vs .good-side{border-top:3px solid var(--good)}
|
|
.vs h3{font-size:24px}
|
|
.vs ul{padding-left:20px;font-size:15px;line-height:1.8;color:var(--text-2)}
|
|
.vs li::marker{color:var(--bad)}
|
|
.vs .good-side li::marker{color:var(--good)}
|
|
</style>
|
|
</head><body class="single">
|
|
<div class="deck"><section class="slide is-active" data-title="Comparison">
|
|
<p class="kicker">Before vs After · 对比</p>
|
|
<h2 class="h2">从「每次重做」到「一键起稿」</h2>
|
|
<div class="vs">
|
|
<div class="card bad-side side anim-fade-left" data-anim="fade-left">
|
|
<h3>📉 过去</h3>
|
|
<ul>
|
|
<li>每次都要重新做封面、目录、结语</li>
|
|
<li>颜色、字号跨 slide 不一致</li>
|
|
<li>想换主题？手动改每一页</li>
|
|
<li>动效全靠 transition 硬写</li>
|
|
<li>截图导出还要一张一张截</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mid">→</div>
|
|
<div class="card good-side side anim-fade-right" data-anim="fade-right">
|
|
<h3>📈 现在</h3>
|
|
<ul>
|
|
<li>复制模板、换数据、完事</li>
|
|
<li>所有页共享 tokens</li>
|
|
<li>按 <b>T</b> 循环切主题</li>
|
|
<li>25 个命名动效直接挑</li>
|
|
<li>一条 render.sh 全部出图</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section></div>
|
|
<script src="../../assets/runtime.js"></script>
|
|
</body></html>
|