---- :not([class*="mdl-notice"]) 是必要的护栏：.modal-body p 的权重 (0,1,1) 高于 .mdl-notice (0,1,0)，若不排除会把提示条自身的 margin 改掉。 */ .modal-body p:not([class*="mdl-notice"]) { line-height: 1.65; } .modal-body > p:not([class*="mdl-notice"]) { margin: 6px 0; } /* ---- 4. 只读键值行「狭弹窗紧凑变体」：已删除 ---- 当初为窄弹窗预留的 .mdl-def-compact，全站引用 0 次，留着只会误导后续改动 → 删掉。 ---- */ /* ---- 5. 标题分隔符：压住 ui-modern.css:126 的 h2 > span{font-size:18px} ---- 标题里的「-」分隔符和房号都是，房号 18px 是对的，分隔符跟着变 18px 就太大。 */ .modal-header h2 .mdl-sep { font-size: var(--fs-sm); } /* ---- 6 & 7. 窄屏：标题不挤爆 + 底部按钮不折行 ---- .btn 基础高度 ≈ 38px（padding 9px 20px），手机端 ≈ 40px，故 min-height: 40px 只会「往上抬」，不会把已有按钮压矮。 */ @media (max-width: 560px) { /* 这里原本还写了 .modal-header h2{font-size:var(--fs-lg)} —— 是死代码，已删： ui-modern.css 在本文件之后加载，同为 (0,1,1) 权重、后者胜出，实测 h2 在 PC 与手机都是 14px（这正是想要的字号，见 v1.2 §9）。 */ .modal-header h2 .mdl-icon { font-size: 16px; } .modal-footer { gap: var(--sp-2); } /* ⚠️ 手机端必须把按钮恢复成「均分拉满」：改前的历史 inline style="flex:1" 就是这个效果。若沿用 PC 的 flex:0 0 auto，4 个按钮在 375px 下会折成 2 行（footer 69px → 113px）。 PC 端保持右对齐不拉伸。 */ .modal-footer .btn { flex: 1 1 auto !important; min-height: 40px; } } /* ========================================================================== 弹窗统一设计系统 v1.2 · 复核修正（2026-09-13） -------------------------------------------------------------------------- 来源：独立验证者对 v1.1 的对抗性复核，修掉 5 个由统一改版直接引入的缺陷。回滚：删掉本块即可，零业务影响。 ========================================================================== */ /* ---- 9. 标题文字 span：中性化 ---- 记收入/记支出、编辑用户/添加用户这两个弹窗的标题文字是动态的，必须用，于是会命中 ui-modern.css:126 的 `.modal-header h2 > span{font-size:18px;font-weight:700;color:brand}` → 和紧邻的 17px 图标挤在同一行、两个字号。该类把它们拉回「裸文本」应有的样子（与其它 22 个弹窗里直接写的标题文字一致：14px / 500 / ink-2）。权重 (0,2,2) > (0,1,2)，且 .mdl-icon/.mdl-sep/.mdl-room 各自的规则优先于此。 */ .modal-header h2 > span.mdl-name { font-size: var(--fs-base); font-weight: 500; color: var(--ink-2); } /* ---- 10. 居中标题变体（微信支付弹窗：无房号、整窗内容居中） ---- 该弹窗的 .modal-header h2 带 flex:1（ui-modern:118）会撑满整行，只给 .modal-header 设 justify-content:center 是无效的 —— 居中的是个已经占满的盒子。真正的做法是让 h2 内部的内容居中。残余偏差 ≈ 20px（左侧 4px 竖条 + 右侧 44px 关闭按钮占位不对称，除非把关闭按钮改成绝对定位），视觉上已居中。 */ .modal-header.mdl-center h2 { justify-content: center; } /* ---- 11. 复选框 / 单选钮：只受「尺寸」管，不受「通栏宽度」管 ---- 根因：style.css:849 的 `.form-group input{width:100%}` 会命中 checkbox，把 13x13 的小方框拉成整行宽（实测 428px）。老代码是在每个复选框上手写 inline `style="width:auto"` 打补丁 —— 漏一个就歪一个，"退房加收·已收加收费"那个就漏了。这里一次性兜住：权重 (0,2,2) 高于 style.css 的 (0,1,1)，以后不必再写 inline。注：已有的 inline `style="width:auto"` 可保留（无害），不必回头清理。 */ .modal .form-group input[type="checkbox"], .modal .form-group input[type="radio"] { width: auto; height: auto; min-height: 0; } /* ========================================================================== 12. 整页横向溢出根治 —— 收银 / 入住记录 / 财务 / 系统设置 4 个页签 -------------------------------------------------------------------------- 2026-09-14。老板（荣耀 MagicOS 10 手机）反馈"手机浏览器界面没适配好，我需要左右滑动才能看完这个页面的信息"。 ⚠️ 前提：文件前面第 856 行有一条 `html, body { max-width: 100%; overflow-x: hidden; }`，它会把整页横向滚动**遮蔽掉**（所以 documentElement.scrollWidth == innerWidth，量不出来），但**内容本体依然被撑宽、右侧内容被切掉**——等于"看不全"。正确判据是量 `.main` 的**直接子节点**（每个页签的根 div）的 scrollWidth 与 clientWidth：它没有被裁剪，能真实反映内容有多宽。实测（375px 视口，真实生产数据）：页签根div clientWidth 根div scrollWidth 超出收银管理 351 629 +278 ← 6 列统计卡入住记录 351 1674 +1323 ← .table-wrap 不裁剪财务管理 351 423 +72 ← 表格 overflow 失效系统设置 351 952 +601 ← label 里 span 仍 nowrap 房态看板/进出货/门锁/操作记录 351 =351 0 ← 本来就正常，本块不触碰下面 4 组规则各自解决一个独立根因；每组都只在该页签生效，互不干扰。共用思路：**让内容在容器内部横滑或换行，绝不裁剪内容本身**。 ========================================================================== */ /* ---- 12.1 入住记录（最严重，+1323px）：`.table-wrap` 没有横向裁剪能力 ---- 根因：index.html:2908 是 `

` 包 ``，表自然宽度 1674px。但 `.table-wrap` 这个类**在全部 CSS 里都没有定义过** （style.css 里只有 `.table` 有 overflow-x:auto，见 style.css:900）。表格的 overflow 写在 `

` 元素上对 table 元素**无效**（table 是 table-wrapper 盒，不产生滚动容器），所以 1674px 直接撑破 `.main`。修法：给容器层补上裁剪能力（外壳 + overflow-x:auto），表格在容器内部横滑。 ⚠️ 必须把背景/描边/圆角/阴影一起移交给这个容器 —— 否则外壳会盖住表格自己的 `border-radius` 白底，圆角处露出灰角（视觉回归）。这里用的都是与 §3 `.table` 完全相同的令牌，视觉零变化。注：不写 width:100%，让它作为块级元素自然撑满父宽。 */ .table-wrap { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } /* 已经在外壳里有背景/描边的表格，不要重复画第二层（避免"框中框"） */ .table-wrap > .table { background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* 手机端：横向滑动时首列冻结，滑到右边也知道这一行的姓名/房号是谁（与 §5 里 div.table 的首列冻结同一套做法，两边保持视觉一致） */ @media (max-width: 768px) { .table-wrap > table > thead > tr > th:first-child, .table-wrap > table > tbody > tr > td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--line); } .table-wrap > table > thead > tr > th:first-child { background: var(--canvas); z-index: 3; } .table-wrap > table > tbody > tr:hover > td:first-child { background: var(--brand-soft); } } /* ---- 12.2 财务管理（+72px）：`.table` 自带 overflow-x:auto 却失效 ---- 根因：这一页的容器是 `

`（index.html:3200/3233/3258/3284 等），`.table` 本身有 overflow-x:auto（style.css:900），本该能横滑。但它同时是 `.fin-section` 的子元素，而 `.fin-section` 是普通块级元素、没有约束 —— 真正的问题是 `.table` 作为滚动容器**没有可收缩的宽度上限**，在 auto 表格宽度（597px）面前它按内容撑到 597px，直接顶破 351px 的 `.main`。修法：给 `.table` 补上 `max-width:100%` + `min-width:0`，把它的宽度钉死在父容器内，超出部分由它自己的 overflow-x:auto 承担（横滑能力不变，内容不丢）。 `min-width:0` 是必要的——否则在 flex/grid 祖先里 auto 最小值仍会顶开。 */ .table { max-width: 100%; min-width: 0; } /* ---- 12.3 系统设置（+601px）：竖排后 label 内部的 `` 仍然 nowrap ---- 根因：style.css:1102 给 `.settings-section .setting-row label` 写了 `white-space: nowrap`，style.css:1260 的手机断点只改了 `flex-direction: column`， **没有解除 nowrap**，也没管 label 内部那个带长说明的 `` （如「读卡器地址（未接入请留空；买设备后把厂商提供的本机服务地址填到这里…）」）。 span 继承 nowrap → label 实测被撑到 935px。修法：手机上解禁换行（label 与内部 span 一起），长说明自然折行。 `overflow-wrap:anywhere` 兜住「http://192.168.x.x:8080/xxx」这种 **没有任何空格可断**的超长英文串，否则它会整段溢出（正是老板看到的那个）。电脑端（≥769px）不动：一条 row 一行放下，nowrap 才是想要的紧凑效果。 */ /* 🔴 2026-09-14 二次修正：断点方案是错的 —— 改成【不设断点】的收缩兜底 ------------------------------------------------------------------ 为什么不能再用断点：第一版断点 768px → 812 不生效（over=600）；第二版放宽到 1024px → 812 好了，但边界测试发现**只是把悬崖挪到 1025**： 1025×768 realOver=387 1200×900 realOver=212 1440×900 realOver=0 定位（线上实测）：`.setting-row` 的父级 `.settings-section` 被 style.css:1086 钉死 `max-width:640px`（实测 right=884）。而那个 nowrap label 实测宽 **935px**、它同行末尾的 input 宽 196px 被推到 right=1412 —— **这两个宽度都跟视口无关**。只要 label 的固有宽度（935）> 节容器可用宽度（640−48 padding≈592），行内容就必然溢出，与窗口多宽毫无关系。1440 看着"没溢出"只是因为溢出量 1412−1440 < 0 被视口吸收了，属于**碰巧没露出来**，不是修好了。 ⇒ 结论：这里根本不该用断点判断，应该让它在「装不下时」自己收缩。修法（无条件生效，不包 @media）： 1) 解除 label 与内部说明 span 的 nowrap，并把无空格长串（`http://127.0.0.1:24010`）交给 `overflow-wrap:anywhere` 断开； 2) label 与行内子项一律 `min-width:0` —— flex 子项默认 `min-width:auto` 会按内容最小宽度顶住，不写这条即使能换行也照样撑宽； 3) 行放开 `flex-wrap`，装不下时 input 自然落到下一行。 ✅ 桌面视觉不变：能一行放下的短 label（民宿名称/默认房价/Wi-Fi 密码…）本来就短于容器，`white-space:normal` 下仍是一行、高度仍是 21px；只有那个 935px 的超长说明才会折成两行 —— 这正是我们想要的效果。 ⚠️ 注意这与 style.css:1102 的 `white-space:nowrap` 是覆盖关系，本文件在 style.css 之后加载，等权重下后者生效，无需 !important。 */ .settings-section .setting-row label, .settings-section .setting-row label > span { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .settings-section .setting-row label { max-width: 100%; min-width: 0; } /* 说明性 span 退回普通字重/灰色，和本页其它提示文案一致（原本靠 inline style，保留） */ .settings-section .setting-row label > span { font-size: 12.5px; } .settings-section .setting-row { flex-wrap: wrap; min-width: 0; } .settings-section .setting-row > * { min-width: 0; } /* 行折行后，输入框独占整行，避免半宽残留、也不再被 label 顶出右边界 */ .settings-section .setting-row input[type="text"], .settings-section .setting-row input[type="password"], .settings-section .setting-row input[type="number"] { max-width: 100%; } /* ≤768 手机端：由 style.css:1260 的手机断点把行改成竖排（column），这里只补一条「input 铺满整行」，与既有的手机视觉一致。 >768 的桌面/平板保持横排一行（label 左、input 右），不动原设计。 */ @media (max-width: 768px) { .settings-section .setting-row input[type="text"], .settings-section .setting-row input[type="password"], .settings-section .setting-row input[type="number"] { width: 100%; flex: 1 1 100%; } } /* ---- 12.4 收银管理（+278px）：索引内联 `repeat(6,1fr)` 压过手机断点 ---- 根因：index.html:2622 是 `

`。 style.css 里明明有手机断点（1152 块的 `repeat(2,1fr)`、1280 块的 480px 断点），但**内联行内样式的优先级高于任何选择器**（除非写 !important），所以 6 列在 375px 下原样生效 → 586px 宽、顶破 .main。（财务页 3142/3331、设置页 3651 也用了同一个内联写法，本组一并覆盖。）修法：手机端用 `!important` 把列数收回 2 列，并让每张卡片 `min-width:0` —— 否则卡片内的数字（如 ¥12345）会把网格轨道顶宽，2 列也照样溢出。只改列数，不改任何卡片内部结构，老板看到的仍是同一张卡、同一个数字。 */ /* 🔴 2026-09-14 断点修正 768px → 1024px（verifier-2 复验：812×375 实测 realOver=+91）根因：`index.html:2622` 的内联 `style="grid-template-columns:repeat(6,1fr)"` **优先级高于任何选择器**，只有断点内的 `!important` 才能压过它。上一轮断点写的是 `max-width:768px`，而手机横屏 innerWidth=812 > 768 → 这条规则整段不生效 → 812 下仍是 6 列，实测 `.stats-grid` 宽 544px 却要放 6 张卡，把同行下方的表格一起顶到 w=961 / right=1206，整页 **over=+91**（已确认**不是** `.table` 的问题，别去动 `.table`）。修法：断点放宽到 1024px 覆盖手机横屏，仍用 `!important` 压内联 6 列。 ✅ 桌面硬约束：1440 不在本断点内，`.stats-grid` 仍是内联的 6 列。 */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .stats-grid > .stat-card { min-width: 0; } /* 卡片内的大数字和标签都允许收缩/换行，长金额不再顶宽轨道 */ .stats-grid > .stat-card .num, .stats-grid > .stat-card .label { min-width: 0; overflow-wrap: anywhere; } } /* 超小屏（≤380px，如老板手机的分屏 / 小窗）单列铺满，信息不挤 */ @media (max-width: 380px) { .stats-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ---- 12.5 房态看板（320×568 实测 +24px）：`.room-group` 撑到 332px ---- 根因：`.room-board` 是 `display:grid`（style.css:273），手机断点把列写成 `grid-template-columns:1fr`（style.css:1180）。但 grid 轨道默认的 `min-width:auto` 等于**内容的最小宽度**——组内 `.room-group-cards` （style.css:1190 的 `repeat(2,1fr)`）+ 卡片里的房号/客人名/金额让内容最小宽度到 330px，于是 `.room-group` 被撑到 **332px**，在 320px 视口里 **over=+24**，整页横滚。（verifier-2 递进注入实测：基线 24 → 只加第一条 7 → 再加第二条 0）修法：逐层解掉 `min-width:auto`，让 1fr 轨道真正按容器宽收敛；组头允许折行，房型名 + 「¥68/晚 · 4 间 · 4 住」不再并排硬撑。 ⚠️ 只加收缩能力，不改任何字号/列数/文字，老板看到的仍是同一张卡。 */ .room-board > *.room-group { min-width: 0; } .room-group-header { min-width: 0; flex-wrap: wrap; } .room-group-cards { min-width: 0; } .room-group-cards > .room-card { min-width: 0; } /* ---- 12.6 看板顶部统计条（手机端 147px 高 → 64px）：5 项统计被竖排 ---- 老板反馈（2026-09-14 截图）：「内容不多只是排版有问题，占用太多纵向空间」。实测 375×812：`.board-top` 高 **147px**，其中 `.stats-bar` 占 129px， 5 个统计项**每项占一行**，而整个卡片宽度用了 351px 却只显示 "3 空房干净" 这种短文案。根因（实测 computed style 得到）： style.css:1288 在 `@media (max-width:380px)` 里写了 `.stats-bar { flex-direction: column; gap:4px; align-items:flex-start }` ——它**只对 ≤380px 生效**。但 375 的 `.stats-bar` 实测 flex-direction 也是 column、宽仅 **65px**，说明真正的原因是**收缩**：`.board-top` 是 `flex-wrap:wrap` 的 flex 容器， `.stats-bar` 官方值 `flex:0 1 auto`（basis auto）、而 `min-width` 是默认的 `auto` —— 旁边图例块固有宽 125px，容器内宽 351−32(padding)=319， 319−125−8(gap)=186 可用；但 `.stats-bar` 按 nowrap 内容最小宽度参与分配时被压到 65px，于是 `flex-wrap:wrap` 把 5 个 `.stat-item` 逐个换行 → 129px 高。（432/560/768 下同样规则给出 329px 单行，所以这不是断点问题，是收缩问题。）修法（只动手机断点，且只动"排布"不动"数据"）： 1) `.stats-bar` 补 `flex:1 1 auto` + `min-width:0` —— 解除 `min-width:auto` 的内容顶宽，让它吃满图例左侧的剩余宽度； 2) `flex-direction:row !important` 顶掉 ≤380px 那条 column； 3) `.board-top` 设 `flex-wrap:nowrap`，统计条与图例稳定并排、不再互相挤行； 4) 统计条自身 `flex-wrap:wrap` + `gap:4px 12px`，窄屏放不下时**只在统计条内部**折成 2 行。实测收益（线上真机，375×812）：`.board-top` **147 → 64px**，省 **83px**； 320×568 147→89、360×800 147→64、414×896 67→64； 560/768 档 41→39（略降，无回归）；六档 realOver 全为 **0**，无元素被裁切。 ⚠️ 桌面（>768）不在本断点内，原样不动。 */ @media (max-width: 768px) { .board-top { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 12px; } .stats-bar { flex: 1 1 auto; flex-direction: row !important; flex-wrap: wrap; gap: 4px 12px; min-width: 0; align-items: center; } .stat-item { font-size: 12px; } .stat-item b { font-size: 14px; margin-right: 3px; } /* 图例块（美团/抖音/线下）保持固定宽度，不参与挤压 */ .board-top > div:last-child { flex: 0 0 auto; gap: 8px !important; font-size: 11px !important; } }