/*! * web/assets/css/index/20-mobile-layout.css * 2026-09-27（#173）：手机视口（≤767px）的**跨页面**布局契约。本文件在 index.html 里**最后**加载。 * * 为什么要有这一层、而且必须在最后： * 02-responsive.css 早就存在，但它在 04-components.css / 14-ui-unify.css **之前**加载， * 同权重的规则被后面的文件覆盖 —— 于是"写了移动端规则却不生效"，页面表现就是 * 用户说的「切到手机就乱，只是把桌面缩小」。这是结构问题，不是某条规则写错。 * 现在把**跨页面**的手机规则集中到这一层（最后加载，真正生效），页面专属的断点 * 仍然写在该页面自己的 CSS 里（就近维护，见 §95「口径只在一处」—— 一处 = 一条规则只有一个归属）。 * * 这一层只管四类事：① 桌面专属 chrome；② 容器宽度钳制（弹窗/弹层/日期控件）； * ③ 通用文本与控件的"读得清、点得着"；④ 悬浮按钮不压内容。页面内的密度问题不在这里改。 */ @media (max-width:767px) { /* ① 桌面多标签页：手机上底部导航已经承担切换，这条横条只吃掉 ~46px 首屏， 而且"右键菜单 / 关闭 ×"是桌面隐喻，触摸端没有对应操作。 */ .admin-tabs-bar, .tab-context-menu { display: none !important; } /* ② 容器钳制。`.ep-pop` 基础样式带 max-width:92vw，所以写死 720px 的弹层不会撑破视口， 但**底部抽屉**因此变成"两侧各留 15px 缝的浮卡"—— 手机上的底部抽屉是通栏手势产物 （全项目 145 处 position="bottom"），通栏才放得下表格里的那些列。 */ .ep-pop--bottom { width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; } .ep-pop--left, .ep-pop--right { max-width: 88vw; } .el-dialog { width: min(94vw, 460px) !important; max-width: 94vw; margin-top: 6vh !important; } .el-dialog__body { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 日期区间控件自带 min-width，两个并排就把一行撑爆（对账页实测第二个日期被裁掉一半） */ .el-date-editor.el-input, .el-date-editor--daterange, .el-date-editor--monthrange { width: 100% !important; max-width: 100%; } .el-date-editor .el-range-input { min-width: 0; } .el-date-editor .el-range-separator { flex: none; padding: 0 2px; } /* ③ 读得清：ep-cell 右侧值以前 nowrap，长值（地址、店名、账号）直接顶出视口 （公司信息 51px、个人中心 43px、商品管理 26px 实测溢出）。 */ .ep-cell__value { white-space: normal; word-break: break-word; overflow-wrap: anywhere; } /* 但只放开值的换行还不够，反而暴露了更糟的一处机制 bug（2026-10-01 实测）： `.ep-cell` 是 nowrap flex，标签 `.ep-cell__main` 是 `flex:1 1 0; min-width:0`（可以压到 0）， 值 `.ep-cell__value` 是 `flex:0 0 auto`（不收缩）。银行账号那行值的自然宽度 389px > 容器 318px， 于是**溢出全部由标签承担** —— 标签被压到 8~9px 宽、160px 高，"工商银行滨江支行"一字一行竖排。 手机上标签是"这行是什么"，绝不能比值先牺牲：标签按内容占位、值来吸收剩余并换行。 注意值本身常常是 display:flex 的一排按钮/标签（商品管理行的「标签 模板 调货 编辑 已上架」）， 只给它 min-width:0 会让这一排被裁掉 82px —— 所以必须同时允许它内部换行。 也不要写 `min-width: max-content` 去"保住标签"：商品行的标签区内容很长， max-content 会反过来把值挤到 8px（实测两侧都塌过一次）。两侧都要 `flex:1 1 auto; min-width:0` —— 谁都不许独占，谁都能换行。 */ .ep-cell__main { flex: 1 1 auto; min-width: 0; } .ep-cell__value { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; } /* ③ 卡片主标题不许被省略号吃掉（2026-10-01 #173 复查实测）： 收银台商品名 5 条各少 4~12px、发货记录客户名 8 条少 64~117px —— 名字读不出来 就等于"这单是谁的"看不出来，手机上宁可多占一行也不许藏。 这两处基础样式都是 nowrap+ellipsis，且**不在门禁的类名清单里**，所以能长期漏过去； 判据已改成与类名无关的通用检测（见 tools/check_mobile_layout.js 的「截断」档）。 注意 `.srec-r1__cust` 本身是 flex 容器（图标 + 文本匿名项），容器上的 ellipsis 对匿名项 根本不生效 —— 第一版给它加 `flex:1 1 auto` 反而被父级 `.srec-r1` 压到 13px 宽（更糟）。 手机上的正确解法是让它退回块级、图标行内对齐，文本自然换行。 */ .pos-card__name { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; overflow-wrap: anywhere; min-width: 0; } .srec-r1__cust { display: block; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; overflow-wrap: anywhere; min-width: 0; } .srec-r1__cust > .el-icon { display: inline-block; vertical-align: -2px; margin-right: 4px; } /* 只允许换行还不够：`.srec-r1` 是 nowrap 的六项一行（名字/状态/日期/数量/按钮/箭头）， 自然宽度 367px > 可用 342px，而**只有名字带 min-width:0**，于是整行超出的部分全压在名字上， 实测压到 13px 宽 → 客户名一字一行竖排（比截断更难读）。手机上让这一行换行、 名字独占首行，元信息落到第二行；这也和 #152 销售订单卡片的窄屏排法一致。 */ .srec-r1 { flex-wrap: wrap; row-gap: 4px; } .srec-r1__cust { flex: 1 1 100%; } /* ③ 点得着：可点击的标签（排序 / 只看未发货 / 发货记录 / 批量发货）实测高 22~26px， 拇指误触率很高；勾选框更小。标签保持紧凑但给到 30px 命中区，勾选框 20px 见方。 */ .el-tag[role=button], .el-tag.is-link, span.el-tag.filt-on { min-height: 30px; display: inline-flex; align-items: center; } .el-checkbox { min-height: 44px; display: inline-flex; align-items: center; } /* 2026-10-02 #295：40 → 44，§76 的下限就是 44 */ .el-checkbox__inner { width: 18px; height: 18px; } .el-checkbox__inner .el-checkbox__original { width: 18px; height: 18px; } .ep-cell { min-height: 44px; } /* ④ 悬浮帮助按钮原来压在列表卡片上（实测盖住"2 件"）。 第一版改成"右下角小圆钮"以后又撞上底部批量操作条 （配送管理「指派配送员（0）」就在 y≈730）—— 于是改成右侧贴边半胶囊： 不遮正文、不与任何底部条争位置，拇指一划就到。 */ .help-fab { width: 26px; height: 62px; left: auto; right: 0; top: 42%; bottom: auto; border-radius: 10px 0 0 10px; font-size: 15px; opacity: .5; } #gp-app .page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* ⑤ 2026-10-02（#295）触摸下限 44px 的**外壳级**整改（§76/§42）。 上一版门禁量的是控件里的文字节点，所以数字虚高；纠正判据之后剩下的这些 是真·独立点击目标不够大，逐族给足命中区。只改高度/内边距，不改字号与配色。 底部页签是拇指最常打的一处，41px 差 3px 也算不合格。 */ .mobile-tab a { min-height: 44px; } /* !important 是因为 Element Plus / 统一层给 .el-button 设了 min-height:30px， 按特异性压过契约层（实测 /inventory 的「入库」按钮 computed min-height 仍是 30px）。 */ .el-button, .ep-btn { min-height: 44px !important; } .el-button.is-circle { min-width: 44px; } .el-button--text { min-height: 44px; padding: 6px 4px; } .el-segmented__item { min-height: 44px; } .el-input__wrapper { min-height: 44px; } .filter-bar .el-tag, span.el-tag.filt-on, .el-tag[role=button], .el-tag.is-link { min-height: 44px; display: inline-flex; align-items: center; } .el-pager li, .pagination .number { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .ep-swipe__right .el-button { min-height: 44px; } /* ⑥ 2026-10-02（#295）第二批：把剩下的**页面私有控件**也抬到 44px 触摸下限。 这些都是判据纠正之后仍然真实存在的独立点击目标（不是行内装饰节点）， 逐个按类名给足命中区；只加高度/对齐，不动字号与配色。 */ .dlv-tab, .dlv-tab__n { min-height: 44px; } .dlv-tab { display: inline-flex; align-items: center; } .search-toggle { min-height: 44px; } .el-pagination button, .el-pagination .btn-next, .el-pagination .btn-prev { min-height: 44px; } .el-select__wrapper, .el-select .el-input__wrapper { min-height: 44px !important; } .pos-layout-toggle span, .fr-view-toggle span { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .srec-r2 { min-height: 44px; } .sort-chip { min-height: 44px; } .ord-tabs span { min-height: 44px; } /* 客户页排序页签：实测 31px，5 个页签全是拇指目标 */ .ep-cell .el-tag, .ep-cell__right .el-tag, .ep-cell__value .el-tag { min-height: 44px; display: inline-flex; align-items: center; } /* ⑦ 2026-10-02（#295）第三批：剩下的都是"整行/整块当按钮用"的容器 —— 拇指打的是这一整条，所以抬容器而不是抬里面的角标。 .ord-tabs 那组 31px 的排序页签（客户页/多处复用）是这一批里唯一还报出来的。 */ .ord-tabs, .ord-tabs span { min-height: 44px; } .ord-tabs span { display: inline-flex; align-items: center; } /* ⑧ 2026-10-04（#331）**事件层**补的那一族：模板里写了 @click、样式却没给 cursor:pointer， 上一版判据（只认 pointer）压根没把它们当触摸目标 —— 清单来自 `MB_SHOW_SMALL=1 node tools/check_mobile_layout.js`（事件档打开后逐路由量出来的）， 漏登记不靠人记：那一页当场翻红。只加高度/对齐，不动字号、配色与圆角。 */ /* 订单卡上的客户名整块是"按此客户筛选"的入口（20px 高，拇指打偏就点不中） */ .ord-r1__cust { min-height: 44px; } /* 卡片第二行的加急/置顶/已修改是**切换按钮**，不是装饰角标： .ep-cell 那一族在 ⑥ 里已经给过，卡片版式（.ord-card/.ord-r2）当时没覆盖到。 */ .ord-card .el-tag, .ord-r2 .el-tag { min-height: 44px; display: inline-flex; align-items: center; } /* 配送卡上的「看货物」文字开关（实测 17px） */ .dlv-goods__tog { min-height: 44px; display: inline-flex; align-items: center; } /* 顶栏右侧与输入框清除键：图标本体 14~20px 就是唯一热区（外层没有可点容器兜它） */ .ep-navbar__right .el-icon, .el-input__suffix-inner .el-icon, .el-input__prefix-inner .el-icon { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ⑥ 只给 .el-input__wrapper 兜了 44，`el-input--small` 的外壳仍是 24 —— 外层是 inline-flex，min-height 对它有效，一并给足。 */ .el-input { min-height: 44px; } /* 供应商卡的「自动等级 普通」整块可点看等级说明（模板里补了类名才点得到） */ .mgr-tags .mgr-tag--lv { min-height: 44px; display: inline-flex; align-items: center; } /* ⑨ 2026-10-05（#346）**测量面补全后**才暴露的一族：值列里的"不可收缩原子"。 ②那处把两侧都写成 `flex:1 1 auto; min-width:0` 是对的（谁都不许独占、谁都能换行）， 但收缩量是按各自 basis 比例分摊的 —— 标题一长，右侧的开关/状态角标被压到 27~29px， 而 el-switch 本体 40px、el-tag 44~52px 是**原子控件，压不下去**，于是整块溢出行外： /categories「启用」少 17px、/shares「生效中」少 16px、/auto-print 开关少 15px。 这里用 min-content 而不是 max-content：min-content = 换行后最宽的那一行， 长文本仍能一字一行继续收缩（②的银行账号教训不受影响），原子控件则保住自己那一格。 */ .ep-cell__value { min-width: min-content; } /* 值列里的行内包层（ 包住的一段提示）仍从 .ep-cell 继承 nowrap， 「请先在「打印设置」中添加并连接仓库打印机」这类长提示整行 264px 顶出 206px 的盒子（实测 /auto-print 少 58px）。 契约层只放开了 .ep-cell__value 自己，没放开它的子层 —— 补到底。 */ .ep-cell__value > * { white-space: normal; overflow-wrap: anywhere; } /* ⑩ 2026-10-05（#346）订单详情/配货页的两处"名字与时间用省略号吞掉"： `.ord-meta2col__row .val`（下单时间「2026-10-03 02:45」少 39px，两列都被压窄）与 `.pick-card__name`（配货卡商品名「RT_TEST_商品#…」少 113px）都是 08-orders-ship.css 里的 nowrap+ellipsis，类名不在门禁清单里所以长期没人看见 —— 与③那两处同一族： 手机上宁可多占一行，也不许把"这单是谁的、哪件货"藏起来。 */ .ord-meta2col__row .val, .pick-card__name { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; } /* ⑪ 2026-10-05（#346）打印页的纸张/字段工具条：手机上堆成 4 行、单据被挤到 466px （实测 /delivery/print 首屏全是「A4/三联/58/76/80/自定义/显示字段/自定义版式/设计版式」）。 改成**横向滑动的单行**：按钮一个不减、一个不落都能点得到，单据回到首屏 —— 与 .pos-toolbar（收银台工具条）用的是同一条已验证过的写法（06-dark-patch.css 第 88 行）。 原来这三条带 !important 是因为声明写在模板的行内 style 里（外联压不过内联）； 批次86 续四 #366③ 把内联声明搬进 04-components.css 的 .dp-toolbar 基础规则后， !important 一并撤掉 —— 20 比 04 后装载，同特异度后来者胜，断点规则不需要靠强权。 */ .dp-toolbar { flex-wrap: nowrap; justify-content:flex-start; padding:8px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .dp-toolbar::-webkit-scrollbar { display: none; } .dp-toolbar > * { flex:none; } /* ⑫ 2026-10-05（#346）360pt 档才翻出来的两处"钱与仓库名被省略号吞掉"： `.ship-sumbar__v`（发货汇总条 ¥3,190.00 少 11px）与 `.oo-row__v`（其他系统单的行名 「流程测试批发默认仓库」少 30px）。汇总条本来就允许横滑（08-orders-ship.css:190 已写 overflow-x:auto），所以**加宽格子而不是缩字号**：金额要保持 17px 的可读级别； 行名那一档退回与③同一条纪律 —— 能换行就不许藏。 */ .ship-sumbar__cell { min-width: 104px; } .oo-row__v { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; } /* ⑬ 2026-10-05（#346）把 web 清单从 18 条补到 81 条之后，一次涌出 36 页 / 92 种不足 44px 的 触摸目标（逐条清单：`MB_SHOW_SMALL=2 node tools/check_mobile_layout.js`）。 做法与 ⑥⑦⑧ 三批一致：**只补外壳的命中区**，不动字号、配色、圆角与文案； 行内容（角标、单位、文本）在整行给足之后自动不再是独立目标。 */ /* EP 步进器 ±：实测 26×42 —— 拇指按在 26 宽的那一条上 */ .el-input-number__decrease, .el-input-number__increase { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* EP 单选按钮组（换货/积分流水/报表的时间档，实测 50×30）。 取 46 而不是 44：边框与盒模型让"min-height:44"落地成 43.x 的四舍五入 —— 屏幕上显示 44、 判据按 <44 仍然算缺陷（与 #327 那条"88rpx 在 360pt 屏只有 42.2px 所以要抬到 92rpx"同一个坑）。 */ .el-radio-button__inner { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; } /* EP 滑块：把手 20×20（拖动目标）+ 轨道 6px（点哪跳哪）都要给到拇指。 轨道把可视高度留在 bar 上（bar 自己写死 6px），外层盒子抬到 44， 把手容器同步 44 并把 top 归零，视觉位置不变。 */ .el-slider__runway { height: 44px; background: var(--el-slider-runway-bg-color, #e4e7ed); } .el-slider__bar { height: 6px; top: 19px; } .el-slider__button-wrapper { width: 44px; height: 44px; top: 0; } .el-slider__button { width: 26px; height: 26px; } /* 页面自绘的页签与胶囊（采购需求 / 菜单配置 / 报销 / 资产 / 其他系统单 / 配货今日条） */ .pn-tab, .role-chip, .rb-tab, .ast-chip, .ast-alert, .pos-sheet__mode-btn, .tsh__act, .tsh__hd { min-height: 44px; } /* 页面里手写的一排"分段选项"（提成类型、退货方式、调拨状态、开单模式、顶栏文字按钮） 原本既没有类名也没有高度下限：门禁只报得出 `div×4 / span×1`，人看不出是哪一处。 这一批在模板上补了 `seg-chip` 类名（#331 同法：类名是给判据看的，不是给样式看的）， 这里给足命中区；inline-flex 是为了 min-height 在行内元素上也生效。 */ .seg-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* 整行可点的行容器：行给足高度，行内的名字/数值不再是独立目标 */ .oo-row, .ord-meta2col__row { min-height: 44px; } /* 自绘单选：圆点 20px 就是全部热区 */ .ep-radio { min-height: 44px; display: inline-flex; align-items: center; } /* 顶栏右侧自绘的"刷新"图标（16×16）与日期框前缀图标 */ .ep-navbar__right .ic, .el-date-editor .el-icon { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* 表格右箭头列里的图标（菜单配置页每行一个 14×14）：整行可点，图标是唯一的可视提示，也得给足 */ .ep-cell__right .el-icon { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* 提醒统计的图例（点一下切换曲线）与订单备注行的"点击复制"提示（点了就复制）：都是动作 */ .epc-lg, .copy-hint { min-height: 44px; display: inline-flex; align-items: center; } /* 带着 click 监听的角标（DOM 证据：Vue 在这些 .el-tag 上绑了 onClick）： 按 §76 点得着才算数。它们所在的行本来就有 44 的按钮并排，抬角标不改变行的观感。 模板上补 `tap-chip` 类名而不是给全站 .el-tag 兜底 —— 文档里的说明性角标 （/help 一处就 63 个）没有监听，给它们 44 只是把版面撑肿。 */ .tap-chip { min-height: 44px; display: inline-flex; align-items: center; } /* 状态角标的"看起来能点"已经在 03-global-fix.css 从根上收掉了（见那里的 .el-tag 注释）。 这里只补一件事：**真的带点击的**标签在手机上得点得着（实测筛选角标 20~24px 高）。 */ .el-tag[role=button], .el-tag.is-link, .el-tag.filt-on, .filter-bar .el-tag, .el-tag[style*="cursor:pointer"], .el-tag[style*="cursor: pointer"] { min-height: 44px; display: inline-flex; align-items: center; } } /* ===== 2026-10-06（#362）手机视口的「更多功能」抽屉 ===== 底部页签多出来的这颗按钮是手机上唯一能拿到完整模块清单的地方：侧栏在 <768px 整块不渲染， 而 43 条入口里有 18 条在「我的」页那两张清单里也没有 —— 手机上除了手敲 hash 无路可走。 抽屉渲染的是与桌面侧栏**同一份 navItems**（权限已过滤、空分组已裁），列表样式直接复用 .sidebar-nav（02-responsive.css 里那是顶层选择器，弹窗内照样生效）。 这里只补四件手机专属的事： ① 面板几何：.ep-pop 自带 16px 内边距 + max-height:90vh + overflow:auto —— 抽屉要的是 整屏高度、零内边距、头部固定、只有列表滚（43 条在 360×640 上必然超一屏）。 出口是 EpPopup 新增的 panel-class prop（#362），不是 :has() 之类的样式债。 ② 行高 44px：侧栏原尺寸 36px 是给鼠标的，拇指不行（§76 点得着才算数）。 ③ 分组标题 11px → 12px：11px 是桌面密度，手机上低于可读下限。 ④ 整行可点 → 光标与触摸高亮显式给出，不靠"看起来像"。 */ @media (max-width:767px) { .ep-pop.nav-drawer-pop { padding: 0; max-height: 100dvh; height: 100dvh; overflow: hidden; } .nav-drawer { display: flex; flex-direction: column; height: 100%; background: var(--cd); color: var(--tc); } .nav-drawer__hd { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 6px 12px 16px; border-bottom: 1px solid var(--bd); } .nav-drawer__title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-drawer__x { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ts); cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-drawer__list { flex: 1 1 auto; min-height: 0; padding: 6px 0 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nav-drawer__list li { min-height: 44px; padding: 10px 14px; cursor: pointer; } .nav-drawer__list .nav-section { min-height: 0; padding: 12px 14px 5px; font-size: 12px; } /* 底部那颗常驻入口：与相邻 .mobile-tab a 同一套排版（flex 列 / 12px 标签 / 次要色）， 但它是动作不是链接，所以用