selfrelease
bb5a72767f
- 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版本号更新用于缓存刷新
398 lines
8.2 KiB
CSS
398 lines
8.2 KiB
CSS
/* ═══════════════════════════════════════
|
|
responsive.css - PC / 桌面端适配
|
|
手机端保持现有样式不变
|
|
断点: 768px (PC 及以上应用以下样式)
|
|
═══════════════════════════════════════ */
|
|
|
|
@media (min-width: 768px) {
|
|
/* ===== 主容器 ===== */
|
|
.container {
|
|
max-width: 880px;
|
|
padding: 28px 32px;
|
|
padding-top: max(28px, env(safe-area-inset-top));
|
|
}
|
|
|
|
/* ===== 标题栏 ===== */
|
|
.title-bar {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.title-bar h1 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.main-title-date {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.current-model {
|
|
margin-top: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ===== 导航标签 ===== */
|
|
.nav-tabs {
|
|
margin-bottom: 24px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.nav-tabs-compact .nav-tab {
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sub-tabs {
|
|
margin-bottom: 20px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.sub-tab {
|
|
padding: 12px 18px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ===== 提醒汇总区 ===== */
|
|
.alerts-summary.top-summary {
|
|
padding: 16px 24px;
|
|
gap: 12px 16px;
|
|
}
|
|
|
|
.alerts-summary.top-summary .summary-label {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.alerts-summary.top-summary .summary-value {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* ===== 卡片与区块 ===== */
|
|
.card,
|
|
.input-section,
|
|
.scan-results {
|
|
padding: 24px;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.recommendation-card {
|
|
padding: 28px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.signal-details {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.signal-detail-item .value {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* ===== 图表 ===== */
|
|
.chart-container {
|
|
height: 240px;
|
|
}
|
|
|
|
/* ===== 数据表格 ===== */
|
|
.data-table {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
padding: 14px 12px;
|
|
}
|
|
|
|
/* ===== 汇总网格 ===== */
|
|
.summary-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.summary-item {
|
|
padding: 20px;
|
|
}
|
|
|
|
.summary-item .value {
|
|
font-size: 22px;
|
|
}
|
|
|
|
/* ===== 弹窗 / 模态框 ===== */
|
|
.login-modal {
|
|
max-width: 420px;
|
|
}
|
|
|
|
.confirm-dialog {
|
|
min-width: 360px;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.smart-result-modal {
|
|
max-width: 540px;
|
|
}
|
|
|
|
/* ===== 扫描控制 ===== */
|
|
.scan-control {
|
|
gap: 14px;
|
|
}
|
|
|
|
.scan-source-select {
|
|
flex: 0 0 180px;
|
|
}
|
|
|
|
.scan-btn {
|
|
padding: 16px 32px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ===== 扫描结果项 ===== */
|
|
.scan-item {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.scan-code {
|
|
font-size: 14px;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.scan-name {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.scan-price,
|
|
.scan-rate {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ===== 按钮 ===== */
|
|
.analyze-btn {
|
|
height: 48px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ===== 技术信号 ===== */
|
|
.tech-result-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.tech-result-header h4 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* ===== 模拟交易 ===== */
|
|
.sim-stats-card {
|
|
padding: 20px;
|
|
}
|
|
|
|
.sim-stats-header h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.sim-stats-grid {
|
|
gap: 12px;
|
|
}
|
|
|
|
.sim-stat-value {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.sim-stat-label {
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ===== 信号排名 ===== */
|
|
.signal-rank-item {
|
|
grid-template-columns: 28px 80px 48px 1fr;
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ===== 输入组 ===== */
|
|
.input-group label {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.input-group input {
|
|
padding: 16px 18px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ===== Toast ===== */
|
|
.toast-container {
|
|
max-width: 420px;
|
|
}
|
|
}
|
|
|
|
/* 更大屏幕 (1200px+) 进一步放宽 */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1000px;
|
|
padding: 32px 40px;
|
|
}
|
|
|
|
.signal-details {
|
|
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: var(--print-up) !important;
|
|
}
|
|
.deep-change.down, .batch-change.down, .alert-change.down,
|
|
.negative, .trade-profit.loss, .holding-profit.loss {
|
|
color: var(--print-down) !important;
|
|
}
|
|
|
|
/* 评分圆环保持色差 */
|
|
.deep-score-circle.score-high { background: var(--print-up) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.deep-score-circle.score-mid { background: var(--print-mid) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.deep-score-circle.score-low { background: var(--print-low) !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;
|
|
}
|
|
}
|