类目名

行程限位过载保护

热销产品
纸箱抗压机…
setTab_prolei() 的实现在 /static/js/ab77b6ea7f3fbf79.js，它做两件事： ① 给被点的 li 加 class="current"（其余 li 清空）； ② 显示 .homeonefl 里对应的产品面板。触屏上点 li 会触发浏览器合成的 mouseover，所以「点一下」= 切换 current，折叠展开直接挂在 .current 上，**不需要改 HTML、也不需要新增 JS**。为了兜住极少数不合成 mouseover 的内核，额外并联了 :hover / :active。折叠态：整行 46px 高的按钮条（类目名 + ▾）；展开态：按钮条下方铺开子产品胶囊标签，子项文字（内链锚文本）全保留。 -------------------------------------------------------------------------- */ .homeone .homeonefr { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px !important; justify-content: flex-start !important; float: none !important; width: 100% !important; height: auto !important; margin: 0 0 14px !important; padding: 0 !important; } .homeone .homeonefr > li { float: none !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #f2f6fc !important; border: 1px solid #d8e4f5 !important; border-radius: 8px !important; overflow: hidden !important; transform: none !important; } .homeone .homeonefr > li.current { background: #eaf2ff !important; border-color: #b9d2f5 !important; } .homeone .homeonefr > li:after { display: none !important; } .homeone .homeonefr .homeonefrpic { display: none !important; } .homeone .homeonefr .homeonefritem, .homeone .homeonefr .homeonefrtxt { float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; box-sizing: border-box !important; } .homeone .homeonefr .homeonefritem { padding: 0 !important; } .homeone .homeonefr .homeonefrtxt { padding: 0 14px !important; } /* ⚠️ 折叠/展开的唯一开关 —— 别删、别改成 display 切换 ---------------------------------------------------------------------- 这里刻意**不用 display:none 收子项**，而是用 max-height + overflow 剪裁：收起 = max-height 46px（只露标题条，够 1 行字高）展开 = max-height 520px（子项自然撑开）两个原因： 1) 用 display 切换会让整块导航瞬间变高/变矮； 2) 触屏「点一下」= touchstart 后浏览器再补一个 click，而 click 的落点是在**当下**重新命中测试的 —— 高度一变，指头底下就换成了别的元素。真机回归实测：点「抗压强度试验机」，补发的 click 直接打到了刚展开的子链接上，页面跳到 /kyqdsyj/127.html（用户根本没想点）。所以这里给 max-height 加 .16s 延迟：click 补发（实测 30~50ms）发生时，整块导航**一像素都还没动**，click 只会落在标题文字上（无链接）= 打空。之后高度再平滑展开。纯 CSS，不加 JS，也不用改模板。 */ .homeone .homeonefr .homeonefritem { overflow: hidden !important; max-height: 46px !important; transition: max-height .22s ease .16s !important; } .homeone .homeonefr > li.current .homeonefritem, .homeone .homeonefr > li:hover .homeonefritem { max-height: 520px !important; } /* 折叠按钮的标题条：整行可点，恒高 46px */ .homeone .homeonefr .homeonefrtxt h3 { position: relative !important; height: 46px !important; margin: 0 !important; padding: 0 26px 0 0 !important; display: flex !important; align-items: center !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 600 !important; color: #35598f !important; cursor: pointer !important; box-sizing: border-box !important; } /* ▾ 指示箭头（折叠 / 展开两态） */ .homeone .homeonefr .homeonefrtxt h3:after { content: '' !important; position: absolute !important; right: 4px !important; top: 50% !important; width: 7px !important; height: 7px !important; margin-top: -6px !important; border-right: 2px solid #6b8fc4 !important; border-bottom: 2px solid #6b8fc4 !important; transform: rotate(45deg) !important; } .homeone .homeonefr > li.current .homeonefrtxt h3:after { margin-top: -2px !important; transform: rotate(-135deg) !important; } /* 模板在子项之间留了一个孤立的「\」文本节点（原模板里的分隔符），手机上会显示成一个突兀的反斜杠。把容器字号归零再逐级还原，这个游离文本节点就自然消失（DOM 不动、内链不受影响）。 */ .homeone .homeonefr .homeonefrtxt { font-size: 0 !important; } .homeone .homeonefr .homeonefrtxt h3 { font-size: 14px !important; } /* 标题里的分类超链接（
xxx
）：手机上不抢点击。「点一下」留给展开子项用；href 仍在 DOM 里，收录/桌面端都不受影响。 */ .homeone .homeonefr .homeonefrtxt h3 a { pointer-events: none !important; } /* 子项：始终留在文档流里（占位不跳），靠 max-height 剪裁收起，收起态 visibility:hidden —— 被剪裁 + 不可点，双重保险 */ .homeone .homeonefr .homeonefrtxt > a { display: inline-block !important; height: auto !important; margin: 0 6px 8px 0 !important; padding: 5px 10px !important; font-size: 12px !important; line-height: 1.5 !important; color: #43709f !important; background: #fff !important; border: 1px solid #d8e4f5 !important; border-radius: 14px !important; text-decoration: none !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; vertical-align: top !important; visibility: hidden !important; } .homeone .homeonefr > li.current .homeonefrtxt > a, .homeone .homeonefr > li:hover .homeonefrtxt > a { visibility: visible !important; } /* 展开态：标题条下沿收一下（子项自身还有 8px 下边距） */ .homeone .homeonefr > li.current .homeonefrtxt { padding-bottom: 4px !important; } } /* ============================================================================ 第 20 节 · 详情页头部细节收敛（v5 补丁） ---------------------------------------------------------------------------- 作用域：仅 @media (max-width:900px)，桌面端 0 影响。承接关系：追加在「第 19 节（v4）」之后，覆盖其中的 .proonefrbox 边距规则。可回滚：整段删掉即回到 v4 状态。本次解决 4 处（对应 4 张截图）： 20.1 产品名 h1 与参数条 .prooneflicon 居中排版 20.2 参数卡片四周补齐底纹边框（第 18 节把左右 margin 归零后，卡片的 ::before 灰底被推到屏幕外，左右看不到底纹，只剩上下 9px） 20.3 手机端隐藏产品大图上的「海达国际」版权角标 .getauth-tips 20.4 底部「点击查看价格 + 区域经理电话」左右内收，不再贴屏幕边 ============================================================================ */ @media (max-width: 900px) { /* -------------------------------------------------------------------------- 20.2 参数卡片四周补齐底纹边框（先做，20.1/20.4 依赖它的左右内边距） -------------------------------------------------------------------------- 模板结构（PC 原设计）： .proonefrbox margin:9px 11px; padding:10px 15px; ← 白底内容层 .proonefrbox:before left/right:-11px, top/bottom:-9px, bg=homefivebg.jpg ← 灰色底纹层，四周各比白框大一圈，形成「底纹边框」 .proonefrbox:after 白底 + inset 内阴影问题根因（第 18 节留下的）：第 18 节为解决「.proonefrbox 的 11px 左右外边距把卡片顶出容器」把 margin-left/right 直接归零了。结果 :before 的 left:-11px/right:-11px 失去基准，灰底与白框同宽 → 左右各 0px 底纹；而上下 margin 保留 9px，上下底纹正常 → 视觉上「只有上下有底纹」（用户截图反馈的现象）。 ⚠️ 两个必须一起处理的连锁点（只改 margin 是没用的，实测踩过）： (1) 第 18 节 `.prooneflpic,.proonefrbox,…{width:100%}` 把卡片钉成定宽， margin 挤压失效 → 必须补 width:auto，让卡片按边距自然收缩，否则卡片仍会右边越界 11px（实测 right=375 > 父级内容区 364）。 (2) 绝对定位伪元素的包含块是「最近定位祖先的 **padding box**」，不是 content box —— 所以父级加 padding **不会**把 ::before 带进来。第 18 节 13b 段又把 ::before 的 left/right 归零（当时为修 401px 横向溢出）。要灰底重新外扩，必须显式把 left/right 设回 11px： .proonefr padding:0 11px → padding box 仍是 0 ~ 375 ::before left/right:11px → 灰底 x=11 ~ 364，宽 353px .proonefrbox margin:9px 11px → 白框 x=22 ~ 353，宽 331px 结果：灰底左右各比白框大 11px、上下大 9px，四周边框完整，且灰底右缘 364 < 375，不会重新撑出横向滚动条。 -------------------------------------------------------------------------- */ .proone .proonefr { padding-left: 11px !important; padding-right: 11px !important; box-sizing: border-box !important; } .proone .proonefr .proonefrbox { width: auto !important; margin: 9px 11px !important; box-sizing: border-box !important; } .proone .proonefr .proonefrbox:before { left: 11px !important; right: 11px !important; } /* -------------------------------------------------------------------------- 20.1 产品名与参数条居中 -------------------------------------------------------------------------- 改动前实测（375px，127.html）： .prooneflicon text-align:left，width:375 → 固定左对齐 · 升降速度120mm/min x=0 ~ 182 （第 1 行） · 荷重精度≤±0.5% x=186 ~ 336 （第 1 行） · 整机功率约300W x=0 ~ 150 （第 2 行，顶在最左） h1 display:inline-block, width:256, x=0 → 靠左问题：3 枚参数分两行后，第 2 行单独顶在左边，右侧留 225px 空白；标题也贴左。整体重心偏左，画面不平衡。做法： · .prooneflicon 改 text-align:center，让每一行各自居中； · span 的左右 padding 取对称值（PC 是 pr:25px / pl:14px，不对称，会导致「单枚那一行」视觉左偏约 5px）→ 统一 pl:14px / pr:14px，左 14px 正好留给 prodot01.png 那个小红点； · h1 由 inline-block 改 block + text-align:center（inline-block 无法被父级 text-align 居中到满宽，改 block 后满宽居中，换行也居中）。 -------------------------------------------------------------------------- */ .proone .proonefl .prooneflicon { text-align: center !important; } .proone .proonefl .prooneflicon span { padding-left: 14px !important; padding-right: 14px !important; } .proone .proonefr h1 { display: block !important; width: 100% !important; text-align: center !important; } /* -------------------------------------------------------------------------- 20.3 手机端隐藏产品大图上的版权角标 → 画面更简洁 -------------------------------------------------------------------------- 该角标不是图片自带的水印，而是模板元素：
.getauth-tips{position:absolute; top:0; width:175px; height:53px; background:url(/static/imagespc/photo-tips.png); border-top-left-radius:10px} 即「海达国际 HAIDA INTERNATIONAL」那张深蓝斜角贴图，叠在产品大图左上角。注意：它写在
内部（p 嵌 p，非法嵌套），浏览器解析时会把它提出来成为 .proonefl 的子节点 —— 实测 parent 确为 proonefl，所以用类名直接隐藏即可，不受嵌套影响。只隐藏视觉：图片与 DOM 结构不动，桌面端照旧显示。 -------------------------------------------------------------------------- */ .getauth-tips { display: none !important; } /* -------------------------------------------------------------------------- 20.4 底部「点击查看价格 + 区域经理电话」左右内收 -------------------------------------------------------------------------- 改动前实测（375px）： .proonefrbom x=0 ~ 375（满宽，无内边距）价格按钮 a x=0 ~ 145 → 左贴屏幕边电话 span x=162 ~ 375 → 右贴屏幕边（右侧留白实测 0px）问题：电话「135-4464-1555」紧贴屏幕右缘，竖屏单手区容易蹭到边缘手势。做法与一个连锁约束：父级 20.2 已给 11px 内边距，这里再补 3px → 两侧各内收 14px。但内收后可用宽只剩 347px，而「按钮 145px + 电话 213px = 358px」放不下， PC 的 `float:right` 会让电话直接掉到第二行（实测 y 从 1331 → 1416）。所以同步做两件事把这一行压回来： · 改 flex 两端对齐（去掉 float，避免浮动换行的不可控性）； · 电话字号 12px → 11px、号码 18px → 15px，实测组合宽度 145 + 184 ≈ 329px < 347px，留 18px 余量，稳定同行。号码仍保持红色加粗，视觉层次不受影响。 -------------------------------------------------------------------------- */ .proonefrbom { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding-left: 3px !important; padding-right: 3px !important; box-sizing: border-box !important; } .proonefrbom a { float: none !important; flex: 0 0 auto !important; } .proonefrbom span { float: none !important; flex: 0 1 auto !important; min-width: 0 !important; padding-right: 0 !important; font-size: 11px !important; text-align: right !important; white-space: nowrap !important; } .proonefrbom span strong { font-size: 15px !important; } } /* ============================================================================ haidatest.cn 站群 · 移动端自适应覆盖层 mobile.css 第 21 节（v6） ---------------------------------------------------------------------------- 承接关系：追加在「第 20 节（v5）」之后，第 21.1 节覆盖第 20.2 节的 ::before 定位。可回滚：整段删掉即回到 v5 状态。作用域：仅 @media (max-width:900px)。桌面端一行不受影响。本次解决 3 处（对应 3 张截图）： 21.1 修正 20.2 的「符号笔误」—— 详情页参数卡片左右底纹仍然缺失 21.2 首页数字化数据区（.gui-sz）第二行两个数字放到页面中间 21.3 主站新闻列表页（.newspic2）卡片文字过大、可见字数过少 ============================================================================ */ @media (max-width: 900px) { /* -------------------------------------------------------------------------- 21.1 详情页参数卡片：左右底纹边框（修正第 20.2 节的符号笔误） -------------------------------------------------------------------------- 【这是一处修正，不是新功能】第 20.2 节的本意是让灰底比白框四周各大一圈，但把 ::before 的 left/right 写成了 **正值 11px**。绝对定位元素的包含块是「最近定位祖先的 padding box」(=.proonefrbox 的 padding box，即白框 22px ~ 353px)： left: +11px → 灰底左缘 = 22+11 = 33px ← 向内「收缩」，比白框还小 left: -11px → 灰底左缘 = 22-11 = 11px ← 向外「扩展」，才是要的效果正值让灰底缩进白框内部，被 :after 的白底(z-index:2)完整盖住，所以左右两侧仍然一道底纹都看不到 —— 与用户截图（红色箭头处）完全一致。上下之所以正常，是因为 top/bottom 一直是负值(-9px)，只有左右写反。修正后实测（375px）： .proonefr padding:0 11px → padding box 0 ~ 375 .proonefrbox width:auto; margin:9px 11px → 白框 x=22 ~ 353（宽 331） ::before left/right:-11px → 灰底 x=11 ~ 364（宽 353）左右各比白框大 11px、上下大 9px，四周边框完整；灰底右缘 364 < 375，不会重新撑出横向滚动条（第 18 节当初归零就是为了修 401px）。 -------------------------------------------------------------------------- */ .proone .proonefr .proonefrbox:before { left: -11px !important; right: -11px !important; } /* -------------------------------------------------------------------------- 21.2 首页「数字化数据区」：第二行两个数字放到页面中间 -------------------------------------------------------------------------- 结构：.gui-sz > ul.gun > li × 5（每个 li 的
说明文字）第 12 节已把 5 个 li 改成 width:33.3333% + flex-wrap → 第一行 3 个、第二行 2 个。改动前实测（375px，主站首页）：第一行：22年 x=20 ~132 35个 x=132~243 120+ x=243~355 （占满 335px）第二行：150位 x=20 ~132 60000㎡ x=132~243 （靠左，右侧空 112px）且第 4、5 个 li 的
带内联 style="text-align:left"，说明文字左对齐 → 整块视觉重心偏左，与上面一行的居中风格不统一。做法： ul 加 justify-content:center —— 第一行 3 个恰好占满（335px）居中无变化；第二行 2 个（224px）自动居中，中心点与第一行都是 187.5px（屏幕正中）。再把
的 text-align 统一为 center。内联样式不带 !important，外层 !important 可以正常覆盖，不需要动 DOM。 -------------------------------------------------------------------------- */ .gui .gui-left .gui-sz ul { justify-content: center !important; } .gui .gui-left .gui-sz ul li, .gui .gui-left .gui-sz ul li p { text-align: center !important; } /* -------------------------------------------------------------------------- 21.3 主站新闻列表页（/news/）：卡片文字过大、可见字数过少 -------------------------------------------------------------------------- 结构：.newslr > ul.newspic2 > li > a.pic(img) + div.text(h4>a + span) 改动前实测（375px，www.haidatest.cn/news/）： .newspic2 li .text 仍是桌面值 width:69% + margin-left:3.188% → 标题实际可用宽度只有 223px .newspic2 li .text h4 a 仍是桌面值 font-size:22px / NOWRAP / ellipsis .newspic2 li .text span 仍是桌面值 font-size:18px 结果：30 字的标题一行只放得下约 10 字就被省略号截掉；「发布于：2026-09-18」占到 18px，整张卡片高 324px。第 12 节只覆盖了 .newsbox .newspic（另一组卡片），漏掉了 .newspic2，所以这组一直是桌面字号 —— 这就是「字太大、字太少」的根因。做法：文字块放开到整行；标题降到 15px 并允许折行（最多 2 行，超出才省略）；日期降到 12px；卡片圆角、下间距同步收敛，让列表更紧凑。预期：标题可用宽度 223px → 323px，可见字数约 10 字 → 40 字以上（完整显示）。 -------------------------------------------------------------------------- */ .newspic2 li .text { display: block !important; width: 100% !important; margin-left: 0 !important; margin-top: 12px !important; font-size: 14px !important; } .newspic2 li .text h4 a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2; overflow: hidden !important; white-space: normal !important; text-overflow: clip !important; font-size: 15px !important; line-height: 1.5 !important; word-break: break-word !important; } .newspic2 li .text span { font-size: 12px !important; line-height: 1.4 !important; padding-top: 8px !important; margin-top: 10px !important; border-top: 0 !important; } .newspic2 li { margin-bottom: 16px !important; border-radius: 12px !important; } } /* ============================================================================ haidatest.cn 站群 · 移动端自适应覆盖层 mobile.css 第 22 节（v7） ---------------------------------------------------------------------------- 承接关系：追加在「第 21 节（v6）」之后。 22.1 覆盖第 9 节的 .parter-list 规则； 22.2 覆盖第 16.17 / 16.47 节的 .cont-ser 规则。可回滚：整段删掉即回到 v6 状态。作用域：仅 @media (max-width:900px)。桌面端一行不受影响。本次解决 2 处（对应 2 张截图）： 22.1 关于我们页（/gywm.html）合作伙伴 logo 墙 22.2 联系我们页（/contact.html）四大卖点四宫格 ============================================================================ */ @media (max-width: 900px) { /* -------------------------------------------------------------------------- 22.1 关于我们页 · 合作伙伴 logo 墙（.model-8 > .wrap > ul.parter-list） -------------------------------------------------------------------------- 结构：ul.parter-list > li × 14 > span > img 14 张图实测全部是 180×80 白底 JPG，四角像素均为纯白 #FFFFFF。第 9 节已把栅格从桌面「每行 7 列」改成 flex + 每行 3 列（width:31.5% + space-between），但两件事没管：问题一 —— 卡片顶住底纹上边缘。 .model-8 的 padding-top 是 0，第 9 节又把 li 的 margin-top 归零（桌面原本是 margin-top:20~40px），两者相加 → 第一行白卡与浅灰底纹 (#f7f7f7) 的上边缘严丝合缝，一点留白都没有。问题二 —— 第一行「大一圈 + 连成一片」的根因是图片内容占比不同。 img 现在是 width:100%，直接铺满 103×46 的 li —— 但这 14 张 logo 图虽然画布一样大，**图形在画布里的占比却差别很大**：美的/格力/华为的图形几乎顶满 180×80 的上下边缘，而 UL / BYD / SGS 的图形只占中间一小团。铺满之后，第一行三张「白卡」（其实就是图片自己的白底）互相之间只剩 9px 缝，视觉上连成一条白带；下面各行因为图形小、白边宽，卡片之间的灰缝看起来有 30px 以上 —— 于是第一行显得凸出、不一致。做法：把「白卡」从图片内部搬到 li 上。 ① li 统一给 56px 高的白色圆角卡 + flex 居中； ② 图片不再铺满，改成等比内缩居中（最大 78% 宽 / 66% 高）。因为 14 张图的四角实测都是纯白，图片白底与 li 白底无缝衔接，不会出现「两块白不一样白」的接缝。预期（375px）：14 张白卡尺寸完全一致（103×56）； logo 图形最大 80×37，四周留白统一；第一行不再顶住底纹、不再连片；与上方文字块保持 .mb-50 的 30px 间距。 -------------------------------------------------------------------------- */ .model-8 { padding-top: 14px !important; /* 补上顶边留白（原来被 li margin-top:0 吃掉了） */ padding-bottom: 16px !important; } .parter-list { margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; } .parter-list li { float: none !important; width: 31.5% !important; height: 56px !important; /* 统一卡片高度（原为图片自然高 46px） */ margin: 0 0 14px 0 !important; overflow: hidden !important; border-radius: 10px !important; background-color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .parter-list li span { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } .parter-list li span img { display: block !important; width: auto !important; height: auto !important; max-width: 78% !important; max-height: 66% !important; /* 56 × 66% ≈ 37px，上下各留 9px */ object-fit: contain !important; } /* -------------------------------------------------------------------------- 22.2 联系我们页 · 四大卖点四宫格（.cont-ser > .wrap > ul > li × 4） -------------------------------------------------------------------------- 结构：li > strong（标题） + img（配图） + p（说明）第 16.17 节把四格改成 2×2（width:50%），第 16.47 节又把 li 的内边距改成 0 6px 16px —— 但那是 **padding（内边距）**，不是 margin：内边距只让卡片里的图片内缩，卡片**自身**的边界盒依旧背靠背。实测（375px，mobile.css v6）： li#0 x = 12 ~ 188 li#1 x = 188 ~ 363 → 横向缝 0px li#0 y = 988 ~ 1213 li#2 y = 1213 ~ 1438 → 纵向缝 0px 卡片自带的浅色纹理底（cont-line.png）+ 10px 圆角阴影因此完全贴死，画面里只剩下「图片因 padding 内缩而露出的 12px」这一点视觉缝隙 —— 这正是「四张图上下左右太紧密，没有一点空隙」。做法：用 flex gap 撑开真实缝隙（列 12px / 行 14px）， li 宽度相应从 50% 收到 calc(50% - 6px)，两列加缝正好 100%： 2 × (50% - 6px) + 12px = 100% 同时保留 justify-content:space-between 作为**老内核兜底** —— flex gap 是 Chrome 84+ 才支持的属性，百度爬虫/老 WebView 会忽略它，此时 li 宽度已减半，靠 space-between 仍能把 12px 列缝撑出来（行间距降级为 0，但 li 自带 16px 下内边距，图片不会贴死）。卡片内左右内边距从 6px 提到 8px，图片与卡片边缘的呼吸同步加大。预期（375px）：卡片横向缝 12px、纵向缝 14px（原 0 / 0）；图与图之间 8 + 12 + 8 = 28px（原 12px）；卡片宽 169.5px，图片宽 153.5px，仍在 375px 视口内，无横向滚动。 -------------------------------------------------------------------------- */ .cont-ser .wrap > ul { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; /* 老内核兜底：无 gap 时撑开列缝 */ gap: 14px 12px !important; /* 行缝 14px / 列缝 12px */ margin-left: 0 !important; margin-right: 0 !important; } .cont-ser .wrap > ul > li { width: calc(50% - 6px) !important; margin: 0 !important; padding: 0 8px 16px !important; box-sizing: border-box !important; } } /* ========================================================================== haidatest.cn 站群 · 移动端自适应覆盖层 mobile.css 第 23 节（v8）承接关系：追加在「第 22 节（v7）」之后，新增，不改动前面任何一条。本轮用户反馈四项，其中三项是「行为」而非「样式」，由配套的 /imgs/rightAsk.js 追加补丁实现（该文件五站同源、md5 一致、同为 2178 字节，与 mobile.css 一样是「一文件传五站」）： A. QQ客服 —— 点一下直接进入 QQ 临时会话（QQ 3377870186） B. 联系热线 —— 点一下直接拉系统拨号盘（tel:13544641555） C. 微信客服 —— 点一下直接复制微信号 13544641555（带轻提示） D. 内页搜索 —— 聚焦不再放大整页；提交后能真正拿到结果本节只承担这四项里的「样式侧」，并为「JS 没传/没生效」留降级口子。作用域：仅 @media (max-width:900px)，与前面各节一致，桌面端零影响。 -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* ---------- 23.1 搜索输入框字号钉到 16px：阻止聚焦时整页放大 ---------- 现象：手机点一下搜索框，整页被放大，要双击才缩回（用户截图 #3）。根因：iOS Safari 与 Android Chrome 对 font-size < 16px 的输入框，聚焦时会强制把整个视口放大约一档（等效到 16px 字号）。本站 .p102-search-1-inp1 自身没写 font-size —— 桌面 CSS 只给了 width / height / line-height（见 6087bff2e4b050844f966264.css），字号一路继承自 body，必然 < 16px，所以一点就放大。约束：模板里没有 maximum-scale，站点又是静态 HTML、无 CMS 可改，加 user-scalable=no 不现实 —— 16px 是唯一不改模板的解法。覆盖：内页/详情页 .p102-search-1-inp1、首页 .sea .sou .txt，以及模板里那个 duplicate 的 .input1 / input[name=q]。影响面：全部包在 @media (max-width:900px) 内，桌面端零影响。 */ .p102-search-1-inp1, .p102-search-1 .input1, .p102-search-1 input[name="q"], .sea .sou .txt, .sea input.txt { font-size: 16px !important; line-height: 1.5 !important; } /* 16px 后原 25px 大圆角 + 20px 内边距会显挤，收一档内边距，高度给足触控 */ .p102-search-1-inp1 { min-height: 40px !important; padding: 0 16px !important; } .sea .sou .txt { min-height: 38px !important; } /* 占位文字比正文小一号，视觉更干净；不影响防缩放（缩放只看 input 的 font-size） */ .p102-search-1-inp1::placeholder, .sea .sou .txt::placeholder { font-size: 14px !important; color: #9aa5b5 !important; } /* ---------- 23.2 手机端隐藏底部条的原生弹层 .hideBox ---------- rightAsk.js 给 .right_nav 的 li[0..2] 绑了 mouseover 弹层；触屏轻触会先触发 mouseover（弹出「在线咨询 / 咨询电话 / 微信扫一扫」），再补发 click —— 用户看到的就是截图 #1 / #2 / #4 里那三个浮层。补丁上线后这三项改成「点一下直接动作」，弹层纯属多余且会挡画面。隐藏规则挂在 html.hdt-mb 开关类下，由 rightAsk.js 补丁确认接管后自己挂上： · 只传了 CSS、没传 JS → 不加类 → 弹层照旧，QQ 入口不会变残（降级安全）； · 两者都传 → 用 !important 压过 jQuery fadeIn 写下的内联 display:block。 */ html.hdt-mb .right_nav li .hideBox, html.hdt-mb .right_nav .hideBox .hb { display: none !important; } /* ---------- 23.3 操作反馈轻提示 #hdt-toast ---------- 由 rightAsk.js 补丁动态创建（复制微信号成功/失败、空关键词提交）。位置放在吸底操作条上方，避开拇指与安全区。 */ #hdt-toast { position: fixed !important; left: 50% !important; bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; transform: translate(-50%, 10px) !important; max-width: 78vw !important; padding: 10px 18px !important; background: rgba(5, 56, 130, .94) !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.5 !important; text-align: center !important; border-radius: 22px !important; box-shadow: 0 6px 20px rgba(6, 38, 82, .28) !important; white-space: pre-line !important; /* 允许 \n 换行（复制提示两行） */ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 10050 !important; /* > .right_nav 的 9999 */ transition: opacity .22s ease, transform .22s ease, visibility .22s !important; } #hdt-toast.hdt-on { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; } } /* ============================================================================ haidatest.cn 站群 · 移动端自适应覆盖层 mobile.css 第 24 节（v9 · 桌面端） ============================================================================ ⚠️ 本文件从第 0 节到第 23 节，每一节都包在 @media (max-width:900px) 里 —— 桌面端「一行不生效」。本节是该文件**第一条桌面端规则**，专门修一个桌面端的真 bug，作用域 901px ~ 1919px。【问题】2026-09-20 用户报障（附 1366px 笔记本截图）：产品详情页 / 产品栏目页顶部的 banner，在「小屏笔记本」上右侧被切掉一大块，文案「万能拉力试验机，厂家直销…」只剩半行；1920 及以上的大屏完全正常。【根因】三段实测数据： ① banner 图（uploadfile/.../2022xxxx.jpg）真实像素 = 1920 × 350； ② 模板给写了**内联** style="MAX-WIDTH: none!important"。内联 !important 的优先级高于任何样式表 !important，把一切响应式约束废掉 —— 图片永远按原始 1920px 渲染； ③ 父级 .ty-banner-1 在桌面样式表里**只有一条** text-align:center （pcproshow.css 与 6087bff2e4b050844f966264.css 中都是），既没有宽度约束、也没有 overflow:hidden。 ⇒ 视口 < 1920px 时图片必然溢出容器；而 body 上有 overflow-x:hidden，横向滚动条不会出现，溢出部分被**静默裁掉** —— 用户只能看到「显示不全」，看不到「可以拖」。又因为 text-align:center 对**内联溢出内容**不起作用（浏览器把这样的行盒左对齐），被裁掉的部分全在**右侧**，左侧完好。实测（lixue.haidatest.cn/szllj/91.html，一行 JavaScript 量出来的）：视口 1920 → 完整；1680 → 右裁 240px；1600 → 320px；1440 → 480px； 1366 → 554px；1280 → 640px；1152 → 768px；1024 → 896px。【为什么手机端没事、首页也没事 —— 这是两条路都没走到的夹缝】 · 手机端（≤900px）：本文件第 18 节已有 .ty-banner-1 { height:auto !important } .ty-banner-1 img { width:100% !important; height:auto !important } 注意它改的是 **width**（不是 max-width）—— width 与内联锁死的 max-width 是两个不同属性、并不冲突（width 定尺寸，max-width:none 表示不设上限），所以**绕开**了内联 !important，图片乖乖缩到容器宽。这条路救了手机。 · 首页（5 站）用的是 .banner（slick 轮播），桌面样式表里本来就有 .banner img { width:100% } —— 天生自适应。这条路救了首页。 · 剩下的「内页 banner + 桌面视口」正好两条路都够不到 ⇒ 只有它坏。【修法】把第 18 节那两条规则原样搬到桌面区间，作用域只圈 901~1919px。 · 上界取 1919px 而**不是**无条件全桌面：视口 ≥1920 时图片本身就是 1920、居中原尺寸显示、现状正常（用户也确认大屏正常）；若无条件 width:100%，在 2560 / 4K 屏上会把 1920 的图**放大**到屏宽，画面发虚。不动它。 · 只写 .ty-banner-1，**不复制**第 18 节的 .insideban02 / .insideban03： .insideban02 是的类，`.insideban02 img` 等价于「全页所有图片 width:100%」——手机端那样写是刻意的整页兜底，桌面端照抄会把 logo、缩略图、图标全部撑满，是灾难。桌面端必须**只针对 banner 这一个容器**。 · 顺带消掉一个隐性错位：.ty-banner-1 上还有内联 height:347px，而图片实际高 350px，桌面端原本被图片盖住 3px。容器改 height:auto 后高度随图片等比，错位自然消失（样式表 !important 可以压过内联的**非** important 声明，这条不涉及内联 !important，没有优先级问题）。 · 加 display:block 去掉 img 作为内联元素时行盒基线下方那 4~5px 的「降部留白」—— 否则 banner 与下方面包屑之间会多一条浅色细缝。【回滚】整段删掉即回到 v8 状态。【验证】桌面 1366/1280/1152/1024 无裁切、无横向溢出；1920 及以上与原状逐像素一致；手机 390 与 v8 完全一致（本节不落在 ≤900px 区间）。【覆盖页面】产品栏目页（/xxx/）、产品总览页（/product/）、产品详情页（/xxx/nnn.html）—— 4 个子站 zhibao / huanjing / lixue / jiaju 共 4 套， www 主站不使用 .ty-banner-1，无影响。 ============================================================================ */ @media screen and (min-width: 901px) and (max-width: 1919px) { /* ---------- 24.1 内页 banner 容器：撤掉模板内联的固定高度 347px ---------- */ .ty-banner-1 { height: auto !important; } /* ---------- 24.2 内页 banner 图片：用 width 绕开内联的 max-width:none!important ---------- 与第 18 节的手机端规则完全同形，只是作用域换成桌面区间。 */ .ty-banner-1 img { width: 100% !important; height: auto !important; display: block !important; } }

XXX视频介绍

类目名

热销产品

xxx