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

334 lines
25 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;
}
.msticket .tl {
width: 56px; border: 2px solid #111111; border-left: none; border-radius: 10px 0 0 10px;
display: flex; align-items: center; justify-content: center; font-size: 22px; margin-left: -2px;
}
.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: 162px; width: 13px; height: 13px;
border-radius: 50%; background: #fbfbfa; border: 2px solid #111111;
}
.msticket.pk::before { top: -9px; }
.msticket.pk::after { bottom: -9px; }
</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">关系上的铆钉与凭证:站点半嵌卡边(左贴描边、右骑黑影外缘),多线卡口用胶囊,完成用打孔票。</div>
</div>
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
<div class="sec-label">站点 <i>只上先后线——r6 描边圆点,四色轮换</i></div>
<div style="display:flex; gap:22px; align-items:flex-start; margin-bottom:18px;">
<svg width="400" height="80" viewBox="0 0 400 80">
<rect x="100" y="6" width="30" height="68" fill="#fff9f0" stroke="#111" stroke-width="2" rx="5"/>
<rect x="290" y="6" width="30" height="68" fill="#fff9f0" stroke="#111" stroke-width="2" rx="5"/>
<rect x="280" y="12" width="8" height="56" fill="#111111"/>
<path d="M 130 40 H 280" fill="none" stroke="#111" stroke-width="2.5"/>
<circle class="msstation" cx="130" cy="40" r="6" fill="#ffd93d"/>
<circle class="msstation" cx="284" cy="40" r="6" fill="#4ecdc4"/>
</svg>
<div style="flex:1; font-size:11.5px; color:#3d3d3d; line-height:1.6;">
<b>半嵌卡边</b>:圆心落在卡边上。<br>
<b>左贴描边</b>(图左卡右侧无投影);<b>右骑硬投影外缘</b>(图右)——描边外有 7px 黑影带,站点放在描边会被吞没。<br>
线从卡边/影缘出发;同色不相邻。
</div>
</div>
<div class="sec-label">胶囊 <i>多线入同一卡口时的站点形态</i></div>
<div style="display:flex; gap:22px; align-items:flex-start; margin-bottom:18px;">
<svg width="400" height="80" viewBox="0 0 400 80">
<path d="M 10 32 H 297" fill="none" stroke="#111" stroke-width="2.5"/>
<path d="M 10 36 H 297" fill="none" stroke="#111" stroke-width="2.5"/>
<path d="M 10 40 H 297" fill="none" stroke="#111" stroke-width="2.5"/>
<rect x="297" y="26" width="6" height="20" rx="3" fill="#ff6b6b" stroke="#111" stroke-width="2"/>
<rect x="360" y="12" width="2" height="56" fill="#c9c9c7"/>
</svg>
<div style="flex:1; font-size:11.5px; color:#3d3d3d; line-height:1.6;">
<b>四条规则</b>:① 竖向 6×20,端头半圆(rx=3,胶囊体非椭圆);② 沿线束排列方向拉伸;③ 端头距最外侧线 ≥ 2× 线宽;④ <b>线止于胶囊边界</b>——圆弧自最外侧线起弯,线沿半径抵达弧起点。
</div>
</div>
<div class="sec-label">票券 <i>状态的载体——完成即打孔</i></div>
<div style="display:flex; gap:24px; align-items:flex-start;">
<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>
<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>r6 · 描边 2px · 四色轮换 · 半嵌卡边</td></tr>
<tr><td class="k">胶囊</td><td>6×20 · rx3 · 线止于边界 · 距线 ≥2× 线宽</td></tr>
<tr><td class="k">并行线</td><td>间距 4px · 逐条渲染</td></tr>
<tr><td class="k">票券</td><td>216×~70 · 撕线 4:2 · 打孔 ⌀13</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">圆心骑卡边=「到达」的物理感:像铆钉钉入卡片。</span></div>
<div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt">黑影外缘规则是实测教训:描边上的右站点会被投影带吞没。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt">虚线/点线无站点:相关与同族是「参考」不是「到达」。</span></div>
</div>
<div class="footline">设计系统 · 02 符号形状 · stack idealjs</div>
<div class="pagenum">03 / 03</div>
</div>
</body>
</html>