freedak/stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX优化: CSS变量化 + 错误反馈增强 + 按钮type属性

Browse Source 
- CSS: 全部硬编码hex颜色替换为CSS变量(base/scan/pages/responsive/admin)
- CSS: 硬编码字体提取为--font-sans/--font-mono变量
- CSS: 新增打印色/渐变色/辅助色等20+变量定义
- CSS: 修复scan.css lint警告(line-clamp标准属性+空规则集)
- app.js: 16处用户可感知catch块补充showToast错误反馈
- app.js: 全部console.log降级为console.debug
- index.html: 76个button补充type属性
- index.html: 内联hex颜色/SVG stroke/Vue :style替换为CSS变量
- admin.html: 残留hex替换为CSS变量
- 全部CSS版本号更新用于缓存刷新
This commit is contained in:
selfrelease
2026-07-18 09:53:34 +08:00
parent 03e095ded0
commit bb5a72767f
7 changed files with 267 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stock-html/static/css/pages.css
+36 -36
View File
@@ -28,7 +28,7 @@
}
.tech-btn.batch { background: var(--warning); color: #333; }
.tech-btn.fullscan { background: var(--primary); color: #fff; }
.tech-btn.strategy { background: linear-gradient(135deg, #ff6b6b, #ffd93d); color: #1a1a2e; font-weight: 700; }
.tech-btn.strategy { background: var(--grad-strategy); color: var(--grad-strategy-text); font-weight: 700; }
.tech-btn.rescan {
background: transparent; border: 1px solid rgba(255,255,255,0.15);
color: var(--text-muted); font-size: 11px;
@@ -189,7 +189,7 @@
}
.sim-btn.auto {
background: linear-gradient(135deg, #00ff88, #00ccff);
background: var(--grad-auto);
color: #000;
}
@@ -701,12 +701,12 @@
background: #555;
}
.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-2 .rank-badge { background: var(--grad-rank2); }
.rank-3 .rank-badge { background: var(--grad-rank3); }
.rank-name { font-weight: 600; color: var(--text-primary); }
.rank-1 .rank-name { color: var(--warning); }
.rank-2 .rank-name { color: var(--success); }
.rank-3 .rank-name { color: #748ffc; }
.rank-3 .rank-name { color: var(--step-watch); }
.rank-rate {
font-weight: 700;
color: var(--success);
@@ -842,7 +842,7 @@
font-size: 12px;
color: var(--text-secondary);
}
.step-watch .step-action { color: #748ffc; }
.step-watch .step-action { color: var(--step-watch); }
.step-buy .step-action { color: var(--danger); }
.step-add .step-action { color: var(--success); }
.step-hold .step-action { color: var(--warning); }
@@ -1383,7 +1383,7 @@
}
.algo-badge {
background: linear-gradient(135deg, #667eea, #764ba2);
background: var(--grad-algo);
color: #fff;
padding: 3px 10px;
border-radius: 6px;
@@ -1564,7 +1564,7 @@
padding: 10px 16px;
border: none;
border-radius: 8px;
background: #2196F3;
background: var(--info-bg);
color: #fff;
font-size: 14px;
font-weight: 600;
@@ -1684,11 +1684,11 @@
border-radius: 6px;
flex-wrap: wrap;
}
.deep-sig-name { font-weight: 600; color: #ff9800; font-size: 13px; }
.deep-sig-name { font-weight: 600; color: var(--sig-name); font-size: 13px; }
.deep-sig-strength {
font-size: 11px;
background: rgba(255,152,0,0.2);
color: #ffb74d;
color: var(--sig-strength);
padding: 1px 6px;
border-radius: 4px;
}
@@ -1707,26 +1707,26 @@
.pos-bar-wrap { display: flex; align-items: center; gap: 4px; }
.pos-bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.pos-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.pos-bar-fill.high { background: #f44336; }
.pos-bar-fill.mid { background: #ff9800; }
.pos-bar-fill.low { background: #4caf50; }
.pos-bar-fill.high { background: var(--up); }
.pos-bar-fill.mid { background: var(--warning); }
.pos-bar-fill.low { background: var(--down); }
.pos-pct { font-size: 11px; color: rgba(255,255,255,0.5); min-width: 28px; }
.pos-space { display: flex; gap: 6px; font-size: 11px; }
.space-up { color: #f44336; }
.space-down { color: #4caf50; }
.space-up { color: var(--up); }
.space-down { color: var(--down); }
.deep-sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sr-col-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.support-title { color: #4caf50; }
.resist-title { color: #f44336; }
.support-title { color: var(--down); }
.resist-title { color: var(--up); }
.sr-item {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 13px;
}
.sr-item.support .sr-level { color: #4caf50; font-weight: 600; }
.sr-item.resist .sr-level { color: #f44336; font-weight: 600; }
.sr-item.support .sr-level { color: var(--down); font-weight: 600; }
.sr-item.resist .sr-level { color: var(--up); font-weight: 600; }
.sr-name { color: rgba(255,255,255,0.5); }
.sr-empty { color: rgba(255,255,255,0.2); font-size: 12px; text-align: center; padding: 8px; }
@@ -1737,8 +1737,8 @@
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
}
.vol-tag.vol-up { background: rgba(244,67,54,0.15); color: #f44336; }
.vol-tag.vol-dn { background: rgba(76,175,80,0.15); color: #4caf50; }
.vol-tag.vol-up { background: rgba(244,67,54,0.15); color: var(--up); }
.vol-tag.vol-dn { background: rgba(76,175,80,0.15); color: var(--down); }
.vol-detail { font-size: 12px; color: rgba(255,255,255,0.4); }
.deep-patterns { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -1749,8 +1749,8 @@
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6);
}
.pattern-tag.bullish { background: rgba(244,67,54,0.12); color: #ef9a9a; }
.pattern-tag.bearish { background: rgba(76,175,80,0.12); color: #a5d6a7; }
.pattern-tag.bullish { background: rgba(244,67,54,0.12); color: var(--up-soft); }
.pattern-tag.bearish { background: rgba(76,175,80,0.12); color: var(--down-soft); }
.pattern-tag small { opacity: 0.7; }
.deep-ma-info {
@@ -1764,9 +1764,9 @@
font-size: 12px; font-weight: 600;
padding: 2px 8px; border-radius: 4px;
}
.ma-trend-tag.bullish { background: rgba(244,67,54,0.15); color: #f44336; }
.ma-trend-tag.bearish { background: rgba(76,175,80,0.15); color: #4caf50; }
.ma-trend-tag.mixed { background: rgba(255,152,0,0.15); color: #ff9800; }
.ma-trend-tag.bullish { background: rgba(244,67,54,0.15); color: var(--up); }
.ma-trend-tag.bearish { background: rgba(76,175,80,0.15); color: var(--down); }
.ma-trend-tag.mixed { background: rgba(255,152,0,0.15); color: var(--warning); }
.ma-val { font-size: 12px; color: rgba(255,255,255,0.4); }
.deep-fundamental {
@@ -1782,15 +1782,15 @@
padding: 3px 8px;
border-radius: 4px;
}
.score-reason-tag.positive { background: rgba(244,67,54,0.12); color: #ef9a9a; }
.score-reason-tag.negative { background: rgba(76,175,80,0.12); color: #a5d6a7; }
.score-reason-tag.positive { background: rgba(244,67,54,0.12); color: var(--up-soft); }
.score-reason-tag.negative { background: rgba(76,175,80,0.12); color: var(--down-soft); }
/* AI通俗解说 */
.deep-ai-summary {
background: linear-gradient(135deg, rgba(33,150,243,0.08), rgba(156,39,176,0.06));
border-radius: 12px;
padding: 14px 16px;
border-left: 3px solid #2196F3;
border-left: 3px solid var(--info-bg);
}
.deep-ai-title {
display: flex;
@@ -1798,7 +1798,7 @@
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #64b5f6;
color: var(--info-light);
margin-bottom: 10px;
}
.deep-ai-text {
@@ -1820,7 +1820,7 @@
}
.ai-action-label {
font-weight: 600;
color: #ff9800;
color: var(--warning);
margin-right: 4px;
}
@@ -1876,17 +1876,17 @@
.buy-card-center { text-align: center; min-width: 70px; }
.buy-card-price { font-size: 14px; font-weight: 600; color: #fff; }
.buy-card-change { font-size: 12px; display: block; }
.buy-card-change.up { color: #f44336; }
.buy-card-change.down { color: #4caf50; }
.buy-card-change.up { color: var(--up); }
.buy-card-change.down { color: var(--down); }
.buy-card-right { text-align: center; min-width: 50px; }
.buy-card-score {
font-size: 16px;
font-weight: 700;
display: block;
}
.buy-card-score.score-high { color: #f44336; }
.buy-card-score.score-mid { color: #ff9800; }
.buy-card-score.score-low { color: #78909c; }
.buy-card-score.score-high { color: var(--up); }
.buy-card-score.score-mid { color: var(--warning); }
.buy-card-score.score-low { color: var(--score-low); }
.buy-card-verdict { font-size: 11px; color: rgba(255,255,255,0.5); }
.buy-card-arrow {
font-size: 14px;