feat: UI/UX全面优化 — CSS变量体系/a11y无障碍/Admin角色化/骨架屏/打印样式
This commit is contained in:
selfrelease
@@ -7,14 +7,29 @@
|
||||
--bg-dark: #0a0a0a;
|
||||
--bg-glass: rgba(255, 255, 255, 0.05);
|
||||
--bg-glass-hover: rgba(255, 255, 255, 0.08);
|
||||
--bg-secondary: rgba(255, 255, 255, 0.06);
|
||||
--border-glass: rgba(255, 255, 255, 0.1);
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: rgba(255, 255, 255, 0.7);
|
||||
--text-muted: rgba(255, 255, 255, 0.4);
|
||||
--accent: #ffffff;
|
||||
--primary: #6c5ce7;
|
||||
--success: #00ff88;
|
||||
--danger: #ff4444;
|
||||
--warning: #ffaa00;
|
||||
--info: #3b82f6;
|
||||
/* 信号强度色系 */
|
||||
--sig-85: #ff4444;
|
||||
--sig-80: #ff6b35;
|
||||
--sig-75: #4caf50;
|
||||
--sig-70: #2196f3;
|
||||
--sig-65: #9c27b0;
|
||||
--sig-60: #ff9800;
|
||||
--sig-55: #607d8b;
|
||||
/* 涨跌色（红涨绿跌） */
|
||||
--up: #ff4444;
|
||||
--down: #00c853;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
@@ -706,4 +721,56 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== 骨架屏 ===== */
|
||||
.skeleton-card {
|
||||
background: var(--bg-glass);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.skeleton-line {
|
||||
height: 14px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s infinite;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.skeleton-line.short { width: 40%; }
|
||||
.skeleton-line.medium { width: 65%; }
|
||||
.skeleton-line.long { width: 90%; }
|
||||
.skeleton-line:last-child { margin-bottom: 0; }
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
.skeleton-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== 空状态优化 ===== */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.empty-state-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.empty-state-title {
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.empty-state-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,13 +27,13 @@
|
||||
font-weight: 600; cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.tech-btn.batch { background: var(--warning); color: #333; }
|
||||
.tech-btn.fullscan { background: #6c5ce7; color: #fff; }
|
||||
.tech-btn.fullscan { background: var(--primary); color: #fff; }
|
||||
.tech-btn.strategy { background: linear-gradient(135deg, #ff6b6b, #ffd93d); color: #1a1a2e; font-weight: 700; }
|
||||
.tech-btn.rescan {
|
||||
background: transparent; border: 1px solid rgba(255,255,255,0.15);
|
||||
color: var(--text-muted); font-size: 11px;
|
||||
}
|
||||
.tech-btn.rescan:hover { border-color: #ff6b6b; color: #ff6b6b; }
|
||||
.tech-btn.rescan:hover { border-color: var(--danger); color: var(--danger); }
|
||||
.tech-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.tech-legend {
|
||||
@@ -41,13 +41,13 @@
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 3px; }
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||||
.dot.s85 { background: #e74c3c; }
|
||||
.dot.s80 { background: #e67e22; }
|
||||
.dot.s75 { background: #f39c12; }
|
||||
.dot.s70 { background: #27ae60; }
|
||||
.dot.s65 { background: #2980b9; }
|
||||
.dot.s60 { background: #8e44ad; }
|
||||
.dot.s55 { background: #95a5a6; }
|
||||
.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); }
|
||||
|
||||
.tech-result-card {
|
||||
background: var(--bg-glass); border-radius: 16px;
|
||||
@@ -137,13 +137,13 @@
|
||||
font-size: 11px; padding: 2px 8px; border-radius: 8px;
|
||||
font-weight: 600; color: white;
|
||||
}
|
||||
.batch-signal-tag.strength-85 { background: #e74c3c; }
|
||||
.batch-signal-tag.strength-80 { background: #e67e22; }
|
||||
.batch-signal-tag.strength-75 { background: #f39c12; }
|
||||
.batch-signal-tag.strength-70 { background: #27ae60; }
|
||||
.batch-signal-tag.strength-65 { background: #2980b9; }
|
||||
.batch-signal-tag.strength-60 { background: #8e44ad; }
|
||||
.batch-signal-tag.strength-55 { background: #95a5a6; }
|
||||
.batch-signal-tag.strength-85 { background: var(--sig-85); }
|
||||
.batch-signal-tag.strength-80 { background: var(--sig-80); }
|
||||
.batch-signal-tag.strength-75 { background: var(--sig-75); }
|
||||
.batch-signal-tag.strength-70 { background: var(--sig-70); }
|
||||
.batch-signal-tag.strength-65 { background: var(--sig-65); }
|
||||
.batch-signal-tag.strength-60 { background: var(--sig-60); }
|
||||
.batch-signal-tag.strength-55 { background: var(--sig-55); }
|
||||
|
||||
|
||||
/* ========== 模拟交易页面样式 ========== */
|
||||
@@ -700,16 +700,16 @@
|
||||
color: #fff;
|
||||
background: #555;
|
||||
}
|
||||
.rank-1 .rank-badge { background: linear-gradient(135deg, #ff6b6b, #ffd93d); }
|
||||
.rank-2 .rank-badge { background: linear-gradient(135deg, #00ce9e, #00b4d8); }
|
||||
.rank-1 .rank-badge { background: linear-gradient(135deg, var(--danger), var(--warning)); }
|
||||
.rank-2 .rank-badge { background: linear-gradient(135deg, var(--success), #00b4d8); }
|
||||
.rank-3 .rank-badge { background: linear-gradient(135deg, #748ffc, #9775fa); }
|
||||
.rank-name { font-weight: 600; color: var(--text-primary); }
|
||||
.rank-1 .rank-name { color: #ffd93d; }
|
||||
.rank-2 .rank-name { color: #00ce9e; }
|
||||
.rank-1 .rank-name { color: var(--warning); }
|
||||
.rank-2 .rank-name { color: var(--success); }
|
||||
.rank-3 .rank-name { color: #748ffc; }
|
||||
.rank-rate {
|
||||
font-weight: 700;
|
||||
color: #00ce9e;
|
||||
color: var(--success);
|
||||
text-align: right;
|
||||
}
|
||||
.rank-desc { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
@@ -1588,8 +1588,8 @@
|
||||
.deep-stock-code { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
|
||||
.deep-price { font-size: 22px; font-weight: 700; color: #fff; text-align: center; }
|
||||
.deep-change { font-size: 14px; text-align: center; margin-top: 2px; }
|
||||
.deep-change.up { color: #f44336; }
|
||||
.deep-change.down { color: #4caf50; }
|
||||
.deep-change.up { color: var(--up); }
|
||||
.deep-change.down { color: var(--down); }
|
||||
|
||||
.deep-score-circle {
|
||||
width: 50px; height: 50px; border-radius: 50%;
|
||||
@@ -1598,11 +1598,49 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
.score-num { font-size: 20px; color: #fff; }
|
||||
.deep-score-circle.score-high { background: linear-gradient(135deg, #f44336, #ff5722); }
|
||||
.deep-score-circle.score-mid { background: linear-gradient(135deg, #ff9800, #ffc107); }
|
||||
.deep-score-circle.score-low { background: linear-gradient(135deg, #607d8b, #78909c); }
|
||||
.deep-score-circle.score-high { background: linear-gradient(135deg, var(--danger), #ff5722); }
|
||||
.deep-score-circle.score-mid { background: linear-gradient(135deg, var(--warning), #ffc107); }
|
||||
.deep-score-circle.score-low { background: linear-gradient(135deg, var(--sig-55), #78909c); }
|
||||
.deep-verdict { text-align: center; font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }
|
||||
|
||||
/* 三项得分明细 */
|
||||
.deep-score-breakdown {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.score-breakdown-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.score-breakdown-item .breakdown-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
.score-breakdown-item .breakdown-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.score-breakdown-item .breakdown-value.pos { color: var(--danger); }
|
||||
.score-breakdown-item .breakdown-value.neg { color: var(--success); }
|
||||
.score-breakdown-item.highlight {
|
||||
background: rgba(108,92,231,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.score-breakdown-item.highlight .breakdown-value {
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.deep-section {
|
||||
background: var(--card-bg, #1e1e2e);
|
||||
border-radius: 12px;
|
||||
|
||||
@@ -235,3 +235,163 @@
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板过渡断点 (500-768px) */
|
||||
@media (min-width: 500px) and (max-width: 767px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.nav-tabs-compact .nav-tab {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sub-tab {
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card,
|
||||
.input-section {
|
||||
padding: 18px 20px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.alerts-summary.top-summary {
|
||||
padding: 14px 20px;
|
||||
gap: 10px 14px;
|
||||
}
|
||||
|
||||
.alerts-summary.top-summary .summary-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.signal-details {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.scan-summary-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.deep-score-breakdown {
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.score-breakdown-item .breakdown-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超大屏幕 (1440px+) 限制最大宽度避免过宽 */
|
||||
@media (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 打印样式 ===== */
|
||||
@media print {
|
||||
/* 隐藏导航、操作按钮、非打印元素 */
|
||||
.nav-tabs,
|
||||
.sub-tabs,
|
||||
.title-bar .user-info,
|
||||
.toast-container,
|
||||
.confirm-overlay,
|
||||
.modal-overlay,
|
||||
.deep-input-card,
|
||||
.deep-analyze-btn,
|
||||
.alert-action-btn,
|
||||
.scan-control,
|
||||
.scan-btn,
|
||||
.analyze-btn,
|
||||
.trade-actions-bar,
|
||||
.add-trade-btn,
|
||||
.refresh-price-btn,
|
||||
.buy-card-arrow,
|
||||
.skeleton-card,
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 重置背景为白色 */
|
||||
body {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 卡片去阴影、改为黑白边框 */
|
||||
.deep-report,
|
||||
.deep-header-card,
|
||||
.deep-section,
|
||||
.deep-ai-summary,
|
||||
.buy-analysis-card,
|
||||
.buy-card-detail,
|
||||
.card,
|
||||
.glass-card {
|
||||
background: #fff !important;
|
||||
border: 1px solid #ccc !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 4px !important;
|
||||
margin-bottom: 8px !important;
|
||||
padding: 10px 12px !important;
|
||||
}
|
||||
|
||||
/* 文字改为黑色 */
|
||||
.deep-stock-name,
|
||||
.deep-stock-code,
|
||||
.deep-price,
|
||||
.score-num,
|
||||
.deep-section-title,
|
||||
.deep-ai-title,
|
||||
.deep-ai-text,
|
||||
.ai-action-tip,
|
||||
.buy-card-name,
|
||||
.buy-card-code,
|
||||
.breakdown-label,
|
||||
.breakdown-value {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* 涨跌色保持可区分（改为深色） */
|
||||
.deep-change.up, .batch-change.up, .alert-change.up,
|
||||
.positive, .trade-profit.profit, .holding-profit.profit {
|
||||
color: #c0392b !important;
|
||||
}
|
||||
.deep-change.down, .batch-change.down, .alert-change.down,
|
||||
.negative, .trade-profit.loss, .holding-profit.loss {
|
||||
color: #27ae60 !important;
|
||||
}
|
||||
|
||||
/* 评分圆环保持色差 */
|
||||
.deep-score-circle.score-high { background: #c0392b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.deep-score-circle.score-mid { background: #e67e22 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.deep-score-circle.score-low { background: #7f8c8d !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.score-num { color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
|
||||
/* SVG 保色 */
|
||||
svg {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/* 避免分页截断 */
|
||||
.deep-header-card,
|
||||
.deep-section,
|
||||
.buy-analysis-card {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user