71 lines
7.4 KiB
HTML
71 lines
7.4 KiB
HTML
<h2>科研绘图风 · A 布局精修</h2>
|
||
<p class="subtitle">以论文图表为基准：细线、白底、单位完整、图例克制；红色只表示真正越界。</p>
|
||
|
||
<style>
|
||
.scientific { background:#fff; color:#20252b; border:1px solid #cfd4da; border-radius:3px; padding:12px; font-family:Arial,"Microsoft YaHei",sans-serif; }
|
||
.s-head { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid #60666d; padding-bottom:6px; margin-bottom:10px; }
|
||
.s-title { font-family:"Times New Roman","SimSun",serif; font-size:15px; font-weight:600; }
|
||
.s-meta { color:#59636e; font-size:9px; }
|
||
.s-grid { display:grid; grid-template-columns:1.55fr .85fr; gap:10px; }
|
||
.s-panel { border:1px solid #b8bec5; padding:7px; background:#fff; }
|
||
.s-panel-title { font-family:"Times New Roman","SimSun",serif; font-size:10px; font-weight:600; display:flex; justify-content:space-between; }
|
||
.s-plot { width:100%; height:132px; display:block; margin-top:3px; }
|
||
.s-side { display:flex; flex-direction:column; gap:8px; }
|
||
.s-table { width:100%; border-collapse:collapse; font-size:9px; }
|
||
.s-table td { padding:4px 3px; border-bottom:1px solid #e2e5e8; }
|
||
.s-table td:last-child { text-align:right; font-family:Consolas,monospace; }
|
||
.pass { color:#237a57; }.note { color:#b86514; }.fail { color:#b42318; }
|
||
.s-tabs { display:flex; gap:0; margin-top:10px; border-bottom:1px solid #777e86; }
|
||
.s-tab { padding:5px 11px 4px; border:1px solid transparent; font-size:9px; color:#545d66; }
|
||
.s-tab.active { color:#174c80; border:1px solid #777e86; border-bottom:1px solid white; margin-bottom:-1px; background:#fff; }
|
||
.s-multipanel { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding-top:9px; }
|
||
.s-small { border:1px solid #c8cdd2; padding:5px; }
|
||
.s-small svg { width:100%; height:72px; display:block; }
|
||
.caption { color:#56606a; font-size:9px; margin-top:8px; line-height:1.45; }
|
||
.limit { stroke:#b42318; stroke-width:.7; stroke-dasharray:3 3; fill:none; }
|
||
.gridline { stroke:#d9dde1; stroke-width:.55; }.axis { stroke:#343a40; stroke-width:.8; }.tick { fill:#555d65; font:5px Arial; }
|
||
.current { stroke:#1769aa; stroke-width:1.15; fill:none; }.previous { stroke:#8d959d; stroke-width:.8; stroke-dasharray:4 2; fill:none; }
|
||
.reference { stroke:#333; stroke-width:.75; fill:none; }.handoff { fill:#d87918; stroke:#fff; stroke-width:.7; }
|
||
</style>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-header">Preview: Scientific trajectory dashboard</div>
|
||
<div class="mockup-body">
|
||
<div class="scientific">
|
||
<div class="s-head">
|
||
<div><div class="s-title">EM Trajectory Planning Observation</div><div class="s-meta">OBSERVE_ONLY · local session · coordinate units: m / s / rad</div></div>
|
||
<div class="s-meta"><span class="pass">● LIVE</span> Cycle 128 RollingContinuation 42 ms</div>
|
||
</div>
|
||
<div class="s-grid">
|
||
<div class="s-panel">
|
||
<div class="s-panel-title"><span>(a) World path and rolling handoff</span><span style="font:8px Arial"><span style="color:#1769aa">━ current</span> <span style="color:#8d959d">┄ previous</span> <span style="color:#d87918">● handoff</span></span></div>
|
||
<svg class="s-plot" viewBox="0 0 360 132" preserveAspectRatio="none">
|
||
<g><line class="gridline" x1="38" y1="12" x2="38" y2="112"/><line class="gridline" x1="101" y1="12" x2="101" y2="112"/><line class="gridline" x1="164" y1="12" x2="164" y2="112"/><line class="gridline" x1="227" y1="12" x2="227" y2="112"/><line class="gridline" x1="290" y1="12" x2="290" y2="112"/><line class="gridline" x1="38" y1="32" x2="344" y2="32"/><line class="gridline" x1="38" y1="58" x2="344" y2="58"/><line class="gridline" x1="38" y1="84" x2="344" y2="84"/></g>
|
||
<line class="axis" x1="38" y1="112" x2="344" y2="112"/><line class="axis" x1="38" y1="12" x2="38" y2="112"/>
|
||
<path class="reference" d="M42,92 C92,88 116,70 151,67 S226,66 268,41 S322,25 341,22"/>
|
||
<path class="previous" d="M43,95 C91,90 116,73 152,69 S226,68 270,44 S323,29 339,27"/>
|
||
<path class="current" d="M43,93 C92,89 116,71 152,68 S226,67 269,42 S323,26 341,23"/>
|
||
<circle class="handoff" cx="269" cy="42" r="3.2"/>
|
||
<text class="tick" x="174" y="128">World X (m)</text><text class="tick" transform="rotate(-90 8 69)" x="8" y="69">World Y (m)</text>
|
||
</svg>
|
||
</div>
|
||
<div class="s-side">
|
||
<div class="s-panel"><div class="s-panel-title">Current sample</div><table class="s-table"><tr><td>t</td><td>0.35 s</td></tr><tr><td>v</td><td>0.182 m/s</td></tr><tr><td>a</td><td>0.041 m/s²</td></tr><tr><td>j</td><td>−0.118 m/s³</td></tr><tr><td>κ</td><td>0.224 m⁻¹</td></tr></table></div>
|
||
<div class="s-panel"><div class="s-panel-title">Rolling continuity</div><table class="s-table"><tr><td>terminal speed ≠ 0</td><td class="pass">PASS</td></tr><tr><td>|Δv| ≤ tol</td><td class="pass">0.003</td></tr><tr><td>|Δa| ≤ tol</td><td class="pass">0.018</td></tr><tr><td>|j| ≤ limit</td><td class="pass">PASS</td></tr><tr><td>trajectory age</td><td class="note">61 ms</td></tr></table></div>
|
||
</div>
|
||
</div>
|
||
<div class="s-tabs"><span class="s-tab active">LS / ST</span><span class="s-tab">Curvature</span><span class="s-tab">Velocity / Acceleration / Jerk</span><span class="s-tab">Cycle history</span></div>
|
||
<div class="s-multipanel">
|
||
<div class="s-small"><div class="s-panel-title">(b) Lateral offset</div><svg viewBox="0 0 120 72" preserveAspectRatio="none"><line class="axis" x1="18" y1="60" x2="115" y2="60"/><line class="axis" x1="18" y1="8" x2="18" y2="60"/><line class="gridline" x1="18" y1="34" x2="115" y2="34"/><path class="current" d="M18,34 C38,25 51,30 65,35 S92,39 115,33"/><text class="tick" x="52" y="70">s (m)</text><text class="tick" x="1" y="9">l (m)</text></svg></div>
|
||
<div class="s-small"><div class="s-panel-title">(c) Longitudinal progress</div><svg viewBox="0 0 120 72" preserveAspectRatio="none"><line class="axis" x1="18" y1="60" x2="115" y2="60"/><line class="axis" x1="18" y1="8" x2="18" y2="60"/><path class="previous" d="M18,58 L42,52 L66,41 L90,27 L115,13"/><path class="current" d="M18,58 L42,51 L66,39 L90,25 L115,11"/><circle class="handoff" cx="90" cy="25" r="2.5"/><text class="tick" x="52" y="70">t (s)</text><text class="tick" x="2" y="9">s (m)</text></svg></div>
|
||
<div class="s-small"><div class="s-panel-title">(d) Signed velocity</div><svg viewBox="0 0 120 72" preserveAspectRatio="none"><line class="axis" x1="18" y1="60" x2="115" y2="60"/><line class="axis" x1="18" y1="8" x2="18" y2="60"/><line class="limit" x1="18" y1="14" x2="115" y2="14"/><path class="previous" d="M18,51 C36,43 48,30 67,26 S96,27 115,24"/><path class="current" d="M18,49 C36,41 48,29 67,25 S96,26 115,23"/><circle class="handoff" cx="67" cy="25" r="2.5"/><text class="tick" x="52" y="70">t (s)</text><text class="tick" x="1" y="9">v (m/s)</text></svg></div>
|
||
</div>
|
||
<div class="caption">Refresh: 10 Hz · latest-snapshot transport · history: 60 cycles (bounded) · browser clients: 1 · no planner backpressure</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="options">
|
||
<div class="option" data-choice="approve-scientific" onclick="toggleSelect(this)"><div class="letter">✓</div><div class="content"><h3>采用这个科研风格</h3><p>后续页面都沿用细线、白底、论文式多子图与单位标注。</p></div></div>
|
||
</div>
|