191 lines
11 KiB
HTML
191 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>3588 管理后台浅色主题预览</title>
|
||
<style>
|
||
:root {
|
||
--bg: #dfe7f0;
|
||
--panel: #eef4fa;
|
||
--panel-2: #e5edf6;
|
||
--panel-3: #d5e1ef;
|
||
--line: #b5c4d6;
|
||
--line-strong: #8499b3;
|
||
--text: #172333;
|
||
--muted: #4f6177;
|
||
--subtle: #6a7b8e;
|
||
--accent: #2d6fb5;
|
||
--accent-2: #245f9f;
|
||
--warn: #9b650e;
|
||
--bad: #a43f3f;
|
||
--blue: #2b6fac;
|
||
--sidebar: #111923;
|
||
--sidebar-active: #21303a;
|
||
--selected: #c7d9ee;
|
||
--radius: 4px;
|
||
--shadow: 0 14px 34px rgba(35, 50, 60, .12);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font: 13px/1.45 "Segoe UI", Arial, sans-serif;
|
||
}
|
||
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
|
||
aside {
|
||
background: var(--sidebar);
|
||
border-right: 1px solid #23303b;
|
||
padding: 18px 14px;
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
}
|
||
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; color: #e7edf2; }
|
||
.mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 4px; background: #090f15; border: 1px solid #364653; font-weight: 800; }
|
||
.brand b { display: block; font-size: 14px; }
|
||
.brand span { color: #9aa7b2; font-size: 11px; }
|
||
.section { color: #6f7d88; font-size: 11px; margin: 18px 8px 8px; letter-spacing: .06em; }
|
||
nav a { display: flex; align-items: center; gap: 10px; color: #c7d2dc; text-decoration: none; padding: 9px 10px; border-radius: var(--radius); margin-bottom: 3px; }
|
||
nav a.active, nav a:hover { background: var(--sidebar-active); color: #fff; }
|
||
.nav-icon { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 3px; border: 1px solid #33455f; color: #5aa7ff; font-size: 10px; }
|
||
.workspace { min-width: 0; }
|
||
header {
|
||
height: 68px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 28px;
|
||
background: #e8eef6;
|
||
border-bottom: 1px solid var(--line);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
.crumb { color: var(--subtle); font-size: 11px; letter-spacing: .08em; }
|
||
h1 { margin: 2px 0 0; font-size: 18px; }
|
||
main { padding: 22px 28px 36px; max-width: 1460px; }
|
||
.toolbar, .grid, .row { display: grid; gap: 12px; }
|
||
.toolbar { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 14px; }
|
||
.summary { color: var(--muted); margin-top: 4px; }
|
||
.btn { border: 1px solid var(--line-strong); background: var(--panel-3); color: var(--text); padding: 6px 9px; border-radius: var(--radius); text-decoration: none; font-weight: 700; font-size: 12px; line-height: 1.15; }
|
||
.btn.primary { background: #245f9f; border-color: #245f9f; color: #f3f8ff; }
|
||
.grid.kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
|
||
.panel, .stat {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.stat { padding: 14px; border-left: 3px solid #96a8bd; }
|
||
.stat.hot { border-left-color: var(--accent); }
|
||
.label { color: var(--muted); font-size: 12px; }
|
||
.value { margin-top: 7px; font-size: 24px; line-height: 1; font-weight: 800; }
|
||
.delta { margin-top: 7px; color: var(--subtle); font-size: 12px; }
|
||
.row.two { grid-template-columns: 1.45fr .8fr; align-items: start; }
|
||
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
|
||
h2 { font-size: 15px; margin: 0; }
|
||
.panel-body { padding: 12px 14px; }
|
||
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px; background: var(--panel-2); }
|
||
.tabs span { padding: 8px 11px; color: var(--muted); border-bottom: 2px solid transparent; line-height: 1.2; }
|
||
.tabs span.active { color: var(--text); border-color: var(--accent); background: var(--panel); }
|
||
table { width: 100%; border-collapse: collapse; min-width: 760px; }
|
||
.table-wrap { overflow: auto; }
|
||
th, td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; line-height: 1.25; }
|
||
th { color: #293b51; background: #d9e5f2; font-size: 12px; font-weight: 800; }
|
||
tbody tr.selected { background: var(--selected); outline: 1px solid #6e98ca; outline-offset: -1px; }
|
||
tbody tr:hover { background: #e2ebf5; }
|
||
.mono { font-family: Consolas, ui-monospace, monospace; }
|
||
.pill { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: var(--panel-3); border-radius: 3px; padding: 1px 6px; min-height: 20px; font-size: 11px; font-weight: 800; line-height: 1.1; }
|
||
.ok { color: var(--accent-2); border-color: #83a9d0; background: #dbeafa; }
|
||
.run { color: var(--blue); border-color: #84a9c7; background: #ddeaf5; }
|
||
.warn { color: var(--warn); border-color: #d0a561; background: #f0e2c8; }
|
||
.bad { color: var(--bad); border-color: #ca8888; background: #f0dada; }
|
||
.dense-list { display: grid; gap: 8px; }
|
||
.event { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 7px 9px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
|
||
.preview-map { height: 160px; background: linear-gradient(135deg, #e4edf7, #cfdae8); border: 1px solid var(--line); position: relative; overflow: hidden; border-radius: var(--radius); }
|
||
.preview-map::before, .preview-map::after { content: ""; position: absolute; inset: 18px; border: 1px solid #a8b9ca; }
|
||
.preview-map::after { inset: 44px 70px 36px 34px; border-color: #6e98ca; background: rgba(45,111,181,.1); }
|
||
@media (max-width: 960px) {
|
||
.shell, .row.two, .grid.kpi, .toolbar { grid-template-columns: 1fr; }
|
||
aside { position: relative; height: auto; }
|
||
main { padding: 18px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<aside>
|
||
<div class="brand"><div class="mark">AI</div><div><b>视觉识别运维平台</b><span>Fleet Operations Console</span></div></div>
|
||
<div class="section">主模块</div>
|
||
<nav>
|
||
<a class="active" href="#"><span class="nav-icon">OV</span>总览</a>
|
||
<a href="#"><span class="nav-icon">DV</span>设备</a>
|
||
<a href="#"><span class="nav-icon">CFG</span>识别配置</a>
|
||
<a href="#"><span class="nav-icon">JOB</span>任务</a>
|
||
<a href="#"><span class="nav-icon">LOG</span>诊断</a>
|
||
</nav>
|
||
</aside>
|
||
<div class="workspace">
|
||
<header>
|
||
<div><div class="crumb">多设备视觉识别运维平台</div><h1>总览</h1></div>
|
||
<a class="btn primary" href="theme-preview-dark.html">切换深色主题</a>
|
||
</header>
|
||
<main>
|
||
<div class="toolbar">
|
||
<div><h2>Fleet 运行态势</h2><div class="summary">浅色主题统一为蓝灰工业面板，与蓝黑深色主题保持同一套色相。</div></div>
|
||
<div><a class="btn" href="#">批量操作</a> <a class="btn primary" href="#">进入设备列表</a></div>
|
||
</div>
|
||
<section class="grid kpi">
|
||
<div class="stat hot"><div class="label">设备总数</div><div class="value">12</div><div class="delta">3 个分组 / 2 个车间</div></div>
|
||
<div class="stat hot"><div class="label">在线率</div><div class="value">10 / 12</div><div class="delta">83.3%，较昨日 -1</div></div>
|
||
<div class="stat"><div class="label">离线节点</div><div class="value">2</div><div class="delta">需要检查网络或 agent</div></div>
|
||
<div class="stat"><div class="label">执行中任务</div><div class="value">3</div><div class="delta">配置下发 2，重启 1</div></div>
|
||
</section>
|
||
<section class="row two">
|
||
<div class="panel">
|
||
<div class="tabs"><span class="active">异常设备</span><span>全部设备</span><span>任务结果</span></div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>节点</th><th>状态</th><th>识别配置</th><th>管理地址</th><th>最后心跳</th></tr></thead>
|
||
<tbody>
|
||
<tr class="selected"><td><b>OPI-3588-A03</b><div class="mono label">edge-a03</div></td><td><span class="pill bad">离线</span></td><td>车间全功能识别</td><td class="mono">10.0.0.81:18081</td><td>18 分钟前</td></tr>
|
||
<tr><td><b>OPI-3588-B02</b><div class="mono label">edge-b02</div></td><td><span class="pill warn">告警</span></td><td>劳保鞋检测</td><td class="mono">10.0.0.92:18081</td><td>37 秒前</td></tr>
|
||
<tr><td><b>OPI-3588-C01</b><div class="mono label">edge-c01</div></td><td><span class="pill ok">在线</span></td><td>人脸识别视频流</td><td class="mono">10.0.0.77:18081</td><td>9 秒前</td></tr>
|
||
<tr><td><b>OPI-3588-C04</b><div class="mono label">edge-c04</div></td><td><span class="pill run">任务中</span></td><td>服务测试流</td><td class="mono">10.0.0.79:18081</td><td>12 秒前</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-head"><h2>识别配置资产</h2><span class="pill run">模板 5</span></div>
|
||
<div class="panel-body">
|
||
<div class="preview-map"></div>
|
||
<div class="dense-list" style="margin-top:12px">
|
||
<div class="event"><span class="mono">13/12</span><b>车间全功能识别</b><span class="pill ok">标准</span></div>
|
||
<div class="event"><span class="mono">7/6</span><b>人脸识别视频流</b><span class="pill">用户</span></div>
|
||
<div class="event"><span class="mono">10/9</span><b>劳保鞋检测</b><span class="pill ok">标准</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="panel" style="margin-top:12px">
|
||
<div class="panel-head"><h2>最近任务</h2><span class="label">浅色主题仍保留明显选中行，不回到低对比白灰表格</span></div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>任务标识</th><th>操作</th><th>状态</th><th>节点数</th><th>耗时</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="mono">task-0428-0018</td><td>下发识别配置</td><td><span class="pill run">执行中</span></td><td>4</td><td>01:42</td></tr>
|
||
<tr class="selected"><td class="mono">task-0428-0017</td><td>重启视频分析服务</td><td><span class="pill bad">失败</span></td><td>1</td><td>00:19</td></tr>
|
||
<tr><td class="mono">task-0428-0016</td><td>导出诊断日志</td><td><span class="pill ok">成功</span></td><td>2</td><td>00:43</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|