diff --git a/design-refs/mockup/design-system/02-symbols.html b/design-refs/mockup/design-system/02-symbols.html index 2fb6caa..fdf95c8 100644 --- a/design-refs/mockup/design-system/02-symbols.html +++ b/design-refs/mockup/design-system/02-symbols.html @@ -254,44 +254,13 @@
<Symbols /> 3/3 -

符号、形状 · 站点、胶囊与票券

-
关系上的铆钉与凭证:站点半嵌卡边(左贴描边、右骑黑影外缘),多线卡口用胶囊,完成用打孔票。
+

符号、形状 · 票券

+
票券只做一件事:表达完成状态——完成=沿撕线打孔,未开始=实线无孔。站点与胶囊属 RouteLine(见 03 组件)。
-
站点 只上先后线——r6 描边圆点,四色轮换
-
- - - - - - - - -
- 半嵌卡边:圆心落在卡边上。
- 左贴描边(图左卡右侧无投影);右骑硬投影外缘(图右)——描边外有 7px 黑影带,站点放在描边会被吞没。
- 线从卡边/影缘出发;同色不相邻。 -
-
- -
胶囊 多线入同一卡口时的站点形态
-
- - - - - - - -
- 四条规则:① 竖向 6×20,端头半圆(rx=3,胶囊体非椭圆);② 沿线束排列方向拉伸;③ 端头距最外侧线 ≥ 2× 线宽;④ 线止于胶囊边界——圆弧自最外侧线起弯,线沿半径抵达弧起点。 -
-
-
票券 状态的载体——完成即打孔
-
+
🌐
快速开始
No. 001 · 已完成(打孔)
@@ -307,23 +276,34 @@ 撕线=4:2 点划,与虚线同节奏但语境不同(裁剪线非关系线)。票号=章程序号。票券只表达完成状态,不作其他用途。
+ +
实现规则 裁切式——单一描边的做法
+ + + + + + + + +
项规格
结构216×70 · 描边 2px · 圆角 12 · 硬投影 5px 5px 0 ink · overflow hidden
头部色块章节色纯填充、无独立描边——由票体裁切出干净圆角(嵌套色块永不自带边框)
打孔⌀14 圆跨边 ±10px,被 overflow 裁成半圆缺口,内弧带描边
撕线stub 左缘 1.5px;完成=4:2 点划,未开始=实线
-

参数速查

+

票券参数

- - - - + + + +
元素规格
站点r6 · 描边 2px · 四色轮换 · 半嵌卡边
胶囊6×20 · rx3 · 线止于边界 · 距线 ≥2× 线宽
并行线间距 4px · 逐条渲染
票券216×~70 · 撕线 4:2 · 打孔 ⌀13
票体216×70 · 2px ink · R12 · 硬投影 5,5
头部色块56px 宽 · 章节色 · 无框(裁切式)
打孔⌀14 · 半圆缺口 ×2(撕线上下)
撕线完成 4:2 点划 · 未开始实线
-

为什么半嵌

-
1圆心骑卡边=「到达」的物理感:像铆钉钉入卡片。
-
2黑影外缘规则是实测教训:描边上的右站点会被投影带吞没。
-
3虚线/点线无站点:相关与同族是「参考」不是「到达」。
+

状态规则

+
1打孔即完成:孔是唯一的完成信号,不引入颜色。
+
2无锁:未开始不打孔、不上锁,可随时进入。
+
3一票一章:票号=章程序号,不混合多章。
设计系统 · 02 符号形状 · stack idealjs
diff --git a/design-refs/mockup/design-system/02-symbols.pdf b/design-refs/mockup/design-system/02-symbols.pdf index 6a83bea..122cf8f 100644 Binary files a/design-refs/mockup/design-system/02-symbols.pdf and b/design-refs/mockup/design-system/02-symbols.pdf differ diff --git a/design-refs/mockup/design-system/03-components.html b/design-refs/mockup/design-system/03-components.html index 2b6ee59..bc1133a 100644 --- a/design-refs/mockup/design-system/03-components.html +++ b/design-refs/mockup/design-system/03-components.html @@ -290,6 +290,8 @@ 路径数据驱动由 courses.ts 的关系数据自动生成(先后/相关/同族三类边)。 自动布线卡位网格化;直角步进由起终点 lanes 差决定;R8 圆角固定。 + 站点规格r6 · 描边 2px · 四色轮换;左贴描边、右骑硬投影外缘(描边会被影带吞没)。 + 胶囊规格6×20 端头半圆;沿线束方向;端头距最外侧线 ≥ 2× 线宽;线止于胶囊边界。 站点渲染层SVG 双层:线在下、站点在上(卡片 DOM 之后),保证半嵌可见。 胶囊触发同一卡口入线 ≥ 2 自动聚合为胶囊,线止于胶囊边界。 diff --git a/design-refs/mockup/design-system/03-components.pdf b/design-refs/mockup/design-system/03-components.pdf index f64f869..02b1556 100644 Binary files a/design-refs/mockup/design-system/03-components.pdf and b/design-refs/mockup/design-system/03-components.pdf differ