/* 校区经营数据中心 —— 手机适配层。由 cloud-sync.js 检测实际屏幕宽度后给加 .is-mobile 类触发，不依赖 @media 查询，微信内置浏览器 / 桌面模式渲染也能生效。 */ body.is-mobile { /* ── 底部固定模块导航 ─────────────────────────────────── */ --mobile-nav-space: calc(78px + env(safe-area-inset-bottom)); } body.is-mobile .mobile-module-switch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); margin: 0; background: #ffffff; border-top: 1px solid #e5e7ea; border-radius: 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06); -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.is-mobile .mobile-module-switch::-webkit-scrollbar { display: none; } body.dark .mobile-module-switch { background: #1f2024; border-color: #333; } body.is-mobile .mobile-module-btn { flex: 0 0 auto; min-width: 84px; min-height: 42px; padding: 0 14px; font-size: 14px; white-space: nowrap; } /* 给内容留出底部导航空间 */ body.is-mobile .app { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } /* ── 触摸目标放大 ─────────────────────────────────────── */ body.is-mobile button { min-height: 40px; } body.is-mobile input, body.is-mobile select, body.is-mobile textarea { min-height: 40px; font-size: 16px !important; /* 防 iOS/安卓聚焦自动放大 */ } /* ── 顶部更紧凑 ───────────────────────────────────────── */ body.is-mobile .topbar { padding: 10px 12px; } /* 手机上隐藏右上角「云同步」小胶囊，由「同步数据」按钮与首页接管 */ body.is-mobile #cloud-pill { display: none !important; } /* ── 表格区域已由 .table-wrap 横向滚动，这里兜底 ─────── */ body.is-mobile .table-wrap { max-width: 100%; } /* ── 面板可折叠（手机端点标题栏 ▾ 收起/展开，避免页面过长）── */ body.is-mobile .panel-head { position: relative; padding: 10px 40px 10px 12px; } body.is-mobile .m-collapse-btn { position: absolute; top: 6px; right: 6px; background: transparent; border: 0; font-size: 14px; color: #888; cursor: pointer; padding: 2px 8px; min-height: 28px; line-height: 1; transition: transform .15s; } /* 经验共创库：标题栏里的全宽按钮不要挤压标题（修复文字竖排） */ body.is-mobile .knowledge-head { flex-wrap: wrap; } body.is-mobile .knowledge-head > div { flex: 1 1 100%; min-width: 0; } body.is-mobile .panel.m-collapsed .m-collapse-btn, body.is-mobile .table-panel.m-collapsed .m-collapse-btn { transform: rotate(-90deg); } body.is-mobile .panel.m-collapsed > :not(.panel-head), body.is-mobile .table-panel.m-collapsed > :not(.panel-head) { display: none !important; } /* ── KPI 指标卡两列 + 紧凑 ────────────────────────────── */ /* ── 指标卡：方块瓦片样式，紧凑两列排列 ──────────────── */ body.is-mobile .kpi-grid, body.is-mobile .analysis-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; } body.is-mobile .kpi { min-height: 84px; padding: 10px 12px; border-radius: 14px; border: 1px solid #ddeae5; border-top: 3px solid var(--teal, #2e7d5b); background: #f0f7f4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; justify-content: center; } body.is-mobile .kpi:nth-child(5n + 2) { border-top-color: var(--orange, #c96b34); background: #fbf3ec; } body.is-mobile .kpi:nth-child(5n + 3) { border-top-color: var(--blue, #32678c); background: #eef3f8; } body.is-mobile .kpi:nth-child(5n + 4) { border-top-color: var(--violet, #78649a); background: #f2eef8; } body.is-mobile .kpi:nth-child(5n + 5) { border-top-color: var(--green, #2e7d5b); background: #eef6f0; } body.is-mobile .kpi::before { display: none; } body.is-mobile .kpi-label { font-size: 11px; color: #888; } body.is-mobile .kpi-value { font-size: 20px; margin-top: 2px; } body.is-mobile .kpi-sub { font-size: 11px; margin-top: 2px; } body.dark .kpi { background: #232428; border-color: #333; } /* ── 面板标题：加品牌色条点缀 ─────────────────────────── */ body.is-mobile .panel-head .panel-title::before { content: ""; display: inline-block; width: 4px; height: 14px; background: var(--teal, #2e7d5b); border-radius: 2px; margin-right: 6px; vertical-align: -2px; } /* ── 经验共创库：手机端两列改单列（原版缺移动断点）── */ body.is-mobile .knowledge-workspace, body.is-mobile .knowledge-insight-grid { grid-template-columns: 1fr; } body.is-mobile .knowledge-filter-row { grid-template-columns: 1fr; } /* ── 顶部预留空间，避免「首页/同步」按钮与顶部栏重叠 ──── */ body.is-mobile .app { padding-top: 42px; } /* ── 手机端整体紧凑（减少留白与行高）──────────────────── */ body.is-mobile .entry-grid, body.is-mobile .filter-grid { padding: 12px; } body.is-mobile .module-view { padding: 10px 10px 90px; background: #eef3f1; } body.is-mobile .topbar { background: #f6faf8; border-bottom: 1px solid #e0e8e4; } body.is-mobile .panel, body.is-mobile .table-panel { margin-bottom: 10px; background: #ffffff; border: 1px solid #e0e8e4; border-radius: 14px; overflow: hidden; } body.is-mobile .panel-head, body.is-mobile .table-panel .panel-head { background: #f3f7f5; border-bottom: 1px solid #e5ece9; } body.is-mobile .table-panel .panel-title, body.is-mobile .panel .panel-title { font-size: 15px; } body.is-mobile .summary-table th, body.is-mobile .summary-table td { padding: 8px 10px; } body.is-mobile .summary-table { font-size: 12px; } body.dark .module-view { background: #141518; } body.dark .topbar { background: #1a1c20; border-color: #2a2c31; } body.dark .panel, body.dark .table-panel { background: #1f2024; border-color: #2e3036; } body.dark .panel-head, body.dark .table-panel .panel-head { background: #232528; border-color: #2e3036; } /* ── 登录门禁 / 弹窗手机友好 ─────────────────────────── */ body.is-mobile .cloud-modal { width: min(94vw, 400px); padding: 18px 16px; } body.is-mobile .cloud-modal .row { flex-wrap: wrap; } body.is-mobile .ac-panel { width: min(96vw, 760px); }