/* ================================================================== 手机版样式 —— 只作用于 html[data-mode="mobile"] 设计原则： 1. 电脑版全部规则都在 app.css 里，本文件不改写它们， 所以同一份代码在电脑上打开仍然是电脑版（零回归）。 2. data-mode 由 内联脚本先行判定（避免首屏闪烁）， 之后由 js/app.js 在 resize / 手动切换时维护。 3. 本文件不依赖 @media(max-width:860px) 那几条旧断点， 自己成体系；两者同时命中时以本文件为准（选择器权重更高）。 ================================================================== */ html[data-mode="mobile"]{ --top-h:52px; --tab-h:40px; --mnav-h:54px; --radius:14px; } html[data-mode="mobile"] body{ font-size:14px; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } /* 手机版浏览电脑版（手动强制）时，整页按电脑版宽度横向平移 */ html[data-mode="desktop"][data-narrow="1"] body{overflow:auto} html[data-mode="desktop"][data-narrow="1"] .app{min-width:1180px} /* 电脑上预览手机版时，把应用收进一个手机宽度的画框里 */ html[data-mode="mobile"][data-narrow="0"] body{background:#e8ecf5} html[data-mode="mobile"][data-narrow="0"] .app{ max-width:430px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border); box-shadow:0 18px 60px rgba(15,23,42,.16); } /* ===================== 外壳 ===================== */ html[data-mode="mobile"] .app{position:relative;height:100vh;overflow:hidden} @supports (height:100dvh){ html[data-mode="mobile"] .app{height:100dvh} } html[data-mode="mobile"] .topbar{padding:0 10px;gap:8px} html[data-mode="mobile"] .tb-left{gap:8px;flex:1;min-width:0} html[data-mode="mobile"] .tb-right{gap:6px;flex:none} html[data-mode="mobile"] .tb-title{font-size:14.5px;overflow:hidden;text-overflow:ellipsis} html[data-mode="mobile"] .tb-search{display:none} /* 公司 / 期间 / 授权 / 姓名 / 电话 全部收进「我的」面板，顶栏只留头像 */ html[data-mode="mobile"] .tb-badge, html[data-mode="mobile"] .tb-period, html[data-mode="mobile"] #tbLic, html[data-mode="mobile"] .tb-user .un, html[data-mode="mobile"] .tb-user .ur, html[data-mode="mobile"] #btnLogout{display:none} html[data-mode="mobile"] .tb-user{padding:0;gap:0} /* 汉堡按钮 */ .tb-menu{display:none;flex:none;width:34px;height:34px;border-radius:10px; border:1px solid var(--border);background:var(--panel-2); flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:.16s} .tb-menu span{display:block;width:16px;height:2px;border-radius:2px;background:var(--text-2);transition:.22s} html[data-mode="mobile"] .tb-menu{display:flex} .tb-menu:active{background:var(--primary-s);border-color:var(--primary)} .drawer-open .tb-menu span:nth-child(1){transform:translateY(5px) rotate(45deg);background:var(--primary)} .drawer-open .tb-menu span:nth-child(2){opacity:0} .drawer-open .tb-menu span:nth-child(3){transform:translateY(-5px) rotate(-45deg);background:var(--primary)} /* 顶栏搜索（电脑版用输入框，手机版用按钮弹层） */ .tb-search-btn{display:none;flex:none;width:34px;height:34px;border-radius:10px; border:1px solid var(--border);background:var(--panel-2);font-size:14px; align-items:center;justify-content:center;transition:.16s} html[data-mode="mobile"] .tb-search-btn{display:flex} .tb-search-btn:active{background:var(--primary-s);border-color:var(--primary)} /* ===================== 侧栏 → 抽屉 ===================== */ /* 抽屉从顶栏下沿开始，顶栏保持可点（汉堡在打开状态会变成 ✕） */ html[data-mode="mobile"] .sidebar{ position:absolute;left:0;top:var(--top-h);bottom:0;width:min(86vw,318px);z-index:80;border-right:none; transform:translateX(-103%);transition:transform .27s cubic-bezier(.4,0,.2,1); box-shadow:14px 0 44px rgba(15,23,42,.2); } html[data-mode="mobile"] .sidebar.show{transform:none} html[data-mode="mobile"] .sidebar nav{padding:8px 10px 18px} html[data-mode="mobile"] .nav-gt{padding:14px 12px 6px;font-size:11.5px} html[data-mode="mobile"] .nav-mod{padding:12px;font-size:15px;border-radius:11px} html[data-mode="mobile"] .nav-mod .mi{font-size:17px} html[data-mode="mobile"] .nav-item{padding:11px 12px 11px 40px;font-size:14px;border-radius:10px} /* 财务模块 19 项，抽屉里展开后总高会超过 900px，这里放宽 */ html[data-mode="mobile"] .nav-sub.open{max-height:1600px} html[data-mode="mobile"] .side-plan{font-size:12px;padding:11px 13px} html[data-mode="mobile"] .drawer-mask{ position:absolute;left:0;right:0;top:var(--top-h);bottom:0;z-index:70;background:rgba(15,23,42,.46); opacity:0;pointer-events:none;transition:opacity .24s; } html[data-mode="mobile"] .drawer-mask.show{opacity:1;pointer-events:auto} /* ===================== 内容区 ===================== */ html[data-mode="mobile"] .tabs{padding:0 4px} html[data-mode="mobile"] .tab{padding:0 11px;font-size:12.5px} html[data-mode="mobile"] .tab .x{width:18px;height:18px} html[data-mode="mobile"] .content{ padding:10px; padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom) + 14px); -webkit-overflow-scrolling:touch; } html[data-mode="mobile"] .card{border-radius:14px} html[data-mode="mobile"] .card-h{padding:12px 13px;flex-wrap:wrap;row-gap:10px} html[data-mode="mobile"] .card-b{padding:12px} html[data-mode="mobile"] .toolbar{gap:7px} html[data-mode="mobile"] #dTools{width:100%;justify-content:flex-start} html[data-mode="mobile"] .btn{height:36px;padding:0 13px;font-size:13px;border-radius:9px} html[data-mode="mobile"] .btn.sm{height:30px;padding:0 10px;font-size:12px} html[data-mode="mobile"] .note{font-size:12.5px} /* ---- 窄屏布局必须全部挂在 data-mode 上 ---- app.css 里那几条窄屏规则走的是 @media(max-width:1180px/900px/860px)， 判的是「视口」宽度。在电脑上预览手机版时视口是 1440，它们不会生效， 于是两栏容器会把 430px 的画框顶宽。这里按渲染模式补齐。 */ html[data-mode="mobile"] .board-row{grid-template-columns:minmax(0,1fr)} /* 顺带把容器的自动最小尺寸归零：长表头 / 长商品名的 min-content 会沿着 flex、grid 往上把整页撑宽（横向溢出就是这么来的）。 */ html[data-mode="mobile"] .body, html[data-mode="mobile"] .main, html[data-mode="mobile"] .content, html[data-mode="mobile"] .view, html[data-mode="mobile"] .card, html[data-mode="mobile"] .card-b, html[data-mode="mobile"] .board, html[data-mode="mobile"] .tbl-wrap, html[data-mode="mobile"] .pages, html[data-mode="mobile"] .scan-station, html[data-mode="mobile"] .seat-bar{min-width:0} /* ===================== 底部导航 ===================== */ .mnav{display:none} html[data-mode="mobile"] .mnav{ position:absolute;left:0;right:0;bottom:0;z-index:60;display:flex; height:calc(var(--mnav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:rgba(255,255,255,.98);border-top:1px solid var(--border); backdrop-filter:blur(10px); } html[data-mode="mobile"][data-narrow="0"] .mnav{ max-width:430px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border); } .mnav-i{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; font-size:10.5px;color:var(--muted);transition:.16s;position:relative; } .mnav-i i{font-size:19px;line-height:1;font-style:normal} .mnav-i.on{color:var(--primary);font-weight:700} .mnav-i.on::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:22px;height:2.5px;border-radius:0 0 3px 3px;background:var(--primary); } .mnav-i:active{background:var(--primary-s)} /* 底部面板（单据 / 报表 / 资料 / 我的）里的列表 */ .sheet-list{display:grid;gap:2px} .sheet-sec{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:1px;padding:15px 4px 7px} .sheet-sec:first-child{padding-top:2px} .sheet-i{ display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:11px; font-size:14px;color:var(--text-2);transition:.14s; } .sheet-i .ic{font-size:15px;width:20px;text-align:center;flex:none} .sheet-i .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sheet-i .ar{color:var(--muted);font-size:15px} .sheet-i:active{background:var(--primary-s);color:var(--primary)} .sheet-i.on{background:var(--primary-s);color:var(--primary);font-weight:600} .sheet-me{padding:2px 4px 4px} .me-card{ display:flex;align-items:center;gap:13px;padding:15px;border-radius:14px; background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid #e0e7ff;margin-bottom:14px; } .me-card .av{ width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed);font-weight:800;font-size:19px; } .me-card b{display:block;font-size:15.5px} .me-card small{color:var(--text-2);font-size:12px} .me-rows{display:grid;gap:1px;background:var(--border-2);border-radius:12px;overflow:hidden;margin-bottom:14px} .me-row{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;font-size:13px} .me-row .k{color:var(--muted);flex:none;width:74px} .me-row .v{flex:1;text-align:right;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .me-acts{display:grid;gap:9px} .me-acts .btn{height:44px;font-size:14px;border-radius:11px;justify-content:center} /* ===================== 看板 / 图表 ===================== */ html[data-mode="mobile"] .board{gap:11px} /* 注意：一律用 minmax(0,1fr) —— 写成 1fr 时会退化成 minmax(auto,1fr)， 轨道的下限取内容的 min-content，长选项的 select / 长商品名会把整页撑宽。 */ html[data-mode="mobile"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html[data-mode="mobile"] .kpi{padding:13px 13px 15px;gap:10px;border-radius:14px} html[data-mode="mobile"] .kpi .ki{width:32px;height:32px;font-size:16px;border-radius:9px} html[data-mode="mobile"] .kpi .kl{font-size:11px;margin-bottom:3px} html[data-mode="mobile"] .kpi .kv{font-size:18px;letter-spacing:-.4px} html[data-mode="mobile"] .board-row{gap:11px} /* 柱状图的柱高是行内写死的 148px（按 200px 容器配的）， 这里用 max-height 把它压住，否则柱子会溢出去盖住月份标签 */ html[data-mode="mobile"] .bars{height:172px;gap:10px} html[data-mode="mobile"] .bar{max-height:118px} html[data-mode="mobile"] .bar-v{display:none} html[data-mode="mobile"] .bar-l{font-size:10px} html[data-mode="mobile"] .pages{max-width:none;gap:11px} html[data-mode="mobile"] .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} html[data-mode="mobile"] .stat{padding:11px 12px} html[data-mode="mobile"] .stat .sv{font-size:16.5px} html[data-mode="mobile"] .plan-grid{grid-template-columns:minmax(0,1fr);gap:10px} html[data-mode="mobile"] .plan{padding:16px} html[data-mode="mobile"] .plan .pp{font-size:23px;margin-bottom:10px} html[data-mode="mobile"] .calc-grid{grid-template-columns:minmax(0,1fr);gap:12px} html[data-mode="mobile"] .calc-amt{font-size:23px} html[data-mode="mobile"] .seg button{height:38px;font-size:13.5px} html[data-mode="mobile"] .stepper button{width:42px;height:42px} html[data-mode="mobile"] .stepper input{height:42px} /* ===================== 表单 ===================== */ html[data-mode="mobile"] .fld>span{font-size:12.5px} html[data-mode="mobile"] .fld input, html[data-mode="mobile"] .fld select{height:40px;font-size:14px;border-radius:9px;min-width:0} html[data-mode="mobile"] .fld textarea{height:76px;font-size:14px} html[data-mode="mobile"] .form-grid{grid-template-columns:minmax(0,1fr);gap:11px} html[data-mode="mobile"] .form-grid .span2{grid-column:span 1} html[data-mode="mobile"] .filters{padding:11px 12px;gap:8px} html[data-mode="mobile"] .filters .fld{min-width:calc(50% - 4px);flex:1} html[data-mode="mobile"] .summary-bar{padding:10px 12px;gap:12px 18px;font-size:11.5px} html[data-mode="mobile"] .summary-bar b{font-size:12.5px} html[data-mode="mobile"] .summary-bar>*{white-space:nowrap} /* 单据合计区在电脑版是横向一排，窄屏下会被挤成「明细分／数：1」这种断词，改成竖排 */ html[data-mode="mobile"] #dTotal>div{ display:flex!important;flex-direction:column;align-items:flex-start!important; gap:7px!important;padding:12px 14px!important; } html[data-mode="mobile"] #dTotal>div>span{white-space:nowrap} html[data-mode="mobile"] .master-top{padding:11px 12px;gap:8px} html[data-mode="mobile"] .master-top input{min-width:0;flex:1 1 100%;height:36px} /* 资料页工具条：按钮等分占满整行，避免出现「孤零零一个按钮」的空档 */ html[data-mode="mobile"] .master-top .btn{flex:1;min-width:0;justify-content:center} /* 单据页：头部字段两列、右侧单据列表移到下面 */ html[data-mode="mobile"] .bill{grid-template-columns:minmax(0,1fr);gap:12px} html[data-mode="mobile"] .doc-side{position:static} html[data-mode="mobile"] .bill-head{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html[data-mode="mobile"] .bill-head .span2{grid-column:span 2} html[data-mode="mobile"] .doc-list{max-height:320px} html[data-mode="mobile"] .doc-row{padding:11px 12px} html[data-mode="mobile"] .gpick-panel{width:min(92vw,520px)} html[data-mode="mobile"] .gpick-row{padding:11px 12px;font-size:13.5px} /* 扫码台 */ html[data-mode="mobile"] .scan-input{height:46px;font-size:15px} html[data-mode="mobile"] .scan-cfg{gap:11px} html[data-mode="mobile"] .sc-act .btn{flex:1;justify-content:center} html[data-mode="mobile"] .scan-log-row{grid-template-columns:52px minmax(0,1fr) minmax(0,1.6fr)} html[data-mode="mobile"] .sc-kvs{grid-template-columns:minmax(0,1fr)} html[data-mode="mobile"] .gpick-row .gc{width:60px} html[data-mode="mobile"] .gpick-row .gs{width:74px} html[data-mode="mobile"] .gpick-row .gq{width:52px} /* ===================== 表格 ===================== */ html[data-mode="mobile"] .tbl-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} html[data-mode="mobile"] table.tbl{font-size:13px} html[data-mode="mobile"] table.tbl th{padding:10px 11px;font-size:12.5px} html[data-mode="mobile"] table.tbl td{padding:11px} html[data-mode="mobile"] table.tbl tfoot td{padding:11px} html[data-mode="mobile"] table.tbl .empty{padding:44px 12px} /* 宽表横滑时，首列（单号 / 名称 / 序号）钉在左边，不丢上下文 */ html[data-mode="mobile"] table.tbl:not(.lines-tbl) th:first-child, html[data-mode="mobile"] table.tbl:not(.lines-tbl) td:first-child{ position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--border-2); } html[data-mode="mobile"] table.tbl:not(.lines-tbl) thead th:first-child{z-index:3;background:var(--panel-2)} html[data-mode="mobile"] table.tbl:not(.lines-tbl) tfoot td:first-child{z-index:3;background:#f8fafc} html[data-mode="mobile"] table.tbl:not(.lines-tbl) tbody tr:hover td:first-child{background:#f8faff} html[data-mode="mobile"] table.tbl:not(.lines-tbl) tbody tr.sel td:first-child{background:var(--primary-s)} /* 溢出提示：只在第一次遇到宽表时出现，用户滑过一次就不再打扰 */ .swipe-hint{display:none} html[data-mode="mobile"] .swipe-hint{ display:flex;align-items:center;justify-content:center;gap:7px; margin-top:9px;padding:8px 12px;border-radius:10px; background:var(--primary-s);color:var(--primary-d);font-size:12px;font-weight:600; } /* ===================== 弹窗 → 底部抽屉 ===================== */ html[data-mode="mobile"] .mask{align-items:flex-end;padding:0;background:rgba(15,23,42,.5)} html[data-mode="mobile"] .dlg{ width:100%;max-width:100%;max-height:92vh;position:relative; border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom); animation:sheetUp .28s cubic-bezier(.16,1,.3,1); } @keyframes sheetUp{from{opacity:.5;transform:translateY(34px)}to{opacity:1;transform:none}} html[data-mode="mobile"] .dlg.wide, html[data-mode="mobile"] .dlg.xwide, html[data-mode="mobile"] .dlg.w760{width:100%} html[data-mode="mobile"] .dlg::before{ content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%); width:38px;height:4px;border-radius:3px;background:#e2e8f0; } html[data-mode="mobile"] .dlg-h{padding:19px 15px 13px} html[data-mode="mobile"] .dlg-h h4{font-size:15.5px} html[data-mode="mobile"] .dlg-h .x{width:32px;height:32px;background:var(--panel-2)} html[data-mode="mobile"] .dlg-b{padding:0 15px 16px} html[data-mode="mobile"] .dlg-f{padding:12px 15px;gap:9px} html[data-mode="mobile"] .dlg-f .btn{flex:1;height:42px;justify-content:center;font-size:14px} html[data-mode="mobile"] .dlg-b .tbl-wrap{margin:0 -15px;border-radius:0;border-left:none;border-right:none} /* ===================== Toast ===================== */ html[data-mode="mobile"] .toast-box{ top:auto;left:0;right:0;transform:none;max-width:430px;margin:0 auto;padding:0 12px; bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom) + 14px); } html[data-mode="mobile"] .toast{width:100%;justify-content:center} /* ===================== 登录页 ===================== */ html[data-mode="mobile"] .login{flex-direction:column;height:100vh} @supports (height:100dvh){ html[data-mode="mobile"] .login{height:100dvh} } html[data-mode="mobile"] .login-brand{display:none} html[data-mode="mobile"] .login-panel{ flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start; padding:0;background:var(--bg);overflow-y:auto; } html[data-mode="mobile"] .login-form{ width:calc(100% - 28px);max-width:460px;margin:-18px auto 26px; background:#fff;border-radius:18px;box-shadow:var(--shadow); padding:24px 20px 26px;animation:none;position:relative;z-index:2; } html[data-mode="mobile"] .login-head h2{font-size:21px} html[data-mode="mobile"] .login-head p{margin-bottom:22px} html[data-mode="mobile"] .lf{margin-bottom:15px} html[data-mode="mobile"] .lf-input input, html[data-mode="mobile"] .lf-captcha input{height:46px;font-size:15px;border-radius:11px} html[data-mode="mobile"] .captcha-img{height:46px;border-radius:11px} html[data-mode="mobile"] .btn-login{height:48px;font-size:16px;border-radius:12px;margin-top:4px} html[data-mode="mobile"] .login-tip{font-size:12px;line-height:1.9;margin-top:14px} /* 登录页移动端品牌头（电脑版不显示） */ .login-mhero{display:none} html[data-mode="mobile"] .login-mhero{ display:block;position:relative;overflow:hidden;padding:34px 22px 52px;color:#fff; background:linear-gradient(135deg,#1e40af 0%,#4f46e5 52%,#7c3aed 100%); border-radius:0 0 24px 24px; } .login-mhero::after{ content:'';position:absolute;inset:0;opacity:.16; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:40px 40px; } .login-mhero>*{position:relative;z-index:1} .lm-logo{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px;font-weight:800; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);margin-bottom:16px; } .lm-t{font-size:23px;font-weight:800;letter-spacing:1px;margin-bottom:8px} .lm-s{font-size:12.5px;line-height:1.8;opacity:.9;max-width:330px} .lm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px} .lm-tags span{ font-size:11px;padding:4px 9px;border-radius:20px;white-space:nowrap; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26); } .lg-demo{display:none} html[data-mode="mobile"] .lg-demo{ display:block;width:100%;height:38px;margin-top:11px;border-radius:10px; border:1px dashed var(--border);background:var(--panel-2);color:var(--text-2);font-size:12.5px; } html[data-mode="mobile"] .lg-demo:active{background:var(--primary-s);border-color:var(--primary);color:var(--primary)} /* ===================== 打印预览 ===================== */ html[data-mode="mobile"] .pr-bar{gap:10px;padding:10px 12px} html[data-mode="mobile"] .pr-hint{margin-left:0;width:100%} html[data-mode="mobile"] .pr-stage{padding:10px;max-height:64vh} /* ===================== 手机版搜索页 ===================== */ .search-sheet{display:grid;gap:11px} .ss-input{display:flex;gap:8px;align-items:center} .ss-input input{ flex:1;min-width:0;height:42px;border:1px solid var(--border);border-radius:11px; padding:0 13px;font-size:14px;background:var(--panel-2); } .ss-input input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)} .ss-input .btn{height:42px;flex:none;border-radius:11px;padding:0 16px} .ss-tip{padding:28px 12px;text-align:center;color:var(--muted);font-size:13px;line-height:1.8} .ss-res .tbl-wrap{border-radius:11px} /* ===================== 回到手机版 ===================== */ .view-fab{ display:none;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:95; height:40px;padding:0 16px;border-radius:22px;align-items:center;gap:6px; border:1px solid var(--border);background:#fff;color:var(--primary); font-size:13px;font-weight:700;box-shadow:0 8px 28px rgba(15,23,42,.22); } /* 只在「手机/平板被手工切成电脑版」时出现，避免在电脑上打扰 */ html[data-pref="desktop"][data-narrow="1"] .view-fab{display:flex} .view-fab:active{background:var(--primary-s)} /* ===================== 电脑上预览手机版：弹窗与提示也收进画框 ===================== */ html[data-mode="mobile"][data-narrow="0"] .mask{ left:0;right:0;max-width:430px;margin:0 auto; }