/* ============================================================ usmart_quant Web —— 仿 KHunter 的侧边栏 + 卡片式现代界面 ============================================================ */ :root { --primary: #4f46e5; /* 主色：靛蓝 */ --primary-dark: #4338ca; --primary-soft: #eef2ff; /* 侧栏（默认「白天」：浅色侧栏，深色 emoji 图标天然看得清）*/ --sidebar-bg: #f8fafc; --sidebar-hover: #e2e8f0; --sidebar-active: #4f46e5; --sidebar-text: #334155; --sidebar-text-strong: #0f172a; --sidebar-muted: #64748b; --sidebar-border: #e2e8f0; --nav-live: #dc2626; /* 账户组标识：真实盘 */ --nav-paper: #15803d; /* 账户组标识：模拟演练 */ --bg: #f1f5f9; --card-bg: #ffffff; --surface: #ffffff; /* 输入框/按钮/浮层等小面 */ --surface-2: #f8fafc; /* 表头/悬停行 */ --text: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --up: #dc2626; /* 涨/盈 红（A 股口径：红涨绿跌）*/ --down: #16a34a; /* 跌/亏 绿 */ --sidebar-width: 220px; --radius: 10px; --shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --shadow-lg: 0 10px 25px -5px rgba(15,23,42,.12); } /* ── 主题（ 切换；缺省即上面的「白天」）。 红涨绿跌 --up/--down 与 状态色 --success/--danger 不随主题翻转。 ── */ :root[data-theme="slate"] { /* 石板：旧默认——深石板侧栏 + 亮内容 */ --sidebar-bg: #1e293b; --sidebar-hover: #334155; --sidebar-text: #cbd5e1; --sidebar-text-strong: #fff; --sidebar-muted: #94a3b8; --sidebar-border: rgba(255,255,255,.08); --nav-live: #f87171; --nav-paper: #34d399; } :root[data-theme="dark"] { /* 黑夜：GitHub Dark 风 */ --bg: #0d1117; --card-bg: #161b22; --surface: #161b22; --surface-2: #1f2630; --text: #e6edf3; --text-muted: #8b949e; --border: #30363d; --primary: #6366f1; --primary-dark: #4f46e5; --primary-soft: #1e2540; --sidebar-bg: #010409; --sidebar-hover: #161b22; --sidebar-text: #c9d1d9; --sidebar-text-strong: #fff; --sidebar-muted: #8b949e; --sidebar-border: #30363d; --nav-live: #f87171; --nav-paper: #34d399; --shadow: 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,.6); } :root[data-theme="nord"] { /* Nord：北极蓝灰 */ --bg: #2e3440; --card-bg: #3b4252; --surface: #3b4252; --surface-2: #434c5e; --text: #eceff4; --text-muted: #aeb8cc; --border: #4c566a; --primary: #5e81ac; --primary-dark: #4c6a92; --primary-soft: #3b4252; --sidebar-bg: #242933; --sidebar-hover: #3b4252; --sidebar-text: #d8dee9; --sidebar-text-strong: #eceff4; --sidebar-muted: #8f9bb3; --sidebar-border: #3b4252; --nav-live: #bf616a; --nav-paper: #a3be8c; --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,.5); } :root[data-theme="dracula"] { /* Dracula：暗紫 */ --bg: #282a36; --card-bg: #343746; --surface: #343746; --surface-2: #3c3f52; --text: #f8f8f2; --text-muted: #a8abbe; --border: #44475a; --primary: #bd93f9; --primary-dark: #a879f0; --primary-soft: #343746; --sidebar-bg: #21222c; --sidebar-hover: #343746; --sidebar-text: #cfd0dc; --sidebar-text-strong: #f8f8f2; --sidebar-muted: #8b8da0; --sidebar-border: #343746; --nav-live: #ff5555; --nav-paper: #50fa7b; --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,.5); } :root[data-theme="solarized"] { /* Solarized 浅色：米黄纸感 */ --bg: #fdf6e3; --card-bg: #fffbf0; --surface: #fffbf0; --surface-2: #f5efdc; --text: #073642; --text-muted: #657b83; --border: #eee8d5; --primary: #268bd2; --primary-dark: #1a6ea8; --primary-soft: #e8f1f8; --sidebar-bg: #eee8d5; --sidebar-hover: #e4dcc3; --sidebar-text: #586e75; --sidebar-text-strong: #073642; --sidebar-muted: #93a1a1; --sidebar-border: #e4dcc3; --nav-live: #dc322f; --nav-paper: #859900; } * { box-sizing: border-box; } body { font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; } /* ---------- 布局：侧栏 + 主区 ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex-shrink: 0; border-right: 1px solid var(--sidebar-border); } .sidebar .brand { padding: 1.15rem 1.1rem; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: .6rem; text-decoration: none; } .sidebar .brand .logo-badge { width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-size: 1.15rem; background: linear-gradient(135deg, #22c55e, #0ea5e9); box-shadow: 0 3px 10px rgba(14, 165, 233, .4); } .sidebar .brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .sidebar .brand .brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: .2px; color: var(--sidebar-text-strong); } .sidebar .brand .brand-name b { background: linear-gradient(90deg, #34d399, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; } .sidebar .brand .brand-tag { font-size: .64rem; color: var(--sidebar-muted); font-weight: 500; letter-spacing: .3px; margin-top: 1px; } .nav-menu { list-style: none; margin: .6rem 0; padding: 0; flex: 1; } .nav-menu a { display: flex; align-items: center; gap: .6rem; padding: .65rem 1.25rem; color: var(--sidebar-text); text-decoration: none; font-size: .92rem; border-left: 3px solid transparent; transition: all .15s; } .nav-menu a .ic { width: 1.2rem; text-align: center; } .nav-menu a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); } .nav-menu a.active { background: var(--sidebar-hover); color: var(--sidebar-text-strong); border-left-color: var(--sidebar-active); font-weight: 600; } /* 导航分组：大类标题（非链接）+ 缩进子项 */ .nav-menu .nav-section { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.25rem .35rem; margin-top: .35rem; font-size: .9rem; font-weight: 700; letter-spacing: .3px; color: var(--sidebar-muted); border-top: 1px solid var(--sidebar-border); } .nav-menu .nav-section .ic { width: 1.2rem; text-align: center; } .nav-menu a.sub { padding-left: 2.4rem; font-size: .88rem; } /* 账户组导航标识 + 页面模式横幅：绿=演练(安全) / 黄=UAT / 红=真实盘(真钱)。 状态语义色，与红涨绿跌的价格色无关。 */ .nav-menu .nav-section.acct-nav.live { color: var(--nav-live); } .nav-menu .nav-section.acct-nav.paper { color: var(--nav-paper); } /* 实战面板引擎/自动确认状态：醒目胶囊（状态语义色，与红涨绿跌无关） */ .engine-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; font-weight: 700; padding: .4rem .9rem; border-radius: 999px; line-height: 1.2; } .engine-status.on { background: #dcfce7; color: #15803d; } .engine-status.off { background: #fef3c7; color: #b45309; } .engine-status.danger { background: #fee2e2; color: #b91c1c; animation: engine-blink 1.2s infinite; } @keyframes engine-blink { 50% { opacity: .55; } } .acct-banner { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; border-left: 5px solid; } .acct-banner.paper { background: #ecfdf5; color: #065f46; border-color: #16a34a; } .acct-banner.uat { background: #fffbeb; color: #b45309; border-color: #d97706; } .acct-banner.live { background: #fef2f2; color: #b91c1c; border-color: #dc2626; } .sidebar .foot { padding: 1rem 1.25rem; font-size: .75rem; color: var(--sidebar-muted); border-top: 1px solid var(--sidebar-border); } .sidebar .foot select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: .15rem .3rem; font-size: .78rem; margin-left: .3rem; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 60px; background: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 10; } .topbar h1 { font-size: 1.1rem; margin: 0; font-weight: 600; } .content { padding: 1.5rem; width: 100%; } /* ---------- 卡片 ---------- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.25rem; } .card-header { padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card-header h2 { font-size: 1rem; margin: 0; font-weight: 600; } .card-header .sub { color: var(--text-muted); font-size: .82rem; font-weight: 400; } .card-body { padding: 1.25rem; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: .5rem .95rem; font-size: .88rem; font-weight: 500; font-family: inherit; line-height: 1; background: var(--primary); color: #fff; transition: all .15s; } .btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn-sm { padding: .35rem .6rem; font-size: .8rem; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-2); } .btn-success { background: var(--success); } .btn-success:hover { background: #15803d; } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #b91c1c; } .btn-ghost { background: transparent; color: var(--primary); border-color: transparent; } .btn-ghost:hover { background: var(--primary-soft); box-shadow: none; } .btn-checkup { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); font-weight: 600; } .btn-checkup:hover { background: color-mix(in srgb, var(--primary-soft) 72%, var(--primary) 28%); color: var(--primary-dark); border-color: var(--primary-dark); } /* ---------- 表单 ---------- */ .form-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .form-group { display: flex; flex-direction: column; gap: .3rem; } /* 标签强制单行：避免长标签换行导致该列变高、与其它列高低错开 */ .form-group label { font-size: .8rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; } /* 统一所有表单控件（含日期框、无 type 的裸 input）的尺寸：等高、等内边距、等圆角。 用 :not 排除 复选框/单选/隐藏，否则 input[type=text] 选择器漏掉无 type 属性的裸 input。 */ input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { font-family: inherit; font-size: .9rem; padding: 0 .65rem; height: 38px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 8rem; } /* 表单行内的按钮与输入框等高，底部对齐时上沿也齐平 */ .form-row .btn { height: 38px; box-sizing: border-box; } input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* 市场池多选「胶囊」：点选变蓝、再点取消（用隐藏复选框 + :has 着色） */ .market-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .market-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; padding: .45rem .9rem; font-size: .9rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); transition: all .12s; } .market-chip:hover { border-color: var(--primary); } .market-chip input { position: absolute; opacity: 0; pointer-events: none; } .market-chip:has(input:checked) { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---------- 表格 ---------- */ table { border-collapse: collapse; width: 100%; font-size: .88rem; } thead th { background: var(--surface-2); color: var(--text-muted); font-weight: 600; text-align: right; padding: .6rem .8rem; border-bottom: 2px solid var(--border); white-space: nowrap; } thead th:first-child, tbody td:first-child { text-align: left; } tbody td { padding: .55rem .8rem; border-bottom: 1px solid var(--border); text-align: right; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: none; } .num { font-variant-numeric: tabular-nums; } .up { color: var(--up); } .down { color: var(--down); } /* 数据管理：双击后的业务选中态独立于浏览器临时文字选区，复制后仍保留。 */ #cov-table .cov-row { cursor: default; } #cov-table .cov-row.cov-selected > td { background: rgba(79, 70, 229, .13); border-bottom-color: rgba(79, 70, 229, .35); } #cov-table .cov-row.cov-selected > td:first-child { box-shadow: inset 3px 0 0 var(--primary); color: var(--primary); font-weight: 700; } /* K线悬停 OHLC 浮窗 */ .ohlc-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .45rem .6rem; font-size: .8rem; color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); min-width: 140px; } .ohlc-tip-h { font-weight: 600; margin-bottom: .25rem; display: flex; align-items: center; gap: .4rem; } .ohlc-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; } .ohlc-tip-r { display: flex; justify-content: space-between; gap: 1.4rem; line-height: 1.55; } .ohlc-tip-r span { color: var(--text-muted); } /* ---------- 徽章/标签 ---------- */ .badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; } .badge-paper { background: #e2e8f0; color: var(--text-muted); } .badge-warn { background: #fef3c7; color: #b45309; } .badge-danger { background: #fee2e2; color: #b91c1c; } .badge-info { background: var(--primary-soft); color: var(--primary-dark); } .tag { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .72rem; line-height: 1.6; } .tag-native { background: #dcfce7; color: #166534; } .tag-khunter { background: #e0e7ff; color: #3730a3; } /* HTMX 请求中显示「扫描中…」指示器 */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } .msg { color: var(--success); font-size: .88rem; margin: .5rem 0; } .err { color: var(--danger); font-size: .88rem; margin: .5rem 0; } .muted { color: var(--text-muted); font-size: .85rem; } .empty { color: var(--text-muted); padding: 1.5rem; text-align: center; } /* ---------- 统计小卡 ---------- */ .stats-grid { display: grid; gap: 1rem; margin-bottom: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); } .stat .label { color: var(--text-muted); font-size: .8rem; } /* 模拟测试每策略小卡：盒子自适应撑满宽度 + 数值字号略小，避免大数字溢出框外 */ .sim-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .55rem; } .sim-stats .stat { padding: .55rem .65rem; } .sim-stats .stat .value { font-size: 1.2rem; overflow-wrap: anywhere; } .settings-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .settings-stats .stat .value { font-size: 1.05rem; overflow-wrap: anywhere; } .sim-results-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .sim-result-card { min-width: 0; width: 100%; } .result-table-scroll { width: 100%; overflow-x: auto; } .result-table-scroll table { min-width: 980px; } .sim-stats-secondary { padding-top: .65rem; border-top: 1px solid var(--border); } .ai-assessment { min-height: 76px; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); } .ai-pending { display: flex; align-items: center; gap: .8rem; color: var(--text-muted); } .ai-spinner { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: ai-spin .8s linear infinite; } @keyframes ai-spin { to { transform: rotate(360deg); } } .ai-card-header h2 { display: flex; align-items: center; gap: .5rem; } .ai-brain-icon { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: 9px; font-size: 1.2rem; background: linear-gradient(135deg, #ede9fe, #dbeafe); box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .18); } .ai-stock-report { position: relative; padding: 1rem 1.1rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 55%, var(--card-bg)), var(--card-bg) 58%); } .ai-stock-report::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #8b5cf6, #3b82f6, #22c55e); } .ai-report-heading { margin: .85rem 0 .38rem; color: var(--primary); font-size: 1rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); } .ai-report-heading:first-child { margin-top: 0; } .ai-report-line { margin: .28rem 0; padding: .34rem .55rem; line-height: 1.75; border-radius: 6px; overflow-wrap: anywhere; } .ai-report-summary { color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 75%, transparent); font-weight: 650; } .ai-report-positive { color: var(--success); background: color-mix(in srgb, var(--success) 9%, transparent); } .ai-report-risk { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); } .ai-report-advice { color: #2563eb; background: color-mix(in srgb, #3b82f6 9%, transparent); } :root[data-theme="dark"] .ai-report-advice, :root[data-theme="nord"] .ai-report-advice, :root[data-theme="dracula"] .ai-report-advice { color: #93c5fd; } .ai-report-space { height: .38rem; } .ai-report-meta { margin-top: .65rem; padding-left: .25rem; } .indicator-pane-label { margin: .7rem 0 .2rem; padding-top: .55rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .82rem; font-weight: 600; } .notification-channel { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(260px, 2fr) minmax(180px, 1fr); gap: .75rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--border); } .notification-channel:last-of-type { border-bottom: 0; } .notification-toggle { margin: 0; } .notification-channel input:not([type=checkbox]) { width: 100%; min-width: 0; } .notification-actions { margin-top: 1rem; align-items: center; } .notification-hint { margin: .85rem 0 0; } .trade-mode-form { display: grid; grid-template-columns: minmax(130px,.65fr) minmax(220px,1fr) minmax(220px,1fr) auto; gap: .8rem; align-items: end; margin-top: 1rem; } @media (max-width: 900px) { .notification-channel { grid-template-columns: 1fr; gap: .5rem; } .trade-mode-form { grid-template-columns: 1fr; } } .stat .value { font-size: 1.5rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; } /* ---------- 策略库卡片 ---------- */ .card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .strat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); border-top: 4px solid var(--primary); transition: all .15s; } .strat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .strat-card .head { display: flex; align-items: center; gap: .55rem; } .strat-card .icon { font-size: 1.5rem; } .strat-card .title { font-weight: 600; font-size: 1.05rem; } .strat-card .key { color: var(--text-muted); font-size: .76rem; font-family: ui-monospace, monospace; } .strat-card .desc { color: var(--text-muted); font-size: .86rem; margin: .6rem 0; line-height: 1.55; } .strat-card .actions { display: flex; gap: .5rem; margin-top: .5rem; } .strat-toggle { display: flex; align-items: center; gap: .4rem; margin: .5rem 0; font-size: .85rem; color: var(--text-muted); cursor: pointer; } .strat-toggle input { width: auto; margin: 0; } /* ---------- 策略多选 ---------- */ .strat-picker { display: flex; flex-wrap: wrap; gap: .5rem; } .strat-chk { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 8px; font-size: .86rem; background: var(--surface); transition: all .15s; user-select: none; } .strat-chk:hover { border-color: var(--primary); } .strat-chk:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 500; } hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } @media (max-width: 820px) { .sidebar { width: 64px; } .sidebar .brand .brand-text, .nav-menu a span:not(.ic), .nav-menu .nav-section span:not(.ic), .sidebar .foot { display: none; } .sidebar .brand { justify-content: center; padding: 1rem .5rem; } .nav-menu a { justify-content: center; padding: .7rem; } .nav-menu a.sub { padding-left: .7rem; } .nav-menu .nav-section { justify-content: center; padding: .45rem; } } /* ---------- 个股：报价头 / 分时 / 逐笔 / 盘口 ---------- */ .quote-head .quote-price { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; } .quote-head .quote-price .px { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .quote-head .quote-price .chg { font-size: 1.05rem; font-weight: 600; } .quote-head .stats-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 0; } .quote-head .stat { padding: .5rem .7rem; box-shadow: none; } .quote-head .stat .value { font-size: 1.05rem; margin-top: .1rem; } .neu { color: var(--text-muted); } .micro-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 980px) { .micro-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .micro-grid { grid-template-columns: 1fr; } } .micro-title { font-size: .85rem; margin-bottom: .35rem; } .tick-wrap { height: 252px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; } .tick-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .tick-table td { padding: .2rem .55rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .tick-table td.t { color: var(--text-muted); } .tick-table td.num { text-align: right; } .tick-table td.v { color: var(--text-muted); } .tick-table td.ar { text-align: center; width: 1.4rem; } .ob-wrap { min-width: 0; } .ob-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); } .ob-bar .ob-bid { background: var(--up); } .ob-bar .ob-ask { background: #f59e0b; } .ob-bar-labels { display: flex; justify-content: space-between; font-size: .8rem; margin: .25rem 0 .45rem; font-weight: 600; } /* 表高固定，10 档行自动均分填满 → 与左侧分时/逐笔(252px)底边齐平 */ .ob-table { width: 100%; border-collapse: collapse; font-size: .82rem; line-height: 1.1; height: 215px; } .ob-table tr:nth-child(even) { background: var(--surface-2); } .ob-table td { padding: .12rem .5rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .ob-table td.lvl { color: var(--text-muted); width: 2.4rem; white-space: nowrap; } .ob-table td.num { text-align: right; font-weight: 600; } .ob-table td.v { color: var(--text-muted); font-weight: 400; } .ob-table td.gap { width: .9rem; } .kline-tabs { display: flex; flex-wrap: wrap; gap: .25rem; } .kline-tabs .ktab { padding: .25rem .7rem; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer; font-size: .85rem; color: var(--text-muted); } .kline-tabs .ktab:hover { border-color: var(--primary); color: var(--primary-dark); } .kline-tabs .ktab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; } .indicator-switches { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding-left: .55rem; border-left: 1px solid var(--border); } .indicator-toggle { appearance: none; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; padding: .22rem .48rem; border-radius: 6px; font-size: .8rem; font-weight: 600; transition: color .15s ease, border-color .15s ease, background .15s ease; } .indicator-toggle:hover { color: var(--primary); } .indicator-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; } /* ---------- 市场指数分组 ---------- */ .indices-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; } @media (max-width: 900px) { .indices-groups { grid-template-columns: 1fr; } } .idx-group { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; } .idx-group--hk { border-top: 3px solid #3b82f6; } .idx-group--us { border-top: 3px solid #8b5cf6; } .idx-group--cn { border-top: 3px solid #f97316; } .idx-group-header { display: flex; align-items: center; gap: .5rem; padding: .35rem .85rem; font-size: .8rem; font-weight: 600; } .idx-group--hk .idx-group-header { background: #eff6ff; color: #1d4ed8; } .idx-group--us .idx-group-header { background: #f5f3ff; color: #6d28d9; } .idx-group--cn .idx-group-header { background: #fff7ed; color: #c2410c; } .idx-group-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .6rem; } .idx-group-body .stat { padding: .65rem .8rem; box-shadow: none; } .idx-group-body .stat .value { font-size: 1.25rem; } .idx-closed-badge { margin-left: auto; font-size: .7rem; font-weight: 400; color: #94a3b8; } /* ---------- 自选股：港股 / 美股分组 ---------- */ .wl-group { margin-bottom: 1.25rem; } .wl-group:last-child { margin-bottom: 0; } .wl-group-header { display: flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 600; padding: .4rem .65rem; margin-bottom: .5rem; border-radius: 8px; border-left: 3px solid transparent; } .wl-group-header .muted { font-weight: 400; font-size: .82rem; } .wl-group--hk { background: #eff6ff; color: #1d4ed8; border-left-color: #3b82f6; } .wl-group--us { background: #f5f3ff; color: #6d28d9; border-left-color: #8b5cf6; } /* ---------- 金十数据 ---------- */ .j10-flash { list-style: none; margin: 0; padding: 0; } .j10-flash li { display: flex; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid var(--border); line-height: 1.55; } .j10-flash li:last-child { border-bottom: none; } .j10-time { color: var(--text-muted); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: .1rem; } .j10-flash-txt { flex: 1; } .j10-src { color: var(--primary); font-size: .78rem; white-space: nowrap; } .j10-more { text-align: center; padding: .8rem 0 .2rem; } .j10-news { list-style: none; margin: 0; padding: 0; } .j10-news li { padding: .7rem .2rem; border-bottom: 1px solid var(--border); } .j10-news li:last-child { border-bottom: none; } .j10-news-title { font-weight: 600; font-size: .98rem; color: var(--text); text-decoration: none; cursor: pointer; } .j10-news-title:hover { color: var(--primary); } .j10-news-meta { display: flex; gap: .7rem; align-items: center; margin: .2rem 0; } .j10-news-intro { color: var(--text-muted); font-size: .88rem; margin: .25rem 0 0; line-height: 1.6; } .j10-detail { margin-bottom: 1rem; border-left: 3px solid var(--primary); } .j10-article { margin-top: .6rem; line-height: 1.75; color: var(--text); white-space: pre-wrap; word-break: break-word; } .j10-article img { max-width: 100%; height: auto; } /* ---------- 标的快捷链接 ---------- */ .instrument-link { display: inline-flex; align-items: center; gap: .48rem; min-height: 30px; padding: .22rem .38rem .22rem .3rem; color: var(--text); text-decoration: none; border: 1px solid transparent; border-radius: 9px; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .instrument-label { display: inline-flex; align-items: center; gap: .48rem; min-height: 30px; } .instrument-code { padding: .18rem .45rem; color: #4338ca; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #dcdafe; border-radius: 6px; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .025em; } .instrument-name { font-weight: 600; letter-spacing: .01em; } /* 港股和美股自选分别渲染成两张表；固定同一套列宽，避免代码长度不同导致名称列错位。 */ .wl-table { table-layout: fixed; width: 100%; } .wl-table .wl-col-code { width: 12%; } .wl-table .wl-col-name { width: 18%; } .wl-table .wl-col-note { width: 16%; } .wl-table .wl-col-price { width: 12%; } .wl-table .wl-col-change { width: 11%; } .wl-table .wl-col-date { width: 14%; } .wl-table .wl-col-actions { width: 17%; } .wl-table .wl-name { font-weight: 600; } .wl-table th, .wl-table td { vertical-align: middle; } .orders-code { text-align: center; } .orders-code .instrument-link { justify-content: center; padding-left: .38rem; padding-right: .38rem; } .instrument-arrow { color: #94a3b8; font-size: .78rem; opacity: 0; transform: translate(-3px, 2px); transition: opacity .16s ease, transform .16s ease; } .instrument-link:hover { color: #3730a3; background: #fafaff; border-color: #e0e7ff; box-shadow: 0 5px 14px rgb(79 70 229 / 10%); transform: translateY(-1px); } .instrument-link:hover .instrument-arrow, .instrument-link:focus-visible .instrument-arrow { opacity: 1; transform: translate(0, 0); } .instrument-link:focus-visible { outline: 2px solid rgb(99 102 241 / 35%); outline-offset: 2px; } /* ---------- 策略详情链接 ---------- */ .strategy-detail-link, .strategy-detail-label { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .62rem; color: #3730a3; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; border-radius: 8px; font-size: .84rem; font-weight: 600; line-height: 1.25; text-decoration: none; } .strategy-detail-link { transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .strategy-detail-arrow { color: #8b5cf6; font-size: .72rem; opacity: .55; transition: opacity .16s ease, transform .16s ease; } .strategy-detail-link:hover { color: #312e81; border-color: #a5b4fc; box-shadow: 0 5px 14px rgb(79 70 229 / 12%); transform: translateY(-1px); } .strategy-detail-link:hover .strategy-detail-arrow { opacity: 1; transform: translate(2px, -2px); } .strategy-detail-link:focus-visible { outline: 2px solid rgb(99 102 241 / 35%); outline-offset: 2px; } .strategy-comparison-card .card-body { padding-top: .9rem; } .comparison-start-time { display: inline-flex; align-items: center; margin-left: .5rem; padding: .18rem .46rem; color: #6366f1; background: #eef2ff; border: 1px solid #dfe3ff; border-radius: 6px; font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; } .strategy-comparison-table { border: 1px solid #e7eaf2; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; } .strategy-comparison-table thead th { padding: .68rem .75rem; color: #64748b; background: linear-gradient(180deg, #fafbfe, #f5f7fb); font-size: .75rem; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; } .strategy-comparison-table tbody td { padding: .48rem .75rem; } .strategy-comparison-table tbody tr { transition: background .15s ease; } .strategy-comparison-table tbody tr:hover { background: #f8faff; } .strategy-comparison-table th:first-child, .strategy-comparison-table td:first-child { min-width: 190px; } .strategy-name-cell { display: flex; align-items: center; gap: .55rem; } .strategy-row-index { width: 1.45rem; color: #a1a9b8; font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; } .strategy-baseline-row { background: #fbfcfe; } .strategy-baseline-badge { padding: .12rem .38rem; color: #64748b; background: #eef2f7; border-radius: 999px; font-size: .66rem; font-weight: 600; }