feat: UI/UX全面优化 — CSS变量体系/a11y无障碍/Admin角色化/骨架屏/打印样式

This commit is contained in:
selfrelease
2026-07-18 07:57:23 +08:00
parent 2b5a32ca1e
commit 4b42eb80fd
15 changed files with 1519 additions and 442 deletions
+50 -27
View File
@@ -81,8 +81,8 @@
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.batch-change.up { color: #ff4444; }
.batch-change.down { color: #00c853; }
.batch-change.up { color: var(--up); }
.batch-change.down { color: var(--down); }
/* 信号计数徽章 */
.batch-count-badge {
@@ -134,13 +134,13 @@
font-size: 10px;
opacity: 0.9;
}
.pill-s85 { color: #ff6666; background: rgba(255,68,68,0.12); }
.pill-s80 { color: #ff8a50; background: rgba(255,107,53,0.12); }
.pill-s75 { color: #66bb6a; background: rgba(76,175,80,0.12); }
.pill-s70 { color: #64b5f6; background: rgba(33,150,243,0.12); }
.pill-s65 { color: #ce93d8; background: rgba(156,39,176,0.10); }
.pill-s60 { color: #ffb74d; background: rgba(255,152,0,0.12); }
.pill-s55 { color: #90a4ae; background: rgba(96,125,139,0.12); }
.pill-s85 { color: var(--sig-85); background: rgba(255,68,68,0.12); }
.pill-s80 { color: var(--sig-80); background: rgba(255,107,53,0.12); }
.pill-s75 { color: var(--sig-75); background: rgba(76,175,80,0.12); }
.pill-s70 { color: var(--sig-70); background: rgba(33,150,243,0.12); }
.pill-s65 { color: var(--sig-65); background: rgba(156,39,176,0.10); }
.pill-s60 { color: var(--sig-60); background: rgba(255,152,0,0.12); }
.pill-s55 { color: var(--sig-55); background: rgba(96,125,139,0.12); }
/* 描述区域 */
.batch-desc-area {
@@ -160,13 +160,13 @@
flex-shrink: 0;
margin-top: 6px;
}
.dot-s85 { background: #ff4444; }
.dot-s80 { background: #ff6b35; }
.dot-s75 { background: #4CAF50; }
.dot-s70 { background: #2196F3; }
.dot-s65 { background: #9C27B0; }
.dot-s60 { background: #FF9800; }
.dot-s55 { background: #607D8B; }
.dot-s85 { background: var(--sig-85); }
.dot-s80 { background: var(--sig-80); }
.dot-s75 { background: var(--sig-75); }
.dot-s70 { background: var(--sig-70); }
.dot-s65 { background: var(--sig-65); }
.dot-s60 { background: var(--sig-60); }
.dot-s55 { background: var(--sig-55); }
.desc-text {
font-size: 11.5px;
color: var(--text-secondary);
@@ -198,11 +198,11 @@
.batch-rec-tag.rec-buy,
.batch-rec-tag.rec-add {
background: rgba(0,206,158,0.18);
color: #00ce9e;
color: var(--success);
}
.batch-rec-tag.rec-sell {
background: rgba(255,68,68,0.18);
color: #ff4444;
color: var(--danger);
}
.batch-rec-tag.rec-watch,
.batch-rec-tag.rec-hold {
@@ -229,8 +229,8 @@
.scan-holding-note,
.strategy-holding-note {
font-size: 11.5px;
color: #ff9800;
background: rgba(255,152,0,0.08);
color: var(--warning);
background: rgba(255,170,0,0.08);
padding: 4px 12px;
margin: 4px 16px 0;
border-radius: 6px;
@@ -272,13 +272,13 @@
border-radius: 50%;
flex-shrink: 0;
}
.ss-dot-sm.s85 { background: #ff4444; }
.ss-dot-sm.s80 { background: #ff6b35; }
.ss-dot-sm.s75 { background: #4CAF50; }
.ss-dot-sm.s70 { background: #2196F3; }
.ss-dot-sm.s65 { background: #9C27B0; }
.ss-dot-sm.s60 { background: #FF9800; }
.ss-dot-sm.s55 { background: #607D8B; }
.ss-dot-sm.s85 { background: var(--sig-85); }
.ss-dot-sm.s80 { background: var(--sig-80); }
.ss-dot-sm.s75 { background: var(--sig-75); }
.ss-dot-sm.s70 { background: var(--sig-70); }
.ss-dot-sm.s65 { background: var(--sig-65); }
.ss-dot-sm.s60 { background: var(--sig-60); }
.ss-dot-sm.s55 { background: var(--sig-55); }
/* 全量扫描触发区域 */
.full-scan-trigger-section {
@@ -1016,3 +1016,26 @@
min-width: 28px;
text-align: right;
}
/* 扫描卡片综合得分胶囊 */
.scan-score-pill {
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
font-variant-numeric: tabular-nums;
cursor: help;
}
.scan-score-pill.score-high {
color: var(--danger);
background: rgba(255,68,68,0.12);
}
.scan-score-pill.score-mid {
color: var(--warning);
background: rgba(255,170,0,0.12);
}
.scan-score-pill.score-low {
color: var(--text-muted);
background: rgba(255,255,255,0.06);
}