/* ============================================================ 橱窗销量跟踪系统 · 前端设计系统双主题 Design Token + 组件样式颜色/字体来自线上系统真实 CSS 变量还原用法: 或 "dark" ============================================================ */ /* -------- 字体 -------- */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ============================================================ 1. Design Token（明暗双主题） ============================================================ */ :root, [data-theme="light"] { --accent: #0ca878; /* 主色·翠绿 */ --accent-ink: #fff; /* 主色上的文字 */ --accent-soft: #0ca8781a; /* 主色浅底 */ --bg: #eef1f5; /* 页面底 */ --panel: #fff; /* 卡片/面板 */ --rail: #fff; /* 侧栏 */ --text: #1a2430; /* 正文 */ --strong: #0b1420; /* 强调文字 */ --muted: #7d8b99; /* 次要文字 */ --dim: #a2aebb; /* 更弱文字 */ --num: #9fb0c0; /* 弱数字 */ --line: #dfe6ed; /* 分割线 */ --ctl: #c6d2dd; /* 控件边框 */ --red: #d92d20; --red-bg: #fdf0ee; --red-line: #f5c9c4; --amber: #b45309; --amber-bg: #fdf6e9; --amber-line: #f0dcbc; --amber-text: #8a6a3a; --blue: #2563eb; --blue-soft: #5eb0ff1f; --sans: "Noto Sans SC", system-ui, sans-serif; --mono: "JetBrains Mono", monospace; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(16,24,32,.06), 0 4px 16px rgba(16,24,32,.04); } [data-theme="dark"] { --accent: #3ddc97; --accent-ink: #06251a; --accent-soft: #3ddc971f; --bg: #0c1116; --panel: #101821; --rail: #0a0e13; --text: #dce3ea; --strong: #fff; --muted: #5f7186; --dim: #44525f; --num: #3f4d5e; --line: #1d2833; --ctl: #2a3946; --red: #ff7b72; --red-bg: #200f0c; --red-line: #4a2420; --amber: #f0a35e; --amber-bg: #20160c; --amber-line: #4a3420; --amber-text: #c8b49a; --blue: #5eb0ff; --blue-soft: #5eb0ff1f; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); } /* ============================================================ 2. 基础 ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* 数字统一等宽 */ .num, .kpi-value, .cell-num, .bar-val, .cell-delta { font-family: var(--mono); } /* ============================================================ 3. 全局布局：Rail 侧栏 + 主内容 ============================================================ */ .app-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .app-shell.rail-collapsed { grid-template-columns: 64px 1fr; } .rail { background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; } .rail-head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; } .rail-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 18px; flex-shrink: 0; } .rail-brand { font-weight: 700; color: var(--strong); font-size: 15px; } .rail-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; flex: 1; } .rail-nav-btn { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--muted); background: none; border: none; cursor: pointer; font-size: 14px; font-family: var(--sans); text-align: left; width: 100%; transition: background .12s, color .12s; } .rail-nav-btn:hover { background: var(--accent-soft); color: var(--text); } .rail-nav-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; } .rail-nav-icon { width: 18px; text-align: center; flex-shrink: 0; } .rail-collapsed .rail-nav-label, .rail-collapsed .rail-brand, .rail-collapsed .rail-desc { display: none; } .rail-foot { border-top: 1px solid var(--line); padding-top: 12px; } .rail-user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--muted); font-size: 13px; } .rail-logout, .rail-collapse-btn { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 13px; padding: 6px 8px; border-radius: 6px; font-family: var(--sans); } .rail-logout:hover { color: var(--red); } .main { padding: 24px 28px; overflow-x: auto; } /* ============================================================ 4. 面板 / 卡片 ============================================================ */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); } .panel--chart { padding: 14px 18px; } .panel-title { font-size: 15px; font-weight: 700; color: var(--strong); margin-bottom: 14px; } .panel-title--sm { font-size: 13px; color: var(--muted); font-weight: 500; } /* ============================================================ 5. KPI 卡片网格 ============================================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .kpi--accent { background: var(--accent-soft); border-color: transparent; } .kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .kpi-value { font-size: 26px; font-weight: 700; color: var(--strong); letter-spacing: -.5px; } .kpi-value--accent { color: var(--accent); } .kpi-value--time { font-size: 16px; color: var(--text); } /* ============================================================ 6. 表格 ============================================================ */ table { width: 100%; border-collapse: collapse; } thead th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; } tbody tr:hover { background: var(--accent-soft); } .cell-name { color: var(--strong); font-weight: 500; } .cell-name--off { color: var(--dim); } .cell-sub { color: var(--muted); font-size: 12px; } .cell-sub--right { text-align: right; } .cell-num { color: var(--text); text-align: right; } .cell-num--dim { color: var(--num); } .cell-time { color: var(--muted); font-size: 12px; } .cell-delta { text-align: right; font-weight: 500; } .cell-delta { color: var(--accent); } /* 正涨幅=绿 */ .cell-delta--dim { color: var(--num); } .cell-delta.is-down { color: var(--red); } /* 负=红 */ /* ============================================================ 7. 按钮 ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--ctl); background: var(--panel); color: var(--text); font-size: 13px; font-family: var(--sans); cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn--accent:hover { opacity: .9; color: var(--accent-ink); } .btn--danger { color: var(--red); border-color: var(--red-line); } .btn--danger:hover { background: var(--red-bg); } .btn--link { border: none; background: none; color: var(--accent); padding: 4px 6px; } .btn--sm { padding: 4px 9px; font-size: 12px; } .btn:disabled { cursor: not-allowed; opacity: .55; } /* ============================================================ 8. 徽标 / 状态胶囊 / 标签 ============================================================ */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--accent-soft); color: var(--accent); } .badge--off { background: var(--line); color: var(--dim); } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--success { background: var(--accent-soft); color: var(--accent); } .pill--processing { background: var(--blue-soft); color: var(--blue); } .pill--pending { background: var(--amber-bg); color: var(--amber); } .pill--failed { background: var(--red-bg); color: var(--red); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--panel); border: 1px solid var(--ctl); color: var(--muted); cursor: pointer; } .chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .chip--sm { padding: 3px 8px; font-size: 11px; } /* ============================================================ 9. 表单控件 ============================================================ */ .input, .select { padding: 7px 11px; border-radius: var(--radius-sm); border: 1px solid var(--ctl); background: var(--panel); color: var(--text); font-size: 13px; font-family: var(--sans); outline: none; } .input:focus, .select:focus { border-color: var(--accent); } .input--search { width: 260px; } .input--search::before { content: "🔍"; } .input--sm, .select--sm { padding: 4px 8px; font-size: 12px; } .input--mono, .input--num { font-family: var(--mono); } .input--note { width: 100%; } .form-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; } .field-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } /* 开关 */ .switch { position: relative; width: 40px; height: 22px; display: inline-block; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--ctl); border-radius: 999px; transition: .2s; } .switch-track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; } .switch input:checked + .switch-track { background: var(--accent); } .switch input:checked + .switch-track::before { transform: translateX(18px); } /* ============================================================ 10. 条形排行榜 ============================================================ */ .bar-row { display: grid; grid-template-columns: 130px 1fr 72px; align-items: center; gap: 10px; padding: 5px 0; } .bar-row--wide { grid-template-columns: 180px 1fr 80px; } .bar-row--active .bar-fill { background: var(--accent); } .bar-name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-name--click { cursor: pointer; } .bar-name--click:hover { color: var(--accent); } .bar-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s; } .bar-val { text-align: right; font-size: 13px; color: var(--strong); } .line-swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; } /* ============================================================ 11. 趋势弹窗 / Dialog ============================================================ */ .trend-dialog-overlay { position: fixed; inset: 0; background: rgba(6,12,18,.5); display: grid; place-items: center; z-index: 50; } .trend-dialog { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; width: min(680px, 92vw); max-height: 86vh; overflow: auto; box-shadow: var(--shadow); } .dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .dialog-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; } /* ============================================================ 12. 主题切换按钮 & 杂项 ============================================================ */ .theme-btn { background: none; border: 1px solid var(--ctl); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 6px 10px; font-size: 13px; } .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .toolbar-spacer { flex: 1; } .muted { color: var(--muted); } .dim { color: var(--dim); } .empty { text-align: center; color: var(--dim); padding: 40px 0; font-size: 13px; }