/* * mobile-fix.css * 矩阵管家 · 手机端通用修复 * 所有页面 末尾加一行： * * ───────────────────────────────────────────────── * 原理： * 桌面端：左侧固定 sidebar + 右侧 main（不变） * 手机端：sidebar 变为顶部固定 header， * 汉堡按钮打开全屏抽屉导航， * main 内容区全屏显示 * ───────────────────────────────────────────────── */ /* ══════════════════════════════════════════════ 只在手机端（≤768px）生效 ══════════════════════════════════════════════ */ @media (max-width: 1100px) { /* ── 0. 基础：允许页面滚动 ── */ html, body { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; } /* ── 1. 整体布局改为纵向 ── */ .layout { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100vh !important; } /* ── 2. Sidebar → 固定顶部 Header ── */ .sidebar { width: 100% !important; height: var(--header-h, 52px) !important; flex-direction: row !important; align-items: center !important; padding: 0 14px !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; position: sticky !important; top: 0 !important; z-index: 200 !important; flex-shrink: 0 !important; overflow: visible !important; /* 隐掉竖向光边 */ } .sidebar::after { display: none !important; } /* Logo 区域保留，撑满剩余空间 */ .logo { height: 100% !important; border-bottom: none !important; padding: 0 !important; flex: 1 !important; min-width: 0 !important; } .logo-text { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 隐藏侧边栏里不需要的东西 */ .nav-section, .sidebar-footer, .nav-gap, .nav-label { display: none !important; } /* ── 3. 汉堡按钮：右上角显示 ── */ .mobile-hamburger { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r, 6px); border: 1px solid var(--border2, #323334); background: var(--surface2, #161718); cursor: pointer; flex-shrink: 0; margin-left: 8px; z-index: 201; } .mobile-hamburger span { display: block; width: 16px; height: 1.5px; background: var(--text, #f7f8f8); border-radius: 2px; transition: all 0.2s; position: relative; } .mobile-hamburger span::before, .mobile-hamburger span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text, #f7f8f8); border-radius: 2px; transition: all 0.2s; } .mobile-hamburger span::before { top: -5px; } .mobile-hamburger span::after { top: 5px; } /* X 状态 */ body.nav-open .mobile-hamburger span { background: transparent; } body.nav-open .mobile-hamburger span::before { top: 0; transform: rotate(45deg); } body.nav-open .mobile-hamburger span::after { top: 0; transform: rotate(-45deg); } /* ── 4. 抽屉遮罩 ── */ .mobile-nav-overlay { display: none !important; position: fixed; inset: 0; z-index: 198; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } body.nav-open .mobile-nav-overlay { display: block !important; } /* ── 5. 抽屉本体：从左侧滑入 ── */ .mobile-nav-drawer { position: fixed; top: 0; left: -280px; width: 260px; height: 100%; z-index: 199; background: var(--surface1, #0f1011); border-right: 1px solid var(--border2, #323334); display: flex !important; flex-direction: column; transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); } body.nav-open .mobile-nav-drawer { left: 0; } /* 抽屉顶部 logo 行 */ .drawer-logo { display: flex !important; align-items: center; gap: 9px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--border, #23252a); flex-shrink: 0; } .drawer-logo .logo-icon { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--accent, #02b8cc), var(--accent2, #5e6ad2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .drawer-logo .logo-icon svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; } .drawer-logo .logo-text { font-size: 13px; font-weight: 600; color: var(--text, #f7f8f8); } .drawer-logo .logo-badge { margin-left: auto; font-size: 9px; font-weight: 600; color: var(--accent, #02b8cc); background: rgba(2, 184, 204, 0.1); border: 1px solid rgba(2, 184, 204, 0.2); border-radius: 3px; padding: 1px 5px; } /* 抽屉里的导航内容：复用原有 nav-section 样式 */ .drawer-nav { flex: 1; padding: 16px 8px; overflow-y: auto; } .drawer-nav .nav-label { display: block !important; font-size: 10px; font-weight: 600; color: var(--text4, #62666d); letter-spacing: .8px; text-transform: uppercase; padding: 0 8px; margin-bottom: 4px; } .drawer-nav .nav-item { display: flex !important; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r, 6px); cursor: pointer; color: var(--text3, #8a8f98); font-size: 13px; font-weight: 500; text-decoration: none; margin-bottom: 2px; position: relative; transition: all 0.15s; white-space: nowrap; } .drawer-nav .nav-item:hover, .drawer-nav .nav-item:active { background: var(--surface2, #161718); color: var(--text2, #d0d6e0); } .drawer-nav .nav-item.active { background: rgba(2, 184, 204, 0.1); color: var(--accent, #02b8cc); } .drawer-nav .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 14px; background: var(--accent, #02b8cc); border-radius: 2px; } .drawer-nav .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; } .drawer-nav .nav-item.active svg { opacity: 1; } .drawer-nav .nav-badge { display: inline-flex !important; margin-left: auto; font-size: 10px; font-weight: 600; background: rgba(94, 106, 210, 0.15); color: var(--accent2, #5e6ad2); border-radius: 10px; padding: 1px 6px; } .drawer-nav .nav-badge.red { background: rgba(255, 68, 68, 0.15); color: #ff6b6b; } .drawer-nav .nav-gap { display: block !important; height: 14px; } /* 抽屉底部用户信息 */ .drawer-footer { border-top: 1px solid var(--border, #23252a); padding: 12px; flex-shrink: 0; } .drawer-footer .account-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r, 6px); } .drawer-footer .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent2, #5e6ad2), var(--accent, #02b8cc)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; } .drawer-footer .account-name { font-size: 12px; font-weight: 500; color: var(--text, #f7f8f8); } .drawer-footer .account-role { font-size: 10px; color: var(--text4, #62666d); } /* ── 6. Main 区域全屏 ── */ .main { flex: 1 !important; min-width: 0 !important; width: 100% !important; overflow: visible !important; display: flex !important; flex-direction: column !important; } /* ── 7. Header（页面内顶栏）手机适配 ── */ .header { height: auto !important; min-height: 48px !important; padding: 8px 12px !important; flex-wrap: wrap !important; gap: 8px !important; } .header-title { font-size: 14px !important; flex: 1 !important; min-width: 0 !important; } .header-sep, .header-sub { display: none !important; } .header-right { width: 100% !important; margin-left: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .header-right .hdr-btn { flex: 1 !important; min-width: 0 !important; justify-content: center !important; padding: 7px 8px !important; font-size: 11.5px !important; } .header-right .hdr-btn svg { display: none !important; } /* 状态点保留 */ .status-dot { flex-shrink: 0 !important; } /* ── 8. 内容区 ── */ .content { padding: 12px !important; overflow: visible !important; flex: 1 !important; } /* ── 9. 统计卡片网格 ── */ .overview-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .stat-card { padding: 12px !important; } .stat-value { font-size: 20px !important; } /* ── 10. 两列/三列 → 单列 ── */ .two-col, .three-col { grid-template-columns: 1fr !important; gap: 10px !important; } /* ── 11. AI Banner ── */ .ai-banner { flex-wrap: wrap !important; gap: 10px !important; } .ai-stats { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } /* ── 12. 数据表格 → 卡片式 ── */ .data-table, .data-table tbody, .data-table tr, .data-table td { display: block !important; width: 100% !important; } .data-table thead { display: none !important; } .data-table tr { padding: 10px 12px !important; border-bottom: 1px solid var(--border, #23252a) !important; background: var(--surface1, #0f1011) !important; border-radius: var(--r-lg, 12px) !important; margin-bottom: 6px !important; } .data-table td { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 5px 0 !important; border-bottom: 1px solid rgba(35, 37, 42, 0.5) !important; white-space: normal !important; font-size: 12px !important; } .data-table td:last-child { border-bottom: none !important; } .data-table td::before { flex: 0 0 68px !important; color: var(--text4, #62666d) !important; font-size: 10px !important; font-weight: 600 !important; } /* 标签定义由各页面覆盖 */ /* ── 13. 评论三栏 → 单栏堆叠 ── */ .workspace { display: block !important; overflow: visible !important; } .filter-pane { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border, #23252a) !important; max-height: none !important; overflow: visible !important; } /* 手机上默认收起筛选区，只显示前两组 */ .filter-section:nth-of-type(n+3) { display: none !important; } .list-pane { width: 100% !important; border-right: none !important; max-height: 400px !important; border-bottom: 1px solid var(--border, #23252a) !important; } .detail-pane { width: 100% !important; min-height: 400px !important; } .right-sidebar { display: none !important; } /* ── 14. 规则页：分组列表+规则面板 → 单列 ── */ .rule-groups { grid-template-columns: 1fr !important; gap: 10px !important; } .group-list { max-height: 200px !important; overflow-y: auto !important; } /* ── 15. 痛点雷达：左右分栏 → 单列 ── */ .pain-list-pane { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border, #23252a) !important; max-height: 360px !important; } .detail-right { width: 100% !important; } .two-col { grid-template-columns: 1fr !important; } /* ── 16. 弹窗 → 底部抽屉 ── */ .modal-overlay { align-items: flex-end !important; padding: 0 !important; } .modal-box { width: 100% !important; max-height: 88vh !important; overflow-y: auto !important; border-radius: 18px 18px 0 0 !important; border-bottom: none !important; animation: sheetUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ── 17. 历史记录侧栏 → 全屏 ── */ .history-panel { top: 0 !important; width: 100vw !important; border-left: none !important; } } /* ══════════════════════════════════════════════ 小屏补丁（≤420px） ══════════════════════════════════════════════ */ @media (max-width: 420px) { .overview-grid { grid-template-columns: 1fr !important; } .ai-stats { grid-template-columns: 1fr 1fr !important; } .content { padding: 10px !important; } .hdr-btn { font-size: 11px !important; } } /* ══════════════════════════════════════════════ 桌面端：汉堡按钮和抽屉不显示 ══════════════════════════════════════════════ */ @media (min-width: 1101px) { .mobile-hamburger { display: none !important; } .mobile-nav-overlay { display: none !important; } .mobile-nav-drawer { display: none !important; } } /* dashboard 操作日志：手机端改成单列，避免文字被挤成竖排 */ @media (max-width: 1100px) { .activity-grid, .log-grid, .activity-list, .timeline-grid { grid-template-columns: 1fr !important; } .activity-item, .log-item, .timeline-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; min-width: 0 !important; } .activity-item *, .log-item *, .timeline-item * { writing-mode: horizontal-tb !important; word-break: normal !important; overflow-wrap: anywhere !important; } } /* dashboard 操作日志：修复三列导致手机端文字竖排 */ .activity-grid-mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 1100px) { .activity-grid-mobile { display: flex !important; flex-direction: column !important; } .activity-grid-mobile .activity-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; } .activity-grid-mobile .act-text { flex: 1 !important; min-width: 0 !important; font-size: 13px !important; line-height: 1.6 !important; word-break: normal !important; overflow-wrap: break-word !important; writing-mode: horizontal-tb !important; } .activity-grid-mobile .act-time { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 11px !important; } } /* final fix: dashboard activity log mobile single column */ @media (max-width: 1100px) { .activity-grid-mobile { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; } .activity-grid-mobile .activity-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; width: 100% !important; box-sizing: border-box !important; } .activity-grid-mobile .act-dot { flex: 0 0 auto !important; } .activity-grid-mobile .act-text { flex: 1 1 auto !important; min-width: 0 !important; font-size: 13px !important; line-height: 1.6 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; writing-mode: horizontal-tb !important; } .activity-grid-mobile .act-time { flex: 0 0 auto !important; white-space: nowrap !important; font-size: 11px !important; writing-mode: horizontal-tb !important; } }