design: 站点贴卡边锚定 + 六原语上/卡实例下重排，修列内双卡重叠
This commit is contained in:
cqh963852 committed
1 parent
f2967123c4
commit
239891fb17
2 files changed
+53
-53
No files matched your search
@@ -217,16 +217,16 @@
|
||||
|
||||
/* P7 路线图（线条构件版 · 大卡 CourseCard 实例） */
|
||||
.rcard {
|
||||
position: absolute; width: 232px;
|
||||
position: absolute; width: 190px;
|
||||
background: #ffffff; border-radius: 14px; padding: 10px;
|
||||
box-shadow: 0 1px 3px rgba(26,26,26,0.08);
|
||||
}
|
||||
.rcard .rzone {
|
||||
height: 118px; border-radius: 8px;
|
||||
height: 95px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.rcard .rzone span { font-size: 34px; }
|
||||
.rcard .rzone span { font-size: 30px; }
|
||||
.rcard .rzone i {
|
||||
position: absolute; right: 7px; bottom: 7px; font-style: normal;
|
||||
font-size: 9px; color: #6b6b6b; background: rgba(255,255,255,0.9);
|
||||
@@ -664,49 +664,8 @@
|
||||
<div class="desc">路线的最小构件是线条：直段 / 圆角转角 / 直角步进 / 分流岔口 / 汇合 / 站点，横平竖直。CourseCard 由路线串联：岔口分流、并线前进——网状关系在路线内可读。</div>
|
||||
</div>
|
||||
|
||||
<!-- 组合：CourseCard 之间的路线（双圆弧步进，无斜线） -->
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 330px; padding: 0;">
|
||||
<svg class="gedges" width="880" height="330" viewBox="0 0 880 330">
|
||||
<path class="edge" d="M 4 165 H 16"/>
|
||||
<path class="edge" d="M 248 165 H 266"/>
|
||||
<path class="edge" d="M 266 165 A 8 8 0 0 0 274 157 V 103 A 8 8 0 0 1 282 95 H 324"/>
|
||||
<path class="edge" d="M 266 165 A 8 8 0 0 1 274 173 V 227 A 8 8 0 0 0 282 235 H 324"/>
|
||||
<path class="edge" d="M 556 95 H 588 A 8 8 0 0 1 596 103 V 157 A 8 8 0 0 0 604 165 H 632"/>
|
||||
<path class="edge" d="M 556 235 H 588 A 8 8 0 0 0 596 227 V 173 A 8 8 0 0 1 604 165 H 632"/>
|
||||
<path class="edge" d="M 864 165 H 876"/>
|
||||
<circle class="station" cx="4" cy="165" r="2.8"/>
|
||||
<circle class="station" cx="266" cy="165" r="2.8"/>
|
||||
<circle class="station" cx="276" cy="130" r="2.8"/>
|
||||
<circle class="station" cx="276" cy="200" r="2.8"/>
|
||||
<circle class="station" cx="596" cy="130" r="2.8"/>
|
||||
<circle class="station" cx="596" cy="200" r="2.8"/>
|
||||
<circle class="station" cx="604" cy="165" r="2.8"/>
|
||||
<circle class="station" cx="871" cy="165" r="2.8"/>
|
||||
</svg>
|
||||
<div class="rcard" style="left:16px; top:81px;">
|
||||
<span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span>
|
||||
<div class="rzone" style="background:#e0e7ff;"><span>🌐</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#e0e7ff;">🌐</span><b>快速开始</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div class="rcard" style="left:324px; top:11px;">
|
||||
<span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span>
|
||||
<div class="rzone" style="background:#fce7f3;"><span>⚛️</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#fce7f3;">⚛️</span><b>React</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div class="rcard" style="left:324px; top:151px;">
|
||||
<div class="rzone" style="background:#fef3c7;"><span>🧱</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#fef3c7;">🧱</span><b>更多示例</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div class="rcard" style="left:632px; top:81px;">
|
||||
<div class="rzone" style="background:#d1fae5;"><span>📦</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#d1fae5;">📦</span><b>更多</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div style="position:absolute; right:14px; top:262px; font-size:11px; color:#6b6b6b;">→ 下一程：全栈基础 🔒 · ③ 高级教程</div>
|
||||
<div style="position:absolute; right:12px; top:10px; font-size:11px; color:#6b6b6b;">分流 ×1 · 并线 ×2 · 站点 ×8</div>
|
||||
</div>
|
||||
|
||||
<!-- 构件：线条组件六原语（弯道皆圆弧） -->
|
||||
<div class="canvas" style="top: 478px; left: 40px; width: 880px; height: 258px; padding: 16px 22px;">
|
||||
<!-- 构件：RouteLine 六原语（横平竖直 · 小圆角） -->
|
||||
<div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 258px; padding: 16px 22px;">
|
||||
<div style="font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:10px;"><RouteLine /> 线条组件 · 六原语</div>
|
||||
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;">
|
||||
<div class="linecard">
|
||||
@@ -718,24 +677,65 @@
|
||||
<div class="vlabel"><b>elbow</b> · 圆角转角</div>
|
||||
</div>
|
||||
<div class="linecard">
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 30 42 H 60 A 8 8 0 0 0 68 34 V 18 A 8 8 0 0 1 76 10 H 220"/><circle class="station" cx="30" cy="42" r="2.8"/><circle class="station" cx="68" cy="26" r="2.8"/><circle class="station" cx="220" cy="10" r="2.8"/></svg>
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 30 42 H 60 A 8 8 0 0 0 68 34 V 18 A 8 8 0 0 1 76 10 H 220"/><circle class="station" cx="30" cy="42" r="2.8"/><circle class="station" cx="220" cy="10" r="2.8"/></svg>
|
||||
<div class="vlabel"><b>step</b> · 直角步进</div>
|
||||
</div>
|
||||
<div class="linecard">
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 54"/><path class="edge" d="M 54 26 A 6 6 0 0 0 60 20 V 14 A 6 6 0 0 1 66 8 H 220"/><path class="edge" d="M 54 26 A 6 6 0 0 1 60 32 V 38 A 6 6 0 0 0 66 44 H 220"/><circle class="station" cx="54" cy="26" r="2.8"/></svg>
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 54"/><path class="edge" d="M 54 26 A 6 6 0 0 0 60 20 V 14 A 6 6 0 0 1 66 8 H 220"/><path class="edge" d="M 54 26 A 6 6 0 0 1 60 32 V 38 A 6 6 0 0 0 66 44 H 220"/><circle class="station" cx="28" cy="26" r="2.8"/><circle class="station" cx="212" cy="8" r="2.8"/><circle class="station" cx="212" cy="44" r="2.8"/></svg>
|
||||
<div class="vlabel"><b>fork</b> · 分流岔口</div>
|
||||
</div>
|
||||
<div class="linecard">
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 8 H 144 A 6 6 0 0 1 150 14 V 20 A 6 6 0 0 0 156 26 H 220"/><path class="edge" d="M 20 44 H 144 A 6 6 0 0 0 150 38 V 32 A 6 6 0 0 1 156 26 H 220"/><circle class="station" cx="156" cy="26" r="2.8"/></svg>
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 8 H 144 A 6 6 0 0 1 150 14 V 20 A 6 6 0 0 0 156 26 H 220"/><path class="edge" d="M 20 44 H 144 A 6 6 0 0 0 150 38 V 32 A 6 6 0 0 1 156 26 H 220"/><circle class="station" cx="28" cy="8" r="2.8"/><circle class="station" cx="28" cy="44" r="2.8"/><circle class="station" cx="212" cy="26" r="2.8"/></svg>
|
||||
<div class="vlabel"><b>merge</b> · 汇合并线</div>
|
||||
</div>
|
||||
<div class="linecard">
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 220"/><circle class="station" cx="90" cy="26" r="3"/><circle class="station" cx="170" cy="26" r="3"/></svg>
|
||||
<div class="vlabel"><b>station</b> · 站点（悬浮于卡间槽内）</div>
|
||||
<svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 220"/><circle class="station" cx="34" cy="26" r="3"/><circle class="station" cx="206" cy="26" r="3"/></svg>
|
||||
<div class="vlabel"><b>station</b> · 站点（贴近卡边锚定）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实例：CourseCard 之间的路线（正交走线 + R8 小圆角，站点贴卡边） -->
|
||||
<div class="canvas" style="top: 406px; left: 40px; width: 880px; height: 330px; padding: 0;">
|
||||
<svg class="gedges" width="880" height="330" viewBox="0 0 880 330">
|
||||
<path class="edge" d="M 6 165 H 20"/>
|
||||
<path class="edge" d="M 210 165 H 232"/>
|
||||
<path class="edge" d="M 232 165 A 8 8 0 0 0 240 157 V 92 A 8 8 0 0 1 248 84 H 345"/>
|
||||
<path class="edge" d="M 232 165 A 8 8 0 0 1 240 173 V 238 A 8 8 0 0 0 248 246 H 345"/>
|
||||
<path class="edge" d="M 535 84 H 557 A 8 8 0 0 1 565 92 V 157 A 8 8 0 0 0 573 165 H 670"/>
|
||||
<path class="edge" d="M 535 246 H 557 A 8 8 0 0 0 565 238 V 173 A 8 8 0 0 1 573 165 H 670"/>
|
||||
<path class="edge" d="M 860 165 H 872"/>
|
||||
<circle class="station" cx="11" cy="165" r="2.8"/>
|
||||
<circle class="station" cx="218" cy="165" r="2.8"/>
|
||||
<circle class="station" cx="337" cy="84" r="2.8"/>
|
||||
<circle class="station" cx="337" cy="246" r="2.8"/>
|
||||
<circle class="station" cx="543" cy="84" r="2.8"/>
|
||||
<circle class="station" cx="543" cy="246" r="2.8"/>
|
||||
<circle class="station" cx="662" cy="165" r="2.8"/>
|
||||
<circle class="station" cx="866" cy="165" r="2.8"/>
|
||||
</svg>
|
||||
<div class="rcard" style="left:20px; top:92px;">
|
||||
<span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span>
|
||||
<div class="rzone" style="background:#e0e7ff;"><span>🌐</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#e0e7ff;">🌐</span><b>快速开始</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div class="rcard" style="left:345px; top:11px;">
|
||||
<span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span>
|
||||
<div class="rzone" style="background:#fce7f3;"><span>⚛️</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#fce7f3;">⚛️</span><b>React</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div class="rcard" style="left:345px; top:173px;">
|
||||
<div class="rzone" style="background:#fef3c7;"><span>🧱</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#fef3c7;">🧱</span><b>更多示例</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div class="rcard" style="left:670px; top:92px;">
|
||||
<div class="rzone" style="background:#d1fae5;"><span>📦</span><i>16:9 · GIF</i></div>
|
||||
<div class="rt"><span class="icotile" style="background:#d1fae5;">📦</span><b>更多</b><span class="st done">✓</span></div>
|
||||
</div>
|
||||
<div style="position:absolute; right:14px; top:250px; font-size:11px; color:#6b6b6b;">→ 下一程：全栈基础 🔒 · ③ 高级教程</div>
|
||||
<div style="position:absolute; right:12px; top:10px; font-size:11px; color:#6b6b6b;">分流 ×1 · 并线 ×2 · 站点 ×8</div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
|
||||
<h3 style="margin-bottom:8px;">Args</h3>
|
||||
<table class="spec tight">
|
||||
@@ -743,14 +743,14 @@
|
||||
<tr><td class="k"><code>path</code></td><td>Segment[]</td><td>直段/转角/步进序列</td></tr>
|
||||
<tr><td class="k"><code>forks</code></td><td>Fork[]</td><td>分流岔口（分出车道）</td></tr>
|
||||
<tr><td class="k"><code>merges</code></td><td>Merge[]</td><td>直角并线点</td></tr>
|
||||
<tr><td class="k"><code>stations</code></td><td>Node[]</td><td>站点圆点，锚定卡间槽</td></tr>
|
||||
<tr><td class="k"><code>stations</code></td><td>Node[]</td><td>站点圆点，贴近卡边锚定</td></tr>
|
||||
<tr><td class="k"><code>status</code></td><td>无 prop</td><td>不在图上编码</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel">
|
||||
<h3 style="margin-bottom:6px;">设计原则</h3>
|
||||
<div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt"><b>线只管顺序</b>：状态交给卡片 ✓ / 🔒。</span></div>
|
||||
<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> 深一档，直径 ≈ 4× 线宽。</span></div>
|
||||
<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> 贴近卡边锚定，直径 ≈ 4× 线宽。</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>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div>
|
||||
<div class="note" style="margin-bottom:0;"><span class="idx">5</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
|
||||
|
||||
Reference in new issue
Block a user