11 lines
3.8 KiB
HTML
11 lines
3.8 KiB
HTML
<style>
|
||
.layouts{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:16px;margin-top:18px}.choice{border:1px solid #d6dde7;border-radius:12px;padding:14px;background:#fff;cursor:pointer}.choice:hover{border-color:#1769aa;box-shadow:0 8px 24px rgba(30,80,130,.12)}.choice.selected{outline:3px solid rgba(23,105,170,.22)}.tag{display:inline-block;background:#e8f2fb;color:#1769aa;border-radius:99px;padding:2px 8px;font-size:11px}.screen{height:330px;margin-top:12px;padding:6px;display:grid;gap:5px;border:1px solid #aeb8c5;background:#f7f9fb;font:10px sans-serif}.bar,.tabs,.status{background:#fff;border:1px solid #d7dee7;padding:6px}.map,.chart{position:relative;border:1px solid #d7dee7;background:linear-gradient(#e9eef3 1px,transparent 1px),linear-gradient(90deg,#e9eef3 1px,transparent 1px),#fff;background-size:20px 20px;overflow:hidden}.map:after{content:'当前完整轨迹';position:absolute;left:12%;right:9%;top:54%;height:4px;color:#1769aa;background:#1769aa;transform:rotate(-7deg)}.chart:after{content:'';position:absolute;left:10%;right:8%;top:58%;height:3px;background:#1769aa;transform:skewY(-9deg)}.tools{position:absolute;right:5px;top:5px;z-index:2;background:#fff;border:1px solid #b9c3ce;padding:3px}.a{grid-template-columns:2fr 1fr;grid-template-rows:30px 1fr 110px 26px}.a .bar,.a .chart,.a .tabs{grid-column:1/3}.b{grid-template-columns:3fr 2fr;grid-template-rows:30px 1fr 26px}.b .bar,.b .tabs{grid-column:1/3}.right{display:grid;grid-template-rows:1fr 1fr;gap:5px}.c{grid-template-columns:repeat(3,1fr);grid-template-rows:30px 130px 1fr 26px}.c .bar,.c .map,.c .tabs{grid-column:1/4}.chip{margin:4px 0;padding:4px;background:#f1f5f9;border-left:3px solid #1769aa}@media(max-width:1000px){.layouts{grid-template-columns:1fr}}
|
||
</style>
|
||
<h2>网页主界面布局选择</h2>
|
||
<p class="subtitle">三种方案都包含独立页签、X/Y 数值刻度与单位、图例、图层显隐、框选/滚轮缩放、复位及单图全屏。</p>
|
||
<div class="layouts">
|
||
<div class="choice" data-choice="a-map-first" onclick="toggleSelect(this)"><h3>A · 地图优先</h3><p>大地图、右侧状态、底部单张分析图。</p><div class="screen a"><div class="bar"><b>完整方向段 · OBSERVE_ONLY</b><span>图层 复位</span></div><div class="map"><span class="tools">＋ − ⛶</span></div><div class="status"><div class="chip">终点 3 cm / 5°</div><div class="chip">v=0 · a=0</div><div class="chip">制动点 S=6.4m</div></div><div class="chart"><span class="tools">框选 复位 ⛶</span>完整 ST</div><div class="tabs">路径 LS/ST 运动学 诊断</div></div></div>
|
||
<div class="choice" data-choice="b-balanced" onclick="toggleSelect(this)"><span class="tag">推荐</span><h3>B · 地图与分析并列</h3><p>左侧完整路径，右侧同时看选中图表和终点状态。</p><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.0m/s</div><div class="chip">终点误差合格</div><div class="chip">无零进度异常</div></div></div><div class="tabs">路径 LS/ST 曲率 速度/加速度/jerk 诊断</div></div></div>
|
||
<div class="choice" data-choice="c-chart-wall" onclick="toggleSelect(this)"><h3>C · 多图分析墙</h3><p>地图在上，LS、ST、速度三图始终并排。</p><div class="screen c"><div class="bar"><b>完整方向段分析</b><span>同步缩放 复位全部</span></div><div class="map"><span class="tools">＋ − ⛶</span></div><div class="chart">LS</div><div class="chart">ST</div><div class="chart">速度</div><div class="tabs">基础图组 运动学 终点验证 配置</div></div></div>
|
||
</div>
|