/* ============================================================ PC 端 gywm 发展历程图片完整显示 ------------------------------------------------------------ 三个 tab 的图片原图比例不同，容器固定 412x296，使用 cover 会 对较宽图片过度裁切。改为 contain，让图片在容器内完整展示。 ============================================================ */ #smv_con_198_49 .w-slide .content-box-inner { background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; } /* ============================================================ mobile-responsive.css 上海和轩胶粘科技 - 移动端自适应适配 ------------------------------------------------------------ 零破坏原则： - 不修改任何现有HTML结构 - 不修改任何现有CSS文件 - 仅通过 @media (max-width: 768px) 媒体查询覆盖 - PC端 (>1024px) 完全不受影响 ============================================================ */ /* ============================================================ jscx.html 质量管控 Step 标签颜色加深 ------------------------------------------------------------ Step 1~5 原色 #aaaaaa 在浅色卡片上几乎看不清， 改为与页面正文一致的 #555555。 ============================================================ */ .page-jscx #txtc_con_364_37 strong, .page-jscx #txtc_con_368_37 strong, .page-jscx #txtc_con_372_37 strong, .page-jscx #txtc_con_376_27 strong, .page-jscx #txtc_con_380_30 strong { color: #555555 !important; } /* ============================================================ 一、基础重置 ============================================================ */ @media (max-width: 768px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; } body { font-size: 16px !important; line-height: 1.6 !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } /* 禁用水平滚动 */ * { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } /* ============================================================ 二、主容器宽度适配 - 消除 1300px 固定宽度 ============================================================ */ /* 主内容包裹器 - 去除 min-width:1300px */ #mainContentWrapper, #mainContentWrapper > div { min-width: 100% !important; width: 100% !important; max-width: 100% !important; } /* 页头容器 */ .header { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 60px !important; margin: 0 !important; padding: 0 !important; } /* 页脚容器 */ .footer { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* CMS内容容器 */ .smvContainer { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: auto !important; } .smvWrapper { min-width: 100% !important; width: 100% !important; max-width: 100% !important; } /* 全列内部容器 */ .fullcolumn-inner, .fullcolumn-inner.smAreaC { width: 100% !important; max-width: 100% !important; } /* 内容区域 */ #smv_MainContent, #smv_Main { width: 100% !important; max-width: 100% !important; height: auto !important; } /* ============================================================ 三、绝对定位 → 静态定位转换 ============================================================ */ /* 所有 CMS 绝对定位元素改为静态 */ .smartAbs { position: static !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; } /* jscx.html 生产制造平台 banner：恢复堆叠上下文。 该容器内部 bannerWrap_con_258_20 通过 fullScreen 生成， PC 端 position:absolute 时容器自然形成堆叠上下文， bannerWrap 以 z-index:-1 作为背景层；移动端 .smartAbs 改为 static 后堆叠上下文消失，z-index:-1 落到根背景之后导致背景 图"消失"。这里单独恢复 position:relative + z-index:0， 让 bannerWrap 重新回到该板块背景层。 */ html.mobile-nav-ready #smv_con_258_20 { position: relative !important; z-index: 0 !important; overflow: hidden !important; } /* jscx.html 质量管控板块：5 个 Step 卡片移动端两列排列。 PC 端 5 个卡片横向 absolute 排列，每个 240x126；移动端 .smartAbs 把它们改成 static 后默认纵向堆叠。这里把 .fullcolumn-inner 设为 flex 换行，标题/描述占满一行，5 个 area 卡片各占 50%。 */ html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; } /* 标题与描述独占一行 */ html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > #smv_con_298_41, html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > #smv_con_318_53 { width: 100% !important; } /* 5 个 Step 卡片：每行两个 */ html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) { width: 50% !important; max-width: 50% !important; height: auto !important; min-height: 70px !important; margin: 0 0 8px 0 !important; padding: 8px !important; position: relative !important; left: auto !important; top: auto !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } /* 卡片内部文字与图标水平排列 */ html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .w-container, html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .smAreaC { width: 100% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; position: relative !important; } html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .text_Style1, html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .image_Style1 { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin: 0 !important; } html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .text_Style1 { flex: 1 1 auto !important; } html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .image_Style1 { flex: 0 0 auto !important; margin-left: 6px !important; } html.mobile-nav-ready body.page-jscx #smv_con_297_41 .fullcolumn-inner > div[ctype="area"]:not(#smv_con_386_13):not(#smv_con_387_16) .image_Style1 img { width: 36px !important; height: 36px !important; max-width: 100% !important; } /* 保留固定定位的元素（如浮动客服图标） */ .smartFixed { position: fixed !important; } /* yibuFrameContent 宽度 */ .yibuFrameContent { width: 100% !important; max-width: 100% !important; height: auto !important; overflow: visible !important; } /* ============================================================ 四、隐藏页脚联系信息区（避免 absolute 转 static 后跑到内容前面覆盖） ============================================================ */ /* PC 端 #smv_tem_88_44 通过 absolute 定位在页面底部，包含页脚导航、 服务热线、地址电话等。移动端取消 absolute 后它会按 DOM 顺序排到 内容前面，遮挡主体。直接隐藏该区域，主要联系方式已在"联系我们"页面提供。 */ #smv_tem_88_44, #bannerWrap_tem_88_44, #smv_tem_88_44 * { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* 页头"服务热线"图片（PC 端绝对定位在 logo 旁，移动端会撑满宽度遮挡内容） */ #smv_tem_171_1, #smv_tem_171_1 .w-image-box, #img_smv_tem_171_1 { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* ============================================================ 五、页头 LOGO 大小限制 ============================================================ */ /* 移动端页头 LOGO 图片（PC 端 98×67，移动端会被 smartAbs 撑宽） */ #smv_tem_106_51, #div_tem_106_51 { width: auto !important; max-width: 70px !important; height: auto !important; max-height: 50px !important; display: inline-block !important; } #img_smv_tem_106_51 { width: 100% !important; max-width: 70px !important; height: auto !important; max-height: 50px !important; display: block !important; } /* ============================================================ 六、导航栏适配（移动端汉堡菜单） ------------------------------------------------------------ 汉堡按钮由 mobile-nav.js 动态创建（不修改现有HTML结构） 点击按钮展开/收起页头导航 ============================================================ */ /* ---- 汉堡菜单按钮（三条横线） ---- */ .mobile-menu-toggle { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 44px !important; height: 44px !important; padding: 10px !important; margin: 0 !important; background: rgba(255, 255, 255, 0.12) !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; cursor: pointer !important; position: fixed !important; top: 14px !important; right: 14px !important; z-index: 10001 !important; -webkit-tap-highlight-color: transparent !important; -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; touch-action: manipulation !important; outline: none !important; } /* 三条横线 */ .mobile-menu-toggle span { display: block !important; width: 24px !important; height: 3px !important; margin: 2px 0 !important; background-color: #ffffff !important; border-radius: 2px !important; transition: transform 0.3s ease, opacity 0.3s ease !important; } /* 展开时：三条横线变为 X */ html.mobile-nav-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg) !important; } html.mobile-nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0 !important; } html.mobile-nav-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg) !important; } /* ---- 页头导航：默认收起（JS就绪后隐藏） ---- */ html.mobile-nav-ready .nav_pc_t_3 .w-nav { display: none !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* ---- 点击汉堡按钮后展开：纵向堆叠、可滚动 ---- */ html.mobile-nav-ready.mobile-nav-open .nav_pc_t_3 .w-nav { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; position: fixed !important; top: 56px !important; left: 0 !important; width: 100% !important; max-height: calc(100vh - 56px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background-color: #1a1a1a !important; z-index: 10000 !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important; } html.mobile-nav-ready .nav_pc_t_3 .w-nav:after { display: none !important; } /* 导航项 - 纵向堆叠 */ .nav_pc_t_3 .w-nav .w-nav-inner { float: none !important; width: 100% !important; height: auto !important; min-height: 48px !important; line-height: 48px !important; position: relative !important; display: block !important; background-color: #1a1a1a !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } .nav_pc_t_3 .w-nav .w-nav-item { padding: 0 16px !important; height: 48px !important; line-height: 48px !important; } .nav_pc_t_3 .w-nav .w-nav-item-link { height: 48px !important; line-height: 48px !important; text-align: left !important; padding-left: 16px !important; } .nav_pc_t_3 .w-nav .w-nav-item-link .w-link-txt, .nav_pc_t_3 .w-nav .w-nav-item-link .mw-iconfont { font-size: 16px !important; } /* 子导航 - 默认收起，点击一级菜单后展开（手风琴） */ html.mobile-nav-open .nav_pc_t_3 .w-nav .w-subnav { display: none !important; position: static !important; width: 100% !important; max-width: 100% !important; background-color: rgba(0, 0, 0, 0.7) !important; border-left: 3px solid #0097d4 !important; overflow: visible !important; } /* 展开当前一级菜单下的二级 */ html.mobile-nav-open .nav_pc_t_3 .w-nav .w-nav-inner.subnav-open > .w-subnav { display: block !important; } .nav_pc_t_3 .w-nav .w-subnav.userWidth { width: 100% !important; } .nav_pc_t_3 .w-nav .w-subnav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .nav_pc_t_3 .w-nav .w-subnav-item .w-subnav-link { height: 44px !important; line-height: 44px !important; font-size: 15px !important; padding: 0 16px 0 32px !important; color: #ffffff !important; } /* 含子菜单的父级指示箭头 */ .nav_pc_t_3 .w-nav .w-nav-inner.has-subnav > .w-nav-item > .w-nav-item-link::after { content: '›' !important; float: right !important; font-size: 20px !important; line-height: 48px !important; color: rgba(255, 255, 255, 0.7) !important; transition: transform 0.3s ease !important; } .nav_pc_t_3 .w-nav .w-nav-inner.has-subnav.subnav-open > .w-nav-item > .w-nav-item-link::after { transform: rotate(90deg) !important; } /* 展开菜单时隐藏第三方悬浮组件（在线咨询、百度商桥等）， 避免其 z-index 极高而遮盖导航菜单 */ html.mobile-nav-open .embed-icon, html.mobile-nav-open .embed-hot-issue-item, html.mobile-nav-open [class*="consult"], html.mobile-nav-open [class*="online-service"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* 菜单展开时锁定 body 滚动，防止背后内容跟随滚动 */ html.mobile-nav-open, html.mobile-nav-open body { overflow: hidden !important; height: 100% !important; } /* 滑动指示器隐藏 */ .nav_pc_t_3 .w-nav .sliding-box { display: none !important; } /* 页脚导航 - 保持横向排列 */ .nav_pc_t_7 .w-nav { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; } .nav_pc_t_7 .w-nav .w-nav-inner { width: auto !important; height: 36px !important; line-height: 36px !important; border-bottom: none !important; } /* ============================================================ 七、产品列表适配 ============================================================ */ /* 产品列表容器 */ .w-list, .w-list .w-list-ul { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 产品列表项 - 自适应宽度 */ .w-list .w-list-ul .w-list-item { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 16px 0 !important; padding: 0 !important; overflow: hidden !important; } /* 产品图片容器 */ .w-list .w-list-ul .w-list-item .w-list-pic, .w-list .w-list-ul .w-list-item .w-list-link .w-list-pic { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 200px !important; overflow: hidden !important; } .w-list .w-list-ul .w-list-item .w-list-pic .w-list-link, .w-list .w-list-ul .w-list-item .w-list-link .w-list-pic .w-list-link { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 200px !important; } /* 产品图片 */ .w-list .w-list-ul .w-list-item .w-listpic-in, .w-list .w-list-ul .w-list-item .w-list-link .w-list-pic .w-listpic-in, .w-list .w-list-ul .w-list-item .w-list-pic .w-list-link .w-listpic-in { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 200px !important; object-fit: cover !important; } /* 产品链接容器 */ .w-list .w-list-ul .w-list-item .w-list-link { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; } /* 产品标题 */ .w-list .w-list-ul .w-list-item .w-list-title, .w-list .w-list-ul .w-list-item .w-list-link .w-list-title { font-size: 16px !important; line-height: 1.5 !important; height: auto !important; padding: 8px 12px !important; -webkit-line-clamp: 2 !important; } /* 产品描述 */ .w-list .w-list-ul .w-list-item .w-list-desc, .w-list .w-list-ul .w-list-item .w-list-link .w-list-desc { font-size: 14px !important; line-height: 1.5 !important; height: auto !important; padding: 0 12px !important; -webkit-line-clamp: 3 !important; } /* 产品底部信息 */ .w-list .w-list-ul .w-list-item .w-list-bottom, .w-list .w-list-ul .w-list-item .w-list-link .w-list-bottom { padding: 0 12px 12px 12px !important; height: auto !important; } /* 产品价格 */ .w-list .w-list-ul .w-list-item .w-list-price { font-size: 16px !important; height: auto !important; line-height: 36px !important; padding: 0 12px !important; } /* 产品按钮 */ .w-list .w-list-ul .w-list-item .w-list-btn { font-size: 14px !important; height: 40px !important; line-height: 40px !important; padding: 0 16px !important; margin: 8px 12px !important; } /* ============================================================ 八、通用图片适配 ============================================================ */ img { max-width: 100% !important; height: auto !important; } /* ============================================================ 九、按钮适配 ============================================================ */ .w-button { display: inline-block !important; font-size: 16px !important; padding: 8px 20px !important; min-height: 44px !important; line-height: 1.5 !important; } .w-button-position { padding: 8px 16px !important; min-height: 44px !important; } .w-button .w-button-text { font-size: 16px !important; } .w-button .w-button-icon { font-size: 16px !important; } /* ============================================================ 十、表单适配 ============================================================ */ /* 表单列布局改为纵向 */ .w-columns { display: block !important; } .w-columns > .w-columns-item { float: none !important; width: 100% !important; max-width: 100% !important; display: block !important; min-height: 0 !important; } /* 输入框 */ .w-input .w-input-title-box { font-size: 16px !important; padding: 8px 0 !important; } .w-input .w-input-weight-box .w-input-weight-style { padding: 8px 12px !important; } .w-input .w-input-weight-box .w-input-weight-inner { font-size: 16px !important; height: 32px !important; line-height: 32px !important; } /* 文本域 */ .w-textarea .w-textarea-title-box { font-size: 16px !important; padding: 8px 0 !important; } .w-textarea .w-textarea-weight-box .w-textarea-weight-style { padding: 8px 12px !important; } .w-textarea .w-textarea-weight-box .w-textarea-weight-inner { font-size: 16px !important; line-height: 1.5 !important; min-height: 80px !important; } /* 提交按钮 */ .w-submit { width: 80% !important; max-width: 300px !important; padding: 12px 20px !important; min-height: 48px !important; } .w-submit .w-submit-text { font-size: 16px !important; height: 48px !important; line-height: 48px !important; } .w-submit-position { padding: 8px 16px !important; height: 48px !important; line-height: 48px !important; } /* 表单标题 */ .w-formtitle .w-formtitle-title { font-size: 20px !important; line-height: 1.5 !important; } /* ============================================================ 十一、面包屑适配 ============================================================ */ .w-crumbs { width: 100% !important; max-width: 100% !important; font-size: 14px !important; padding: 10px 16px !important; line-height: 1.8 !important; word-break: break-all !important; } .w-crumbs-item, .w-crumbs-category, .w-crumbs-caption { font-size: 14px !important; line-height: 1.8 !important; } /* ============================================================ 十二、分页适配 ============================================================ */ .pager { width: 100% !important; padding: 10px 16px !important; } .pager-text { font-size: 14px !important; line-height: 1.8 !important; height: auto !important; } .pagination { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; } .pagination span, .pagination a { padding: 8px 14px !important; margin: 2px !important; font-size: 14px !important; min-width: 44px !important; min-height: 44px !important; line-height: 28px !important; text-align: center !important; } /* ============================================================ 十三、页底信息适配 ============================================================ */ .page-bottom--area { padding: 8px 16px !important; } .page-bottom--area .bottom-content { width: 100% !important; max-width: 100% !important; } .page-bottom--area .bottom-content .top-area { margin-bottom: 8px !important; } .page-bottom--area .bottom-content .display-style { display: block !important; margin: 4px 0 !important; text-align: center !important; } .page-bottom--area .bottom-content .divider { display: none !important; } .page-bottom--area .bottom-content .common-style { font-size: 13px !important; line-height: 1.6 !important; } /* ============================================================ 十四、富文本内容适配 ============================================================ */ /* 所有富文本容器 */ div[class*="con_"][class*="_ "] p, div[class*="con_"] p { font-size: 16px !important; line-height: 1.8 !important; word-break: break-word !important; } div[class*="con_"] h1 { font-size: 22px !important; line-height: 1.4 !important; } div[class*="con_"] h2 { font-size: 20px !important; line-height: 1.4 !important; } div[class*="con_"] h3 { font-size: 18px !important; line-height: 1.4 !important; } div[class*="con_"] h4, div[class*="con_"] h5, div[class*="con_"] h6 { font-size: 16px !important; line-height: 1.4 !important; } /* 表格适配 */ div[class*="con_"] table { width: 100% !important; max-width: 100% !important; display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } div[class*="con_"] table td, div[class*="con_"] table th { font-size: 14px !important; padding: 8px !important; word-break: break-word !important; } /* ============================================================ 十五、轮播图/Banner适配 ------------------------------------------------------------ 说明：Banner 为 Jssor 全屏轮播，PC 端按固定高度初始化， 移动端会保留原始高度导致只显示局部。此处通过 CSS 变量 --banner-ratio（由 mobile-nav.js 读取背景图自然宽高比后 写入）配合 aspect-ratio 让 Banner 高度随宽度等比缩放， 实现整图完整展示。 ============================================================ */ /* 轮播外层容器（fullpageSlide）高度自适应 */ div[ctype="fullpageSlide"], div[id^="smv_con_"][ctype="fullpageSlide"] { height: auto !important; min-height: 0 !important; } .w-slide { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; /* 宽高比由 JS 根据背景图自然尺寸写入，默认 2.6 */ aspect-ratio: var(--banner-ratio, 2.6) !important; } /* 轨道与每张 slide 填满容器（覆盖 Jssor 原始固定高度） 注意：绝不能覆盖 position/left/top —— Jssor 靠这些 inline 值驱动轮播位移，一旦 !important 锁定 slide 就永远不滚动。 这里只约束尺寸，让每张 slide 按 Banner 宽高比等比缩放。 */ .w-slide .w-slide-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; } .w-slide .w-slide-inner > .content-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; } /* 背景图/遮罩层填满所在 slide，保证 cover 完整展示 */ .w-slide .w-slide-inner > .content-box > .content-box-inner, .w-slide .w-slide-inner > .content-box > .w-slide-mask, .w-slide .w-slide-inner > .content-box > .video-box-inner { width: 100% !important; max-width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; } .w-slide .w-slide-inner > .content-box img { width: 100% !important; max-width: 100% !important; height: auto !important; } /* 轮播左右箭头：移动端尺寸缩小并垂直居中，避免遮挡 Banner */ .w-slide .w-slide-arrowl, .w-slide .w-slide-arrowr { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; padding: 0 !important; line-height: 28px !important; background-color: rgba(0, 0, 0, 0.4) !important; border-radius: 4px !important; overflow: hidden !important; } .w-slide .w-slide-arrowl { left: 6px !important; right: auto !important; } .w-slide .w-slide-arrowr { left: auto !important; right: 6px !important; } .w-slide .w-slide-arrowl .iconfont, .w-slide .w-slide-arrowr .iconfont { font-size: 14px !important; } /* ============================================================ 十六、容器和布局适配 ============================================================ */ .w-container { position: relative !important; width: 100% !important; max-width: 100% !important; height: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; } .w-container > div { width: 100% !important; max-width: 100% !important; height: auto !important; position: relative !important; } /* ============================================================ 十七、浮动客服图标适配 ============================================================ */ .scd-maintenance-icon { left: 10px !important; bottom: 10px !important; width: 32px !important; z-index: 9999 !important; } /* ============================================================ 十八、通用文字和链接优化 ============================================================ */ a { font-size: 16px !important; } /* 小号文字最小14px */ .text-small, .text-xsmall, .text-xxs { font-size: 14px !important; } /* ============================================================ 十九、隐藏不必要元素 ============================================================ */ /* 隐藏PC端浮动侧边栏（如有） */ .w-floatmenu, .w-sidebar { display: none !important; } /* 隐藏移动端侧边分类导航（红绿分类菜单） */ .category_Style5, [class*=" category_Style"], .esmartMargin[ctype="category"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ============================================================ 二十、产品分类列表适配 ============================================================ */ .listproductcategory_Style2 { width: 100% !important; max-width: 100% !important; } /* 产品分类模板 */ .w-productcategory { width: 100% !important; max-width: 100% !important; } .w-productcategory .w-productcategory-item { width: 100% !important; max-width: 100% !important; display: block !important; float: none !important; margin: 0 0 12px 0 !important; } /* ============================================================ 二十点一、解决方案列表页专用适配（jjfa 下行业方案入口页） ------------------------------------------------------------ 问题：移动端 banner 与下方列表紧贴；列表项为左图右文， 缩略图大小不一。 处理：banner 与列表之间增加 24px 间距；列表项强制上图下文； 缩略图统一 200px 高度、object-fit:cover。 ============================================================ */ /* banner 与列表间距 */ html.mobile-nav-ready body.solution-list-page .w-list, html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul { margin-top: 24px !important; } /* 列表项改为上图下文 */ html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul .w-list-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; position: relative !important; float: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* 列表容器 article 也取消固定高度 */ html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul article { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* 图片容器统一规格：取消 PC 端 absolute 定位 */ html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul .w-list-item .w-list-pic, html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul .w-list-item .w-list-piclink { display: block !important; position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: 200px !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 缩略图统一裁剪 */ html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul .w-list-item .w-listpic-in { width: 100% !important; max-width: 100% !important; height: 200px !important; min-height: 0 !important; object-fit: cover !important; display: block !important; } /* 文字区回到下方 */ html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul .w-list-item .w-list-r, html.mobile-nav-ready body.solution-list-page .w-list .w-list-ul .w-list-item .w-list-r-in { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 12px !important; float: none !important; } /* ============================================================ 二十一、新闻/文章列表适配 ============================================================ */ .w-list .w-list-ul .w-list-item .w-list-r { padding-left: 0 !important; } .w-list .w-list-ul .w-list-item .w-list-r .w-list-r-in { padding-left: 0 !important; } .w-list .w-list-ul .w-list-item .w-list-title .w-list-titlelink { font-size: 16px !important; line-height: 1.5 !important; } .w-list .w-list-ul .w-list-item .w-list-desc { font-size: 14px !important; line-height: 1.5 !important; } .w-list .w-list-ul .w-list-item .w-list-bottom .w-list-date { font-size: 13px !important; } .w-list .w-list-ul .w-list-item .w-list-bottom .w-list-viewnum { font-size: 13px !important; float: none !important; display: inline-block !important; } /* ============================================================ 二十二、产品详情页适配 ============================================================ */ /* 产品图片展示 */ .w-bigimglist, .w-slider3, .w-imglist { width: 100% !important; max-width: 100% !important; } .w-bigimglist .w-imglink, .w-slider3 .w-imglink { width: 100% !important; max-width: 100% !important; } .w-bigimglist img, .w-slider3 img, .w-imglist img { max-width: 100% !important; height: auto !important; } /* ============================================================ 二十三、通用宽度覆盖 - 消除所有固定px宽度 ============================================================ */ /* 针对内联style中width为固定px的元素 */ div[style*="width: 1300px"], div[style*="width:1300px"] { width: 100% !important; max-width: 100% !important; } div[style*="min-width: 1300px"], div[style*="min-width:1300px"] { min-width: 100% !important; } div[style*="width: 1200px"], div[style*="width:1200px"] { width: 100% !important; max-width: 100% !important; } /* ============================================================ 二十四、间距优化 ============================================================ */ /* 主内容区域内边距 */ #smv_MainContent { padding: 0 !important; } /* 各section之间增加间距 */ .smvContainer > div[id^="smv_con_"], .smvContainer > div[id^="smv_tem_"] { margin-bottom: 0 !important; position: static !important; } /* ============================================================ 二十五、链接点击区域优化 ============================================================ */ a.w-nav-item-link, a.w-subnav-link, a.w-list-link, a.w-crumbs-item, a.w-list-titlelink { min-height: 44px !important; display: block !important; } .w-nav-item-link { padding: 0 16px !important; } /* ============================================================ 二十六、隐藏页头h1条（SEO用，移动端隐藏避免与汉堡按钮重叠） ============================================================ */ body > h1:first-of-type { display: none !important; } /* ============================================================ 二十七、noscript 适配 ============================================================ */ noscript div { padding: 16px !important; text-align: center !important; } noscript h2 { font-size: 18px !important; } noscript p { font-size: 14px !important; line-height: 1.6 !important; } /* ============================================================ 二十八、首页主 Banner 广告语缩放（避免溢出） ============================================================ */ /* Banner 上的绝对定位文字容器在移动端恢复流式 */ /* 注意：.slideset_AreaC 高度必须撑满 Banner（height:100%）， 否则其内 absolute 的广告语 top:50% 会以高度 0 为基准导致错位 */ #smv_con_710_27 .slideset_AreaC, #smv_con_710_27 #smc_Area0 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; } #smv_con_710_27 .slideset_AreaC .smartAbs { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } /* 广告语：三重 ID 选择器保证特异性压过站点自身 .smartAbs 规则 */ #smv_con_710_27 #smc_Area0 #smv_con_996_23, #smv_con_710_27 #smc_Area0 #txt_con_996_23, #smv_con_710_27 #smc_Area0 #txtc_con_996_23 { width: 92% !important; max-width: 92% !important; height: auto !important; min-height: 0 !important; padding: 16px !important; box-sizing: border-box !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 100 !important; } #smv_con_996_23 .editableContent p, #txtc_con_996_23 p { margin: 0 0 8px 0 !important; padding: 0 !important; word-break: break-word !important; } #smv_con_996_23 .editableContent p:first-child span, #txtc_con_996_23 p:first-child span { font-size: 22px !important; line-height: 1.4 !important; } #smv_con_996_23 .editableContent p:nth-child(2) span, #txtc_con_996_23 p:nth-child(2) span { font-size: 14px !important; line-height: 1.5 !important; } /* 覆盖 inline style 里的固定大字号 */ #smv_con_996_23 [style*="font-size:48px"], #smv_con_996_23 [style*="font-size: 48px"], #smv_con_996_23 [style*="font-size:30px"], #smv_con_996_23 [style*="font-size: 30px"] { font-size: inherit !important; } /* ============================================================ 二十九、移动端全局安全边距 ------------------------------------------------------------ 将原本紧贴屏幕边缘的文本/列表容器增加 16px 左右内边距， 同时保证 Banner、导航等全宽元素不被挤压。 ============================================================ */ #smv_MainContent, #smv_Main > .smvContainer { padding-left: 0 !important; padding-right: 0 !important; } /* 文本、列表、表单等可读内容加边距 */ .yibuFrameContent .editableContent, .w-list:not(.w-product-list), .w-product-list, .w-article-list, .w-form, .w-crumbs, .w-input, .w-textarea, .pager, .page-bottom--area .bottom-content { padding-left: 16px !important; padding-right: 16px !important; } /* 产品列表自身在"产品列表适配"已有 0 padding，这里恢复内部边距 */ .w-product-list .w-list-item { padding-left: 16px !important; padding-right: 16px !important; } .w-product-list .w-list-item .w-list-pic, .w-product-list .w-list-item .w-list-bottom, .w-product-list .w-list-item .w-list-price, .w-product-list .w-list-item .w-list-btn { padding-left: 0 !important; padding-right: 0 !important; } /* 全宽图片容器不加左右内边距 */ .fullcolumn-inner, .fullcolumn-outer, #smv_con_710_27, #lider_smv_con_710_27_wrapper, .w-slide, .header .yibuFrameContent, .footer .yibuFrameContent { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================ 三十、首页产品中心大图防溢出 ------------------------------------------------------------ PC 端产品中心使用 1091x613 的大图绝对定位，移动端取消 absolute 后必须限制图片宽度为 100%。 ============================================================ */ #smv_con_960_59 { height: auto !important; min-height: 0 !important; } #smv_con_960_59 .fullcolumn-inner, #smv_con_960_59 .fullcolumn-inner > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #smv_con_1009_51, #div_con_1009_51, #img_smv_con_1009_51 { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; display: block !important; } #smv_con_961_7 .editableContent, #smv_con_962_7 { padding-left: 16px !important; padding-right: 16px !important; text-align: center !important; } #smv_con_961_7 .editableContent p span { font-size: 28px !important; line-height: 1.3 !important; } /* ============================================================ 三十一-补、首页"关于我们"大标题居中 ------------------------------------------------------------ #smv_con_778_25 内首段为"关于我们"标题（36px）， 其余段落为公司简介正文（16px），仅居中标题，正文保持两端对齐。 ============================================================ */ #smv_con_778_25 .editableContent { padding: 0 16px !important; } #smv_con_778_25 .editableContent p:first-child { text-align: center !important; } #smv_con_779_35 { text-align: center !important; padding-left: 16px !important; padding-right: 16px !important; } /* ============================================================ 三十一、首页新闻板块（公司新闻）移动端重排 ------------------------------------------------------------ PC 端三列绝对定位，移动端改为垂直堆叠； 修复描述被遮盖、大标题位置错误。 ============================================================ */ #smv_con_973_38 { height: auto !important; min-height: 0 !important; padding: 30px 0 !important; } #smv_con_973_38 .fullcolumn-inner { display: flex !important; flex-direction: column !important; position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } #smv_con_973_38 .fullcolumn-inner > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 16px 0 !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* 公司新闻大标题 */ #smv_con_983_9 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; margin: 0 0 20px 0 !important; padding: 0 16px !important; text-align: center !important; order: -1 !important; } #smv_con_983_9 .editableContent { height: auto !important; padding: 0 !important; } #smv_con_983_9 .editableContent p span { font-size: 28px !important; line-height: 1.3 !important; } /* 左侧/中间大图新闻 */ #smv_con_977_38, #smv_con_980_38 { width: 100% !important; height: auto !important; } #smv_con_977_38 .w-list-item, #smv_con_980_38 .w-list-item { width: 100% !important; height: auto !important; padding: 0 !important; margin-bottom: 16px !important; } #smv_con_977_38 .w-list-title, #smv_con_980_38 .w-list-title { height: auto !important; min-height: 0 !important; max-height: none !important; white-space: normal !important; overflow: visible !important; margin: 8px 0 !important; } /* 左侧/中间大图新闻描述：PC 端用 JS 设置固定高度 1 行并加 -webkit-line-clamp:1，移动端必须解除单行限制，否则文字被截断后 仍按 1 行高度占位，与下方日期重叠。移动端改为最多 3 行省略。 */ #smv_con_977_38 .w-list-info, #smv_con_980_38 .w-list-info { height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 1.6 !important; overflow: hidden !important; white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; margin: 8px 0 12px 0 !important; } #smv_con_977_38 .w-list-date, #smv_con_980_38 .w-list-date { display: block !important; margin-top: 8px !important; margin-bottom: 0 !important; } /* 右侧列表式新闻 */ #smv_con_982_38 .w-list-item { width: 100% !important; min-height: 0 !important; height: auto !important; margin-bottom: 16px !important; } #smv_con_982_38 .w-list-r, #smv_con_982_38 .w-list-r-in { padding-left: 0 !important; height: auto !important; } #smv_con_982_38 .w-list-titlelink { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; font-size: 15px !important; line-height: 1.5 !important; } /* 右侧列表 H3 大标题：解除站点样式的固定高度与 hidden 裁剪 */ #smv_con_982_38 .w-list-title { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; white-space: normal !important; } #smv_con_982_38 .w-list-desc { height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; display: block !important; margin: 6px 0 !important; font-size: 13px !important; line-height: 1.6 !important; } #smv_con_982_38 .w-list-bottom { height: auto !important; margin-top: 6px !important; } #smv_con_982_38 .w-list-pic { width: 80px !important; height: 80px !important; overflow: hidden !important; float: left !important; margin-right: 12px !important; } #smv_con_982_38 .w-listpic-in { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ============================================================ 三十二、友情链接水平排列 ------------------------------------------------------------ PC 端每个友链是绝对定位按钮；移动端改为 inline-block 水平 排列，自动换行，去掉蓝色按钮背景，仅保留文字链接。 ============================================================ */ .mobile-friend-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px 24px !important; padding: 16px !important; width: 100% !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; text-align: center !important; } .mobile-friend-links > div[id^="smv_con_"] { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; } .mobile-friend-links .w-button { display: inline !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #0066cc !important; font-size: 14px !important; line-height: 1.5 !important; text-decoration: underline !important; } .mobile-friend-links .w-button-text, .mobile-friend-links .mw-txt { font-size: 14px !important; color: #0066cc !important; } .mobile-friend-links .w-button-icon { display: none !important; } /* 友情链接标签"友情链接：" */ .mobile-friend-links #smv_con_1002_4 .editableContent, .mobile-friend-links #smv_con_1002_4 p, .mobile-friend-links #smv_con_1002_4 span { font-size: 14px !important; color: #333333 !important; text-decoration: none !important; } /* ============================================================ 三十三、首页解决方案板块移动端重排 ------------------------------------------------------------ PC端为一张完整背景图 + 多个绝对定位文字/按钮； 移动端取消固定高度，改为垂直堆叠的卡片式布局。 ============================================================ */ #smv_con_911_17 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 300px !important; padding: 30px 0 !important; background: #f5f7fa !important; } /* 移动端隐藏原始背景图，避免背景文字/图形与卡片内容重叠 */ #smv_con_911_17 .fullcolumn-outer { display: none !important; } #smv_con_911_17 .fullcolumn-inner { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; z-index: 1 !important; } #smv_con_911_17 .fullcolumn-inner > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 16px 0 !important; padding: 0 16px !important; box-sizing: border-box !important; } /* 左侧area容器内部也改为纵向流式，并清除外层 padding 让卡片与两侧对齐 */ #smv_con_911_17 .fullcolumn-inner > #smv_con_952_4, #smv_con_952_4 .w-container, #smv_con_952_4 .smAreaC { width: 100% !important; height: auto !important; min-height: 0 !important; position: relative !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } #smv_con_952_4 .smAreaC > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } #smv_con_952_4 .mobile-solution-item { margin-left: 16px !important; margin-right: 16px !important; } /* 解决方案标题字号 */ #smv_con_941_40, #smv_con_955_4, #smv_con_998_59 { text-align: center !important; } #smv_con_941_40 .editableContent p span, #smv_con_955_4 .editableContent p span, #smv_con_998_59 .editableContent p span { font-size: 20px !important; line-height: 1.4 !important; color: #333333 !important; } /* 解决方案按钮 */ #smv_con_942_40 .w-button, #smv_con_956_4 .w-button, #smv_con_999_30 .w-button { display: inline-block !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 6px 16px !important; margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; background-color: #0097d4 !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; text-decoration: none !important; } #smv_con_942_40 .w-button-position, #smv_con_956_4 .w-button-position, #smv_con_999_30 .w-button-position { padding: 0 !important; min-height: 0 !important; } #smv_con_942_40 .w-button-icon, #smv_con_956_4 .w-button-icon, #smv_con_999_30 .w-button-icon { display: none !important; } /* ============================================================ 三十四、产品中心翻页按钮修复 ------------------------------------------------------------ 隐藏可能覆盖内容的 banner 背景层，提升分页容器层级。 ============================================================ */ #smv_con_960_59 { position: relative !important; z-index: 1 !important; } #smv_con_960_59 .fullcolumn-outer { display: none !important; } #smv_con_960_59 .fullcolumn-inner { position: relative !important; z-index: 2 !important; } #smv_con_1010_58 { position: relative !important; z-index: 3 !important; } #pager_con_1010_58, #pager_con_1010_58 .xn-pager, #pager_con_1010_58 .pagination, #pager_con_1010_58 .pagination a, #pager_con_1010_58 .pagination span { position: relative !important; z-index: 4 !important; } /* ============================================================ 三十五、公司新闻日期与描述重叠修复 ------------------------------------------------------------ JS 根据 line-height 与 data-desc-autolines 计算 max-height， 当 line-height 为无单位相对值时 max-height 会被算成 1px， 导致描述被压扁、日期上移重叠。 ============================================================ */ #smv_con_982_38 .w-list-desc { height: auto !important; max-height: none !important; min-height: 0 !important; line-height: 1.6 !important; overflow: visible !important; display: block !important; -webkit-line-clamp: unset !important; margin: 6px 0 !important; } #smv_con_982_38 .w-list-bottom { height: auto !important; min-height: 0 !important; line-height: 1.5 !important; margin-top: 8px !important; } #smv_con_982_38 .w-list-date { display: inline-block !important; margin-top: 4px !important; } /* ============================================================ 三十六、所有页面隐藏搜索框 ============================================================ */ #smv_tem_149_49, #search_tem_149_49, #smv_tem_149_49 .w-search, #search_tem_149_49 .w-search { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* ============================================================ 三十七、首页解决方案板块进一步修复 ------------------------------------------------------------ 问题： 1. 产品中心分页 float:left 导致父容器不撑高，分页与"解决方案"大标题重叠； 2. "解决方案"大标题字号过大、未清除浮动，在小屏上被挤成竖排； 3. 解决方案背景图自带文字，三个分类标题与"了解更多"按钮堆叠/重叠。 处理： - 分页取消浮动、居中显示、加大点击区域； - 大标题强制清除浮动、缩小字号、居中； - 背景图加半透明遮罩；每个分类用 JS 包成卡片，标题在上、按钮在下。 ============================================================ */ /* 产品中心分页：取消 float，避免溢出到下一个板块 */ #pager_con_1010_58 { float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; padding: 12px 0 !important; margin: 0 !important; z-index: 4 !important; } #pager_con_1010_58 .w-page-square, #pager_con_1010_58 .pagination { display: inline-block !important; float: none !important; padding: 0 !important; margin: 0 !important; } #pager_con_1010_58 .w-page-square li, #pager_con_1010_58 .pagination li, #pager_con_1010_58 .w-page-square a, #pager_con_1010_58 .pagination a, #pager_con_1010_58 .w-page-square span, #pager_con_1010_58 .pagination span { display: inline-block !important; float: none !important; } #pager_con_1010_58 .w-page-square a, #pager_con_1010_58 .pagination a { min-width: 36px !important; min-height: 36px !important; line-height: 36px !important; padding: 0 10px !important; font-size: 14px !important; text-align: center !important; } /* 解决方案大标题：清除分页 float，防止被挤到右侧 */ #smv_con_959_16 { clear: both !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; padding: 30px 16px 10px 16px !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; } #smv_con_959_16 .editableContent { height: auto !important; padding: 0 !important; } #smv_con_959_16 .editableContent p { margin: 0 0 4px 0 !important; padding: 0 !important; } #smv_con_959_16 .editableContent p:first-child span { font-size: 28px !important; line-height: 1.3 !important; color: #333333 !important; } #smv_con_959_16 .editableContent p:nth-child(2) span { font-size: 16px !important; line-height: 1.4 !important; color: #0097d4 !important; } /* 覆盖可能把标题挤成竖排的 inline 大字号与固定宽度 */ #smv_con_959_16 [style*="font-size:44px"], #smv_con_959_16 [style*="font-size: 44px"] { font-size: inherit !important; } /* 解决方案卡片（由 mobile-nav.js 动态包裹） */ .mobile-solution-item { position: relative !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 16px 16px 16px !important; padding: 16px !important; background: #ffffff !important; border-radius: 8px !important; box-sizing: border-box !important; text-align: center !important; z-index: 1 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } .mobile-solution-item > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 8px 0 !important; padding: 0 !important; } .mobile-solution-item > div[id^="smv_con_"]:last-child { margin-bottom: 0 !important; } .mobile-solution-item .editableContent p { margin: 0 !important; padding: 0 !important; } .mobile-solution-item .editableContent p span { font-size: 18px !important; line-height: 1.5 !important; font-weight: bold !important; color: #333333 !important; } .mobile-solution-item .w-button { display: inline-block !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 6px 16px !important; margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; background-color: #0097d4 !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; text-decoration: none !important; } .mobile-solution-item .w-button-position { padding: 0 !important; min-height: 0 !important; } .mobile-solution-item .w-button-text { font-size: inherit !important; color: inherit !important; } .mobile-solution-item .w-button-icon { display: none !important; } /* ============================================================ 第三十八章、cybj.html 页面大标题去重 背景图已包含"产品中心"文字，HTML 文本元素再叠加一层会导致 移动端出现重影/重叠。移动端直接隐藏该文本元素，仅保留背景图。 ============================================================ */ #smv_con_179_15 { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* ============================================================ 第三十九章、隐藏侧边导航后主内容区占满宽度 产品分类结果页与解决方案页原本为主内容区预留了左侧边栏 空间，移动端隐藏侧边栏后需将主内容区拉回左侧并占满宽度。 ============================================================ */ /* 产品分类结果页主列表容器 */ .esmartMargin[ctype="listproductcategory"], #smv_con_38_47 { left: 0 !important; width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } .listproductcategory_Style2 { width: 100% !important; max-width: 100% !important; } /* 解决方案(cybj)页主列表容器 */ #smv_con_236_21 { left: 0 !important; width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } .listproduct_Style5 { width: 100% !important; max-width: 100% !important; } /* ============================================================ 第四十章：产品/新闻详情页 banner 与面包屑修复 ------------------------------------------------------------ 产品详情页：#smv_tem_88_44 原本被第四章当作页脚联系区整体 隐藏，但它实际是 Area3 顶部 banner（含背景图）。恢复显示并 隐藏其中 PC 导航、分隔线、公司联系信息。 新闻详情页：DOM 顺序为 内容 -> 面包屑 -> banner，移动端 static 后顺序颠倒，配合 mobile-nav.js 重排为 banner -> 面包屑 -> 内容。 ============================================================ */ /* 产品详情页顶部全屏 banner（tem_55_48）：DOM 在 #smv_Main 后部， mobile-nav.js 已把它提到 smv_Main 首位；移动端直接用 176049645.png 作为背景图，隐藏 jssor 轮播内部多余结构。 */ html.mobile-nav-ready.product-detail-page #smv_tem_55_48, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .yibuFrameContent, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 #lider_smv_tem_55_48_wrapper { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: 260px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background-image: url('contents/sitefiles2071/10358748/images/176049645.png') !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: cover !important; } /* 隐藏 55_48 轮播内部元素：jssor 原容器、克隆 slides、导航点、 左右箭头、产品详情标题等，只保留外层 wrapper 的静态背景图。 */ html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .w-slide, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 #slider_smv_tem_55_48, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .content-box, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .content-box-inner, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .w-slide-inner, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .w-slide-btn-box, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .w-slide-arrowl, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 .w-slide-arrowr, html.mobile-nav-ready.product-detail-page #smv_tem_55_48 #smc_Area0 { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* 产品详情页：隐藏 Area3 顶部通用 banner（tem_88_44），避免显示 错误的 175932964.png；页面顶部只保留 55_48 这一个 banner。 */ html.mobile-nav-ready.product-detail-page #smv_tem_88_44, html.mobile-nav-ready.product-detail-page #bannerWrap_tem_88_44 { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 新闻详情页：banner slideset 显示在顶部 */ html.mobile-nav-ready.news-detail-page #smv_tem_47_32, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 .yibuFrameContent, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 .w-slide, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 #slider_smv_tem_47_32, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 .content-box, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 .content-box-inner { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: 200px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 隐藏新闻 banner 上的大标题文字，避免移动端溢出 */ html.mobile-nav-ready.news-detail-page #smv_tem_47_32 #smv_tem_48_32, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 #txt_tem_48_32, html.mobile-nav-ready.news-detail-page #smv_tem_47_32 #txtc_tem_48_32 { display: none !important; } /* 新闻详情页面包屑 banner */ html.mobile-nav-ready.news-detail-page #smv_tem_44_58, html.mobile-nav-ready.news-detail-page #smv_tem_44_58 .yibuFrameContent, html.mobile-nav-ready.news-detail-page #smv_tem_44_58 .w-banner, html.mobile-nav-ready.news-detail-page #smv_tem_44_58 .w-banner-content, html.mobile-nav-ready.news-detail-page #smv_tem_44_58 .fullcolumn-inner { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* 详情页面包屑在移动端隐藏 */ html.mobile-nav-ready.product-detail-page #smv_tem_28_49, html.mobile-nav-ready.news-detail-page #smv_tem_46_10, html.mobile-nav-ready.product-detail-page .productCrumbsBind_Style1, html.mobile-nav-ready.news-detail-page .newsItemCrumbsBind_Style1, html.mobile-nav-ready.product-detail-page .productCrumbsBind_Style1 .w-crumbs, html.mobile-nav-ready.news-detail-page .newsItemCrumbsBind_Style1 .w-crumbs { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* ============================================================ 第四十一章：产品详情页主图适配 ------------------------------------------------------------ 产品图轮播容器原宽 520px 超出 390px 视口，改为 100% 宽度， 大图自适应，缩略图横向排列不换行。 ============================================================ */ html.mobile-nav-ready.product-detail-page #smv_tem_57_31, html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3, html.mobile-nav-ready.product-detail-page .productSlideBind_Style3, html.mobile-nav-ready.product-detail-page .productSlideBind_Style3 .smv_con_1_3 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 16px !important; } /* 轮播整体固定高度：大图 320px + 缩略图区域 */ html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3.w-slider { width: 100% !important; max-width: 100% !important; height: 390px !important; min-height: 0 !important; overflow: hidden !important; } html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-bigimglist { width: 100% !important; max-width: 100% !important; height: 320px !important; min-height: 0 !important; overflow: hidden !important; } html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-bigimglist > div, html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-imglink { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-bigimglist img._middleImage, html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-bigimglist img[data-u="image"] { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; margin: 0 auto !important; } /* 缩略图容器 */ html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-thumblist { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 70px !important; min-height: 0 !important; margin-top: 0 !important; text-align: center !important; overflow: hidden !important; } html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-thumb-item { display: inline-block !important; width: 60px !important; height: 60px !important; margin: 4px !important; } html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-thumbitem-in, html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-thumbpic { width: 100% !important; height: 100% !important; } html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-point-left, html.mobile-nav-ready.product-detail-page #tem_57_31_w-slider3 .w-point-right { display: none !important; /* 移动端隐藏左右箭头，使用滑动 */ } /* 产品详情页标题与上下导航统一流式 */ html.mobile-nav-ready.product-detail-page #smv_tem_50_7, html.mobile-nav-ready.product-detail-page #smv_tem_52_38, html.mobile-nav-ready.product-detail-page #smv_tem_53_38 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 12px 16px !important; } html.mobile-nav-ready.product-detail-page #smv_tem_50_7 .w-title { font-size: 20px !important; line-height: 1.5 !important; text-align: center !important; word-break: break-all !important; } /* 产品详情页内容区 */ html.mobile-nav-ready.product-detail-page #smv_tem_54_38, html.mobile-nav-ready.product-detail-page .productContentBind_Style1 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 16px !important; } html.mobile-nav-ready.product-detail-page #tem_54_38_txt, html.mobile-nav-ready.product-detail-page .productContentBind_Style1 .w-detailcontent { width: 100% !important; max-width: 100% !important; height: auto !important; } html.mobile-nav-ready.product-detail-page .productContentBind_Style1 .w-detail img { max-width: 100% !important; height: auto !important; } /* 新闻详情页标题与内容流式 */ html.mobile-nav-ready.news-detail-page #smv_tem_35_31, html.mobile-nav-ready.news-detail-page #smv_tem_25_33, html.mobile-nav-ready.news-detail-page #smv_tem_26_24, html.mobile-nav-ready.news-detail-page #smv_tem_40_40, html.mobile-nav-ready.news-detail-page #smv_tem_41_31 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 12px 16px !important; } html.mobile-nav-ready.news-detail-page #smv_tem_25_33 .w-title { font-size: 22px !important; line-height: 1.5 !important; text-align: center !important; word-break: break-all !important; } html.mobile-nav-ready.news-detail-page #smv_tem_26_24 .w-detail img { max-width: 100% !important; height: auto !important; } /* ============================================================ 第四十二章：产品详情页相关产品推荐适配 ------------------------------------------------------------ 问题： 1. Banner 上的"产品详情"大标题随 absolute 转 static 后落到 推荐板块区域，造成"相关产品推荐"上方出现重复大标题； 2. 推荐列表默认一行一个，移动端需要一行两个、共两行； 3. "相关产品推荐"标题 DOM 在列表之后，需要样式上居中醒目。 ============================================================ */ /* Banner 上的"产品详情"大标题：banner 已回到页面顶部，标题作为 banner 的一部分在移动端居中显示（缩小字号适配 200px 高度）。 */ html.mobile-nav-ready.product-detail-page #smv_tem_56_48 { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; z-index: 2 !important; text-align: center !important; } html.mobile-nav-ready.product-detail-page #smv_tem_56_48 #txt_tem_56_48, html.mobile-nav-ready.product-detail-page #smv_tem_56_48 #txtc_tem_56_48 { height: auto !important; min-height: 0 !important; } html.mobile-nav-ready.product-detail-page #smv_tem_56_48 .editableContent p, html.mobile-nav-ready.product-detail-page #smv_tem_56_48 .editableContent p span { font-size: 26px !important; line-height: 1.5 !important; } /* 推荐列表容器 */ html.mobile-nav-ready.product-detail-page #smv_tem_58_6, html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .listproduct_Style6, html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list, html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-ul { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-ul { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; list-style: none !important; } /* 每个产品项占一行（100%），宽度限 340px 居中显示 */ html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-item { display: block !important; float: none !important; flex: 0 0 auto !important; width: 100% !important; max-width: 340px !important; min-width: 0 !important; margin: 0 auto 12px auto !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: #ffffff !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; } /* 只显示前 5 个，保证"一行一个、总共 5 个" */ html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-item:nth-child(n+6) { display: none !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-link { display: block !important; width: 100% !important; height: 100% !important; text-decoration: none !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-pic { width: 100% !important; height: 200px !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-pic img, html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-listpic-in { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-bottom { padding: 10px !important; height: auto !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-title { font-size: 14px !important; line-height: 1.5 !important; height: auto !important; max-height: 42px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-desc, html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-price, html.mobile-nav-ready.product-detail-page #smv_tem_58_6 .w-list-btn { display: none !important; } /* "相关产品推荐"标题：DOM 在列表之后，由 JS 提到列表前； 这里补充居中样式 */ html.mobile-nav-ready.product-detail-page #smv_tem_59_4 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 24px 16px 12px 16px !important; text-align: center !important; box-sizing: border-box !important; } html.mobile-nav-ready.product-detail-page #smv_tem_59_4 .editableContent { height: auto !important; padding: 0 !important; } html.mobile-nav-ready.product-detail-page #smv_tem_59_4 .editableContent p { margin: 0 !important; padding: 0 !important; } html.mobile-nav-ready.product-detail-page #smv_tem_59_4 .editableContent p span { font-size: 22px !important; line-height: 1.4 !important; color: #333333 !important; } /* 上一个/下一个导航：已在 JS 中移到推荐列表下方 */ html.mobile-nav-ready.product-detail-page #smv_tem_52_38, html.mobile-nav-ready.product-detail-page #smv_tem_53_38 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 10px 16px !important; box-sizing: border-box !important; } html.mobile-nav-ready.product-detail-page #smv_tem_52_38 .w-previous, html.mobile-nav-ready.product-detail-page #smv_tem_53_38 .w-next { display: flex !important; align-items: center !important; width: 100% !important; font-size: 14px !important; line-height: 1.5 !important; color: #333333 !important; word-break: break-all !important; } html.mobile-nav-ready.product-detail-page #smv_tem_52_38 .w-previous-title, html.mobile-nav-ready.product-detail-page #smv_tem_53_38 .w-next-title { flex: 1 1 auto !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ============================================================ 五十、gywm 关于我们页面移动端专项适配 ------------------------------------------------------------ 问题：PC 端靠 absolute top 决定板块视觉顺序，移动端 smartAbs 被全局改为 static 流式布局后，DOM 顺序成为显示顺序，导致： 1) "关于我们"文字介绍跑到顶部 banner 之前； 2) 企业文化三个绝对定位卡片垂直堆叠、错位； 3) 发展历程 Tab 标签宽度溢出，且未激活 tab 默认 display:none 导致 Tab2/Tab3 的 Jssor 幻灯片宽度为 0，图片丢失。 方案：mobile-nav.js 已给 body 注入 page-gywm，并把 banner 提 到 #smv_Main 最前面、把三个 tab 内容强制展开。本段 CSS 负责 剩余布局与样式。 ============================================================ */ /* --- 1. 顶部 banner 与文字介绍顺序 --- */ body.page-gywm #smv_con_166_13 { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } body.page-gywm #smv_con_166_13 .w-slide { width: 100% !important; height: auto !important; } body.page-gywm #smv_con_130_20 { padding: 16px !important; box-sizing: border-box !important; } body.page-gywm #smv_con_130_20 .editableContent { text-align: left !important; } /* --- 2. 企业文化三个卡片 --- */ body.page-gywm #smv_con_181_47 > .yibuFrameContent > .fullcolumn-inner { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; padding: 16px 0 !important; } body.page-gywm #smv_con_181_47 > .yibuFrameContent > .fullcolumn-inner > [id^="smv_con_183_47"], body.page-gywm #smv_con_181_47 > .yibuFrameContent > .fullcolumn-inner > [id^="smv_con_187_47"], body.page-gywm #smv_con_181_47 > .yibuFrameContent > .fullcolumn-inner > [id^="smv_con_191_47"] { width: 100% !important; max-width: 360px !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; } body.page-gywm #smv_con_181_47 .w-container, body.page-gywm #smv_con_181_47 .smAreaC { width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; } body.page-gywm #smv_con_181_47 [class*="image_Style"] .w-image-box, body.page-gywm #smv_con_181_47 [class*="image_Style"] img { display: block !important; margin: 0 auto !important; width: 118px !important; height: auto !important; max-width: 100% !important; } body.page-gywm #smv_con_181_47 [class*="text_Style"] { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 8px 16px 0 !important; box-sizing: border-box !important; } body.page-gywm #smv_con_181_47 [class*="text_Style"] .editableContent { text-align: center !important; } body.page-gywm #smv_con_181_47 [class*="text_Style"] .editableContent p { text-align: center !important; } body.page-gywm #smv_con_195_53 { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 16px 16px 0 !important; box-sizing: border-box !important; } body.page-gywm #smv_con_195_53 .editableContent { text-align: center !important; } /* --- 3. 发展历程 Tab 区域 --- */ body.page-gywm #smv_con_196_42 { height: auto !important; min-height: 0 !important; } body.page-gywm #smv_con_196_42 > .yibuFrameContent { height: auto !important; } body.page-gywm #smv_con_197_49 { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 16px 16px 0 !important; box-sizing: border-box !important; } body.page-gywm #smv_con_197_49 .editableContent { text-align: center !important; } body.page-gywm #smv_con_198_49 { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 0 16px 16px !important; box-sizing: border-box !important; } body.page-gywm #smv_con_198_49 > .yibuFrameContent { height: auto !important; } body.page-gywm #smv_con_198_49 .w-label-tips { display: flex !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 0 16px 0 !important; list-style: none !important; } body.page-gywm #smv_con_198_49 .w-label-tips .w-label-tips-line { display: none !important; } body.page-gywm #smv_con_198_49 .w-label-tips .w-label-tips-item { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 50px !important; float: none !important; padding: 10px 4px !important; box-sizing: border-box !important; background: none !important; border-top: 2px solid #e0e0e0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.page-gywm #smv_con_198_49 .w-label-tips .w-label-tips-item.current, body.page-gywm #smv_con_198_49 .w-label-tips .w-label-tips-item.active { border-top-color: #0097d4 !important; color: #0097d4 !important; background: none !important; } body.page-gywm #smv_con_198_49 .w-label-tips .w-label-tips-item { cursor: pointer !important; } body.page-gywm #smv_con_198_49 .w-label-tips .w-label-tips-item a { height: auto !important; line-height: 1.3 !important; font-size: 14px !important; white-space: normal !important; word-break: break-all !important; } body.page-gywm #smv_con_198_49 .w-label-content { display: block !important; width: 100% !important; height: auto !important; } body.page-gywm #smv_con_198_49 .w-label-content > .w-label-content-item { display: block !important; width: 100% !important; height: auto !important; margin-bottom: 24px !important; padding-bottom: 16px !important; border-bottom: 1px solid #eeeeee !important; background: transparent !important; scroll-margin-top: 70px !important; } body.page-gywm #smv_con_198_49 .w-label-content > .w-label-content-item:last-child { margin-bottom: 0 !important; border-bottom: none !important; } body.page-gywm #smv_con_198_49 .w-label-content-item > div[id^="smv_con_"] { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; } body.page-gywm #smv_con_198_49 .w-label-content-item .w-container, body.page-gywm #smv_con_198_49 .w-label-content-item .smAreaC { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; height: auto !important; } body.page-gywm #smv_con_198_49 .w-label-content-item .w-container .smartAbs, body.page-gywm #smv_con_198_49 .w-label-content-item .smAreaC .smartAbs { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; text-align: center !important; } body.page-gywm #smv_con_198_49 .w-label-content-item [ctype="text"] { width: 100% !important; height: auto !important; padding: 0 8px 12px !important; box-sizing: border-box !important; } body.page-gywm #smv_con_198_49 .w-label-content-item [ctype="text"] .editableContent { text-align: center !important; } body.page-gywm #smv_con_198_49 .w-label-content-item [ctype="text"] .editableContent p { text-align: center !important; } body.page-gywm #smv_con_198_49 .w-label-content-item [ctype="text"] .editableContent p:first-child { font-size: 22px !important; line-height: 1.5 !important; margin-bottom: 8px !important; } body.page-gywm #smv_con_198_49 .w-label-content-item [ctype="text"] .editableContent p:not(:first-child) { font-size: 14px !important; line-height: 1.8 !important; color: #666666 !important; } body.page-gywm #smv_con_198_49 .w-label-content-item .w-slide { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; margin-bottom: 8px !important; } body.page-gywm #smv_con_198_49 .w-label-content-item .w-slide .w-slide-inner, body.page-gywm #smv_con_198_49 .w-label-content-item .w-slide .content-box, body.page-gywm #smv_con_198_49 .w-label-content-item .w-slide .content-box-inner { width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; } body.page-gywm #smv_con_198_49 .w-label-content-item .w-slide .content-box-inner { background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; } body.page-gywm #smv_con_198_49 .w-slide-arrowl, body.page-gywm #smv_con_198_49 .w-slide-arrowr, body.page-gywm #smv_con_198_49 .w-slide-btn-box { display: none !important; } /* --- 4. 技术能力板块 (smv_con_209_3) --- */ body.page-gywm #smv_con_209_3 > .yibuFrameContent > .fullcolumn-inner { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 0 16px !important; box-sizing: border-box !important; } body.page-gywm #smv_con_209_3 > .yibuFrameContent > .fullcolumn-inner > [id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; } body.page-gywm #smv_con_210_38 { padding: 16px 16px 0 !important; box-sizing: border-box !important; } body.page-gywm #smv_con_218_24 { padding: 0 16px 8px !important; box-sizing: border-box !important; order: 0 !important; } body.page-gywm #smv_con_218_24 .editableContent { text-align: left !important; } /* 技术能力图集：两张图片横排，强制图片缩放到 li 宽度 */ body.page-gywm #smv_con_211_57 { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 0 16px 16px !important; box-sizing: border-box !important; order: 1 !important; } body.page-gywm #smv_con_211_57 .w-atlas-ul { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: flex-start !important; gap: 12px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; } body.page-gywm #smv_con_211_57 .w-atlas-ul li { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 170px !important; height: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } body.page-gywm #smv_con_211_57 .w-atlas-ul li a, body.page-gywm #smv_con_211_57 .w-atlas-ul li img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; border: none !important; float: none !important; } /* --- 5. 企业实力大图 (smv_con_213_59)：移动端隐藏， 否则 cutFill 的负 margin-top 会让图片跑到新闻标题上方， 且容器留下 316px 空占位。 --- */ body.page-gywm #smv_con_213_59 { display: none !important; } /* --- 6. 新闻中心 --- */ body.page-gywm #smv_con_214_59 { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 0 16px 16px !important; box-sizing: border-box !important; } body.page-gywm #smv_con_214_59 .w-list-item { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; margin-bottom: 16px !important; } body.page-gywm #smv_con_214_59 .w-list-pic { position: static !important; width: 100% !important; height: auto !important; max-height: 200px !important; overflow: hidden !important; margin: 0 0 8px !important; } /* 主题 CSS 中 .w-list-r 靠 padding-left:320px 为绝对定位图片让位， 图片 static 化后必须清除左内边距，否则文字右侧留白。 */ body.page-gywm #smv_con_214_59 .w-list-r { position: static !important; width: 100% !important; height: auto !important; padding-left: 0 !important; } body.page-gywm #smv_con_214_59 .w-list-r-in { padding-left: 0 !important; } body.page-gywm #smv_con_214_59 .w-list-item { min-height: auto !important; } /* 图片链接在主题 CSS 中是 inline，导致 img 的 width:100% 无法正确解析。 先把 a 块级化占满容器，再让 img 宽度 100%、高度自适应、水平居中。 */ body.page-gywm #smv_con_214_59 .w-list-piclink { display: block !important; width: 100% !important; } body.page-gywm #smv_con_214_59 .w-listpic-in, body.page-gywm #smv_con_214_59 .w-list-pic img { width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; margin: 0 auto !important; } body.page-gywm #smv_con_214_59 .w-list-title { height: auto !important; line-height: 1.5 !important; padding: 8px 0 !important; white-space: normal !important; } /* --- 7. 品管实验室图集（smv_con_217_3）：移动端隐藏 --- */ body.page-gywm #smv_con_217_3 { display: none !important; } /* --- 8. 新闻中心大标题（smv_con_216_47）--- 由 mobile-nav.js 重排到新闻 banner 首位（企业实力大图之前）， 此处仅补充移动端布局样式。 */ body.page-gywm #smv_con_216_47 { width: 100% !important; height: auto !important; position: relative !important; left: auto !important; top: auto !important; padding: 24px 16px 0 !important; box-sizing: border-box !important; } body.page-gywm #smv_con_216_47 .editableContent p { margin: 0 !important; } /* ============================================================ 五十一、lxwm.html 联系我们页面移动端专项适配 ------------------------------------------------------------ 问题：1) 产品咨询板块背景图丢失； 2) 公司信息大标题与内容未居中； 3) 人才招聘大标题落到招聘卡片下方； 4) 产品咨询大标题未居中。 方案：恢复产品咨询板块堆叠上下文与背景图；公司信息、人才招聘、 产品咨询各容器用 flex/文本居中调整。 ============================================================ */ /* 1. 产品咨询板块：恢复堆叠上下文与背景图 */ html.mobile-nav-ready body.page-lxwm #smv_con_262_6 { position: relative !important; z-index: 0 !important; overflow: hidden !important; height: auto !important; min-height: 360px !important; } html.mobile-nav-ready body.page-lxwm #bannerWrap_con_262_6 { background-image: url('contents/sitefiles2071/10358748/images/55181871.jpg') !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: cover !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: -1 !important; } /* 2. 公司信息板块：标题与内容居中 */ html.mobile-nav-ready body.page-lxwm #smv_con_237_33 { padding: 24px 16px !important; box-sizing: border-box !important; } html.mobile-nav-ready body.page-lxwm #smv_con_237_33 .fullcolumn-inner { display: flex !important; flex-direction: column !important; align-items: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_237_33 .fullcolumn-inner > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } html.mobile-nav-ready body.page-lxwm #smv_con_239_33 .editableContent, html.mobile-nav-ready body.page-lxwm #smv_con_239_33 .editableContent p { text-align: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_241_33 { display: flex !important; justify-content: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_241_33 .w-company-info { text-align: center !important; display: block !important; width: 100% !important; } html.mobile-nav-ready body.page-lxwm #smv_con_241_33 .company-info-item { display: block !important; width: 100% !important; text-align: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_241_33 .company-info-item a { display: inline-flex !important; justify-content: flex-start !important; align-items: flex-start !important; width: auto !important; text-align: left !important; margin: 0 auto !important; } html.mobile-nav-ready body.page-lxwm #smv_con_241_33 .company-info-item .company-info-titleBox { float: none !important; flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; } html.mobile-nav-ready body.page-lxwm #smv_con_241_33 .company-info-item .company-text { flex: 0 1 auto !important; overflow: visible !important; } html.mobile-nav-ready body.page-lxwm #smv_con_269_23 { text-align: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_269_23 .w-image-box { display: inline-block !important; } /* 移动端隐藏 PC 地图 iframe */ html.mobile-nav-ready body.page-lxwm #smv_con_242_33 { display: none !important; } /* 3. 人才招聘板块：大标题移到招聘卡片上方 */ html.mobile-nav-ready body.page-lxwm #smv_con_246_13 { position: relative !important; z-index: 0 !important; overflow: hidden !important; height: auto !important; min-height: 0 !important; padding: 24px 16px !important; box-sizing: border-box !important; } html.mobile-nav-ready body.page-lxwm #smv_con_246_13 .fullcolumn-inner { display: flex !important; flex-direction: column !important; align-items: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_246_13 .fullcolumn-inner > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } html.mobile-nav-ready body.page-lxwm #smv_con_261_27 { order: -1 !important; text-align: center !important; padding: 0 0 16px 0 !important; } html.mobile-nav-ready body.page-lxwm #smv_con_247_13 { order: 1 !important; } /* 招聘卡片标题行样式优化 */ html.mobile-nav-ready body.page-lxwm #smv_con_247_13 .w-label-item { border-bottom: 1px solid #eeeeee !important; } /* 4. 产品咨询板块：标题居中，表单位于标题下方 */ html.mobile-nav-ready body.page-lxwm #smv_con_262_6 .fullcolumn-inner { display: flex !important; flex-direction: column !important; align-items: center !important; } html.mobile-nav-ready body.page-lxwm #smv_con_262_6 .fullcolumn-inner > div[id^="smv_con_"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; } html.mobile-nav-ready body.page-lxwm #smv_con_263_6 { text-align: center !important; padding: 24px 16px 8px !important; } html.mobile-nav-ready body.page-lxwm #smv_con_264_6 { padding: 0 16px 24px !important; } }