/* ── 设计令牌 ─────────────────────────────────────── */ /* 默认浅色：页面浅灰底 + 卡片纯白，层次靠 surface 与 line 拉开而不是靠深色块。 * 刻意不跟随 prefers-color-scheme —— 这是运维台，白天使用为主，主题只由 * 右上角开关（写入 ）决定，避免同一台机器上两个人看到两种样子。 */ :root { color-scheme: light; --page: #f5f7fa; /* 页面底：极浅灰蓝，比纯白柔和，长时间看不刺眼 */ --surface: #ffffff; /* 卡片：纯白 */ --surface-raised: #ffffff; --surface-sunken: #f7f9fc; /* 表头 / 内嵌区：比页面底再浅一档 */ --ink: #16191d; /* 正文 */ --ink-secondary: #545c66; --ink-muted: #8a929c; --line: #e6eaf0; /* 常规分隔线 */ --line-strong: #d3dae3; /* 输入框 / 按钮描边 */ --accent: #42b883; /* Vue 品牌绿 */ --accent-hover: #369a6d; --accent-ink: #ffffff; --accent-soft: rgba(66, 184, 131, 0.12); --brand-dark: #35495e; /* Vue 深蓝灰，用于 logo 渐变与强调标题 */ /* 主色为绿之后，「在线」沿用同一支绿：在线=好=绿，语义与主色一致， 不再另造一个相近的绿去和它抢辨识度。状态始终是「圆点 + 文字」， 不依赖颜色单独表意（离线红、未知灰同理）。 */ --good: #42b883; --warning: #fab219; --critical: #d03b3b; --good-soft: rgba(66, 184, 131, 0.12); --critical-soft: rgba(208, 59, 59, 0.10); --warning-soft: rgba(250, 178, 25, 0.14); --warning-ink: #8a6100; /* warning 在白底上对比不足，文字用加深版 */ --shadow-sm: 0 1px 2px rgba(22, 25, 29, 0.05); --shadow-md: 0 4px 16px rgba(22, 25, 29, 0.09); --shadow-lg: 0 16px 48px rgba(22, 25, 29, 0.18); --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --nav-w: 208px; } /* 暗色：仅在用户显式切换时生效 */ :root[data-theme="dark"] { color-scheme: dark; --page: #0f1216; --surface: #171b21; --surface-raised: #1e232b; --surface-sunken: #12161b; --ink: #eef1f5; --ink-secondary: #b3bcc7; --ink-muted: #7d8894; --line: #262c35; --line-strong: #333b46; --accent: #4ac48d; --accent-hover: #5fd39f; --accent-soft: rgba(74, 196, 141, 0.18); --brand-dark: #35495e; --good: #4ac48d; --good-soft: rgba(74, 196, 141, 0.18); --critical-soft: rgba(208, 59, 59, 0.18); --warning-soft: rgba(250, 178, 25, 0.16); --warning-ink: #fab219; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6); } /* ── 基础 ─────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; } /* 应用挂载前隐藏未编译的模板，避免闪现花括号 */ [v-cloak] { display: none !important; } .mono { font-family: var(--mono); font-size: 0.92em; font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 2px solid var(--page); } /* ── 布局骨架 ─────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--nav-w); flex: 0 0 var(--nav-w); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--brand-dark)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: 0 0 auto; } .brand-text { min-width: 0; } .brand-name { font-size: 14px; font-weight: 650; line-height: 1.2; } .brand-sub { font-size: 11px; color: var(--ink-muted); line-height: 1.3; } .nav { padding: 10px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; margin-bottom: 2px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--ink-secondary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .12s, color .12s; } .nav-item:hover { background: var(--surface-sunken); color: var(--ink); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item .ico { width: 18px; text-align: center; flex: 0 0 auto; opacity: .9; } .nav-badge { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; background: var(--surface-sunken); color: var(--ink-secondary); border-radius: 20px; padding: 1px 7px; } .nav-item.active .nav-badge { background: var(--accent); color: var(--accent-ink); } .sidebar-foot { padding: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-muted); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 58px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .topbar h1 { font-size: 16px; } .topbar-spacer { flex: 1; } .content { padding: 22px; flex: 1; } .view-hint { color: var(--ink-secondary); font-size: 13px; margin: -4px 0 18px; } /* ── 卡片 / 区块 ──────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card + .card { margin-top: 18px; } .card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .card-head h2 { font-size: 14px; } .card-head .sub { font-size: 12px; color: var(--ink-muted); } .card-body { padding: 18px; } .card-body.flush { padding: 0; } .count-pill { font-size: 12px; font-variant-numeric: tabular-nums; background: var(--surface-sunken); color: var(--ink-secondary); border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px; } /* ── 统计卡片 ─────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 18px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow-sm); } .stat-label { font-size: 12px; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .stat-value { font-size: 26px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stat-value.sm { font-size: 18px; } .stat-foot { font-size: 11px; color: var(--ink-muted); margin-top: 5px; } .stat-value.is-good { color: var(--good); } .stat-value.is-critical { color: var(--critical); } /* 使用率条：端口池等有上限的量 */ .meter { height: 5px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; margin-top: 9px; } .meter-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .3s ease; } .meter-fill.warn { background: var(--warning); } .meter-fill.crit { background: var(--critical); } /* ── 表格 ─────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } thead th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); padding: 10px 14px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr.clickable { cursor: pointer; } tbody tr.clickable:hover { background: var(--surface-sunken); } tbody tr.expanded { background: var(--accent-soft); } .empty-cell { text-align: center; color: var(--ink-muted); padding: 32px 14px !important; } .nested-cell { padding: 0 !important; background: var(--surface-sunken); } .nested-wrap { padding: 12px 14px 14px 34px; } .nested-wrap thead th { background: transparent; } .nested-wrap table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } /* ── 状态徽章（圆点 + 文字，绝不只靠颜色）────────── */ .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .status .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .status.on { color: var(--good); } .status.on .dot { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); } .status.off { color: var(--critical); } .status.off .dot { background: var(--critical); } .status.idle { color: var(--ink-muted); } .status.idle .dot { background: var(--ink-muted); } .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-secondary); white-space: nowrap; } .tag.live { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .tag.playback { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; } .tag.talk { background: var(--good-soft); color: var(--good); border-color: transparent; } /* ── 按钮 ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s; } .btn:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--ink-muted); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.danger { color: var(--critical); border-color: var(--critical); background: transparent; } .btn.danger:hover:not(:disabled) { background: var(--critical-soft); } .btn.sm { padding: 4px 9px; font-size: 12px; } .btn.ghost { border-color: transparent; background: transparent; color: var(--ink-secondary); } .btn.ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); } .btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* ── 表单 ─────────────────────────────────────────── */ input[type="text"], input[type="password"], input[type="number"], select { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 13px; min-width: 0; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } select { cursor: pointer; } label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-muted); } .form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .form-msg { font-size: 12px; color: var(--critical); } .form-msg.ok { color: var(--good); } /* ── 键值网格（SIP 接入信息等）────────────────────── */ .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .kv { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; } .kv-label { font-size: 11px; color: var(--ink-muted); margin-bottom: 3px; } .kv-value { font-size: 14px; font-weight: 600; word-break: break-all; } .kv-value.clickable { cursor: pointer; } .kv-value.clickable:hover { color: var(--accent); } /* ── 模态框 ───────────────────────────────────────── */ .modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 20px; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(760px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .modal.wide { width: min(1000px, 100%); } .modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .modal-head h3 { font-size: 15px; } /* flex + min-height:0 缺一不可：没有它，模态框里高度固定的兄弟节点（如锁了 aspect-ratio 的播放器）会把这里挤成一条缝，内容只剩滚动条可见 */ .modal-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .modal-body.flush { padding: 0; } .modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; } .icon-btn { border: none; background: transparent; color: var(--ink-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .icon-btn:hover { background: var(--surface-sunken); color: var(--ink); } /* ── 播放器 ───────────────────────────────────────── */ /* 预览弹窗的两级容器：窄屏上下堆叠（画面在上、地址与云台在下）， 宽屏转成左右两栏，把纵向压力挪到横向 —— 见本区块末尾的媒体查询 */ .player-layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* 不设 min-height:0 —— 它会允许本容器被压到内容高度以下，堆叠模式下状态栏就会 溢出去盖住下方的地址列表。收缩全部交给 .modal-body（它 overflow:auto，能收到 0） */ .player-main { display: flex; flex-direction: column; } .player-side-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: start; } .player-video { width: 100%; aspect-ratio: 16 / 9; /* 上限必须给：aspect-ratio 把高度锁成宽度的 0.5625 倍，弹窗 1000px 宽就是 562px， 矮屏上足以把下方的地址栏和云台盘整个挤出可视区。这里给它们留出 380px （实测 head 53px + 状态栏 50px，再加地址与云台约 270px） */ max-height: min(52vh, calc(100vh - 380px)); /* 老国标机多是 4:3，塞进锁死的 16:9 会被拉伸；contain 保比例，空出来的地方 露 .player-stage 的黑底 */ object-fit: contain; background: #000; display: block; } .player-status { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 12px; color: var(--ink-secondary); border-bottom: 1px solid var(--line); background: var(--surface-sunken); flex: 0 0 auto; } .url-list { display: flex; flex-direction: column; gap: 6px; } .url-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .url-label { flex: 0 0 46px; font-size: 10px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; } .url-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-secondary); } /* 宽屏：画面占左，地址与云台收进右侧固定栏，弹窗同时加宽。 分界取 1100px —— 再窄的话左栏不足 700px，画面就太小了，不如堆叠 */ @media (min-width: 1100px) { .modal.wide { width: min(1320px, 100%); } .player-layout { flex-direction: row; } .player-main { flex: 1 1 auto; min-width: 0; } .modal-body.player-side { flex: 0 0 360px; border-left: 1px solid var(--line); } /* 侧栏只有 360px，地址和云台从并排改为上下排 */ .player-side-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .player-side-grid > * + * { border-top: 1px solid var(--line); padding-top: 18px; } /* 画面下方不再有内容，放宽上限（留 160px 给 head 53 + 状态栏 50 + 弹窗外边距） */ .player-video { max-height: calc(100vh - 160px); } /* 侧栏只有 360px，单行 ellipsis 会把地址截得只剩协议头。改成 「标签 + 复制」占一行、URL 独占下一行完整折行，地址才是真的能看 */ .player-side .url-row { flex-wrap: wrap; row-gap: 3px; } .player-side .url-label { flex: 1 1 auto; } .player-side .url-text { flex: 1 0 100%; order: 3; white-space: normal; word-break: break-all; line-height: 1.55; } } /* ── PTZ 控制盘 ───────────────────────────────────── */ .ptz-pad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 6px; justify-content: center; } .ptz-btn { border: 1px solid var(--line-strong); background: var(--surface-raised); border-radius: var(--radius-sm); color: var(--ink-secondary); font-size: 17px; cursor: pointer; display: grid; place-items: center; user-select: none; transition: background .1s; } .ptz-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .ptz-btn:active { background: var(--accent); color: var(--accent-ink); } .ptz-btn.center { border-style: dashed; font-size: 11px; cursor: default; color: var(--ink-muted); } .ptz-btn.center:hover { background: var(--surface-raised); color: var(--ink-muted); border-color: var(--line-strong); } .ptz-zoom { display: flex; gap: 6px; justify-content: center; margin-top: 10px; } /* 速度档位：跟方向盘同宽居中，选中的那档用主色实心，一眼能认出当前档位 */ .ptz-speed { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 10px; } .ptz-speed-label { font-size: 11px; color: var(--ink-muted); } /* ── Toast ────────────────────────────────────────── */ .toast-stack { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .toast { display: flex; align-items: flex-start; gap: 8px; min-width: 240px; max-width: 420px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--ink-muted); box-shadow: var(--shadow-md); font-size: 13px; } .toast.ok { border-left-color: var(--good); } .toast.err { border-left-color: var(--critical); } .toast.warn { border-left-color: var(--warning); } .toast-ico { flex: 0 0 auto; } /* ── 登录页 ───────────────────────────────────────── */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(1100px 520px at 50% -12%, var(--accent-soft), transparent 70%), var(--page); } .login-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; } .login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; } .login-title { font-size: 17px; font-weight: 650; } .login-desc { font-size: 12px; color: var(--ink-muted); margin-bottom: 20px; } .login-form { display: flex; flex-direction: column; gap: 12px; } .login-form input { padding: 9px 12px; font-size: 14px; } .login-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); } .login-alt summary { cursor: pointer; } .login-alt .form-row { margin-top: 10px; } /* ── 骨架屏 ───────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--line) 37%, var(--surface-sunken) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); height: 13px; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ── 实时指示 ─────────────────────────────────────── */ .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: 0 0 auto; } .live-dot.pulse { animation: pulse .55s ease; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--good-soft); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .refresh-label { font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } /* ── 代码块 / 帮助文本 ────────────────────────────── */ .hint { font-size: 12px; color: var(--ink-muted); line-height: 1.7; } .code-block { font-family: var(--mono); font-size: 11.5px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; white-space: pre-wrap; word-break: break-all; color: var(--ink-secondary); line-height: 1.65; } .id-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .id-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); } .id-item .mono { flex: 1; font-size: 13px; } /* 计数器网格（SIP 传输层指标） */ .counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; } .counter { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); } .counter-label { font-size: 11px; color: var(--ink-muted); } .counter-value { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; } .counter.alert { border-color: var(--warning); background: var(--warning-soft); } .counter.alert .counter-value { color: var(--warning-ink); } /* ── 窄屏 ─────────────────────────────────────────── */ @media (max-width: 860px) { .app { flex-direction: column; } .sidebar { width: 100%; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); } .nav { display: flex; overflow-x: auto; padding: 8px; gap: 4px; } .nav-item { width: auto; margin-bottom: 0; white-space: nowrap; } .sidebar-foot { display: none; } .content { padding: 14px; } .topbar { padding: 0 14px; } } /* ── 图表 ─────────────────────────────────────────── */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; } .chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px 10px; min-width: 0; /* grid 子项默认 min-width:auto，会让 SVG 撑破列宽 */ } .chart-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .chart-title { font-size: 13px; font-weight: 600; } .chart-value { margin-left: auto; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; } .chart-sub { font-size: 11px; color: var(--ink-muted); } .chart-legend { display: flex; gap: 12px; margin-left: auto; } .legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-secondary); } .legend-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto; } /* tooltip 跟随 crosshair；pointer-events:none 避免自己挡住鼠标造成闪烁 */ .chart-tip { position: absolute; pointer-events: none; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 7px 10px; font-size: 11px; min-width: 118px; z-index: 5; } .tip-time { color: var(--ink-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; } .tip-label { color: var(--ink-secondary); } .tip-val { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; } /* 环形进度 */ .donut-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; place-items: center; } .donut { text-align: center; } .donut-label { font-size: 12px; color: var(--ink-secondary); margin-top: 4px; } .donut-sub { font-size: 11px; color: var(--ink-muted); } /* 磁盘：横向使用率条，比饼图更容易读出"还剩多少" */ .disk-row { margin-bottom: 12px; } .disk-row:last-child { margin-bottom: 0; } .disk-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; margin-bottom: 5px; } .disk-path { font-weight: 600; } .disk-num { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .disk-bar { height: 9px; border-radius: 5px; background: var(--surface-sunken); overflow: hidden; } .disk-fill { height: 100%; border-radius: 5px; background: var(--accent); transition: width .4s ease; } .disk-fill.warn { background: var(--warning); } .disk-fill.crit { background: var(--critical); } .metric-note { font-size: 11px; color: var(--ink-muted); margin-top: 8px; line-height: 1.6; } .section-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .section-title { font-size: 14px; font-weight: 600; } /* ── 播放器加载层 ─────────────────────────────────── */ .player-stage { position: relative; background: #000; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; } .player-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; /* video 底色是纯黑，这里用带一点通透感的深色，出画面前后过渡不突兀 */ background: radial-gradient(circle at 50% 45%, rgba(20, 24, 28, .82), rgba(0, 0, 0, .94)); color: #e8ecf0; /* 不吃鼠标事件，否则盖住 video 的原生控件；错误层要按钮，单独放开 */ pointer-events: none; } .player-overlay.error { pointer-events: auto; } /* spinner：轨道 + 一段旋转的弧，比等分虚线圈更干净 */ .spinner { animation: spin 1.1s linear infinite; } .spinner-track { stroke: rgba(255, 255, 255, .14); } .spinner-arc { stroke: var(--accent); stroke-dasharray: 90 126; animation: arc 1.5s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes arc { 0% { stroke-dasharray: 18 126; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 126; stroke-dashoffset: -28; } 100% { stroke-dasharray: 18 126; stroke-dashoffset: -110; } } .overlay-text { font-size: 13px; max-width: 78%; text-align: center; line-height: 1.65; color: #dfe5ea; } .overlay-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #fff; background: var(--critical); } /* 阶段步骤：让"卡住了"能定位到具体环节 */ .overlay-steps { display: flex; align-items: center; gap: 0; margin-top: 2px; } .ostep { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, .38); } .ostep-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); flex: 0 0 auto; transition: background .25s, box-shadow .25s; } .ostep-line { width: 26px; height: 1px; background: rgba(255, 255, 255, .16); margin: 0 8px; } .ostep.done { color: rgba(255, 255, 255, .62); } .ostep.done .ostep-dot { background: var(--accent); } .ostep.active { color: #fff; } .ostep.active .ostep-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(66, 184, 131, .22); animation: stepPulse 1.4s ease-in-out infinite; } @keyframes stepPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(66, 184, 131, .18); } 50% { box-shadow: 0 0 0 7px rgba(66, 184, 131, .05); } } /* 出画面时淡出，避免加载层"啪"地消失 */ .fade-enter-active, .fade-leave-active { transition: opacity .35s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* 尊重系统的"减少动态效果"设置 */ @media (prefers-reduced-motion: reduce) { .spinner, .spinner-arc, .ostep.active .ostep-dot { animation: none; } .fade-enter-active, .fade-leave-active { transition: none; } } /* 取消静音入口：video 默认 muted 才能自动播放，用户常不知道有声音 */ .player-status .unmute-btn { margin-left: auto; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; } .player-status .btn.ghost { margin-left: auto; } /* ── 配置页 ───────────────────────────────────────── */ .setting-row { display: flex; align-items: flex-start; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); } .setting-row:first-child { padding-top: 0; } .setting-row:last-of-type { border-bottom: none; } .setting-label { flex: 1; min-width: 0; } .setting-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; } .setting-desc { font-size: 12px; color: var(--ink-muted); line-height: 1.65; } .setting-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-top: 2px; } /* ── 通道封面缩略图 ───────────────────────────────── */ .thumb { width: 72px; height: 41px; /* 16:9 */ border-radius: 4px; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-empty { font-size: 11px; color: var(--ink-muted); } /* 有图才可点：没封面时保持死板样式，别给出"点了会有反应"的暗示 */ .thumb.zoomable { cursor: zoom-in; transition: border-color .12s; } .thumb.zoomable:hover { border-color: var(--accent); } .thumb.zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 大图查看：宽度跟着图走，不用 .modal 的固定宽，免得窄图两边留一大片空框 */ .modal.lightbox { width: auto; max-width: min(1100px, 100%); } .lightbox-body { position: relative; } .lightbox-img { display: block; max-width: 100%; max-height: calc(100vh - 220px); /* 减掉头、脚和 mask 的 padding，保证整图可见 */ object-fit: contain; background: var(--surface-sunken); } /* 原图还在路上时的提示，压在缩略图上 —— 不挡操作，也不让画面跳一下 */ .lightbox-loading { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 999px; pointer-events: none; } /* GB28181 抓拍诊断的行内状态 */ .gbsnap-hint { margin-top: 6px; font-size: 11px; line-height: 1.5; } .gbsnap-hint .status { font-weight: 500; white-space: normal; } /* ── 媒体节点 ─────────────────────────────────────── */ /* 默认节点不可用时的全局横幅。放在内容区顶部而不是节点页里： 这时新点播会全部失败，运维在任何页面都该看得到。 */ .alert-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--critical-soft); border: 1px solid var(--critical); color: var(--critical); font-size: 13px; font-weight: 500; } .alert-banner .alert-ico { font-size: 15px; } .alert-banner .btn { margin-left: auto; } /* 图表标题旁的口径标注。多节点部署时 CPU/内存/网络采的是 NingolGB 本机， 不是各媒体节点 —— 不标出来会被当成集群总和看。 */ .chart-scope { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-muted); font-size: 10px; font-weight: 400; } .node-name { display: flex; align-items: center; gap: 6px; font-weight: 500; } .node-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .node-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; } .node-form label > span { color: var(--ink-secondary); font-weight: 500; } .node-form label > em { font-style: normal; font-size: 11px; color: var(--ink-muted); line-height: 1.5; } .node-form .req { color: var(--critical); } .node-form-wide { grid-column: 1 / -1; } @media (max-width: 640px) { .node-form { grid-template-columns: 1fr; } } .hint-list { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.9; color: var(--ink-secondary); } .hint-list b { color: var(--ink); font-weight: 600; } /* 设备详情弹框：点设备名/编号打开，集中展示身份、状态与取流配置。 放弹框而不是塞进列表列：这些是排查时才看的低频信息，列表已经很宽了。 */ .device-id-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: var(--radius-sm); } .device-id-btn:hover .node-name, .device-id-btn:hover .mono { color: var(--accent); } .device-id-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .detail-group + .detail-group { margin-top: 16px; } .detail-group-title { font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: .04em; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .detail-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; } .detail-k { flex: 0 0 84px; color: var(--ink-muted); font-size: 12px; } .detail-v { flex: 1; min-width: 0; word-break: break-all; } /* 「未获取到」用弱化色：它是一个明确的结论（查过了没有），不是渲染漏了 */ .detail-v.weak { color: var(--ink-muted); }