/* ============================================================ 一物智客 · v2.0 共享设计系统设计原则：深蓝灰基调 · 角色差异化品牌色 · 生产级细节 ============================================================ */ :root{ /* 深色基底 —— 蓝灰而非死黑，参考 GitHub Dark / Linear */ --bg-0: #0d1117; --bg-1: #111827; --bg-2: #161f35; --panel: #141e35; --panel-2: #1a2540; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.09); --line-3: rgba(255,255,255,.14); --ink-0: #eef2ff; --ink-1: #c7cce0; --ink-2: #8a92ae; --ink-3: #565d78; --ink-4: #3a415c; /* 语义色 */ --mint: #34d399; --amber: #f5b544; --rose: #f87171; --sky: #7dd3fc; /* 角色主色（默认：超管蓝） */ --role: #5b6bff; --role-2: #22d3ee; --role-soft:rgba(91,107,255,.14); --role-line:rgba(91,107,255,.32); --role-name:'超级管理员'; } /* 角色主题切换 —— 在上使用 */ body.role-super{ --role: #5b6bff; /* 靛蓝 */ --role-2: #22d3ee; --role-soft:rgba(91,107,255,.14); --role-line:rgba(91,107,255,.32); } body.role-agent{ --role: #8b5cf6; /* 紫色 */ --role-2: #d946ef; --role-soft:rgba(139,92,246,.14); --role-line:rgba(139,92,246,.32); } body.role-merchant{ --role: #22d3ee; /* 青色 */ --role-2: #5eead4; --role-soft:rgba(34,211,238,.13); --role-line:rgba(34,211,238,.30); } /* ============================================================ 基础 */ *{ box-sizing: border-box; } html,body{ background: var(--bg-0); color: var(--ink-0); margin:0; padding:0; } body{ font-family:"Manrope","PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC",system-ui,sans-serif; font-feature-settings:"ss01","cv11"; letter-spacing:-0.005em; -webkit-font-smoothing:antialiased; min-height:100vh; } .font-num{ font-family:"Geist","Manrope",system-ui,sans-serif; font-feature-settings:"tnum","ss01"; letter-spacing:-0.02em;} .font-mono{ font-family:"Geist Mono",ui-monospace,monospace;} .app-bg{ background: radial-gradient(1100px 520px at 18% -10%, color-mix(in srgb, var(--role) 18%, transparent), transparent 60%), radial-gradient(900px 480px at 95% 0%, color-mix(in srgb, var(--role-2) 12%, transparent), transparent 60%), radial-gradient(700px 420px at 60% 120%, rgba(139,92,246,.08), transparent 60%), var(--bg-0); } /* ============================================================ 容器 */ .panel{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--panel); border:1px solid var(--line); border-radius:16px; } .panel-soft{ background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), #0d1228; border:1px solid var(--line); border-radius:14px; } .panel-outline{ background: rgba(255,255,255,.015); border:1px solid var(--line); border-radius:14px; } .hairline{ border-color:var(--line)!important; } .hairline-2{ border-color:var(--line-2)!important; } /* ============================================================ 徽章 / 胶囊 */ .chip{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid var(--line); font-size:11px; color: var(--ink-1); letter-spacing:0; } .chip-role{ background: var(--role-soft); border-color: var(--role-line); color: color-mix(in srgb, var(--role) 85%, white); } .chip-ok{background:rgba(52,211,153,.10);color:#6ee7b7;border-color:rgba(52,211,153,.28);} .chip-warn{background:rgba(245,181,68,.10);color:#fcd79a;border-color:rgba(245,181,68,.28);} .chip-err{background:rgba(248,113,113,.10);color:#fca5a5;border-color:rgba(248,113,113,.26);} .chip-sky{background:rgba(34,211,238,.08);color:#7dd3fc;border-color:rgba(34,211,238,.24);} .dot{ width:6px; height:6px; border-radius:999px; display:inline-block; } /* ============================================================ 按钮 */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px; border-radius:10px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:all .14s ease; white-space:nowrap; } .btn-primary{ background: linear-gradient(180deg, color-mix(in srgb, var(--role) 92%, white 8%), var(--role)); color:white; font-weight:600; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 20px -8px color-mix(in srgb, var(--role) 60%, transparent); } .btn-primary:hover{ filter:brightness(1.08); } .btn-gradient{ background: linear-gradient(135deg, var(--role) 0%, var(--role-2) 100%); color:white; font-weight:600; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 24px -10px color-mix(in srgb, var(--role) 55%, transparent); } .btn-ghost{ background: rgba(255,255,255,.02); border-color: var(--line-2); color: var(--ink-0); } .btn-ghost:hover{ background: rgba(255,255,255,.05); } .btn-danger{ background: rgba(248,113,113,.12); color:#fca5a5; border-color:rgba(248,113,113,.26); } .btn-sm{ height:28px; padding:0 10px; font-size:12px; border-radius:8px; } .btn-xs{ height:24px; padding:0 8px; font-size:11px; border-radius:6px; } /* ============================================================ 顶部导航 */ .topbar{ height:64px; position:sticky; top:0; z-index:30; backdrop-filter: blur(12px); background: rgba(7,10,20,.65); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 24px; } .brand{ display:flex; align-items:center; gap:10px; width:232px; } .brand-mark{ width:32px; height:32px; border-radius:10px; color: var(--role); display:grid; place-items:center; flex-shrink:0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--role) 40%, transparent) inset, 0 10px 28px -12px color-mix(in srgb, var(--role) 60%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; } .brand-mark svg{ display:block; } /* Logo 可点击：任何作为或带 .brand-link 的 wrapper 都有 hover 动效 */ a.brand, a.brand-link, .brand-link{ text-decoration:none; color:inherit; cursor:pointer; transition: opacity .25s; } a.brand:hover, a.brand-link:hover, .brand-link:hover{ opacity:.92; } a.brand:hover .brand-mark, a.brand-link:hover .brand-mark, .brand-link:hover .brand-mark{ transform: translateY(-1px) rotate(-3deg) scale(1.04); box-shadow: 0 0 0 1px color-mix(in srgb, var(--role) 55%, transparent) inset, 0 14px 36px -10px color-mix(in srgb, var(--role) 75%, transparent); } a.brand:focus-visible, a.brand-link:focus-visible, .brand-link:focus-visible{ outline: 2px solid color-mix(in srgb, var(--role) 65%, transparent); outline-offset: 4px; border-radius: 12px; } .brand-name{ font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:#fff; } .brand-meta{ font-size:10px; font-weight:500; letter-spacing:.06em; color: var(--ink-3); text-transform:uppercase; } .crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-2); margin-left:4px;} .crumb .sep{ color: var(--ink-4); } .crumb .cur{ color:#fff; font-weight:500; } .search{ height:38px; border-radius:10px; border:1px solid var(--line); background: rgba(255,255,255,.025); display:flex; align-items:center; gap:10px; padding:0 12px; color: var(--ink-2); font-size:13px; } .kbd{ font-family:"Geist Mono",monospace; font-size:10.5px; color:var(--ink-2); padding:2px 6px; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.03);} .avatar-btn{ display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:10px; border:1px solid var(--line-2); background:rgba(255,255,255,.015); } .avatar{ width:28px; height:28px; border-radius:999px; background: linear-gradient(135deg, var(--role), var(--role-2)); display:grid; place-items:center; font-size:11px; font-weight:700; color: var(--bg-0); } /* ============================================================ 侧边栏 */ .sidebar{ width:248px; flex-shrink:0; min-height: calc(100vh - 64px); padding: 18px 14px; border-right:1px solid var(--line); position:relative; z-index:20; /* 高于页面内 sticky 元素，确保 nav 可点击 */ } .nav-sect{ font-size:10.5px; letter-spacing:.14em; color: var(--ink-4); text-transform:uppercase; padding:14px 10px 6px; font-weight:600; } .nav-item{ display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:10px; color: var(--ink-1); font-size:13.5px; position:relative; text-decoration:none; cursor:pointer; } .nav-item:hover{ background: rgba(255,255,255,.03); color: var(--ink-0); } .nav-item.active{ color:#fff; background: linear-gradient(90deg, var(--role-soft), transparent); } .nav-item.active::before{ content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; border-radius:3px; background: linear-gradient(180deg, var(--role), var(--role-2)); box-shadow: 0 0 12px color-mix(in srgb, var(--role) 60%, transparent); } .nav-badge{ margin-left:auto; min-width:20px; height:18px; padding:0 6px; font-size:10.5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(248,113,113,.16); color:#ffb4b4; border:1px solid rgba(248,113,113,.28); } .nav-badge.b-role{ background: var(--role-soft); color: color-mix(in srgb, var(--role) 80%, white); border-color: var(--role-line); } .nav-badge.b-warn{background:rgba(245,181,68,.14);color:#fcd79a;border-color:rgba(245,181,68,.3);} /* ============================================================ KPI */ .kpi-num{ font-family:"Geist","Manrope",sans-serif; font-weight:600; font-size:34px; line-height:1; letter-spacing:-.03em;} .kpi-unit{ color: var(--ink-2); font-size:13px; font-weight:500; margin-left:4px;} .kpi-label{ color:var(--ink-2); font-size:12px; } .kpi-icon{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background: var(--role-soft); border:1px solid var(--role-line); color: color-mix(in srgb, var(--role) 75%, white); } .trend-up, .trend-down, .trend-flat{ display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:6px; font-size:11.5px; font-weight:600; } .trend-up{ background:rgba(52,211,153,.12); color:#6ee7b7; border:1px solid rgba(52,211,153,.22);} .trend-down{ background:rgba(248,113,113,.10); color:#fca5a5; border:1px solid rgba(248,113,113,.22);} .trend-flat{ background:rgba(255,255,255,.05); color: var(--ink-1); border:1px solid var(--line);} /* ============================================================ 表格 */ .tbl{ width:100%; border-collapse:separate; border-spacing:0; } .tbl thead th{ text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-3); padding:10px 14px; background:rgba(255,255,255,.015); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .tbl thead th:first-child{ border-top-left-radius:12px; border-left:1px solid var(--line);} .tbl thead th:last-child { border-top-right-radius:12px; border-right:1px solid var(--line);} .tbl tbody td{ padding:13px 14px; font-size:13px; color: var(--ink-0); border-bottom:1px solid var(--line); background: rgba(255,255,255,.008); } .tbl tbody tr:hover td{ background: rgba(255,255,255,.028); } .tbl tbody tr:first-child td{ border-top:0; } .tbl tbody tr td:first-child{ border-left:1px solid var(--line); } .tbl tbody tr td:last-child { border-right:1px solid var(--line); } .tbl tbody tr:last-child td:first-child{ border-bottom-left-radius:12px; } .tbl tbody tr:last-child td:last-child { border-bottom-right-radius:12px; } /* ============================================================ 输入控件 */ .input, .select, .textarea{ height:38px; width:100%; padding:0 12px; background: rgba(255,255,255,.025); border:1px solid var(--line-2); border-radius:10px; color: var(--ink-0); font-size:13px; transition:border-color .14s, background .14s; font-family:inherit; } .textarea{ height:auto; padding:10px 12px; line-height:1.6; resize:vertical; min-height:90px;} .input:focus, .select:focus, .textarea:focus{ outline:none; border-color: var(--role); background: rgba(255,255,255,.035); } .input::placeholder{ color: var(--ink-3); } .label{ font-size:12.5px; color: var(--ink-1); font-weight:500; display:block; margin-bottom:6px;} .hint{ font-size:11px; color: var(--ink-3); margin-top:6px;} .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } /* 开关 */ .switch{ position:relative; display:inline-block; width:44px; height:24px;} .switch input{ opacity:0; width:0; height:0;} .switch .slider{ position:absolute; inset:0; background:rgba(255,255,255,.08); border-radius:999px; transition:.2s; cursor:pointer; border:1px solid var(--line-2); } .switch .slider::before{ content:""; position:absolute; left:2px; top:2px; width:18px; height:18px; background:#fff; border-radius:999px; transition:.2s; } .switch input:checked + .slider{ background: linear-gradient(135deg, var(--role), var(--role-2)); border-color:transparent; } .switch input:checked + .slider::before{ transform: translateX(20px); } /* ============================================================ 标签页 / tab 切换 */ .tabs{ display:flex; gap:2px; padding:4px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.015); } .tabs button{ height:32px; padding:0 14px; border-radius:8px; background:transparent; border:none; cursor:pointer; color: var(--ink-2); font-size:12.5px; font-weight:500; font-family:inherit; } .tabs button:hover{ color:var(--ink-0); } .tabs button.on{ background: rgba(255,255,255,.06); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; } /* 页面切换容器 */ .page{ display:none; } .page.on{ display:block; } /* 满屏布局页（消息中心、人工接管等占满视窗的三栏式布局） */ .page-full{ padding:0; margin:-28px -32px; height:calc(100vh - 64px); flex-direction:column; } .page-full.on{ display:flex; } /* ============ 炫彩流动模式 ============ */ @keyframes rainbowShift { 0% { --role: #fb7185; --role-2: #fbbf24; } 20% { --role: #f59e0b; --role-2: #ec4899; } 40% { --role: #8b5cf6; --role-2: #22d3ee; } 60% { --role: #22d3ee; --role-2: #5eead4; } 80% { --role: #34d399; --role-2: #f0abfc; } 100% { --role: #fb7185; --role-2: #fbbf24; } } @property --role { syntax:''; inherits:true; initial-value:#5b6bff; } @property --role-2 { syntax:''; inherits:true; initial-value:#22d3ee; } html.theme-rainbow body { animation: rainbowShift 12s ease-in-out infinite; } html.theme-rainbow body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; background: radial-gradient(1200px 600px at 30% 20%, var(--role), transparent 60%), radial-gradient(1000px 500px at 70% 80%, var(--role-2), transparent 60%); opacity: .12; transition: background 1s; } /* 平台 logo 色块 */ .plat{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:5px; font-size:9px; font-weight:800; } .plat-xy{ background:#ffb800; color:#1a1a1a; } .plat-tb{ background:#ff5000; color:#fff; } .plat-qw{ background:#07c160; color:#fff; } .plat-pdd{ background:#e02e24; color:#fff; } .plat-dy{ background:#000; color:#fff; border:1px solid rgba(255,255,255,.2);} /* 光晕环 */ .halo{ box-shadow: 0 0 0 1px var(--role-line) inset, 0 0 40px -10px color-mix(in srgb, var(--role) 40%, transparent); } .halo-mint{ box-shadow: 0 0 0 1px rgba(52,211,153,.22) inset, 0 0 40px -10px rgba(52,211,153,.30);} .halo-amber{ box-shadow: 0 0 0 1px rgba(245,181,68,.22) inset, 0 0 40px -10px rgba(245,181,68,.30);} /* 条形迷你图 */ .sparkbar{ display:flex; align-items:end; gap:3px; height:28px;} .sparkbar i{ width:4px; border-radius:2px; display:block; background: linear-gradient(180deg, var(--role), color-mix(in srgb, var(--role) 20%, transparent));} /* 分隔线 */ .hr{ height:1px; background: var(--line); border:0; margin:14px 0;} /* 状态点 */ .status-on::before{ content:""; width:6px; height:6px; border-radius:999px; background:#34d399; display:inline-block; margin-right:6px; box-shadow:0 0 6px #34d399;} .status-off::before{ content:""; width:6px; height:6px; border-radius:999px; background:#64748b; display:inline-block; margin-right:6px;} .status-err::before{ content:""; width:6px; height:6px; border-radius:999px; background:#f87171; display:inline-block; margin-right:6px; box-shadow:0 0 6px #f87171;} /* 文字渐变 */ .role-text{ background: linear-gradient(90deg, color-mix(in srgb, var(--role) 70%, white), var(--role-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* scrollbar */ ::-webkit-scrollbar{ width:8px; height:8px;} ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:999px;} /* ============================================================ ☀️ 亮色主题 —— html.theme-light 设计参考：Linear Light / Vercel Light / GitHub Light 品牌色保持不变，只切换背景/文字/panel ============================================================ */ html.theme-light { color-scheme: light; } html.theme-light body, html.theme-light { --bg-0: #f4f6fb; --bg-1: #edf0f7; --bg-2: #e4e8f2; --panel: #ffffff; --panel-2: #f8faff; --line: rgba(0,0,0,.07); --line-2: rgba(0,0,0,.09); --line-3: rgba(0,0,0,.13); --ink-0: #0f172a; --ink-1: #1e293b; --ink-2: #475569; --ink-3: #94a3b8; --ink-4: #cbd5e1; } html.theme-light body { background: var(--bg-0); color: var(--ink-0); } /* app-bg 亮色光晕 */ html.theme-light .app-bg { background: radial-gradient(800px 400px at 20% 0%, color-mix(in srgb, var(--role) 8%, transparent), transparent 60%), radial-gradient(600px 360px at 90% 0%, color-mix(in srgb, var(--role-2) 6%, transparent), transparent 60%), var(--bg-0); } /* panel —— 白色卡片 + 细边框 */ html.theme-light .panel { background: #ffffff; border-color: rgba(0,0,0,.07); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); } html.theme-light .panel-soft { background: #f0f4ff; border-color: rgba(0,0,0,.06); } html.theme-light .panel-outline { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.07); } /* topbar */ html.theme-light .topbar { background: rgba(255,255,255,.95); border-bottom: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(12px); } /* topbar 内文字/图标颜色适配亮色 */ html.theme-light .topbar .brand-name { color: #0f172a; } html.theme-light .topbar .brand-meta { color: #64748b; } html.theme-light .topbar .crumb { color: #64748b; } html.theme-light .topbar .crumb .cur { color: #0f172a; } html.theme-light .topbar .search { background:#f1f5f9; border-color:rgba(0,0,0,.1); color:#475569; } html.theme-light .topbar .btn-ghost { color:#1e293b; border-color:rgba(0,0,0,.1); background:rgba(0,0,0,.03); } html.theme-light .topbar .kbd { color:#64748b; border-color:rgba(0,0,0,.12); } html.theme-light .topbar .avatar-btn { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.09); } /* logo mark 在亮色下需要保持品牌色背景（SVG fill=currentColor 的那种白色会消失） */ html.theme-light .topbar .brand-mark { /* brand-mark 用品牌渐变背景，白色 stroke 在深色背景上仍然可见 */ background: linear-gradient(135deg, var(--role), var(--role-2)) !important; color: var(--role) !important; } /* sidebar */ html.theme-light .sidebar { background: #ffffff; border-right-color: rgba(0,0,0,.07); } html.theme-light .nav-item { color: #475569; } html.theme-light .nav-item:hover { background: rgba(0,0,0,.04); color: #0f172a; } html.theme-light .nav-item.active { color: var(--role); background: var(--role-soft); } html.theme-light .nav-sect { color: #94a3b8; } /* search + input */ html.theme-light .search, html.theme-light .input, html.theme-light .select { background: #ffffff; border-color: rgba(0,0,0,.1); color: #0f172a; } html.theme-light .input::placeholder { color: #94a3b8; } html.theme-light .search { color: #64748b; } /* btn-ghost */ html.theme-light .btn-ghost { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: #1e293b; } html.theme-light .btn-ghost:hover { background: rgba(0,0,0,.07); } /* table */ html.theme-light .tbl thead th { background: #f8faff; border-color: rgba(0,0,0,.07); color: #64748b; } html.theme-light .tbl tbody td { background: #ffffff; border-color: rgba(0,0,0,.06); color: #0f172a; } html.theme-light .tbl tbody tr:hover td { background: #f8faff; } /* chip */ html.theme-light .chip { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: #475569; } /* tabs */ html.theme-light .tabs { background: #edf0f7; border-color: rgba(0,0,0,.07); } html.theme-light .tabs button { color: #64748b; } html.theme-light .tabs button.on { background: #ffffff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* 亮色 kpi / trend */ html.theme-light .kpi-label { color: #64748b; } html.theme-light .kpi-unit { color: #64748b; } /* 亮色 scrollbar */ html.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); } /* 亮色光晕保持低调 */ html.theme-light .halo { box-shadow: 0 0 0 1px var(--role-line) inset, 0 4px 20px -6px color-mix(in srgb, var(--role) 25%, transparent); } html.theme-light .halo-mint { box-shadow: 0 0 0 1px rgba(52,211,153,.2) inset, 0 4px 16px -6px rgba(52,211,153,.2); } html.theme-light .halo-amber { box-shadow: 0 0 0 1px rgba(245,181,68,.2) inset, 0 4px 16px -6px rgba(245,181,68,.2); } /* Layout helper */ .app{ display:flex; min-height: calc(100vh - 64px); } .main{ flex:1; min-width:0; padding: 28px 32px; } /* 页面标题 */ .ph{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; gap:20px;} .ph h1{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px;} .ph p{ margin:0; color: var(--ink-2); font-size:13px;} .ph .actions{ display:flex; gap:8px; flex-shrink:0;} /* 角色徽标（顶栏右侧） */ .role-badge{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:600; background: var(--role-soft); border:1px solid var(--role-line); color: color-mix(in srgb, var(--role) 75%, white); }