Files
stack/design-refs/mockup/design-system/02-symbols.html
T

315 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>设计系统 · 02 符号形状 · stack idealjs</title>
<style>
@page { size: 1280px 800px; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; width: 1280px; background: #f0f0ef;
font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
color: #1a1a1a; -webkit-font-smoothing: antialiased;
}
.page { width: 1280px; height: 800px; position: relative; background: #f0f0ef; overflow: hidden; page-break-after: always; }
.page:last-child { page-break-after: auto; }
@media screen {
html { height: auto; display: flex; justify-content: center; background: #f0f0ef; }
body { transform-origin: top center; scale: min(1, calc(100vw / 1280px)); margin: 0 auto; box-shadow: 0 0 48px rgba(15, 23, 42, 0.18); }
}
.pagenum { position: absolute; bottom: 26px; right: 40px; font-size: 13px; color: #8a8a8a; letter-spacing: 2px; }
.footline { position: absolute; bottom: 26px; left: 40px; font-size: 13px; color: #8a8a8a; letter-spacing: 1px; }
.story-head { position: absolute; top: 36px; left: 40px; right: 40px; }
.story-head .tag {
display: inline-block; font-size: 15px; font-weight: 700; color: #6d28d9;
background: #efe6fb; border-radius: 8px; padding: 3px 12px;
font-family: "DejaVu Sans Mono", "Noto Sans CJK SC", monospace;
}
.story-head h2 { margin: 8px 0 4px; font-size: 28px; font-weight: 800; color: #1a1a1a; }
.story-head .desc { font-size: 14.5px; color: #6b6b6b; }
.canvas { background: #fbfbfa; border: 1px dashed #cfcfcd; border-radius: 18px; padding: 20px 22px; position: absolute; }
.panel { background: #ffffff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(26,26,26,0.06); }
.panel h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.note .idx {
flex: none; width: 22px; height: 22px; border-radius: 50%;
background: #1a1a1a; color: #ffffff; font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.note .txt { font-size: 13px; line-height: 1.55; color: #3d3d3d; }
.note .txt b { color: #1a1a1a; }
table.spec { width: 100%; border-collapse: collapse; font-size: 12px; color: #3d3d3d; }
table.spec th { text-align: left; font-weight: 700; color: #1a1a1a; border-bottom: 2px solid #d5d5d3; padding: 5px 8px 5px 0; }
table.spec td { border-bottom: 1px solid #ececea; padding: 4px 8px 4px 0; vertical-align: top; }
table.spec td.k { color: #1a1a1a; font-weight: 600; white-space: nowrap; }
.sec-label { font-size: 13.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.sec-label i { font-style: normal; font-weight: 400; font-size: 11.5px; color: #6b6b6b; margin-left: 8px; }
.shapechip .box {
width: 46px; height: 46px; margin: 0 auto; border-radius: 11px; background: #ffffff;
border: 2px solid #111111; display: flex; align-items: center; justify-content: center;
}
.shapechip .sn { font-size: 12px; font-weight: 800; margin-top: 6px; text-align: center; }
.shapechip .sm { font-size: 10px; color: #6b6b6b; margin-top: 2px; line-height: 1.3; text-align: center; }
.msline { stroke: #111111; stroke-width: 2.5; fill: none; }
.msstation { stroke: #111111; stroke-width: 2; }
.msticket {
width: 216px; background: #fff9f0; border: 2px solid #111111; border-radius: 12px;
box-shadow: 5px 5px 0 #111111; position: relative; display: flex; align-items: stretch;
overflow: hidden;
}
.msticket .tl {
width: 56px; flex: none;
display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.msticket .tb { flex: 1; padding: 9px 10px; }
.msticket .tb b { font-size: 12.5px; }
.msticket .tb .no { font-family: "DejaVu Sans Mono", monospace; font-size: 8.5px; color: #8a7a5c; margin-top: 3px; }
.msticket .stub {
width: 42px; border-left: 1.5px dashed #111111;
display: flex; align-items: center; justify-content: center;
font-family: "DejaVu Sans Mono", monospace; font-size: 9.5px; color: #8a7a5c;
}
.msticket.pk::before, .msticket.pk::after {
content: ""; position: absolute; left: 160px; width: 14px; height: 14px;
border-radius: 50%; background: #fbfbfa; border: 2px solid #111111;
}
.msticket.pk::before { top: -10px; }
.msticket.pk::after { bottom: -10px; }
</style>
</head>
<body>
<!-- ================= P1 语义形状 ================= -->
<div class="page">
<div class="story-head">
<span class="tag">&lt;Symbols /&gt; 1/3</span>
<h2>符号、形状 · 语义形状</h2>
<div class="desc">七个孟菲斯形状对内容下定义,全部取自 ai-era-tutorial 的概念。散落于空白——装饰即语义,无义不落。</div>
</div>
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
<div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;">
<div class="shapechip">
<div class="box"><svg width="30" height="28"><path d="M15 2 L29 26 L1 26 Z" fill="#ff6b6b" stroke="#111" stroke-width="2"/></svg></div>
<div class="sn">▲ 靶子</div>
<div class="sm">目标——这一章要做成什么事<br>卡头打头,教程最前</div>
</div>
<div class="shapechip">
<div class="box"><svg width="30" height="28"><circle cx="9" cy="14" r="6" fill="#ffd93d" stroke="#111" stroke-width="2"/><circle cx="22" cy="14" r="6" fill="#fff9f0" stroke="#111" stroke-width="2"/></svg></div>
<div class="sn">● 积木</div>
<div class="sm">完成目标的零件;点列实心=已学<br>空心=未学</div>
</div>
<div class="shapechip">
<div class="box"><svg width="30" height="28"><circle cx="15" cy="14" r="9" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="15" cy="14" r="9" fill="none" stroke="#111" stroke-width="1.5"/></svg></div>
<div class="sn">○ 预期</div>
<div class="sm">做成之后可观察、可核对的样子<br>16:9 相框角标</div>
</div>
<div class="shapechip">
<div class="box"><svg width="32" height="28"><path d="M2 18 q3.5 -14 7 0 t7 0 t7 0 t7 0" fill="none" stroke="#5b8def" stroke-width="3" stroke-linecap="round"/></svg></div>
<div class="sn">~ 代理区</div>
<div class="sm">无学习价值的过程,交给 agent<br>只给预期与验收</div>
</div>
<div class="shapechip">
<div class="box"><svg width="30" height="28"><rect x="2" y="10" width="26" height="9" fill="#ff8fab" stroke="#111" stroke-width="2"/></svg></div>
<div class="sn">▬ 价值区</div>
<div class="sm">有学习价值,过程就地写清<br>露出认知基础</div>
</div>
<div class="shapechip">
<div class="box"><svg width="30" height="28"><path d="M 15 26 L 10 21 L 20 16 L 10 11 L 20 6 L 15 2" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></div>
<div class="sn">⌇ 脱靶</div>
<div class="sm">竖立颤抖——图形入口<br>追随图形进入阅读</div>
</div>
<div class="shapechip">
<div class="box"><svg width="30" height="28"><path d="M15 3 v22 M4 14 h22" stroke="#a78bfa" stroke-width="4" stroke-linecap="round"/><path d="M15 3 v22 M4 14 h22" stroke="#111" stroke-width="1.2"/></svg></div>
<div class="sn">+ 指派</div>
<div class="sm">位置给坐标、预期当尺子<br>场景管巩固</div>
</div>
<div style="background:#111; border-radius:14px; padding:14px; display:flex; flex-direction:column; justify-content:center;">
<div style="font-size:12px; font-weight:800; color:#ffd93d;">一横一竖对举</div>
<div style="font-size:10.5px; color:#c9c9c7; line-height:1.6; margin-top:6px;">代理区=横波(蓝),脱靶=竖抖(红)。方向+色相双重区分,永不混淆。</div>
</div>
</div>
<div class="sec-label" style="margin-top:10px;">词汇表 · 父子层级 <i>与 ai-era-tutorial 词汇表对齐——父词统摄子词,图形落在子词上</i></div>
<table style="width:100%; border-collapse:collapse; font-size:11px; color:#3d3d3d;">
<tr style="border-bottom:2px solid #d5d5d3;">
<th style="text-align:left; padding:4px 8px 4px 0; color:#1a1a1a; width:86px;">父词</th>
<th style="text-align:left; padding:4px 8px 4px 0; color:#1a1a1a; width:168px;">图形 · 子词</th>
<th style="text-align:left; padding:4px 8px 4px 0; color:#1a1a1a;">释义(skill 口径)</th>
</tr>
<tr style="border-bottom:1px solid #ececea;"><td rowspan="3" style="padding:3px 8px 3px 0; font-weight:800; color:#1a1a1a; vertical-align:top;">靶子</td><td style="padding:3px 8px 3px 0;">▲ 目标</td><td style="padding:3px 8px 3px 0;">做什么</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;">○ 预期结果</td><td style="padding:3px 8px 3px 0;">做成长什么样、怎么核对</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;">● 积木清单</td><td style="padding:3px 8px 3px 0;">要用到的零件——只列用到的;说零件不说知识</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td rowspan="2" style="padding:3px 8px 3px 0; font-weight:800; color:#1a1a1a; vertical-align:top;">步骤分类</td><td style="padding:3px 8px 3px 0;">~ 代理区</td><td style="padding:3px 8px 3px 0;">过程无学习价值——交给 agent,只给预期与验收</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;">▬ 价值区</td><td style="padding:3px 8px 3px 0;">过程有学习价值——就地写清,露出认知基础</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td rowspan="4" style="padding:3px 8px 3px 0; font-weight:800; color:#1a1a1a; vertical-align:top;">指派学习</td><td style="padding:3px 8px 3px 0;">+ 三样(图形入口)</td><td style="padding:3px 8px 3px 0;">教材只留三样,讲解交给读者的 agent</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;"> └ 位置</td><td style="padding:3px 8px 3px 0;">知识体系中的哪一部分——给坐标</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;"> └ 预期</td><td style="padding:3px 8px 3px 0;">实践完的结果应长什么样——当尺子</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;"> └ 场景</td><td style="padding:3px 8px 3px 0;">带回 agent 再做的练习——管巩固</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td rowspan="2" style="padding:3px 8px 3px 0; font-weight:800; color:#1a1a1a; vertical-align:top;">脱靶提醒</td><td style="padding:3px 8px 3px 0;">⌇ 图形标记</td><td style="padding:3px 8px 3px 0;">不人为挖坑;跟在指派后——先见图形,再读文字</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:3px 8px 3px 0;"> └ 可能性 / 长相</td><td style="padding:3px 8px 3px 0;">怎么脱靶 + 脱靶时什么样——撞上时认出缺哪块</td></tr>
<tr><td style="padding:3px 8px 3px 0; font-weight:800; color:#1a1a1a; vertical-align:top;">认知基础</td><td style="padding:3px 8px 3px 0;">底座纹(真机验收章)</td><td style="padding:3px 8px 3px 0;">env / 库 / 运行环境——脚下的地,<b>不是积木</b>;就地露出,真机验收</td></tr>
</table>
</div>
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
<h3>散落规则</h3>
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>密度 ≤ 8 / 屏</b>:散落形状总数控制,避免噪化。</span></div>
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>只在空白</b>:永不压字、压卡、压线;间距 ≥ 8px。</span></div>
<div class="note" style="margin-bottom:6px;"><span class="idx">3</span><span class="txt"><b>语境相关</b>:与附近内容语义呼应(脱靶内容旁放 ⌇)。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">4</span><span class="txt"><b>尺寸阶梯</b>:主标记 28-44px;装饰散落 16-24px。</span></div>
</div>
<div style="position:absolute; top: 400px; left: 948px; width: 292px;" class="panel">
<h3>符号规则</h3>
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>装饰即语义</b>:无含义的形状不落版面。</span></div>
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>形状即内容定义</b>:读者看到形状即知内容类型。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>黑描边 2px</b>:形状一律描边(细线装饰除外)。</span></div>
</div>
<div class="footline">设计系统 · 02 符号形状 · stack idealjs</div>
<div class="pagenum">01 / 03</div>
</div>
<!-- ================= P2 线条形式 ================= -->
<div class="page">
<div class="story-head">
<span class="tag">&lt;Symbols /&gt; 2/3</span>
<h2>符号、形状 · 线条形式</h2>
<div class="desc">形式即含义:实线=先后、虚线=相关、点线=同族、波浪带=代理交接。拓扑规则全形式通用。</div>
</div>
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
<div style="display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:16px;">
<div style="background:#fff; border:2px solid #111; border-radius:14px; padding:14px 16px;">
<svg width="384" height="56" viewBox="0 0 384 56">
<rect x="8" y="10" width="2" height="40" fill="#c9c9c7"/><rect x="374" y="4" width="2" height="24" fill="#c9c9c7"/>
<path d="M 9 44 H 84 A 8 8 0 0 0 92 36 V 28 A 8 8 0 0 1 100 20 H 374" fill="none" stroke="#111" stroke-width="2.5"/>
<circle cx="9" cy="44" r="5.5" fill="#ffd93d" stroke="#111" stroke-width="2"/>
<circle cx="375" cy="20" r="5.5" fill="#4ecdc4" stroke="#111" stroke-width="2"/>
</svg>
<div style="font-size:13px; font-weight:800; margin-top:4px;">实线 = 先后</div>
<div style="font-size:11px; color:#555; line-height:1.55; margin-top:3px;">推荐顺序,主线。2.5px ink。<b>唯一带站点</b>的线形;分流/并线用直角步进。</div>
</div>
<div style="background:#fff; border:2px solid #111; border-radius:14px; padding:14px 16px;">
<svg width="384" height="56" viewBox="0 0 384 56">
<rect x="8" y="20" width="2" height="20" fill="#c9c9c7"/><rect x="374" y="20" width="2" height="20" fill="#c9c9c7"/>
<path d="M 9 30 H 375" fill="none" stroke="#111" stroke-width="2" stroke-dasharray="4 2"/>
</svg>
<div style="font-size:13px; font-weight:800; margin-top:4px;">虚线 = 相关</div>
<div style="font-size:11px; color:#555; line-height:1.55; margin-top:3px;">内容互参,无顺序。2px,4:2 点划。<b>无站点</b>,两端直抵卡边。</div>
</div>
<div style="background:#fff; border:2px solid #111; border-radius:14px; padding:14px 16px;">
<svg width="384" height="56" viewBox="0 0 384 56">
<rect x="8" y="20" width="2" height="20" fill="#c9c9c7"/><rect x="374" y="20" width="2" height="20" fill="#c9c9c7"/>
<path d="M 9 30 H 375" fill="none" stroke="#111" stroke-width="2.4" stroke-dasharray="0.1 6" stroke-linecap="round"/>
</svg>
<div style="font-size:13px; font-weight:800; margin-top:4px;">点线 = 同族</div>
<div style="font-size:11px; color:#555; line-height:1.55; margin-top:3px;">同一积木家族的章节互连(教一块带一族)。圆点端帽 6px 间距。<b>无站点</b>。</div>
</div>
<div style="background:#fff; border:2px solid #111; border-radius:14px; padding:14px 16px;">
<svg width="384" height="56" viewBox="0 0 384 56">
<path d="M 12 28 q 10 -22 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0" fill="none" stroke="#5b8def" stroke-width="3" stroke-linecap="round"/>
</svg>
<div style="font-size:13px; font-weight:800; margin-top:4px;">波浪带 = 代理交接</div>
<div style="font-size:11px; color:#555; line-height:1.55; margin-top:3px;">agent 边界的区域标记(蓝),<b>不连线</b>——是地带不是路径。与 ~ 形状同源。</div>
</div>
</div>
<div class="sec-label">拓扑规则 <i>全形式通用——线的几何纪律</i></div>
<table style="width:100%; border-collapse:collapse; font-size:11.5px; color:#3d3d3d;">
<tr style="border-bottom:2px solid #d5d5d3;">
<th style="text-align:left; padding:5px 8px 5px 0; color:#1a1a1a;">规则</th><th style="text-align:left; padding:5px 8px 5px 0; color:#1a1a1a;">规格</th>
</tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a; width:150px;">横平竖直</td><td style="padding:6px 8px 6px 0;">走向只有水平与垂直;无斜线、无大弧。</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">转角 R8</td><td style="padding:6px 8px 6px 0;">转折用 R8 小圆角直角步进。</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">并行不合并</td><td style="padding:6px 8px 6px 0;">多条并行线逐条渲染,间距 4px,不合成一条。</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">线止于卡边</td><td style="padding:6px 8px 6px 0;">起止都落在卡边或站点/胶囊边界,不钻入、不悬空。</td></tr>
<tr><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">不共享线段</td><td style="padding:6px 8px 6px 0;">分流的两线只在分岔点相触,随即分开(避免 T 形合流感)。</td></tr>
</table>
</div>
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
<h3>线形速查</h3>
<table class="spec">
<tr><th>形式</th><th>含义</th><th>站点</th></tr>
<tr><td class="k">实线 2.5px</td><td>先后</td><td>有(四色轮换)</td></tr>
<tr><td class="k">虚线 4:2</td><td>相关</td><td>无</td></tr>
<tr><td class="k">点线 6 间距</td><td>同族</td><td>无</td></tr>
<tr><td class="k">波浪带</td><td>代理交接</td><td>—(区域)</td></tr>
</table>
<div style="font-size:12px; color:#555; line-height:1.6; margin-top:10px;">同两张卡可以同时存在<b>实线(先后)与虚线(相关)</b>——顺序与互参不互斥。</div>
</div>
<div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel">
<h3>用线原则</h3>
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>线不可缺</b>:章节之间必有关系可读。</span></div>
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>先实后虚</b>:主链走实线;相关/同族是补充。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>一屏一线形不超 3 类</b>:实+虚+点已满,波浪带另算区域。</span></div>
</div>
<div class="footline">设计系统 · 02 符号形状 · stack idealjs</div>
<div class="pagenum">02 / 03</div>
</div>
<!-- ================= P3 站点、胶囊与票券 ================= -->
<div class="page">
<div class="story-head">
<span class="tag">&lt;Symbols /&gt; 3/3</span>
<h2>符号、形状 · 票券</h2>
<div class="desc">票券只做一件事:表达完成状态——完成=沿撕线打孔,未开始=实线无孔。站点与胶囊属 RouteLine(见 03 组件)。</div>
</div>
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
<div class="sec-label">票券 <i>状态的载体——完成即打孔</i></div>
<div style="display:flex; gap:24px; align-items:flex-start; margin-bottom:18px;">
<div class="msticket pk">
<div class="tl" style="background:#ff6b6b;">🌐</div>
<div class="tb"><b>快速开始</b><div class="no">No. 001 · 已完成(打孔)</div></div>
<div class="stub">№01</div>
</div>
<div class="msticket">
<div class="tl" style="background:#5b8def;">🔗</div>
<div class="tb"><b>全栈基础</b><div class="no">No. 005 · 未开始(无孔)</div></div>
<div class="stub" style="border-left-style:solid;">№05</div>
</div>
<div style="flex:1; font-size:11.5px; color:#3d3d3d; line-height:1.6;">
<b>完成=沿撕线打双孔</b>(上下半圆缺口);未开始撕线为实线、无孔。<br>
撕线=4:2 点划,与虚线同节奏但语境不同(裁剪线非关系线)。票号=章程序号。<b>票券只表达完成状态</b>,不作其他用途。
</div>
</div>
<div class="sec-label">实现规则 <i>裁切式——单一描边的做法</i></div>
<table style="width:100%; border-collapse:collapse; font-size:11.5px; color:#3d3d3d;">
<tr style="border-bottom:2px solid #d5d5d3;">
<th style="text-align:left; padding:5px 8px 5px 0; color:#1a1a1a; width:140px;">项</th><th style="text-align:left; padding:5px 8px 5px 0; color:#1a1a1a;">规格</th>
</tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">结构</td><td style="padding:6px 8px 6px 0;">216×70 · 描边 2px · 圆角 12 · 硬投影 5px 5px 0 ink · <b>overflow hidden</b></td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">头部色块</td><td style="padding:6px 8px 6px 0;">章节色纯填充、<b>无独立描边</b>——由票体裁切出干净圆角(嵌套色块永不自带边框)</td></tr>
<tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">打孔</td><td style="padding:6px 8px 6px 0;">⌀14 圆跨边 ±10px,被 overflow 裁成半圆缺口,内弧带描边</td></tr>
<tr><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">撕线</td><td style="padding:6px 8px 6px 0;">stub 左缘 1.5px;完成=4:2 点划,未开始=实线</td></tr>
</table>
</div>
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
<h3>票券参数</h3>
<table class="spec">
<tr><th>元素</th><th>规格</th></tr>
<tr><td class="k">票体</td><td>216×70 · 2px ink · R12 · 硬投影 5,5</td></tr>
<tr><td class="k">头部色块</td><td>56px 宽 · 章节色 · 无框(裁切式)</td></tr>
<tr><td class="k">打孔</td><td>⌀14 · 半圆缺口 ×2(撕线上下)</td></tr>
<tr><td class="k">撕线</td><td>完成 4:2 点划 · 未开始实线</td></tr>
</table>
</div>
<div style="position:absolute; top: 400px; left: 948px; width: 292px;" class="panel">
<h3>状态规则</h3>
<div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>打孔即完成</b>:孔是唯一的完成信号,不引入颜色。</span></div>
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>无锁</b>:未开始不打孔、不上锁,可随时进入。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>一票一章</b>:票号=章程序号,不混合多章。</span></div>
</div>
<div class="footline">设计系统 · 02 符号形状 · stack idealjs</div>
<div class="pagenum">03 / 03</div>
</div>
</body>
</html>