/* ============================================================================ * air-quality-visualiza 前端优化补丁（不修改供应商产物，运行时注入） * * 问题：首页左侧「楼层 / 房间 / 设备」切换栏（HomeFloor）每个条目固定 46px 宽、 * 字号 16px，且文字被 -webkit-line-clamp:1 + ellipsis 限制成一行， * 于是「会議室A」「執務エリア」「AQM-003」「東京本社 1F」全被截成「会…」「執…」「AQ…」「東…」。 * 原始规则（frontend/_next/static/css/8ded0e0bee3ae419.css）： * .HomeFloor_wrapper__0xeKb { width:72px; height:680px; padding:34px 13px 12px; overflow:hidden } * .HomeFloor_item__zFvct { width:46px; height:28px; font-size:16px; line-height:28px; * word-break:break-all; text-align:center } * .HomeFloor_item .HomeFloor_text { display:-webkit-box; overflow:hidden; * text-overflow:ellipsis; -webkit-line-clamp:1 } * * 优化思路（**栏总宽 72px 不变**，所以完全不动物体布局宽度）： * 1) 内边距 13px -> 8px、条目宽 46px -> 56px（13*2+46 = 8*2+56，栏宽不变，内部更充分利用）； * 2) 字号 16px -> 12px、行高 14px； * 3) 只允许一行 -> 放开到两行（-webkit-line-clamp:2），仍保留省略号兜底。 * 效果：12px 下一行约 4 个汉字 / 7~8 个半角字符，两行可到 8 个汉字； * 「東京本社 1F」「執務エリア」「AQM-001」都能完整显示；更长的名字悬停有 Tooltip 显示全名。 * * 为什么每条都带 !important： * Next.js 是运行时把供应商的样式表插到 ，位置可能排在本文件之后； * 两边选择器优先级相同，靠后的一方获胜 —— 不加 !important 会被原样式盖掉（试过，字号没生效）。 * * 回退方式：本地起服务加 --no-overrides；镜像构建时不注入本文件即可。 * ========================================================================== */ /* 1) 栏内边距收窄：栏总宽仍是 72px（6*2+60 = 72） */ .HomeFloor_wrapper__0xeKb { padding-left: 6px !important; padding-right: 6px !important; } /* 2) 条目：宽度 46 -> 60px，字号 16 -> 11px，高度自适应（最小 28px，与原高度一致） */ .HomeFloor_item__zFvct { width: 60px !important; height: auto !important; min-height: 28px !important; font-size: 11px !important; line-height: 13px !important; padding: 2px 2px !important; text-align: center !important; word-break: keep-all !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 3) 文本：从 1 行放开到 2 行；keep-all + break-word = 优先在连字符/空格处断行， * 只有整词放不下才在词内断（「AQM-001」会断成 AQM- / 001，而不是 AQM-00 / 1） */ .HomeFloor_item__zFvct .HomeFloor_text__s0YUS { -webkit-line-clamp: 2 !important; line-clamp: 2 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; max-height: 28px !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* 白色药丸里的条目：高度仍 46px（保持圆形选中态），宽度对齐 60px */ .HomeFloor_checkList__Jb2Z_ .HomeFloor_item__zFvct { width: 60px !important; height: 46px !important; min-height: 46px !important; padding: 2px 4px !important; } /* 圆形操作按钮（首页/用户等图标按钮）保持 46×46、16px 不变 */ .HomeFloor_actionList__cpez1 .HomeFloor_item__zFvct { width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; font-size: 16px !important; }