33 lines
2.0 KiB
HTML
33 lines
2.0 KiB
HTML
|
{# ============================================================================
|
||
|
|
统一导航栏 + 徽章样式 —— 所有控制台页面 include 本文件
|
||
|
|
用法：<style>{% include "_nav_style.html" %}</style>
|
||
|
|
============================================================================ #}
|
||
|
|
nav { background: linear-gradient(135deg, #0f172a, #1e3a5f); color: white; padding: 0 24px; height: 54px;
|
||
|
|
display: flex; align-items: center; gap: 24px; box-shadow: 0 2px 12px rgba(15,23,42,.18); }
|
||
|
|
nav .logo { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
|
||
|
|
nav .logo-img { height: 28px; width: auto; border-radius: 5px; }
|
||
|
|
nav a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px;
|
||
|
|
transition: color .2s; position: relative; padding: 0 2px; }
|
||
|
|
nav a:hover { color: #fff; }
|
||
|
|
nav a.active { color: #fff; font-weight: 500; }
|
||
|
|
nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px;
|
||
|
|
height: 2px; background: #38bdf8; border-radius: 2px; }
|
||
|
|
nav .spacer { flex: 1; }
|
||
|
|
nav .user { font-size: 13px; color: rgba(255,255,255,.6); }
|
||
|
|
nav .user a { color: rgba(255,255,255,.6); margin-left: 12px; }
|
||
|
|
|
||
|
|
/* ---------- 统一风险徽章体系 ---------- */
|
||
|
|
.tag { font-size: 11px; padding: 2.5px 9px; border-radius: 5px; font-weight: 500; white-space: nowrap; }
|
||
|
|
.tag.ok { background: #dcfce7; color: #15803d; }
|
||
|
|
.tag.warn { background: #fef3c7; color: #b45309; }
|
||
|
|
.tag.notice{ background: #fff7ed; color: #c2410c; }
|
||
|
|
.tag.bad { background: #fee2e2; color: #b91c1c; }
|
||
|
|
.tag.err { background: #ede9fe; color: #6d28d9; }
|
||
|
|
.tag.muted { background: #f1f5f9; color: #64748b; }
|
||
|
|
.tag.plain { background: #f1f5f9; color: #475569; }
|
||
|
|
.tag.risk-high { background: #fee2e2; color: #b91c1c; }
|
||
|
|
.tag.risk-notice { background: #fff7ed; color: #c2410c; }
|
||
|
|
.tag.risk-safe { background: #dcfce7; color: #15803d; }
|
||
|
|
.tag.risk-fault { background: #ede9fe; color: #6d28d9; }
|
||
|
|
.tag.risk-idle { background: #f1f5f9; color: #64748b; }
|