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

2026-07-18 07:57:23 +08:00
parent 2b5a32ca1e
commit 4b42eb80fd
15 changed files with 1519 additions and 442 deletions
@@ -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;
+    }
+}