idealjs/stack
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 胶囊端头外移——距最外侧线 ≥2 线宽（3px→6px），胶囊 6×14→6×20

Browse Source
This commit is contained in:
cqh963852 committed 2026-10-03 13:47:03 +08:00
1 parent 8abc15a596
commit 679140a517
2 files changed
+3 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

design-refs/mockup/components.html
+3 -3
View File
@@ -697,7 +697,7 @@
<div class="vlabel"><b>dot</b> · 单线圆点（半嵌卡边）</div>
</div>
<div class="linecard">
<svg width="176" height="44" viewBox="0 0 176 44"><rect x="6" y="8" width="26" height="28" rx="6" fill="#f4f4f2" stroke="#e2e2e0"/><rect x="144" y="8" width="26" height="28" rx="6" fill="#f4f4f2" stroke="#e2e2e0"/><path class="edge" d="M 32 18 H 141"/><path class="edge" d="M 32 22 H 141"/><path class="edge" d="M 32 26 H 141"/><rect class="station" x="141" y="15" width="6" height="14" rx="3"/></svg>
<svg width="176" height="44" viewBox="0 0 176 44"><rect x="6" y="8" width="26" height="28" rx="6" fill="#f4f4f2" stroke="#e2e2e0"/><rect x="144" y="8" width="26" height="28" rx="6" fill="#f4f4f2" stroke="#e2e2e0"/><path class="edge" d="M 32 18 H 141"/><path class="edge" d="M 32 22 H 141"/><path class="edge" d="M 32 26 H 141"/><rect class="station" x="141" y="12" width="6" height="20" rx="3"/></svg>
<div class="vlabel"><b>flat</b> · 多线胶囊（半嵌卡边）</div>
</div>
</div>
@@ -747,7 +747,7 @@
<circle class="station" cx="440" cy="252" r="2.8"/>
<circle class="station" cx="440" cy="265" r="2.8"/>
<circle class="station" cx="508" cy="322" r="2.8"/>
<rect class="station" x="721" y="187" width="6" height="14" rx="3"/>
<rect class="station" x="721" y="184" width="6" height="20" rx="3"/>
<circle class="station" cx="860" cy="194" r="2.8"/>
</svg>
<div style="position:absolute; right:14px; top:262px; font-size:11px; color:#6b6b6b;">→ 下一程：③ 高级教程</div>
@@ -771,7 +771,7 @@
<div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：鼠尾草绿 <code>#A2B49B</code> · 1.4px · 划隙 4:2；站点 <code>#758C72</code> 半嵌卡边。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>横平竖直</b>：走向只有水平与垂直，转折用小圆角 R8。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">4</span><span class="txt"><b>并行不合并</b>：多线并行逐条渲染，间距 4px，不合成一条。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">5</span><span class="txt"><b>站点随线变形</b>：单线 → 圆点；多线 → 胶囊（6×14），圆弧从最外侧线起弯，线止于胶囊边。</span></div>
<div class="note" style="margin-bottom:4px;"><span class="idx">5</span><span class="txt"><b>站点随线变形</b>：单线 → 圆点；多线 → 胶囊（6×20），端头距外侧线 ≥ 2× 线宽，线止于胶囊边。</span></div>
<div class="note" style="margin-bottom:0;"><span class="idx">6</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
</div>