64 lines
5.5 KiB
HTML
64 lines
5.5 KiB
HTML
<style>
|
||
.layouts { display:grid; grid-template-columns:repeat(3,minmax(300px,1fr)); gap:16px; margin-top:18px; }
|
||
.layout-card { border:1px solid #d6dde7; border-radius:12px; background:#fff; overflow:hidden; cursor:pointer; }
|
||
.layout-card:hover { border-color:#2b6fbf; box-shadow:0 8px 24px rgba(32,73,120,.12); }
|
||
.layout-card.selected { outline:3px solid rgba(43,111,191,.22); border-color:#2b6fbf; }
|
||
.card-head { padding:13px 14px 8px; }
|
||
.card-head p { margin:5px 0 0; color:#5d6875; font-size:13px; min-height:40px; }
|
||
.tag { display:inline-block; padding:2px 8px; border-radius:999px; background:#eaf3fc; color:#0f5da8; font-size:11px; }
|
||
.screen { margin:8px 12px 14px; height:330px; border:1px solid #aeb8c5; background:#f7f9fb; display:grid; gap:5px; padding:6px; font:10px/1.2 sans-serif; color:#35404c; }
|
||
.bar { background:#fff; border:1px solid #d9e0e8; padding:5px; display:flex; justify-content:space-between; }
|
||
.map { position:relative; background:linear-gradient(#edf1f5 1px,transparent 1px),linear-gradient(90deg,#edf1f5 1px,transparent 1px),#fff; background-size:18px 18px; border:1px solid #d7dee7; overflow:hidden; }
|
||
.map:before { content:""; position:absolute; left:8%; right:8%; top:55%; height:4px; background:#adb8c4; transform:rotate(-7deg); opacity:.45; }
|
||
.map:after { content:"当前完整轨迹"; position:absolute; left:14%; right:12%; top:50%; height:3px; color:#1769aa; background:#1769aa; transform:rotate(-7deg); box-shadow:0 -8px 0 rgba(102,164,219,.35); }
|
||
.chart { position:relative; background:linear-gradient(#edf1f5 1px,transparent 1px),linear-gradient(90deg,#edf1f5 1px,transparent 1px),#fff; background-size:28px 28px; border:1px solid #d7dee7; padding:6px; }
|
||
.chart:after { content:""; position:absolute; left:12%; right:8%; top:58%; height:3px; background:#1769aa; transform:skewY(-10deg); }
|
||
.status { background:#fff; border:1px solid #d7dee7; padding:7px; display:grid; gap:4px; }
|
||
.chip { background:#f1f5f9; border-left:3px solid #1769aa; padding:4px; }
|
||
.tools { position:absolute; right:5px; top:5px; background:#fff; border:1px solid #b8c2ce; padding:3px 5px; z-index:2; }
|
||
.tabs { background:#fff; border:1px solid #d7dee7; padding:5px; word-spacing:7px; }
|
||
.a { grid-template-columns:2fr 1fr; grid-template-rows:30px 1fr 110px 26px; }
|
||
.a .bar { grid-column:1/3; }.a .map { grid-row:2/3; }.a .status { grid-row:2/3; }.a .chart { grid-column:1/3; }.a .tabs{grid-column:1/3;}
|
||
.b { grid-template-columns:3fr 2fr; grid-template-rows:30px 1fr 26px; }
|
||
.b .bar{grid-column:1/3}.b .map{grid-row:2/3}.b .right{display:grid;grid-template-rows:1fr 1fr;gap:5px}.b .tabs{grid-column:1/3}
|
||
.c { grid-template-columns:1fr 1fr 1fr; grid-template-rows:30px 130px 1fr 26px; }
|
||
.c .bar{grid-column:1/4}.c .map{grid-column:1/4}.c .tabs{grid-column:1/4}
|
||
@media(max-width:1050px){.layouts{grid-template-columns:1fr}.screen{height:360px}}
|
||
</style>
|
||
|
||
<h2>网页主界面采用哪种观察布局？</h2>
|
||
<p class="subtitle">所有方案都修复页签串页、增加 X/Y 数值刻度与单位、图例、图层显隐、框选缩放、滚轮缩放、复位和全屏查看。</p>
|
||
|
||
<div class="layouts">
|
||
<div class="layout-card" data-choice="a-map-status" onclick="toggleSelect(this)">
|
||
<div class="card-head"><h3>A · 地图主视图</h3><p>路径图最大，状态在右侧；图表作为底部工作区。适合先看全局几何。</p></div>
|
||
<div class="screen a">
|
||
<div class="bar"><b>FullDirectionSegment · OBSERVE_ONLY</b><span>图层 ▣ 重置视图</span></div>
|
||
<div class="map"><span class="tools">＋ − ⛶ 图层</span></div>
|
||
<div class="status"><div class="chip">终点误差 0.8 cm / 1.2°</div><div class="chip">v=0 · a=0</div><div class="chip">制动起点 S=6.4 m</div></div>
|
||
<div class="chart"><span class="tools">框选放大 复位 全屏</span>ST：t (s) / PathS (m)</div>
|
||
<div class="tabs">路径总览 LS/ST 运动学 诊断与配置</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout-card" data-choice="b-balanced" onclick="toggleSelect(this)">
|
||
<div class="card-head"><span class="tag">推荐</span><h3>B · 地图与分析并列</h3><p>左侧完整路径，右侧同时看当前选中的 ST/速度图与关键状态，减少来回切页。</p></div>
|
||
<div class="screen b">
|
||
<div class="bar"><b>方向段 0 · Forward · 完整规划成功</b><span>导出快照 图层</span></div>
|
||
<div class="map"><span class="tools">＋ − ⛶</span></div>
|
||
<div class="right"><div class="chart"><span class="tools">⛶</span>ST：完整起步—巡航—停车</div><div class="status"><div class="chip">巡航目标 1.0 m/s</div><div class="chip">终点 3 cm / 5° 内</div><div class="chip">无零进度异常</div></div></div>
|
||
<div class="tabs">路径总览 LS/ST 曲率 速度/加速度/jerk 周期诊断</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout-card" data-choice="c-chart-wall" onclick="toggleSelect(this)">
|
||
<div class="card-head"><h3>C · 多图分析墙</h3><p>地图在上方，LS/ST/速度三图并排；适合桌面大屏同时比较数据。</p></div>
|
||
<div class="screen c">
|
||
<div class="bar"><b>完整方向段分析</b><span>同步缩放 复位全部</span></div>
|
||
<div class="map"><span class="tools">＋ − ⛶ 图层</span></div>
|
||
<div class="chart"><span class="tools">⛶</span>LS</div><div class="chart"><span class="tools">⛶</span>ST</div><div class="chart"><span class="tools">⛶</span>速度</div>
|
||
<div class="tabs">基础图组 运动学图组 终点验证 配置</div>
|
||
</div>
|
||
</div>
|
||
</div>
|