30 lines
2.5 KiB
HTML
30 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><title>Gantt</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>
|
|
.gantt{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
|
|
.gantt .hd{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
|
|
.gantt .row{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;align-items:center;height:40px}
|
|
.gantt .lbl{font-size:14px;font-weight:500}
|
|
.gantt .cells{grid-column:2/-1;position:relative;height:28px;background:linear-gradient(90deg,var(--surface-2) 1px,transparent 1px) 0 0/calc(100%/12) 100%}
|
|
.gantt .bar{position:absolute;top:4px;height:20px;border-radius:6px;background:var(--grad);display:flex;align-items:center;padding:0 10px;font-size:11px;color:#fff;font-weight:600;box-shadow:var(--shadow)}
|
|
</style>
|
|
</head><body class="single">
|
|
<div class="deck"><section class="slide is-active" data-title="Gantt">
|
|
<p class="kicker">Plan · Q2 甘特图</p>
|
|
<h2 class="h2">四个月，五条线并行</h2>
|
|
<div class="gantt">
|
|
<div class="hd"><div>任务</div><div>W1</div><div>W2</div><div>W3</div><div>W4</div><div>W5</div><div>W6</div><div>W7</div><div>W8</div><div>W9</div><div>W10</div><div>W11</div><div>W12</div></div>
|
|
<div class="row"><div class="lbl">主题系统 (tokens)</div><div class="cells"><div class="bar" style="left:0;width:25%">tokens + 24 themes</div></div></div>
|
|
<div class="row"><div class="lbl">layouts 目录</div><div class="cells"><div class="bar" style="left:17%;width:33%">30 个单页模板</div></div></div>
|
|
<div class="row"><div class="lbl">动画系统</div><div class="cells"><div class="bar" style="left:42%;width:25%">25 个命名动效</div></div></div>
|
|
<div class="row"><div class="lbl">渲染 / CI</div><div class="cells"><div class="bar" style="left:58%;width:25%">render.sh</div></div></div>
|
|
<div class="row"><div class="lbl">发布 & 文档</div><div class="cells"><div class="bar" style="left:75%;width:25%">v1.0</div></div></div>
|
|
</div>
|
|
</section></div>
|
|
<script src="../../assets/runtime.js"></script>
|
|
</body></html>
|