feat: apply B-147 visual tokens to remaining market data pages
Unify ladder, themes, rotation, auction, dragon-tiger and popularity with shared tokens, left-aligned first columns, and table density. Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
MS-01-Codex
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
6ab910eeea
commit
ad08d309c6
+60
-49
@@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
.rotation-day.selected-day {
|
||||
background: rgb(240, 246, 253);
|
||||
background: var(--selected);
|
||||
}
|
||||
|
||||
.rotation-sector-chip.selected {
|
||||
@@ -81,11 +81,11 @@
|
||||
}
|
||||
|
||||
.rotation-day:nth-child(2n+1) {
|
||||
background: rgb(246, 248, 250);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.rotation-day-sector {
|
||||
border-color: rgb(231, 235, 239);
|
||||
border-color: var(--border);
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
}
|
||||
|
||||
:where(#rotationView) .rotation-swatch {
|
||||
background: rgba(53, 106, 230, 0.12);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
:where(#rotationView) .rotation-tracker-copy {
|
||||
@@ -157,9 +157,9 @@
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border-bottom: 1px dashed rgba(135, 149, 173, 0.22);
|
||||
border-bottom: 1px dashed var(--border);
|
||||
|
||||
background: rgba(53, 106, 230, calc(.04 + var(--rotation-heat) * .46));
|
||||
background: color-mix(in srgb, var(--accent) calc(4% + var(--rotation-heat) * 46%), transparent);
|
||||
}
|
||||
|
||||
.redesigned-rotation-view {
|
||||
@@ -185,9 +185,9 @@
|
||||
|
||||
color: var(--r2-ink);
|
||||
|
||||
font-size: 17px;
|
||||
font-size: var(--font-size-page-title);
|
||||
|
||||
font-weight: 800;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
@@ -241,7 +241,7 @@
|
||||
|
||||
color: var(--r2-sub);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-label);
|
||||
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -260,13 +260,15 @@
|
||||
.rotation-order-control button:focus-visible,
|
||||
.rotation-sector-chip:focus-visible,
|
||||
.rotation-track-cancel:focus-visible {
|
||||
outline: rgba(37, 99, 235, 0.28) solid 2px;
|
||||
outline: 2px solid var(--accent);
|
||||
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.rotation-export-button {
|
||||
min-height: 30px;
|
||||
min-height: 32px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
@@ -274,17 +276,17 @@
|
||||
|
||||
justify-content: center;
|
||||
|
||||
padding: 5px 12px;
|
||||
padding: 0 12px;
|
||||
|
||||
border: 1px solid var(--r2-line);
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
border-radius: 7px;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--surface);
|
||||
|
||||
color: rgb(55, 65, 81);
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-label);
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -433,17 +435,17 @@
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.strong {
|
||||
background: rgb(112, 155, 245);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.warm {
|
||||
background: rgb(203, 220, 255);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.mild {
|
||||
background: rgb(240, 244, 250);
|
||||
background: var(--surface-muted);
|
||||
|
||||
border: 1px solid rgb(223, 230, 240);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#rotationView .rotation-tracker {
|
||||
@@ -487,7 +489,7 @@
|
||||
}
|
||||
|
||||
#rotationView .rotation-tracker-copy span {
|
||||
color: rgb(59, 98, 196);
|
||||
color: var(--accent-hover);
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
@@ -535,7 +537,7 @@
|
||||
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
|
||||
background: rgb(147, 180, 245);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
#rotationView .rotation-tracker-spark small {
|
||||
@@ -543,7 +545,7 @@
|
||||
|
||||
top: -1px;
|
||||
|
||||
color: rgb(59, 98, 196);
|
||||
color: var(--accent-hover);
|
||||
|
||||
font-size: 9px;
|
||||
}
|
||||
@@ -555,7 +557,7 @@
|
||||
|
||||
border-style: dashed dashed none;
|
||||
|
||||
border-color: rgb(185, 200, 232) rgb(185, 200, 232) currentcolor;
|
||||
border-color: var(--action-line) var(--action-line) currentcolor;
|
||||
|
||||
border-image: none;
|
||||
|
||||
@@ -567,7 +569,9 @@
|
||||
}
|
||||
|
||||
.rotation-track-cancel {
|
||||
min-height: 30px;
|
||||
min-height: 32px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
@@ -575,21 +579,21 @@
|
||||
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid var(--r2-line);
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
border-radius: 7px;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--surface);
|
||||
|
||||
color: rgb(55, 65, 81);
|
||||
color: var(--text-primary);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-label);
|
||||
|
||||
font-weight: 500;
|
||||
|
||||
margin-left: auto;
|
||||
|
||||
padding: 4px 9px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
#rotationView .rotation-history {
|
||||
@@ -697,7 +701,7 @@
|
||||
|
||||
padding: 5px;
|
||||
|
||||
background: rgb(251, 252, 254);
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip {
|
||||
@@ -817,7 +821,7 @@
|
||||
|
||||
border-color: var(--r2-blue);
|
||||
|
||||
box-shadow: inset 3px 0 0 var(--r2-blue), 0 0 0 1px rgba(37, 99, 235, .12);
|
||||
box-shadow: inset 3px 0 0 var(--r2-blue), 0 0 0 1px var(--accent-soft);
|
||||
}
|
||||
|
||||
.rotation-cell-tooltip {
|
||||
@@ -864,9 +868,9 @@
|
||||
}
|
||||
|
||||
#rotationView .rotation-table thead th {
|
||||
height: 37px;
|
||||
height: 36px;
|
||||
|
||||
padding: 8px 12px;
|
||||
padding: 0 12px;
|
||||
|
||||
border-bottom: 1px solid var(--r2-line);
|
||||
|
||||
@@ -874,7 +878,7 @@
|
||||
|
||||
color: var(--r2-sub);
|
||||
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
@@ -887,8 +891,13 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#rotationView .rotation-table thead th:first-child,
|
||||
#rotationView .rotation-table tbody td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#rotationView .rotation-table thead th[data-auto-sort] {
|
||||
color: rgb(75, 85, 99);
|
||||
color: var(--text-2);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@@ -918,14 +927,16 @@
|
||||
}
|
||||
|
||||
#rotationView .rotation-table tbody td {
|
||||
height: 42px;
|
||||
height: 40px;
|
||||
|
||||
padding: 8px 12px;
|
||||
padding: 0 12px;
|
||||
|
||||
border-bottom: 1px solid var(--r2-line-soft);
|
||||
|
||||
color: var(--r2-ink);
|
||||
|
||||
font-size: var(--font-size-table);
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -934,7 +945,7 @@
|
||||
}
|
||||
|
||||
#rotationView .rotation-table tbody tr:hover td {
|
||||
background: rgb(248, 250, 255);
|
||||
background: var(--table-hover);
|
||||
}
|
||||
|
||||
#rotationView .rotation-table .stock-name {
|
||||
@@ -954,9 +965,9 @@
|
||||
}
|
||||
|
||||
#rotationView .trend-cool {
|
||||
background: rgb(232, 244, 253);
|
||||
background: var(--accent-soft);
|
||||
|
||||
color: rgb(37, 99, 235);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#rotationView .trend-new {
|
||||
@@ -1040,25 +1051,25 @@
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-mild {
|
||||
border-color: rgb(229, 234, 241);
|
||||
border-color: var(--border);
|
||||
|
||||
background: rgb(246, 248, 251);
|
||||
background: var(--surface-muted);
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-strong {
|
||||
border-color: rgba(37, 99, 235, 0.24);
|
||||
border-color: var(--action-line);
|
||||
|
||||
background: rgb(197, 215, 251);
|
||||
background: var(--accent-soft);
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-warm {
|
||||
border-color: rgba(37, 99, 235, 0.12);
|
||||
border-color: var(--action-line);
|
||||
|
||||
background: rgb(231, 239, 255);
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -1066,7 +1077,7 @@
|
||||
#rotationView .rotation-sector-chip:hover {
|
||||
z-index: 6;
|
||||
|
||||
border-color: rgba(37, 99, 235, 0.34);
|
||||
border-color: var(--accent);
|
||||
|
||||
filter: saturate(1.06);
|
||||
|
||||
@@ -1080,7 +1091,7 @@
|
||||
|
||||
border-collapse: collapse;
|
||||
|
||||
font-size: 12.5px;
|
||||
font-size: var(--font-size-table);
|
||||
|
||||
table-layout: auto;
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<div class="rotation-table-frame tbl-wrap">
|
||||
<table id="rotationTable" class="data-table tbl rotation-table">
|
||||
<thead><tr>
|
||||
<th class="number num">序号</th><th>代码</th><th>股票</th>
|
||||
<th class="row-number">序号</th><th>代码</th><th>股票</th>
|
||||
<th class="number num" data-auto-sort="true" title="涨跌幅：点击排序">涨跌幅（%）</th>
|
||||
<th class="number num">开盘价（元）</th><th class="number num">收盘价（元）</th>
|
||||
<th class="number num" data-auto-sort="true" title="成交额：点击排序">成交额（亿）</th><th>行情状态</th>
|
||||
|
||||
@@ -161,7 +161,7 @@ function renderRotationMembers() {
|
||||
setText("rotationDetailTitle", `${payload.meta?.sector_name || state.rotationSelectedSector}成分股`);
|
||||
setText("rotationDetailMeta", `${displayCompactDate(payload.meta?.trade_date)} · ${number(payload.meta?.quoted_count)} / ${number(payload.meta?.member_count)} 只`);
|
||||
body.innerHTML = rows.map((row, index) => `
|
||||
<tr data-code="${escapeHtml(row.code)}"><td class="number num muted">${index + 1}</td><td class="stock-code">${escapeHtml(row.code)}</td><td class="stock-name">${escapeHtml(row.name)}</td>
|
||||
<tr data-code="${escapeHtml(row.code)}"><td class="row-number muted">${index + 1}</td><td class="stock-code">${escapeHtml(row.code)}</td><td class="stock-name">${escapeHtml(row.name)}</td>
|
||||
<td class="number num ${row.quoted ? changeClass(row.change) : "muted"}" data-sort-value="${row.quoted ? number(row.change) : -999}">${row.quoted ? signed(row.change) : ""}</td>
|
||||
<td class="number num">${row.quoted ? formatNumber(row.open, 2) : ""}</td><td class="number num">${row.quoted ? formatNumber(row.close, 2) : ""}</td>
|
||||
<td class="number num" data-sort-value="${number(row.amount_billion)}">${row.quoted ? formatNumber(row.amount_billion, 2) : ""}</td><td>${row.quoted ? "正常交易" : "当日无行情"}</td></tr>
|
||||
|
||||
Reference in New Issue
Block a user