Simon
24f98e90c6
- 设计令牌与组件体系：语义色/间距/圆角/状态 + Card/Metric/Pill/Btn/Field/Empty/Skeleton/Progress 等 - 桌面左侧导航 + 窄屏抽屉（usePathname 高亮、ESC/遮罩关闭）；修复抽屉/遮罩占据网格把 main 挤到第二行的问题 - 自绘内联 SVG 图标集替代 emoji；图标/表格/按钮等交互态齐全，空态/加载/错误/禁用态补齐 - 因子研究分层柱状、因子组合与回测净值/回撤双图 + 月度收益热力表、实验页任务状态徽标 - LineChart 主题化并按需引入 echarts（回测/组合首载 JS 448k→281k）；next.config 放行局域网 dev 来源
1293 lines
23 KiB
CSS
1293 lines
23 KiB
CSS
/* ============================================================
|
||
qlib-platform 设计系统（ui-ux-pro-max · Financial Terminal Dark）
|
||
------------------------------------------------------------
|
||
语义令牌 → 组件类：深浅分层、高对比文本、金融语义色
|
||
（涨=绿 / 跌=红 / 警示=琥珀 / 主色=天蓝）、1px 低透明边框、
|
||
统一 4px 间距刻度、可见焦点环、reduced-motion 友好。
|
||
============================================================ */
|
||
|
||
/* 本地自托管字体（Noto Sans SC 可变 400–700，见 fonts.css / public/fonts）。
|
||
不再依赖 fonts.googleapis.com / fonts.gstatic.com 等外部网络。 */
|
||
@import "./fonts.css";
|
||
|
||
:root {
|
||
color-scheme: dark;
|
||
|
||
/* 表面分层（自底向上抬升） */
|
||
--bg-0: #060912;
|
||
--bg-1: #0a0f1c;
|
||
--bg-2: #101729;
|
||
--bg-3: #172035;
|
||
--surface-1: #101827;
|
||
--surface-2: #141d30;
|
||
--surface-3: #1b2540;
|
||
|
||
/* 文本 */
|
||
--text-1: #e9eef7;
|
||
--text-2: #a8b3c9;
|
||
--text-3: #8b98b2;
|
||
|
||
/* 边框 / 分隔 */
|
||
--line: rgba(150, 165, 195, 0.13);
|
||
--line-strong: rgba(150, 165, 195, 0.28);
|
||
|
||
/* 语义色 */
|
||
--accent: #3fb6ff;
|
||
--accent-strong: #0d99f2;
|
||
--accent-soft: rgba(63, 182, 255, 0.14);
|
||
--violet: #8b95ff;
|
||
--pos: #3ddc97;
|
||
--pos-strong: #1fb871;
|
||
--pos-soft: rgba(61, 220, 151, 0.13);
|
||
--neg: #ff7a7a;
|
||
--neg-soft: rgba(255, 122, 122, 0.13);
|
||
--warn: #f5b82e;
|
||
--warn-soft: rgba(245, 184, 46, 0.14);
|
||
--focus: rgba(63, 182, 255, 0.55);
|
||
|
||
/* 圆角 */
|
||
--r-xs: 6px;
|
||
--r-sm: 9px;
|
||
--r-md: 12px;
|
||
--r-lg: 16px;
|
||
|
||
/* 间距（4px 节奏） */
|
||
--sp-1: 4px;
|
||
--sp-2: 8px;
|
||
--sp-3: 12px;
|
||
--sp-4: 16px;
|
||
--sp-5: 24px;
|
||
--sp-6: 32px;
|
||
--sp-7: 48px;
|
||
|
||
/* 字体 */
|
||
--font-sans: "Noto Sans SC", -apple-system, "Segoe UI", "PingFang SC",
|
||
"Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
|
||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
|
||
Consolas, "Noto Sans SC", monospace;
|
||
|
||
/* 阴影：克制的两层 */
|
||
--shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.25);
|
||
--shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||
|
||
/* 字号（px 由浏览器缩放） */
|
||
--fs-xs: 12px;
|
||
--fs-sm: 13px;
|
||
--fs-md: 14px;
|
||
--fs-lg: 16px;
|
||
--fs-xl: 20px;
|
||
--fs-2xl: 26px;
|
||
|
||
--nav-w: 236px;
|
||
}
|
||
|
||
/* ---------- 基础 ---------- */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg-0);
|
||
color: var(--text-1);
|
||
font-family: var(--font-sans);
|
||
font-size: var(--fs-md);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: 2px solid var(--focus);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* 视觉隐藏但保留给屏幕阅读器（表单控件 label 用） */
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
|
||
/* ---------- 应用外壳（侧栏 + 内容） ---------- */
|
||
|
||
.shell {
|
||
display: grid;
|
||
grid-template-columns: var(--nav-w) minmax(0, 1fr);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 左侧导航 */
|
||
.rail {
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--sp-2);
|
||
background: linear-gradient(180deg, rgba(16, 23, 40, 0.96), rgba(10, 15, 28, 0.98));
|
||
border-right: 1px solid var(--line);
|
||
padding: var(--sp-4) var(--sp-3);
|
||
overflow-y: auto;
|
||
z-index: 30;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 2px var(--sp-2) var(--sp-3);
|
||
font-weight: 700;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.brand .logo {
|
||
display: inline-flex;
|
||
width: 30px;
|
||
height: 30px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 9px;
|
||
color: #04121f;
|
||
background: linear-gradient(135deg, var(--accent), var(--violet));
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
|
||
flex: none;
|
||
}
|
||
|
||
.brand small {
|
||
display: block;
|
||
color: var(--text-3);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.4px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.nav-label {
|
||
margin: var(--sp-3) var(--sp-2) var(--sp-1);
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
font-weight: 600;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.nav a.nav-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 7px 10px;
|
||
border-radius: var(--r-sm);
|
||
color: var(--text-2);
|
||
font-size: var(--fs-sm);
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.nav a.nav-link:hover {
|
||
background: rgba(150, 165, 195, 0.09);
|
||
color: var(--text-1);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav a.nav-link.active {
|
||
background: var(--accent-soft);
|
||
color: #dff1ff;
|
||
box-shadow: inset 0 0 0 1px rgba(63, 182, 255, 0.22);
|
||
}
|
||
|
||
.nav a.nav-link.active .nav-ic {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.nav-ic {
|
||
display: inline-flex;
|
||
color: var(--text-3);
|
||
flex: none;
|
||
transition: color 0.15s ease;
|
||
}
|
||
|
||
.rail-foot {
|
||
margin-top: auto;
|
||
padding: var(--sp-3) var(--sp-2) 0;
|
||
border-top: 1px solid var(--line);
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 顶栏（窄屏） */
|
||
.topbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 抽屉与遮罩仅窄屏启用：桌面端隐藏，避免它们作为 shell 网格子元素
|
||
把 main 挤到第二行（导致主内容被压在侧栏下方）。 */
|
||
.drawer,
|
||
.scrim {
|
||
display: none;
|
||
}
|
||
|
||
.content {
|
||
min-width: 0;
|
||
padding: var(--sp-5) clamp(16px, 3vw, 40px) var(--sp-7);
|
||
}
|
||
|
||
.page {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 抽屉（窄屏） */
|
||
.scrim {
|
||
display: none;
|
||
}
|
||
|
||
/* ---------- 页头 ---------- */
|
||
|
||
.page-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: var(--sp-4);
|
||
margin-bottom: var(--sp-5);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: var(--fs-2xl);
|
||
font-weight: 700;
|
||
letter-spacing: -0.2px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.page-sub {
|
||
margin-top: 4px;
|
||
color: var(--text-2);
|
||
font-size: var(--fs-sm);
|
||
max-width: 720px;
|
||
}
|
||
|
||
.page-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-2);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ---------- 卡片 ---------- */
|
||
|
||
.card {
|
||
background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-md);
|
||
box-shadow: var(--shadow-1);
|
||
margin-bottom: var(--sp-4);
|
||
}
|
||
|
||
.card__head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--sp-3);
|
||
padding: var(--sp-3) var(--sp-4);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.card__title {
|
||
font-size: var(--fs-md);
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-2);
|
||
color: var(--text-1);
|
||
}
|
||
|
||
.card__title .ic {
|
||
color: var(--text-3);
|
||
}
|
||
|
||
.card__sub {
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
font-weight: 400;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.card__tools {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-2);
|
||
flex: none;
|
||
}
|
||
|
||
.card__body {
|
||
padding: var(--sp-4);
|
||
}
|
||
|
||
.card__body--flush {
|
||
padding: 0;
|
||
}
|
||
|
||
.card--flat {
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ---------- 按钮 ---------- */
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
border: 1px solid var(--line-strong);
|
||
background: var(--surface-3);
|
||
color: var(--text-1);
|
||
border-radius: var(--r-sm);
|
||
padding: 7px 14px;
|
||
font-size: var(--fs-sm);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background 0.15s ease, border-color 0.15s ease,
|
||
transform 0.05s ease, box-shadow 0.15s ease;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: #243152;
|
||
border-color: rgba(150, 165, 195, 0.4);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn:active {
|
||
transform: translateY(0.5px);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.55;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.btn--primary {
|
||
background: linear-gradient(180deg, #4dc0ff, var(--accent-strong));
|
||
color: #061423;
|
||
border-color: transparent;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn--primary:hover {
|
||
filter: brightness(1.07);
|
||
background: linear-gradient(180deg, #4dc0ff, var(--accent-strong));
|
||
}
|
||
|
||
.btn--danger {
|
||
color: var(--neg);
|
||
border-color: rgba(255, 122, 122, 0.35);
|
||
}
|
||
|
||
.btn--danger:hover {
|
||
background: var(--neg-soft);
|
||
}
|
||
|
||
.btn--sm {
|
||
padding: 4px 10px;
|
||
font-size: var(--fs-xs);
|
||
border-radius: var(--r-xs);
|
||
}
|
||
|
||
.btn .ic {
|
||
flex: none;
|
||
}
|
||
|
||
/* 图标按钮 */
|
||
.icon-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: var(--r-sm);
|
||
color: var(--text-2);
|
||
background: transparent;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.icon-btn:hover {
|
||
background: rgba(150, 165, 195, 0.12);
|
||
color: var(--text-1);
|
||
}
|
||
|
||
/* ---------- 表单 ---------- */
|
||
|
||
.input,
|
||
select.input,
|
||
textarea.input {
|
||
width: 100%;
|
||
background: #0d1424;
|
||
border: 1px solid var(--line-strong);
|
||
color: var(--text-1);
|
||
border-radius: var(--r-sm);
|
||
padding: 7px 10px;
|
||
font-size: var(--fs-sm);
|
||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||
}
|
||
|
||
.input:hover {
|
||
border-color: rgba(150, 165, 195, 0.42);
|
||
}
|
||
|
||
.input:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||
}
|
||
|
||
.input::placeholder {
|
||
color: var(--text-3);
|
||
}
|
||
|
||
select.input {
|
||
appearance: none;
|
||
background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
|
||
linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
|
||
background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
|
||
background-size: 5px 5px, 5px 5px;
|
||
background-repeat: no-repeat;
|
||
padding-right: 28px;
|
||
}
|
||
|
||
input[type="date"].input {
|
||
padding-right: 8px;
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
width: 15px;
|
||
height: 15px;
|
||
accent-color: var(--accent);
|
||
cursor: pointer;
|
||
}
|
||
|
||
input[type="number"].input,
|
||
input[type="date"].input {
|
||
width: auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.field__label {
|
||
color: var(--text-2);
|
||
font-size: var(--fs-xs);
|
||
font-weight: 500;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.field__hint {
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
|
||
gap: var(--sp-3);
|
||
align-items: end;
|
||
}
|
||
|
||
.form-grid .btn {
|
||
align-self: end;
|
||
height: 34px;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--sp-2);
|
||
}
|
||
|
||
.between {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--sp-3);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.chart-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
|
||
gap: var(--sp-4);
|
||
}
|
||
|
||
.chart-grid .card {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--sp-2);
|
||
}
|
||
|
||
/* 搜索框 */
|
||
.searchbox {
|
||
position: relative;
|
||
min-width: min(320px, 100%);
|
||
}
|
||
|
||
.searchbox .ic {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--text-3);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.searchbox .input {
|
||
padding-left: 32px;
|
||
}
|
||
|
||
.searchbox .clear {
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* ---------- 徽标 / 状态 ---------- */
|
||
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-radius: 999px;
|
||
padding: 2px 9px;
|
||
font-size: var(--fs-xs);
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
border: 1px solid transparent;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pill--default {
|
||
color: var(--text-2);
|
||
background: rgba(150, 165, 195, 0.12);
|
||
border-color: rgba(150, 165, 195, 0.18);
|
||
}
|
||
|
||
.pill--accent {
|
||
color: #bfe9ff;
|
||
background: var(--accent-soft);
|
||
border-color: rgba(63, 182, 255, 0.3);
|
||
}
|
||
|
||
.pill--pos {
|
||
color: #9ff0cb;
|
||
background: var(--pos-soft);
|
||
border-color: rgba(61, 220, 151, 0.3);
|
||
}
|
||
|
||
.pill--neg {
|
||
color: #ffb1b1;
|
||
background: var(--neg-soft);
|
||
border-color: rgba(255, 122, 122, 0.3);
|
||
}
|
||
|
||
.pill--warn {
|
||
color: #ffe3a3;
|
||
background: var(--warn-soft);
|
||
border-color: rgba(245, 184, 46, 0.32);
|
||
}
|
||
|
||
.pill--violet {
|
||
color: #cdd2ff;
|
||
background: rgba(139, 149, 255, 0.14);
|
||
border-color: rgba(139, 149, 255, 0.3);
|
||
}
|
||
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 1px 7px;
|
||
border-radius: var(--r-xs);
|
||
background: rgba(150, 165, 195, 0.1);
|
||
color: var(--text-2);
|
||
font-size: var(--fs-xs);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.tag--mono {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--fs-xs);
|
||
}
|
||
|
||
/* ---------- 指标卡 ---------- */
|
||
|
||
.metric-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||
gap: var(--sp-3);
|
||
margin-bottom: var(--sp-4);
|
||
}
|
||
|
||
.metric {
|
||
background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-md);
|
||
padding: var(--sp-3) var(--sp-4);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.metric__label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
color: var(--text-2);
|
||
font-size: var(--fs-xs);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.metric__label .ic {
|
||
color: var(--text-3);
|
||
}
|
||
|
||
.metric__value {
|
||
margin-top: 6px;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.3px;
|
||
font-variant-numeric: tabular-nums;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.metric__value--sm {
|
||
font-size: var(--fs-lg);
|
||
}
|
||
|
||
.metric__sub {
|
||
margin-top: 4px;
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.metric__value.tone-pos,
|
||
.tone-pos {
|
||
color: var(--pos);
|
||
}
|
||
.metric__value.tone-neg,
|
||
.tone-neg {
|
||
color: var(--neg);
|
||
}
|
||
.metric__value.tone-warn,
|
||
.tone-warn {
|
||
color: var(--warn);
|
||
}
|
||
.metric__value.tone-accent,
|
||
.tone-accent {
|
||
color: var(--accent);
|
||
}
|
||
.metric__value.tone-plain,
|
||
.tone-plain {
|
||
color: var(--text-1);
|
||
}
|
||
|
||
/* ---------- 表格 ---------- */
|
||
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
table.tbl {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--fs-sm);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.tbl th,
|
||
.tbl td {
|
||
text-align: left;
|
||
padding: 9px 12px;
|
||
border-bottom: 1px solid var(--line);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.tbl th {
|
||
color: var(--text-3);
|
||
font-weight: 600;
|
||
font-size: var(--fs-xs);
|
||
letter-spacing: 0.4px;
|
||
background: rgba(150, 165, 195, 0.045);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tbl tbody tr {
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.tbl tbody tr:hover {
|
||
background: rgba(150, 165, 195, 0.055);
|
||
}
|
||
|
||
.tbl tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.tbl tbody tr.row-active {
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.cell-mono,
|
||
.mono {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.cell-strong {
|
||
font-weight: 600;
|
||
color: var(--text-1);
|
||
}
|
||
|
||
.tbl .num,
|
||
.num {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.tbl .tone-pos,
|
||
.tbl td.tone-pos {
|
||
color: var(--pos);
|
||
}
|
||
.tbl .tone-neg,
|
||
.tbl td.tone-neg {
|
||
color: var(--neg);
|
||
}
|
||
.tbl .tone-warn,
|
||
.tbl td.tone-warn {
|
||
color: var(--warn);
|
||
}
|
||
|
||
/* 扩展行 / 详情内嵌 */
|
||
.expand-cell {
|
||
background: rgba(10, 15, 28, 0.6);
|
||
}
|
||
|
||
.expand-cell > div {
|
||
border-left: 2px solid var(--accent-soft);
|
||
margin: 4px 12px 12px;
|
||
padding: 10px 12px;
|
||
border-radius: var(--r-sm);
|
||
background: var(--bg-1);
|
||
}
|
||
|
||
/* ---------- 进度 / 加载 / 空态 ---------- */
|
||
|
||
.progress {
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: rgba(150, 165, 195, 0.16);
|
||
overflow: hidden;
|
||
margin: var(--sp-2) 0;
|
||
}
|
||
|
||
.progress__bar {
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, var(--accent-strong), var(--accent));
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.skeleton {
|
||
border-radius: var(--r-sm);
|
||
background: linear-gradient(90deg, rgba(150, 165, 195, 0.08), rgba(150, 165, 195, 0.16), rgba(150, 165, 195, 0.08));
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.4s infinite linear;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
to {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
.empty {
|
||
padding: var(--sp-6) var(--sp-4);
|
||
text-align: center;
|
||
color: var(--text-3);
|
||
}
|
||
|
||
.empty .ic {
|
||
color: var(--text-3);
|
||
opacity: 0.6;
|
||
margin-bottom: var(--sp-2);
|
||
}
|
||
|
||
.empty strong {
|
||
display: block;
|
||
color: var(--text-2);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* 提示条 */
|
||
.banner {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 9px;
|
||
padding: 10px 13px;
|
||
border-radius: var(--r-sm);
|
||
font-size: var(--fs-sm);
|
||
margin-bottom: var(--sp-3);
|
||
border: 1px solid;
|
||
line-height: 1.55;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.banner .ic {
|
||
flex: none;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.banner--error {
|
||
color: #ffc9c9;
|
||
background: var(--neg-soft);
|
||
border-color: rgba(255, 122, 122, 0.32);
|
||
}
|
||
|
||
.banner--warn {
|
||
color: #ffe6ae;
|
||
background: var(--warn-soft);
|
||
border-color: rgba(245, 184, 46, 0.32);
|
||
}
|
||
|
||
.banner--info {
|
||
color: #d6efff;
|
||
background: var(--accent-soft);
|
||
border-color: rgba(63, 182, 255, 0.3);
|
||
}
|
||
|
||
.banner--muted {
|
||
color: var(--text-2);
|
||
background: rgba(150, 165, 195, 0.08);
|
||
border-color: var(--line);
|
||
}
|
||
|
||
/* 说明文本 */
|
||
.hint {
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 数值条（分层收益等） */
|
||
.vbars {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
height: 96px;
|
||
padding: var(--sp-3) 0;
|
||
}
|
||
|
||
.vbars__item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.vbars__bar {
|
||
width: min(46px, 70%);
|
||
min-height: 3px;
|
||
border-radius: 4px 4px 0 0;
|
||
transition: height 0.3s ease;
|
||
}
|
||
|
||
.vbars__bar.is-pos {
|
||
background: linear-gradient(180deg, var(--pos), var(--pos-strong));
|
||
}
|
||
.vbars__bar.is-neg {
|
||
background: linear-gradient(180deg, #ff9d9d, var(--neg));
|
||
}
|
||
|
||
.vbars__val {
|
||
font-size: var(--fs-xs);
|
||
color: var(--text-1);
|
||
font-weight: 600;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.vbars__cap {
|
||
color: var(--text-3);
|
||
font-size: var(--fs-xs);
|
||
}
|
||
|
||
/* 选中清单 chips */
|
||
.chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--sp-2);
|
||
}
|
||
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: var(--surface-3);
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: 999px;
|
||
padding: 3px 6px 3px 11px;
|
||
font-size: var(--fs-xs);
|
||
color: var(--text-2);
|
||
}
|
||
|
||
.chip b {
|
||
color: var(--text-1);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.chip__x {
|
||
display: inline-flex;
|
||
padding: 3px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
color: var(--text-3);
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
|
||
.chip__x:hover {
|
||
color: var(--neg);
|
||
background: var(--neg-soft);
|
||
}
|
||
|
||
/* 月度收益着色单元格 */
|
||
.cell-heat {
|
||
font-variant-numeric: tabular-nums;
|
||
border-radius: var(--r-xs);
|
||
padding: 2px 7px;
|
||
display: inline-block;
|
||
min-width: 58px;
|
||
text-align: right;
|
||
}
|
||
|
||
.cell-heat.pos {
|
||
color: #c7ffe4;
|
||
background: var(--pos-soft);
|
||
}
|
||
.cell-heat.neg {
|
||
color: #ffd2d2;
|
||
background: var(--neg-soft);
|
||
}
|
||
.cell-heat.flat {
|
||
color: var(--text-2);
|
||
background: rgba(150, 165, 195, 0.1);
|
||
}
|
||
|
||
/* 旋转加载图标 */
|
||
.spin {
|
||
animation: spin 0.9s linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.ic {
|
||
display: inline-block;
|
||
flex: none;
|
||
vertical-align: -2px;
|
||
}
|
||
|
||
.quick-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||
gap: var(--sp-3);
|
||
margin-bottom: var(--sp-4);
|
||
}
|
||
|
||
.quick-card {
|
||
display: flex;
|
||
gap: 13px;
|
||
align-items: flex-start;
|
||
padding: var(--sp-4);
|
||
background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-md);
|
||
color: var(--text-1);
|
||
text-decoration: none;
|
||
transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
|
||
}
|
||
|
||
.quick-card:hover {
|
||
border-color: rgba(63, 182, 255, 0.4);
|
||
text-decoration: none;
|
||
background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
|
||
}
|
||
|
||
.quick-card .quick-ic {
|
||
display: inline-flex;
|
||
width: 38px;
|
||
height: 38px;
|
||
flex: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 11px;
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.quick-card--violet .quick-ic {
|
||
background: rgba(139, 149, 255, 0.14);
|
||
color: var(--violet);
|
||
}
|
||
.quick-card--pos .quick-ic {
|
||
background: var(--pos-soft);
|
||
color: var(--pos);
|
||
}
|
||
.quick-card--warn .quick-ic {
|
||
background: var(--warn-soft);
|
||
color: var(--warn);
|
||
}
|
||
|
||
.quick-card h3 {
|
||
font-size: var(--fs-md);
|
||
font-weight: 600;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.quick-card p {
|
||
color: var(--text-2);
|
||
font-size: var(--fs-xs);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.quick-card .go {
|
||
margin-top: 8px;
|
||
font-size: var(--fs-xs);
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* 运行面板（回测/组合配置） */
|
||
.runpanel {
|
||
position: sticky;
|
||
bottom: 12px;
|
||
z-index: 20;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-3);
|
||
flex-wrap: wrap;
|
||
background: rgba(13, 19, 35, 0.92);
|
||
backdrop-filter: blur(8px);
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: var(--r-md);
|
||
padding: var(--sp-3) var(--sp-4);
|
||
box-shadow: var(--shadow-pop);
|
||
}
|
||
|
||
.runpanel__info {
|
||
color: var(--text-2);
|
||
font-size: var(--fs-xs);
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.runpanel__info b {
|
||
color: var(--text-1);
|
||
}
|
||
|
||
/* 数值差箭头 */
|
||
.delta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 列表（说明/步骤） */
|
||
.steplist {
|
||
margin: 0;
|
||
padding-left: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
color: var(--text-2);
|
||
font-size: var(--fs-sm);
|
||
}
|
||
|
||
.steplist b {
|
||
color: var(--text-1);
|
||
}
|
||
|
||
/* ---------- 响应式 ---------- */
|
||
|
||
@media (max-width: 940px) {
|
||
:root {
|
||
--nav-w: 0px;
|
||
}
|
||
|
||
.shell {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.rail {
|
||
display: none;
|
||
}
|
||
|
||
.topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-2);
|
||
height: 52px;
|
||
padding: 0 var(--sp-3);
|
||
background: rgba(10, 15, 28, 0.92);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.topbar .brand {
|
||
padding: 0;
|
||
}
|
||
|
||
.drawer {
|
||
position: fixed;
|
||
inset: 0 auto 0 0;
|
||
width: min(78vw, 290px);
|
||
background: var(--bg-1);
|
||
border-right: 1px solid var(--line-strong);
|
||
z-index: 60;
|
||
transform: translateX(-102%);
|
||
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: var(--sp-3);
|
||
gap: var(--sp-1);
|
||
overflow-y: auto;
|
||
box-shadow: var(--shadow-pop);
|
||
}
|
||
|
||
.drawer.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.drawer .brand {
|
||
padding-bottom: var(--sp-3);
|
||
margin-bottom: var(--sp-1);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.scrim {
|
||
display: block;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(3, 6, 12, 0.6);
|
||
z-index: 50;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.scrim.show {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.content {
|
||
padding: var(--sp-4) 14px var(--sp-6);
|
||
}
|
||
|
||
.runpanel {
|
||
position: static;
|
||
border-radius: var(--r-md);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.metric-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: var(--sp-2);
|
||
}
|
||
|
||
.metric__value {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.form-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
|
||
.page-head {
|
||
flex-direction: column;
|
||
}
|
||
}
|