1060 lines
55 KiB
CSS
1060 lines
55 KiB
CSS
/* Canonical non-heaven design system. Question-to-Heaven remains isolated. */
|
|
/* ========== 小白复盘 · 打样设计系统 ========== */
|
|
:root{
|
|
--blue:#2563eb; --blue-d:#1d4ed8; --blue-soft:#eff4ff; --blue-line:#c7d8fb;
|
|
--up:#e04536; --up-soft:#fdecea; --down:#16a34a; --down-soft:#e9f7ee;
|
|
--amber:#b45309; --amber-soft:#fdf3e3;
|
|
--ink:#1f2937; --sub:#6b7280; --faint:#9ca3af;
|
|
--line:#e5e7eb; --line-soft:#eef0f3; --bg:#f4f5f7; --card:#fff;
|
|
--radius:10px;
|
|
--shadow:0 1px 2px rgba(16,24,40,.05);
|
|
/* Shell dimensions are tokens because data-heavy pages reuse them in viewport calculations. */
|
|
--sidebar-width:200px;
|
|
--topbar-height:46px;
|
|
--summary-height:34px;
|
|
--statusbar-height:30px;
|
|
--page-pad-y:14px;
|
|
--page-pad-x:16px;
|
|
--card-gap:12px;
|
|
--workspace-height:calc(100vh - var(--topbar-height) - var(--statusbar-height));
|
|
--content-height:calc(var(--workspace-height) - var(--summary-height));
|
|
--table-wide:1180px;
|
|
--table-medium:930px;
|
|
--table-compact:720px;
|
|
--col-rank:44px;
|
|
--col-date:94px;
|
|
--col-stock:160px;
|
|
--col-number:96px;
|
|
--col-action:96px;
|
|
--col-text:220px;
|
|
--right-rail-wide:372px;
|
|
--pool-table-max-height:calc(var(--content-height) - var(--topbar-height) - var(--page-pad-y) - var(--page-pad-y) - var(--card-gap));
|
|
--sentiment-history-max-height:510px;
|
|
--sentiment-chart-compact-height:clamp(180px,20dvh,250px);
|
|
--sentiment-chart-compact-canvas-height:calc(var(--sentiment-chart-compact-height) - 18px);
|
|
--sentiment-history-min-height:220px;
|
|
--primary-share:1.45fr;
|
|
--secondary-share:.75fr;
|
|
--mobile-nav-height:58px;
|
|
--mobile-header-height:50px;
|
|
--mobile-tab-height:54px;
|
|
--mobile-shell-pad:8px;
|
|
--mobile-page-pad:10px;
|
|
--mobile-min-width:320px;
|
|
--space-4:4px;
|
|
--font-aux:10.5px;
|
|
}
|
|
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
html,body{height:100%}
|
|
body{
|
|
display:block;
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
|
background:var(--bg); color:var(--ink); font-size:13px; padding-bottom:var(--statusbar-height);
|
|
}
|
|
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
|
|
input,textarea,select{font-family:inherit;font-size:13px;color:var(--ink)}
|
|
a{color:inherit;text-decoration:none}
|
|
/* Keep native modal centering after the system reset removes browser defaults. */
|
|
dialog{margin:auto}
|
|
|
|
/* ---------- 侧栏 ---------- */
|
|
.sidebar{
|
|
position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:#fff;border-right:1px solid var(--line);
|
|
display:flex;flex-direction:column;z-index:60;
|
|
}
|
|
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
|
|
.sidebar .brand .logo{width:26px;height:26px;border-radius:7px;background:var(--blue);color:#fff;
|
|
display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
|
|
.sidebar .brand b{font-size:15px}
|
|
.nav{flex:1;overflow-y:auto;padding:8px}
|
|
.nav .group{font-size:11px;color:var(--faint);padding:12px 10px 4px}
|
|
.nav .item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;color:#374151;
|
|
font-size:13px;margin-bottom:1px;cursor:default}
|
|
.nav .item .ico{width:16px;text-align:center;opacity:.75}
|
|
.nav .item.active{background:var(--blue-soft);color:var(--blue);font-weight:600}
|
|
.nav .item.dis{opacity:.55}
|
|
.sidebar .collapse{border-top:1px solid var(--line-soft);padding:10px 16px;color:var(--sub);font-size:12px}
|
|
|
|
/* ---------- 顶栏 ---------- */
|
|
.main{margin-left:var(--sidebar-width);min-width:1080px}
|
|
.topbar{
|
|
position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
|
|
display:flex;align-items:center;gap:14px;padding:0 var(--page-pad-x);height:var(--topbar-height);
|
|
}
|
|
.mkt{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--sub)}
|
|
.mkt b{font-weight:600}
|
|
.mkt .up{color:var(--up)} .mkt .down{color:var(--down)}
|
|
.topbar .spacer{flex:1}
|
|
.datepick{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;padding:4px 10px;color:var(--ink);background:#fff}
|
|
.datepick .arrow{color:var(--faint)}
|
|
.tbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:7px;
|
|
padding:5px 11px;font-size:12px;color:#374151;background:#fff}
|
|
.tbtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
|
|
.tbtn:hover{border-color:var(--blue-line)}
|
|
.tbtn.primary:hover{background:var(--blue-d)}
|
|
.avatar{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:12px}
|
|
.badge-admin{background:var(--amber-soft);color:var(--amber);border-radius:5px;padding:1px 6px;font-size:11px}
|
|
|
|
/* ---------- 全市场摘要条（折叠态） ---------- */
|
|
.mktstrip{background:#fff;border-bottom:1px solid var(--line)}
|
|
.mktstrip .row{display:flex;align-items:center;gap:18px;padding:7px var(--page-pad-x);font-size:12px;color:var(--sub)}
|
|
.mktstrip .row b{color:var(--ink);font-weight:600}
|
|
.mktstrip .emo{display:inline-flex;align-items:center;gap:6px}
|
|
.mktstrip .emo .dot{width:8px;height:8px;border-radius:50%;background:var(--up)}
|
|
.mktstrip .toggle{margin-left:auto;color:var(--blue);font-size:12px}
|
|
.mktstrip .full{display:none;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-soft);
|
|
border-top:1px solid var(--line-soft)}
|
|
.mktstrip.open .full{display:grid}
|
|
.mktstrip .full .cell{background:#fff;padding:10px 16px}
|
|
.mktstrip .full .k{font-size:11px;color:var(--faint)}
|
|
.mktstrip .full .v{font-size:18px;font-weight:700;margin-top:2px}
|
|
|
|
/* ---------- 页面通用 ---------- */
|
|
.page{padding:var(--page-pad-y) var(--page-pad-x)}
|
|
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
|
|
.card-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
|
|
.card-h h3{font-size:14px;font-weight:700}
|
|
.card-h .sub{font-size:11px;color:var(--faint)}
|
|
.card-h .right{margin-left:auto;display:flex;align-items:center;gap:8px}
|
|
.dtag{font-size:11px;color:var(--sub);background:#f3f4f6;border-radius:5px;padding:2px 7px}
|
|
|
|
.btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:7px;
|
|
padding:6px 13px;font-size:12.5px;background:#fff;color:#374151;font-weight:500}
|
|
.btn:hover{border-color:var(--blue-line);color:var(--blue)}
|
|
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
|
|
.btn.primary:hover{background:var(--blue-d);color:#fff}
|
|
.btn.sm{padding:4px 9px;font-size:12px}
|
|
.btn.ghost{border-color:transparent;color:var(--blue)}
|
|
|
|
/* 轻量 Tab（下划线式） */
|
|
.tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line-soft);padding:0 14px}
|
|
.tabs .tab{padding:10px 14px;font-size:13px;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
|
|
.tabs .tab .n{font-size:11px;color:var(--faint);margin-left:3px;font-weight:400}
|
|
.tabs .tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
|
|
.tabs .tab.active .n{color:var(--blue)}
|
|
|
|
/* 分段筛选 */
|
|
.seg{display:inline-flex;background:#f3f4f6;border-radius:8px;padding:2px;gap:2px}
|
|
.seg button{padding:4px 12px;border-radius:6px;font-size:12px;color:var(--sub)}
|
|
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
|
|
.seg button .n{font-size:11px;color:var(--faint);margin-left:2px}
|
|
.seg button.on .n{color:var(--blue)}
|
|
|
|
/* 搜索框 */
|
|
.search{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;padding:5px 10px;background:#fff}
|
|
.search input{border:none;outline:none;width:150px;font-size:12.5px}
|
|
.search .ico{color:var(--faint)}
|
|
|
|
/* ---------- 表格 ---------- */
|
|
.tbl-wrap{overflow:auto}
|
|
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
|
|
.tbl thead th{
|
|
position:sticky;top:0;background:#f8fafc;color:var(--sub);font-weight:600;font-size:12px;
|
|
text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:2;
|
|
}
|
|
.tbl thead th.sortable{cursor:pointer;user-select:none}
|
|
.tbl thead th.sortable:hover{color:var(--blue)}
|
|
.tbl thead th .arr{font-size:9px;color:var(--faint);margin-left:3px}
|
|
.tbl thead th.sorted .arr{color:var(--blue)}
|
|
.tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
|
|
.tbl tbody tr:hover{background:#f8faff}
|
|
.tbl.compact tbody td{padding:5px 12px}
|
|
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
|
|
.tbl thead th.num{text-align:right}
|
|
.sname{font-weight:700;font-size:13px}
|
|
.scode{font-size:11px;color:var(--faint);margin-left:6px;font-weight:400}
|
|
.muted{color:var(--faint)}
|
|
.up{color:var(--up)} .down{color:var(--down)}
|
|
|
|
/* 标签 */
|
|
.tag{display:inline-block;border-radius:5px;padding:1.5px 7px;font-size:11px;line-height:1.6;border:1px solid transparent}
|
|
.tag.neu{background:#f3f4f6;color:#4b5563;border-color:#e5e7eb}
|
|
.tag.red{background:var(--up-soft);color:var(--up)}
|
|
.tag.green{background:var(--down-soft);color:var(--down)}
|
|
.tag.amber{background:var(--amber-soft);color:var(--amber)}
|
|
.tag.b1{background:#e3ecfd;color:#3b62c4} /* 强度：浅 */
|
|
.tag.b2{background:#c2d5fa;color:#2b56bd} /* 强度：中 */
|
|
.tag.b3{background:var(--blue);color:#fff} /* 强度：强 */
|
|
|
|
/* ---------- 状态栏 ---------- */
|
|
.statusbar{
|
|
position:fixed;left:var(--sidebar-width);right:0;bottom:0;height:var(--statusbar-height);background:#fff;border-top:1px solid var(--line);
|
|
display:flex;align-items:center;gap:16px;padding:0 var(--page-pad-x);font-size:11.5px;color:var(--faint);z-index:55;
|
|
}
|
|
.statusbar #statusText{display:block;flex:1;text-align:left}
|
|
.statusbar .risk-note{display:block;flex:1;margin:0;text-align:center}
|
|
.statusbar #updatedAt{display:block;flex:1;text-align:right}
|
|
.statusbar .ok{color:var(--down)}
|
|
|
|
/* ---------- 浮动说明按钮 ---------- */
|
|
.helpfab{position:fixed;right:18px;bottom:44px;z-index:80}
|
|
.helpfab .fab{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;
|
|
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
|
|
.helppanel{position:fixed;right:18px;bottom:90px;width:380px;max-height:70vh;overflow:auto;z-index:80;
|
|
background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);
|
|
display:none}
|
|
.helppanel.open{display:block}
|
|
.helppanel .hp-h{padding:12px 16px;border-bottom:1px solid var(--line-soft);font-weight:700;display:flex;align-items:center}
|
|
.helppanel .hp-h .x{margin-left:auto;color:var(--faint);font-size:16px}
|
|
.helppanel .hp-b{padding:12px 16px}
|
|
.helppanel h4{font-size:12.5px;margin:10px 0 5px;color:var(--blue)}
|
|
.helppanel h4:first-child{margin-top:0}
|
|
.helppanel li{font-size:12px;color:#4b5563;margin:3px 0 3px 16px;line-height:1.7}
|
|
|
|
/* ---------- 抽屉 ---------- */
|
|
.drawer-mask{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:90;display:none}
|
|
.drawer{position:fixed;top:0;right:-460px;width:440px;bottom:0;background:#fff;z-index:95;
|
|
box-shadow:-8px 0 24px rgba(0,0,0,.12);transition:right .25s;display:flex;flex-direction:column}
|
|
body.drawer-open .drawer{right:0}
|
|
body.drawer-open .drawer-mask{display:block}
|
|
.drawer .d-h{padding:14px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;font-weight:700;font-size:14px}
|
|
.drawer .d-h .x{margin-left:auto;color:var(--faint);font-size:18px}
|
|
.drawer .d-b{flex:1;overflow:auto;padding:16px 18px}
|
|
.drawer .d-f{padding:12px 18px;border-top:1px solid var(--line-soft);display:flex;justify-content:flex-end;gap:8px}
|
|
.field{margin-bottom:14px}
|
|
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:5px;font-weight:600}
|
|
.field input[type=text],.field textarea,.field select{
|
|
width:100%;border:1px solid var(--line);border-radius:7px;padding:8px 10px;outline:none}
|
|
.field textarea{min-height:90px;resize:vertical}
|
|
.field input:focus,.field textarea:focus{border-color:var(--blue-line)}
|
|
|
|
/* toast */
|
|
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
|
|
padding:8px 18px;border-radius:8px;font-size:12.5px;z-index:200;opacity:0;transition:opacity .2s;pointer-events:none}
|
|
.toast.show{opacity:.95}
|
|
|
|
/* ========== 集合竞价页 ========== */
|
|
.auc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
|
|
.auc-head h2{font-size:17px;font-weight:800}
|
|
.auc-head .frozen{display:inline-flex;align-items:center;gap:5px;background:var(--down-soft);color:var(--down);
|
|
border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600}
|
|
.auc-head .frozen .dot{width:7px;height:7px;border-radius:50%;background:var(--down)}
|
|
.auc-stats{margin-left:auto;display:flex;gap:22px}
|
|
.auc-stats .st{text-align:right}
|
|
.auc-stats .st .k{font-size:11px;color:var(--faint)}
|
|
.auc-stats .st .v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
|
|
.auc-stats .st .v em{font-style:normal;font-size:11px;font-weight:500;color:var(--sub)}
|
|
|
|
.auc-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:12px;align-items:start}
|
|
.auc-side{display:flex;flex-direction:column;gap:12px}
|
|
|
|
/* 表格工具行 */
|
|
.tbl-tools{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
|
|
.tbl-tools .lbl{font-size:12px;color:var(--faint)}
|
|
.tbl-tools .right{margin-left:auto;display:flex;align-items:center;gap:8px}
|
|
|
|
/* 来源 chips */
|
|
.src{display:inline-block;background:#f3f4f6;color:#6b7280;border-radius:4px;padding:0 5px;font-size:10.5px;margin-right:3px;line-height:1.7}
|
|
.src.hot{background:#fdf0e6;color:#c2691a}
|
|
|
|
/* 侧栏卡片：题材承接 */
|
|
.sector{padding:6px 14px}
|
|
.sector .row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line-soft)}
|
|
.sector .row:last-child{border-bottom:none}
|
|
.sector .nm{font-weight:700;font-size:13px;width:64px}
|
|
.sector .info{flex:1;min-width:0}
|
|
.sector .info .lead{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.sector .stat{text-align:right}
|
|
.sector .stat .pct{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.sector .stat .cnt{font-size:10.5px;color:var(--faint)}
|
|
.newclue{padding:9px 14px 12px;font-size:12px;color:var(--sub);border-top:1px solid var(--line-soft)}
|
|
.newclue b{color:var(--ink);font-size:12.5px}
|
|
|
|
/* 竞价成交额对比 */
|
|
.volcard .vc-body{padding:12px 14px 8px}
|
|
.vol-sum{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
|
|
.vol-sum .big{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
|
|
.vol-sum .cmp{font-size:11.5px;color:var(--sub)}
|
|
.vol-sum .cmp b{font-weight:700}
|
|
.volchart{display:flex;align-items:flex-end;gap:5px;height:96px;padding:6px 0 0;margin-top:16px;position:relative}
|
|
.volchart .bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
|
|
.volchart .bar i{display:block;width:70%;background:#c9d6ee;border-radius:3px 3px 0 0;min-height:4px}
|
|
.volchart .bar.today i{background:var(--up)}
|
|
.volchart .bar span{font-size:9.5px;color:var(--faint);margin-top:4px;transform:scale(.92)}
|
|
.volchart .bar.today span{color:var(--up);font-weight:700}
|
|
.volchart .avgline{position:absolute;left:0;right:0;border-top:1.5px dashed #f59e0b;pointer-events:none}
|
|
.volchart .avgline em{position:absolute;right:0;top:-16px;font-size:10px;color:#d97706;font-style:normal;background:#fff;padding:0 2px}
|
|
.vol-legend{display:flex;gap:14px;padding:6px 14px 11px;font-size:10.5px;color:var(--faint)}
|
|
.vol-legend i{display:inline-block;width:10px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}
|
|
|
|
/* 隔夜消息反馈 */
|
|
.msg-empty{padding:18px 14px;text-align:center;color:var(--faint);font-size:12px}
|
|
.msg-empty .ico{font-size:22px;margin-bottom:6px}
|
|
.msg-item{padding:9px 14px;border-bottom:1px dashed var(--line-soft);display:flex;gap:8px;align-items:flex-start}
|
|
.msg-item:last-child{border-bottom:none}
|
|
.msg-item .txt{flex:1;font-size:12.5px;line-height:1.6}
|
|
.msg-item .txt .rel{color:var(--faint);font-size:11px;margin-top:2px}
|
|
.msg-item .dir{flex-shrink:0;margin-top:1px}
|
|
|
|
/* ========== 智能选股页 ========== */
|
|
.scr-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
|
|
.scr-head h2{font-size:17px;font-weight:800}
|
|
.scr-head .sub{font-size:12px;color:var(--faint)}
|
|
.method{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;margin-left:auto}
|
|
.method button{padding:6px 18px;border-radius:7px;font-size:13px;color:var(--sub);font-weight:600;display:flex;align-items:center;gap:6px}
|
|
.method button.on{background:var(--blue);color:#fff}
|
|
.method button .soon{font-size:10px;background:var(--amber-soft);color:var(--amber);border-radius:4px;padding:0 5px;font-weight:500}
|
|
.method button.on .soon{background:rgba(255,255,255,.22);color:#fff}
|
|
|
|
/* 步骤条 */
|
|
.stepper{display:flex;align-items:center;gap:0;margin-bottom:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px}
|
|
.step{display:flex;align-items:center;gap:9px}
|
|
.step .no{width:24px;height:24px;border-radius:50%;background:var(--down);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
|
|
.step .no.cur{background:var(--blue)}
|
|
.step .no.todo{background:#e5e7eb;color:var(--faint)}
|
|
.step .tt{font-size:13px;font-weight:700}
|
|
.step .ds{font-size:11px;color:var(--faint)}
|
|
.step .ln{width:64px;height:1.5px;background:var(--line);margin:0 14px}
|
|
|
|
/* 阶段+策略 双卡 */
|
|
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
|
|
.phase-b{display:flex;gap:16px;padding:14px 16px;align-items:flex-start}
|
|
.phase-badge{flex-shrink:0;text-align:center;background:var(--up-soft);border:1px solid #f5cfc9;border-radius:10px;padding:10px 18px}
|
|
.phase-badge .p{font-size:19px;font-weight:800;color:var(--up)}
|
|
.phase-badge .c{font-size:11px;color:var(--sub);margin-top:2px}
|
|
.phase-info{flex:1;min-width:0}
|
|
.phase-info .sum{font-size:12.5px;color:#374151;line-height:1.7}
|
|
.phase-info .adv{font-size:12px;color:var(--amber);background:var(--amber-soft);border-radius:6px;padding:5px 9px;margin-top:8px;line-height:1.6}
|
|
.phase-pick{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap;align-items:center}
|
|
.phase-pick .pp{border:1px solid var(--line);border-radius:6px;padding:3px 11px;font-size:12px;color:var(--sub)}
|
|
.phase-pick .pp.on{border-color:var(--up);color:var(--up);background:var(--up-soft);font-weight:700}
|
|
.phase-pick .auto{font-size:11px;color:var(--down);margin-left:4px}
|
|
.strat-b{padding:14px 16px}
|
|
.strat-cur{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
|
.strat-cur .nm{font-size:15px;font-weight:800}
|
|
.strat-desc{font-size:12px;color:var(--sub);margin-top:8px;line-height:1.7}
|
|
.strat-acts{display:flex;gap:8px;margin-top:12px}
|
|
|
|
/* 执行条 */
|
|
.runbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;background:#fff;border:1px solid var(--line);
|
|
border-radius:var(--radius);padding:10px 14px;flex-wrap:wrap}
|
|
.runbar .pipe{display:flex;gap:14px;font-size:11.5px;color:var(--sub);margin-left:auto;flex-wrap:wrap}
|
|
.runbar .pipe .ok{color:var(--down)}
|
|
|
|
/* 回测摘要条 */
|
|
.bt-strip{display:flex;align-items:center;gap:24px;padding:10px 14px;border-bottom:1px solid var(--line-soft);
|
|
background:#fffaf3;flex-wrap:wrap}
|
|
.bt-strip .warn-ico{color:var(--amber);font-size:15px}
|
|
.bt-strip .bt .k{font-size:11px;color:var(--faint)}
|
|
.bt-strip .bt .v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
|
|
.bt-strip .note{margin-left:auto;font-size:11px;color:var(--faint);max-width:420px;line-height:1.6}
|
|
|
|
/* 策略库（策略选股视图） */
|
|
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
|
|
.lib-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
|
|
.lib-card:hover{border-color:var(--blue-line);box-shadow:0 4px 14px rgba(37,99,235,.08)}
|
|
.lib-card .nm{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
|
|
.lib-card .ds{font-size:12px;color:var(--sub);line-height:1.7;flex:1}
|
|
.lib-card .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--faint)}
|
|
.lib-card .acts{display:flex;gap:8px}
|
|
.lib-card.new{border:1.5px dashed var(--line);align-items:center;justify-content:center;color:var(--faint);min-height:150px;font-size:13px;cursor:pointer}
|
|
.lib-card.new:hover{color:var(--blue);border-color:var(--blue-line)}
|
|
|
|
/* 量化选股视图 */
|
|
.quant-grid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:12px;align-items:start}
|
|
.factor{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
|
|
.factor:last-child{border-bottom:none}
|
|
.factor .fname{width:88px;font-size:12.5px;font-weight:600}
|
|
.factor .fname small{display:block;font-weight:400;color:var(--faint);font-size:10.5px}
|
|
.factor input[type=range]{flex:1;accent-color:var(--blue)}
|
|
.factor .wv{width:38px;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.factor .neg .wv{color:var(--down)}
|
|
.cond{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:12.5px;flex-wrap:wrap}
|
|
.cond input[type=text],.cond select{border:1px solid var(--line);border-radius:6px;padding:4px 8px;width:76px;font-size:12px}
|
|
.wsum{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#f8fafc;border-top:1px solid var(--line-soft);font-size:12px}
|
|
.wsum .bar{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}
|
|
.wsum .bar i{display:block;height:100%;background:var(--blue);border-radius:3px}
|
|
|
|
.view{display:none}
|
|
.view.on{display:block}
|
|
.preview-tag{font-size:10.5px;background:var(--amber-soft);color:var(--amber);border-radius:4px;padding:1px 6px;font-weight:600}
|
|
|
|
@media (max-width:1400px){
|
|
.auc-grid{grid-template-columns:minmax(0,1fr) 340px}
|
|
}
|
|
|
|
/* ========== 市场天梯页 ========== */
|
|
.lad-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
|
|
.lad-head h2{font-size:17px;font-weight:800}
|
|
.lad-head .sub{font-size:12px;color:var(--faint)}
|
|
.lad-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
|
|
|
|
.lad-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
|
|
.lad-side{display:flex;flex-direction:column;gap:12px}
|
|
|
|
/* 梯队层 */
|
|
.tier{display:flex;border-bottom:1px solid var(--line-soft)}
|
|
.tier:last-child{border-bottom:none}
|
|
.tier .lab{width:118px;flex-shrink:0;padding:14px 0 14px 16px;border-right:1px solid var(--line-soft)}
|
|
.tier .lab .lv{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800}
|
|
.tier .lab .lv .dot{width:9px;height:9px;border-radius:3px}
|
|
.tier .lab .cnt{font-size:11px;color:var(--faint);margin-top:3px}
|
|
.tier .lab .rate{font-size:10.5px;margin-top:6px;color:var(--sub)}
|
|
.tier .lab .rate b{font-weight:700}
|
|
.tier .cards{flex:1;display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;align-content:flex-start}
|
|
.tier.t4 .lab{background:linear-gradient(90deg,#fdf1ef,#fff)}
|
|
.tier.t3 .lab{background:linear-gradient(90deg,#fdf6ec,#fff)}
|
|
.tier.t2 .lab{background:linear-gradient(90deg,#ecf7f1,#fff)}
|
|
.tier.t1 .lab{background:linear-gradient(90deg,#eef4fd,#fff)}
|
|
|
|
/* 断层带 */
|
|
.tier.gap .cards{display:flex;align-items:center;color:var(--faint);font-size:12px}
|
|
.tier.gap .lab{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 8px,#f3f4f6 8px,#f3f4f6 16px)}
|
|
.tier.gap .gapnote{border:1.5px dashed var(--line);border-radius:8px;padding:8px 14px;color:var(--faint)}
|
|
|
|
/* 股票卡 */
|
|
.scard{border:1px solid var(--line);border-radius:8px;padding:7px 11px;min-width:172px;background:#fff;cursor:default;transition:box-shadow .15s}
|
|
.scard:hover{box-shadow:0 3px 10px rgba(16,24,40,.1);border-color:var(--blue-line)}
|
|
.scard .r1{display:flex;align-items:center;gap:6px}
|
|
.scard .r1 .nm{font-weight:800;font-size:13px}
|
|
.scard .r1 .cd{font-size:10.5px;color:var(--faint)}
|
|
.scard .r1 .tags{margin-left:auto;display:flex;gap:3px}
|
|
.scard .r2{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;color:var(--sub)}
|
|
.scard .r2 .sec{color:var(--blue);background:var(--blue-soft);border-radius:4px;padding:0 5px}
|
|
.scard .r2 .tm{font-variant-numeric:tabular-nums}
|
|
.scard .r2 .fd{margin-left:auto;color:var(--faint);font-size:10.5px}
|
|
.tag.yz{background:#fde8e8;color:#c22e2e;font-weight:700} /* 一字 */
|
|
.tag.lb{background:var(--amber-soft);color:var(--amber)} /* 烂板 */
|
|
|
|
/* 更多展开 */
|
|
.more-btn{align-self:center;border:1px dashed var(--line);border-radius:8px;padding:8px 16px;color:var(--sub);font-size:12px}
|
|
.more-btn:hover{color:var(--blue);border-color:var(--blue-line)}
|
|
|
|
/* 右栏：空间板 */
|
|
.apex{padding:14px 16px}
|
|
.apex .h{display:flex;align-items:baseline;gap:10px}
|
|
.apex .h .big{font-size:26px;font-weight:800;color:var(--up)}
|
|
.apex .h .chg{font-size:11.5px;color:var(--amber);background:var(--amber-soft);border-radius:5px;padding:2px 7px}
|
|
.apex .names{margin-top:8px;font-size:12.5px;line-height:1.9}
|
|
.apex .names b{font-weight:700}
|
|
.apex .note{margin-top:8px;font-size:11.5px;color:var(--sub);line-height:1.7;border-top:1px dashed var(--line-soft);padding-top:8px}
|
|
|
|
/* 右栏：梯队结构条 */
|
|
.pyr{padding:8px 16px 12px}
|
|
.pyr .row{display:flex;align-items:center;gap:8px;padding:4px 0}
|
|
.pyr .row .k{width:52px;font-size:12px;color:var(--sub);text-align:right}
|
|
.pyr .row .bar{height:14px;border-radius:4px;min-width:3px}
|
|
.pyr .row .v{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.pyr .row.gapped .bar{background:repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 4px,#f3f4f6 4px,#f3f4f6 8px)!important}
|
|
.pyr .row.gapped .v{color:var(--faint);font-weight:400}
|
|
.pyr .sum{font-size:11px;color:var(--amber);margin-top:6px;line-height:1.6}
|
|
|
|
/* 右栏：晋级率参考 */
|
|
.rate-list{padding:6px 16px 12px}
|
|
.rate-list .row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px}
|
|
.rate-list .row .k{width:96px;color:var(--sub)}
|
|
.rate-list .row .bar{flex:1;height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden}
|
|
.rate-list .row .bar i{display:block;height:100%;border-radius:4px;background:var(--blue)}
|
|
.rate-list .row .bar i.low{background:#f59e0b}
|
|
.rate-list .row .bar i.zero{background:#d1d5db}
|
|
.rate-list .row .v{width:44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.rate-list .src{font-size:10.5px;color:var(--faint);margin-top:4px}
|
|
|
|
@media (max-width:1400px){.lad-grid{grid-template-columns:minmax(0,1fr) 300px}}
|
|
|
|
/* ========== 板块轮动页 ========== */
|
|
.rot-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
|
|
.rot-head h2{font-size:17px;font-weight:800}
|
|
.rot-head .sub{font-size:12px;color:var(--faint)}
|
|
.rot-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
|
|
|
|
/* 图例 */
|
|
.rot-legend{display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--sub);flex-wrap:wrap}
|
|
.rot-legend .sw{display:inline-flex;align-items:center;gap:4px}
|
|
.rot-legend .sw i{width:14px;height:10px;border-radius:2px}
|
|
.rot-legend .sep{width:1px;height:12px;background:var(--line)}
|
|
.rot-legend .q{color:var(--faint);cursor:help;border-bottom:1px dashed var(--faint)}
|
|
|
|
/* 追踪条 */
|
|
.trackbar{display:none;align-items:center;gap:16px;padding:9px 14px;background:var(--blue-soft);border-bottom:1px solid var(--blue-line);flex-wrap:wrap}
|
|
.trackbar.on{display:flex}
|
|
.trackbar .tn{font-weight:800;color:var(--blue);font-size:13.5px}
|
|
.trackbar .ti{font-size:12px;color:#3b62c4}
|
|
.trackbar .ti b{font-weight:700}
|
|
.trackbar .spark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-left:4px}
|
|
.trackbar .spark i{width:12px;background:#93b4f5;border-radius:2px 2px 0 0;min-height:3px;position:relative}
|
|
.trackbar .spark i.g{background:transparent;border:1px dashed #b9c8e8;border-bottom:none;min-height:8px}
|
|
.trackbar .spark i em{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:9px;color:#3b62c4;font-style:normal}
|
|
.trackbar .x{margin-left:auto}
|
|
|
|
/* 热点轨迹矩阵 */
|
|
.rot-matrix{display:grid;grid-template-columns:repeat(9,minmax(150px,1fr));overflow-x:auto}
|
|
.rot-day{border-right:1px solid var(--line-soft);min-width:150px}
|
|
.rot-day:last-child{border-right:none}
|
|
.rot-day .dh{padding:9px 12px;border-bottom:1px solid var(--line-soft);background:#f8fafc}
|
|
.rot-day .dh .d{font-size:12.5px;font-weight:700}
|
|
.rot-day .dh .n{font-size:10.5px;color:var(--faint);margin-top:1px}
|
|
.rot-day.today .dh{background:var(--blue-soft)}
|
|
.rot-day.today .dh .d{color:var(--blue)}
|
|
.rot-day.today .dh .d::after{content:"今天";font-size:10px;background:var(--blue);color:#fff;border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:1px}
|
|
.rot-cell{display:flex;align-items:center;gap:7px;padding:6.5px 12px;border-bottom:1px dashed var(--line-soft);cursor:pointer;position:relative;transition:filter .15s}
|
|
.rot-cell:last-child{border-bottom:none}
|
|
.rot-cell:hover{filter:brightness(.96)}
|
|
.rot-cell .rk{width:16px;height:16px;border-radius:4px;background:#eef1f5;color:var(--sub);font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}
|
|
.rot-cell .rk.r1{background:#e04536;color:#fff}
|
|
.rot-cell .rk.r2{background:#f0714f;color:#fff}
|
|
.rot-cell .rk.r3{background:#f5a623;color:#fff}
|
|
.rot-cell .nm{font-size:12.5px;font-weight:700;white-space:nowrap}
|
|
.rot-cell .inf{margin-left:auto;text-align:right;font-size:10px;color:var(--sub);white-space:nowrap}
|
|
.rot-cell .inf b{font-weight:700;color:var(--ink)}
|
|
.rot-matrix.tracking .rot-cell:not(.hit){opacity:.22}
|
|
.rot-cell.hit{box-shadow:inset 0 0 0 1.5px var(--blue);border-radius:6px}
|
|
.rot-cell .why{display:none;position:absolute;bottom:100%;left:8px;background:var(--ink);color:#fff;font-size:10.5px;border-radius:5px;padding:3px 8px;white-space:nowrap;z-index:5}
|
|
.rot-cell:hover .why{display:block}
|
|
|
|
/* 明细表趋势标签 */
|
|
.tag.hot{background:var(--up-soft);color:var(--up)} /* 升温 */
|
|
.tag.cool{background:#e8f4fd;color:#2563eb} /* 降温 */
|
|
.tag.newin{background:#e9f7ee;color:var(--down)} /* 新进 */
|
|
tr.rowhit td{background:var(--blue-soft)!important}
|
|
tbody tr.clickable{cursor:pointer}
|
|
|
|
/* ========== 登录页 ========== */
|
|
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f4f6fb 0%,#eef2f9 100%)}
|
|
.login-card{width:380px;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(30,50,90,.1);padding:34px 36px 28px}
|
|
.login-card .lg-brand{text-align:center;margin-bottom:22px}
|
|
.login-card .lg-brand .logo{width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;font-size:22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
|
|
.login-card .lg-brand h1{font-size:19px;margin-top:10px}
|
|
.login-card .lg-brand p{font-size:12px;color:var(--faint);margin-top:4px}
|
|
.login-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}
|
|
.login-tabs button{flex:1;padding:9px;font-size:14px;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
|
|
.login-tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
|
|
.login-card .field{margin-bottom:14px}
|
|
.login-card .lg-btn{width:100%;background:var(--blue);color:#fff;border-radius:8px;padding:11px;font-size:14px;font-weight:700;margin-top:6px}
|
|
.login-card .lg-btn:hover{background:var(--blue-d)}
|
|
.login-links{display:flex;justify-content:space-between;margin-top:14px;font-size:12px}
|
|
.login-links a{color:var(--blue)}
|
|
.login-tip{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line);font-size:11px;color:var(--faint);text-align:center;line-height:1.8}
|
|
|
|
/* ========== 情绪周期 ========== */
|
|
.emo-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start;margin-bottom:12px}
|
|
.emo-legend{display:flex;gap:16px;padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--sub);flex-wrap:wrap}
|
|
.emo-legend .li{display:inline-flex;align-items:center;gap:5px}
|
|
.emo-legend .li i{width:16px;height:3px;border-radius:2px}
|
|
.emo-legend .li .dot{width:7px;height:7px;border-radius:50%}
|
|
.chart-box{padding:14px 16px 6px;position:relative}
|
|
.chart-box svg{width:100%;display:block}
|
|
.chart-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:11px;border-radius:6px;padding:5px 9px;display:none;white-space:nowrap;z-index:5}
|
|
.score-list{padding:8px 16px 14px}
|
|
.score-list .row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px}
|
|
.score-list .row .k{width:88px;color:var(--sub)}
|
|
.score-list .row .bar{flex:1;height:9px;background:#f0f2f5;border-radius:5px;overflow:hidden}
|
|
.score-list .row .bar i{display:block;height:100%;background:linear-gradient(90deg,#93b4f5,var(--blue));border-radius:5px}
|
|
.score-list .row .v{width:64px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.score-list .row .v small{color:var(--faint);font-weight:400}
|
|
.period-note{font-size:11px;color:var(--amber);background:var(--amber-soft);border-radius:6px;padding:5px 10px;margin-left:8px}
|
|
|
|
/* ========== 池页右栏 ========== */
|
|
.side-list{padding:6px 14px 10px}
|
|
.side-list .grp{padding:7px 0;border-bottom:1px dashed var(--line-soft)}
|
|
.side-list .grp:last-child{border-bottom:none}
|
|
.side-list .grp .gt{display:flex;align-items:center;font-size:12px;margin-bottom:4px}
|
|
.side-list .grp .gt b{color:var(--up)}
|
|
.side-list .grp .gt .n{margin-left:auto;color:var(--faint);font-size:11px}
|
|
.side-list .grp .gs{font-size:12px;color:#4b5563;line-height:1.8;cursor:default}
|
|
.hotlist{padding:6px 14px 10px}
|
|
.hotlist .row{display:flex;align-items:center;gap:8px;padding:5.5px 0;font-size:12.5px;border-bottom:1px dashed var(--line-soft)}
|
|
.hotlist .row:last-child{border-bottom:none}
|
|
.hotlist .row .nm{flex:1;font-weight:600}
|
|
.hotlist .row .v{font-weight:700;color:var(--up);font-variant-numeric:tabular-nums}
|
|
|
|
/* ========== 昨日涨停汇总条 ========== */
|
|
.res-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-bottom:1px solid var(--line-soft)}
|
|
.res-sum .cell{background:#fff;padding:12px 16px;cursor:pointer;transition:background .15s}
|
|
.res-sum .cell:hover{background:#f8faff}
|
|
.res-sum .cell.on{background:var(--blue-soft);box-shadow:inset 0 -2px 0 var(--blue)}
|
|
.res-sum .k{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:6px}
|
|
.res-sum .v{font-size:22px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
|
|
.res-sum .v small{font-size:11px;color:var(--faint);font-weight:400}
|
|
.res-sum .pct{font-size:11px;color:var(--faint);margin-top:2px}
|
|
|
|
/* ========== 涨停表现 ========== */
|
|
.perf-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:12px}
|
|
.perf-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
|
|
.perf-card .k{font-size:12px;color:var(--sub);display:flex;align-items:center;justify-content:space-between}
|
|
.perf-card .rate{font-size:26px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
|
|
.perf-card .cnt{font-size:11.5px;color:var(--faint);margin-top:4px}
|
|
.perf-card .bar{height:6px;background:#f0f2f5;border-radius:3px;margin-top:10px;overflow:hidden}
|
|
.perf-card .bar i{display:block;height:100%;border-radius:3px}
|
|
.width-box{padding:14px 16px}
|
|
.width-bar{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-top:8px}
|
|
.width-bar .up{background:#e04536}
|
|
.width-bar .dn{background:#16a34a}
|
|
.width-legend{display:flex;gap:18px;margin-top:8px;font-size:11.5px;color:var(--sub)}
|
|
.width-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
|
|
|
|
/* ========== 题材库 ========== */
|
|
.theme-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;align-items:start}
|
|
.kline-box{padding:10px 14px 4px;position:relative}
|
|
.kline-box svg{width:100%;display:block}
|
|
.kline-legend{display:flex;gap:16px;padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--sub)}
|
|
.kline-legend .li i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
|
|
.theme-list .row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
|
|
.theme-list .row .rk{width:22px;color:var(--faint);font-size:11px;text-align:right}
|
|
.theme-list .row .nm{font-weight:700;width:82px}
|
|
.theme-list .row .hot{flex:1;color:var(--sub);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.theme-list .row .chg{width:70px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
|
|
.theme-stat{display:flex;gap:24px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
|
|
.theme-stat .st .k{font-size:11px;color:var(--faint)}
|
|
.theme-stat .st .v{font-size:18px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
|
|
|
|
/* ========== 人气热榜 ========== */
|
|
.hot3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
|
|
.hot3 .hc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;box-shadow:var(--shadow)}
|
|
.hot3 .hc .t{font-size:12px;color:var(--sub)}
|
|
.hot3 .hc .n{font-size:15px;font-weight:800;margin-top:4px}
|
|
.hot3 .hc .d{font-size:11px;color:var(--faint);margin-top:4px;line-height:1.6}
|
|
|
|
/* ========== 龙虎榜 ========== */
|
|
.empty-box{padding:44px 20px;text-align:center;color:var(--faint)}
|
|
.empty-box .ico{font-size:30px;margin-bottom:10px}
|
|
.empty-box .tt{font-size:14px;font-weight:600;color:var(--sub);margin-bottom:6px}
|
|
.empty-box .ds{font-size:12px;line-height:1.9}
|
|
.empty-box .act{margin-top:14px}
|
|
|
|
/* ========== 问师 ========== */
|
|
.mentor-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:12px;align-items:start}
|
|
.model{padding:12px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer}
|
|
.model:hover{background:#f8faff}
|
|
.model.on{background:var(--blue-soft);box-shadow:inset 2px 0 0 var(--blue)}
|
|
.model .r1{display:flex;align-items:center;gap:8px}
|
|
.model .r1 .nm{font-weight:700;font-size:13px}
|
|
.model .r1 .lv{margin-left:auto}
|
|
.model .r2{font-size:11.5px;color:var(--sub);margin-top:4px;line-height:1.6}
|
|
.model .r3{display:flex;gap:10px;margin-top:6px;font-size:10.5px;color:var(--faint)}
|
|
.model .r3 .q{border-bottom:1px dashed var(--faint);cursor:help}
|
|
.chat-box{display:flex;flex-direction:column;height:calc(100vh - 250px);min-height:420px}
|
|
.chat-log{flex:1;overflow:auto;padding:18px}
|
|
.chat-empty{text-align:center;color:var(--faint);padding-top:80px}
|
|
.chat-empty .ico{font-size:30px;margin-bottom:10px}
|
|
.chat-empty .samples{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
|
|
.chat-empty .samples button{border:1px solid var(--line);border-radius:16px;padding:6px 14px;font-size:12px;color:var(--sub);background:#fff}
|
|
.chat-empty .samples button:hover{border-color:var(--blue-line);color:var(--blue)}
|
|
.chat-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line-soft)}
|
|
.chat-input input{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 12px;outline:none}
|
|
.chat-input input:focus{border-color:var(--blue-line)}
|
|
|
|
/* ========== 我的复盘 ========== */
|
|
.review-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}
|
|
.journal-empty{padding:30px;text-align:center;color:var(--faint);font-size:12px}
|
|
.txt-area{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:120px;resize:vertical;outline:none;font-size:13px;line-height:1.8}
|
|
.txt-area:focus{border-color:var(--blue-line)}
|
|
.star{color:#f59e0b;font-size:14px;cursor:pointer}
|
|
.star.off{color:#d1d5db}
|
|
|
|
/* ========== Canonical shell integration ========== */
|
|
.workspace-view.page:not(#heavenView){margin-top:0;border:0;border-radius:0;background:transparent;box-shadow:none}
|
|
.workspace-view.page:not(#heavenView) > :last-child{margin-bottom:0}
|
|
|
|
/* Restore the continuous expanded market strip used before the card-style treatment. */
|
|
.overview-strip[data-overview-expanded="true"]{
|
|
gap:0;
|
|
padding-inline:var(--page-pad-x);
|
|
background:var(--card);
|
|
}
|
|
.overview-strip[data-overview-expanded="true"] .sentiment-block,
|
|
.overview-strip[data-overview-expanded="true"] .metric{
|
|
border-right:1px solid var(--line-soft);
|
|
background:transparent;
|
|
}
|
|
.overview-strip[data-overview-expanded="true"] .overview-toggle{
|
|
border-right:0;
|
|
background:transparent;
|
|
}
|
|
|
|
/* The directory is supporting navigation; market and members remain the main canvas. */
|
|
.theme-grid{grid-template-columns:var(--right-rail-wide) minmax(0,1fr)}
|
|
|
|
/* Rotation intensity is communicated by fill alone. */
|
|
#rotationView .rotation-sector-chip.heat-strong,
|
|
#rotationView .rotation-sector-chip.heat-warm,
|
|
#rotationView .rotation-sector-chip.heat-mild,
|
|
#rotationView .rotation-sector-chip:hover{box-shadow:none}
|
|
|
|
/* The summary grid reveals the page canvas between otherwise unchanged cards. */
|
|
#popularityView .popularity-glance-v2{
|
|
background:var(--bg);
|
|
}
|
|
#popularityView #popularitySummary{
|
|
border:0;
|
|
border-radius:0;
|
|
box-shadow:none;
|
|
overflow:visible;
|
|
}
|
|
#popularityView .popularity-glance-v2 article{
|
|
background:var(--card);
|
|
box-shadow:none;
|
|
}
|
|
|
|
/* Auction summary shares the dataset row without changing its metric styling. */
|
|
#auctionView .auction-tabs-v2 .auction-summary-v2{
|
|
margin-left:auto;
|
|
align-self:center;
|
|
}
|
|
#auctionView .auction-tabs-v2{padding-right:0}
|
|
|
|
/* Keep the stage range label and its current value on one left-aligned axis. */
|
|
#sentimentCycleView .sentiment-stage-guide-head > span:nth-child(3),
|
|
#sentimentCycleView .sentiment-stage-guide-grid article .stage-range{
|
|
text-align:left;
|
|
}
|
|
|
|
/* Sentiment history: numeric columns align right; categorical columns align centrally. */
|
|
#sentimentCycleView .sentiment-history-table tbody td.number{
|
|
text-align:right;
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
|
|
/* The history table owns its scrolling; the fixed status bar must not cover its final row. */
|
|
#sentimentCycleView .sentiment-history-frame{
|
|
max-height:var(--sentiment-history-max-height);
|
|
overflow:auto;
|
|
}
|
|
#sentimentCycleView .sentiment-history-table .sentiment-history-columns th:nth-child(3),
|
|
#sentimentCycleView .sentiment-history-table .sentiment-history-columns th:nth-child(4),
|
|
#sentimentCycleView .sentiment-history-table tbody td:nth-child(3),
|
|
#sentimentCycleView .sentiment-history-table tbody td:nth-child(4){
|
|
text-align:center;
|
|
}
|
|
|
|
/* Strategy cards select on direct click; the condition dialog stays viewport-centered. */
|
|
#screenerView .curated-strategy-card{cursor:pointer}
|
|
#screenerView .curated-detail-dialog{margin:auto}
|
|
|
|
/* Column roles override legacy percentage layouts. */
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable){min-width:var(--table-wide);table-layout:auto}
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable) th{width:auto}
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable) th.row-number{width:var(--col-rank)}
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable) th:nth-child(2){width:var(--col-stock)}
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable) th.number{width:var(--col-number)}
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable) thead th.num{text-align:right;font-variant-numeric:tabular-nums}
|
|
:is(#limitTable,#brokenTable,#downTable,#yesterdayTable) .reason-column{width:auto;min-width:var(--col-text);white-space:normal}
|
|
|
|
#rotationView .rotation-table,
|
|
#popularityView .popularity-table-v2,
|
|
#dragonView .dragon-operation-table,
|
|
#screenerTrackingView .tracking-table,
|
|
#reviewWorkspaceView .review-watchlist-table,
|
|
#reviewWorkspaceView .trade-log-table{table-layout:auto}
|
|
|
|
#rotationView .rotation-table{min-width:var(--table-wide)}
|
|
#popularityView .popularity-table-v2{min-width:var(--table-medium)}
|
|
#dragonView .dragon-operation-table{min-width:var(--table-wide)}
|
|
#screenerTrackingView .tracking-table{min-width:var(--table-wide)}
|
|
#reviewWorkspaceView .review-watchlist-table{min-width:var(--table-compact)}
|
|
#reviewWorkspaceView .trade-log-table{min-width:var(--table-medium)}
|
|
|
|
#popularityView .popularity-table-v2 th,
|
|
#reviewWorkspaceView .review-watchlist-table th,
|
|
#reviewWorkspaceView .trade-log-table th{width:auto}
|
|
#popularityView .popularity-table-v2 th:first-child{width:var(--col-rank)}
|
|
#popularityView .popularity-table-v2 th:nth-child(2),
|
|
#reviewWorkspaceView :is(.review-watchlist-table,.trade-log-table) th:nth-child(2){width:var(--col-stock)}
|
|
#popularityView .popularity-table-v2 th.number,
|
|
#reviewWorkspaceView :is(.review-watchlist-table,.trade-log-table) th.number{width:var(--col-number)}
|
|
#reviewWorkspaceView .trade-log-table th:first-child{width:var(--col-date)}
|
|
#reviewWorkspaceView :is(.review-watchlist-table,.trade-log-table) th:last-child{width:var(--col-action)}
|
|
#reviewWorkspaceView .review-watchlist-table th:nth-last-child(2),
|
|
#reviewWorkspaceView .trade-log-table th:nth-last-child(2){width:auto;min-width:var(--col-text)}
|
|
#reviewWorkspaceView :is(.watch-remark,.trade-copy){white-space:normal}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-index{width:var(--col-rank)}
|
|
#dragonView .dragon-operation-table .dragon-col-stock{width:var(--col-stock)}
|
|
#dragonView .dragon-operation-table .dragon-col-direction{width:var(--col-number)}
|
|
#dragonView .dragon-operation-table .dragon-col-number{width:var(--col-number)}
|
|
#dragonView .dragon-operation-table .dragon-col-seat{width:var(--col-text)}
|
|
#dragonView .dragon-operation-table .dragon-col-reason{width:auto}
|
|
#dragonView .dragon-operation-table .reason-column{white-space:normal}
|
|
:is(#limitPool,#brokenView,#downView,#yesterdayView) .tbl-wrap{max-height:var(--pool-table-max-height);overflow:auto}
|
|
|
|
@media (min-width:721px){
|
|
body:is(
|
|
[data-active-view="sentimentCycleView"],
|
|
[data-active-view="yesterdayView"]
|
|
) .app-main{
|
|
height:var(--workspace-height);
|
|
min-height:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
}
|
|
|
|
body:is(
|
|
[data-active-view="sentimentCycleView"],
|
|
[data-active-view="yesterdayView"]
|
|
) .overview-strip{flex:0 0 auto}
|
|
|
|
#sentimentCycleView.active-view,
|
|
#yesterdayView.active-view{
|
|
min-height:0;
|
|
flex:1 1 auto;
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#sentimentCycleView > :is(.sentiment-cycle-toolbar,#sentimentHistoryNotice,.sentiment-cycle-analysis,.sentiment-detail-toolbar),
|
|
#yesterdayView > .yesterday-page-head,
|
|
#yesterdayView .yesterday-result-summary{flex:0 0 auto}
|
|
|
|
#sentimentCycleView .sentiment-history-frame{
|
|
min-height:var(--sentiment-history-min-height);
|
|
max-height:none;
|
|
flex:1 1 auto;
|
|
}
|
|
|
|
#yesterdayView .yesterday-table-card{
|
|
min-height:0;
|
|
flex:1 1 auto;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
|
|
#yesterdayView .yesterday-table-scroll{
|
|
min-height:0;
|
|
max-height:none;
|
|
flex:1 1 auto;
|
|
}
|
|
|
|
body:is(
|
|
[data-active-view="auctionView"],
|
|
[data-active-view="themeLibraryView"],
|
|
[data-active-view="popularityView"],
|
|
[data-active-view="dragonView"],
|
|
[data-active-view="mentorView"],
|
|
[data-active-view="rotationView"]
|
|
) .app-main{
|
|
height:var(--workspace-height);
|
|
min-height:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
}
|
|
|
|
body:is(
|
|
[data-active-view="auctionView"],
|
|
[data-active-view="themeLibraryView"],
|
|
[data-active-view="popularityView"],
|
|
[data-active-view="dragonView"],
|
|
[data-active-view="mentorView"],
|
|
[data-active-view="rotationView"]
|
|
) .overview-strip{flex:0 0 auto}
|
|
|
|
body:is(
|
|
[data-active-view="auctionView"],
|
|
[data-active-view="themeLibraryView"],
|
|
[data-active-view="popularityView"],
|
|
[data-active-view="dragonView"],
|
|
[data-active-view="mentorView"],
|
|
[data-active-view="rotationView"]
|
|
) .workspace-view.active-view{
|
|
min-height:0;
|
|
flex:1 1 auto;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#auctionView.active-view,
|
|
#themeLibraryView.active-view,
|
|
#popularityView.active-view,
|
|
#dragonView.active-view,
|
|
#mentorView.active-view{display:flex;flex-direction:column}
|
|
|
|
#rotationView.active-view{
|
|
display:grid;
|
|
grid-template-rows:auto minmax(0,var(--primary-share)) minmax(0,var(--secondary-share));
|
|
gap:var(--card-gap);
|
|
overflow:hidden;
|
|
}
|
|
#rotationView .rotation-page-head{margin-bottom:0}
|
|
#rotationView .rotation-trajectory-card,
|
|
#rotationView .rotation-detail-card{min-height:0;margin-top:0;display:flex;flex-direction:column;overflow:hidden}
|
|
#rotationView .rotation-history,
|
|
#rotationView .rotation-table-frame{min-height:0;flex:1 1 auto;overflow:auto}
|
|
|
|
#auctionView .auction-page-head-v2,
|
|
#themeLibraryView .theme-page-head-v2,
|
|
#themeLibraryView .theme-summary-v2,
|
|
#popularityView .popularity-page-head-v2,
|
|
#popularityView .popularity-glance-v2,
|
|
#dragonView .dragon-page-head-v2,
|
|
#mentorView .mentor-page-header,
|
|
#mentorView .member-gate,
|
|
#mentorView #mentorNotice{flex:0 0 auto}
|
|
|
|
#auctionView .auction-workspace-v2,
|
|
#themeLibraryView .theme-library-workspace-v2,
|
|
#popularityView .popularity-table-card-v2,
|
|
#dragonView .dragon-daily-content-v2,
|
|
#mentorView .mentor-layout{min-height:0;flex:1 1 auto}
|
|
|
|
#auctionView .auction-workspace-v2{height:100%;grid-template-columns:minmax(0,1fr) var(--right-rail-wide);grid-template-rows:minmax(0,1fr);align-items:stretch;overflow:hidden}
|
|
#auctionView .auction-primary-card{min-height:0;display:flex;flex-direction:column;overflow:hidden}
|
|
#auctionView .auction-table-frame-v2{min-height:0;flex:1 1 auto;overflow:auto}
|
|
#auctionView .auction-side-v2{min-height:0;overflow:auto}
|
|
|
|
#themeLibraryView.active-view{overflow:hidden}
|
|
#themeLibraryView .theme-library-workspace-v2{height:100%;grid-template-rows:minmax(0,1fr);align-items:stretch;overflow:hidden}
|
|
#themeLibraryView .theme-detail-stack-v2{grid-template-rows:minmax(0,1.35fr) minmax(0,.85fr)}
|
|
#themeLibraryView .theme-directory-card-v2,
|
|
#themeLibraryView .theme-detail-column-v2,
|
|
#themeLibraryView .theme-detail-stack-v2{height:100%;min-height:0;overflow:hidden}
|
|
|
|
#popularityView .popularity-table-card-v2{display:flex;flex-direction:column;overflow:hidden}
|
|
#popularityView .popularity-table-frame-v2{min-height:0;flex:1 1 auto;overflow:auto}
|
|
|
|
#dragonView .dragon-daily-content-v2{overflow:hidden}
|
|
#dragonView .dragon-trader-detail-v2{min-height:0}
|
|
#dragonView .dragon-trader-detail .trader-operations{min-height:0;overflow:auto}
|
|
|
|
#mentorView .mentor-layout{height:auto;overflow:hidden}
|
|
#mentorView .mentor-sidebar,
|
|
#mentorView .mentor-chat-panel,
|
|
#mentorView .mentor-directory-content,
|
|
#mentorView .chat-box{min-height:0;height:100%;overflow:hidden}
|
|
#mentorView .mentor-list,
|
|
#mentorView .mentor-messages{min-height:0;overflow:auto}
|
|
}
|
|
|
|
@media (min-width:721px) and (max-height:1100px){
|
|
#sentimentCycleView .sentiment-chart-shell{height:var(--sentiment-chart-compact-height)}
|
|
#sentimentCycleView .sentiment-chart-shell canvas{height:var(--sentiment-chart-compact-canvas-height)}
|
|
#sentimentCycleView .sentiment-phase-block{gap:12px;padding:10px 12px}
|
|
#sentimentCycleView .sentiment-current-phase-badge{padding:8px 12px}
|
|
#sentimentCycleView .sentiment-phase-advice{margin-top:4px;padding:4px 8px;line-height:1.4}
|
|
#sentimentCycleView .sentiment-feedback-strip > span{padding:4px 10px}
|
|
#sentimentCycleView .sentiment-component-list{padding:4px 16px 8px}
|
|
#sentimentCycleView .sentiment-component-item{padding:4px 0}
|
|
#sentimentCycleView .sentiment-component-item small{display:none}
|
|
}
|
|
|
|
/* Full-page workspaces: at desktop sizes the page, rather than an inner card,
|
|
owns vertical scrolling. This keeps dense 1080p screens usable without
|
|
shrinking the primary content. */
|
|
@media (min-width:721px){
|
|
:root body:is(
|
|
[data-active-view="sentimentCycleView"],
|
|
[data-active-view="rotationView"],
|
|
[data-active-view="screenerView"]
|
|
) .app-main{
|
|
height:var(--workspace-height);
|
|
min-height:0;
|
|
display:block;
|
|
overflow-x:hidden;
|
|
overflow-y:auto;
|
|
}
|
|
|
|
:root #sentimentCycleView.active-view,
|
|
:root #rotationView.active-view,
|
|
:root #screenerView.active-view{
|
|
height:auto;
|
|
min-height:0;
|
|
display:block;
|
|
overflow:visible;
|
|
}
|
|
|
|
:root #sentimentCycleView .sentiment-history-frame,
|
|
:root #rotationView .rotation-history,
|
|
:root #rotationView .rotation-table-frame,
|
|
:root #screenerView .screener-result-frame{
|
|
max-height:none;
|
|
overflow:visible;
|
|
}
|
|
|
|
:root #rotationView .rotation-trajectory-card,
|
|
:root #rotationView .rotation-detail-card{
|
|
min-height:0;
|
|
margin-top:var(--card-gap);
|
|
display:block;
|
|
overflow:visible;
|
|
}
|
|
|
|
:root #rotationView .rotation-page-head{margin-bottom:0}
|
|
}
|
|
|
|
@media (max-width:720px), (max-width:1023px) and (max-height:600px){
|
|
:root{--sentiment-history-max-height:min(480px,calc(100dvh - 210px))}
|
|
html,body{width:100%;min-width:var(--mobile-min-width)}
|
|
body,body.sidebar-collapsed{display:block;padding-bottom:var(--mobile-nav-height)}
|
|
.main{width:100%;min-width:0;margin-left:0}
|
|
.topbar{
|
|
position:sticky;
|
|
width:100%;
|
|
height:auto;
|
|
min-height:var(--mobile-header-height);
|
|
padding:var(--mobile-shell-pad);
|
|
}
|
|
.market-tape{display:none}
|
|
.header-actions{width:100%}
|
|
.header-command-group{position:absolute}
|
|
.sidebar,
|
|
body.sidebar-collapsed .sidebar{
|
|
inset:auto 0 0;
|
|
width:100%;
|
|
height:var(--mobile-nav-height);
|
|
min-height:var(--mobile-nav-height);
|
|
max-height:var(--mobile-nav-height);
|
|
flex-direction:row;
|
|
justify-content:space-around;
|
|
padding:0;
|
|
overflow:hidden;
|
|
border:0;
|
|
border-top:1px solid var(--line);
|
|
}
|
|
.sidebar-brand,
|
|
.module-nav .nav-group-label,
|
|
.sidebar-collapse-button,
|
|
.module-nav .market-sub-tab{display:none}
|
|
.module-nav .nav-group,
|
|
body.sidebar-collapsed .module-nav .nav-group{display:contents}
|
|
.module-nav .module-tab,
|
|
body.sidebar-collapsed .module-nav .module-tab{display:none}
|
|
.module-nav .module-tab.mobile-primary-tab,
|
|
body.sidebar-collapsed .module-nav .module-tab.mobile-primary-tab{
|
|
min-height:var(--mobile-tab-height);
|
|
display:flex;
|
|
flex:1;
|
|
align-items:center;
|
|
justify-content:center;
|
|
flex-direction:column;
|
|
gap:var(--space-4);
|
|
padding:var(--space-4);
|
|
font-size:var(--font-aux);
|
|
}
|
|
.module-nav .module-tab.mobile-primary-tab span{display:inline}
|
|
.module-nav .module-tab.mobile-primary-tab .nav-label-desktop{display:none}
|
|
.module-nav .module-tab.mobile-primary-tab .nav-label-mobile{display:inline}
|
|
.app-main,
|
|
body:is(
|
|
[data-active-view="auctionView"],
|
|
[data-active-view="themeLibraryView"],
|
|
[data-active-view="popularityView"],
|
|
[data-active-view="dragonView"],
|
|
[data-active-view="mentorView"],
|
|
[data-active-view="rotationView"]
|
|
) .app-main{
|
|
width:100%;
|
|
height:auto;
|
|
min-height:0;
|
|
display:block;
|
|
padding:0 var(--mobile-shell-pad) var(--mobile-page-pad);
|
|
overflow:visible;
|
|
}
|
|
.overview-strip{margin-inline:calc(var(--mobile-shell-pad) * -1);padding-inline:var(--mobile-shell-pad);overflow-x:auto}
|
|
.overview-strip.mktstrip .row{width:max-content;min-width:100%;padding:0}
|
|
.overview-strip .metric:nth-of-type(n + 4),
|
|
.overview-strip .metric-wide{display:none}
|
|
.overview-toggle{display:none}
|
|
.workspace-view.page:not(#heavenView){width:100%;height:auto;padding:var(--mobile-page-pad) 0;overflow:visible}
|
|
#auctionView .auction-workspace-v2{display:block}
|
|
#rotationView.active-view{display:block;overflow:visible}
|
|
#rotationView .rotation-trajectory-card,
|
|
#rotationView .rotation-detail-card{margin-top:var(--card-gap)}
|
|
#themeLibraryView .theme-library-workspace-v2{height:auto;display:block;grid-template-columns:none;grid-template-rows:auto;overflow:visible}
|
|
#themeLibraryView .theme-directory-v2{display:block}
|
|
#themeLibraryView .theme-directory-card-v2,
|
|
#themeLibraryView .theme-detail-column-v2,
|
|
#themeLibraryView .theme-detail-stack-v2{height:auto;overflow:visible}
|
|
.statusbar{display:none}
|
|
}
|