/* ============================================================================= * site-tuning.css — 全站样式微调(由渲染器注入到每页 ,免改各模板内联 CSS) * 本文件集中收纳客户提出的视觉调整;每条都带注释说明改了什么。 * 加载顺序在模板内联样式与 hbpe-ui-overrides 之后,故多用 !important 以确保生效。 * ========================================================================== */ /* --------------------------------------------------------------------------- * 1) 领导宣言(关于页轮播):引言字号偏小 + 文字铺满整宽 → 末尾被右下角头像遮挡。 * 真正生效的是"单卡"布局 .ab-ls-mob;其引言/姓名/职务都是【无 class 的】 * [data-field] 裸 span,所以历史上写给 .ab-ls-quote-txt / .ab-ls-pc 的规则 * 全部落空(字号回落到继承值、文字无宽度约束 → 流到绝对定位的头像底下)。 * 对策:直接命中 .ab-ls-mob 里的 [data-field],放大引言字号,并在桌面/平板 * 限制文字栏与姓名职务的宽度,给右下角头像(最宽约 32%)留出空间。 * 旧 .ab-ls-pc 选择器一并保留,兼容仍在用两栏布局的历史部署。 * ------------------------------------------------------------------------- */ /* —— 引言正文:放大 + 块级(便于限宽) —— */ .ab-ls-mob [data-field="speech"], .ab-ls-quote-txt, .ab-ls-pc [data-field="speech"]{ display:block; font-size:clamp(17px, 1.4vw, 21px) !important; /* 放大,原先回落到 ~16px 继承值 */ line-height:1.95 !important; color:rgba(255,255,255,.90) !important; overflow-wrap:anywhere; /* 长串在栏内换行,绝不外溢 */ } /* —— 姓名 / 职务(同为裸 span,显式给样式以防落空) —— */ .ab-ls-mob-foot [data-field="name"]{ display:block; font-size:clamp(18px, 1.4vw, 22px) !important; font-weight:600; color:#fff; } .ab-ls-mob-foot [data-field="title"]{ display:block; font-size:14px !important; color:rgba(255,255,255,.5); line-height:1.6; } .ab-ls-name{ font-size:clamp(19px, 1.5vw, 23px) !important; } /* —— 桌面端(≥1025px):文字栏 + 姓名职务收到 60%,避开右下角头像,文字不再被遮 —— */ @media (min-width:1025px){ .ab-ls-mob [data-field="speech"]{ max-width:60% !important; } .ab-ls-mob-foot > div{ max-width:60% !important; } } /* —— 平板 / 小笔记本(768–1024px) —— */ @media (min-width:768px) and (max-width:1024px){ .ab-ls-mob [data-field="speech"]{ max-width:58% !important; } .ab-ls-mob-foot > div{ max-width:58% !important; } } /* —— 旧两栏布局(若仍启用)的头像收窄,与文字不重叠 —— */ .ab-ls-photo{ max-width:44% !important; } /* —— 手机端(<768px):单列;引言整宽,姓名/职务收窄避开右下角头像 —— */ @media (max-width:767px){ .ab-ls-mob [data-field="speech"], .ab-ls-mob .ab-ls-quote-txt{ font-size:16px !important; line-height:1.9 !important; max-width:none !important; } .ab-ls-mob-foot > div{ max-width:60% !important; } /* 姓名/职务不被头像遮 */ .ab-ls-mob-photo{ height:140px !important; max-width:40% !important; } /* 头像给个稳定尺寸 */ } /* --------------------------------------------------------------------------- * 2) Logo 偶尔出现蓝色边框(点击/聚焦时的默认 outline) * ------------------------------------------------------------------------- */ .sh-logo, .sh-logo:focus, .sh-logo:focus-visible, .sh-logo-img, .sh-logo-img:focus, .sh-logo-img:focus-visible{ outline:none !important; border:none !important; -webkit-tap-highlight-color:transparent; } /* --------------------------------------------------------------------------- * 3) 合作客户 logo:默认彩色(去灰度),鼠标悬停轻微放大 * ------------------------------------------------------------------------- */ .lw-logo-img{ filter:none !important; -webkit-filter:none !important; opacity:1 !important; transition:transform .3s ease !important; } .lw-item:hover .lw-logo-img{ transform:scale(1.06) !important; } /* --------------------------------------------------------------------------- * 4) 产品卡片:不显示分类与简介;标题与「查看」箭头同一行(箭头在标题右侧并预留空间);卡片等高。 * ------------------------------------------------------------------------- */ .shop-card{ height:100% !important; display:flex !important; flex-direction:column !important; } .shop-card-cat, .shop-card-desc{ display:none !important; } /* 不显示分类 / 简介 */ .shop-card-body{ flex:1 1 auto !important; display:flex !important; flex-direction:row !important; /* 标题 | 箭头 同行 */ align-items:center !important; justify-content:space-between !important; gap:12px !important; } .shop-card-text{ flex:1 1 auto !important; min-width:0 !important; } .shop-card-name{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; min-height:2.7em !important; margin:0 !important; /* 预留两行高度 → 各卡等高 */ } .shop-card-go{ flex-shrink:0 !important; align-self:center !important; } /* 箭头常驻占位,hover 显现,不挤动标题 */ /* --------------------------------------------------------------------------- * 5) 联系页 CTA 数据条:电脑/平板端左右间距加大 * ------------------------------------------------------------------------- */ @media (min-width:768px){ .cta-stats{ gap:72px !important; } } /* --------------------------------------------------------------------------- * 6) 订阅区背景图:电脑端只露顶部 → 统一垂直居中、铺满 * ------------------------------------------------------------------------- */ .subscribe-section{ background-position:center center !important; background-size:cover !important; background-repeat:no-repeat !important; } /* --------------------------------------------------------------------------- * 7) 文章正文页「相关推荐」:电脑 3 个 / 平板 4 个 / 手机 3 个(竖排) * 列表里固定加载 4 条;电脑与手机隐藏第 4 条只显示 3 条,平板显示全部 4 条。 * ------------------------------------------------------------------------- */ .art-rel-grid{ grid-template-columns:repeat(3, 1fr) !important; } .art-rel-grid > .art-rel-card:nth-child(4){ display:none !important; } /* 电脑:3 个 */ @media (min-width:769px) and (max-width:1100px){ /* 平板:4 个 */ .art-rel-grid{ grid-template-columns:repeat(4, 1fr) !important; } .art-rel-grid > .art-rel-card:nth-child(4){ display:revert !important; } } @media (max-width:768px){ /* 手机:3 个竖排 */ .art-rel-grid{ grid-template-columns:1fr !important; } .art-rel-grid > .art-rel-card:nth-child(4){ display:none !important; } } /* --------------------------------------------------------------------------- * 8) 案例页 / 新闻页:筛选时隐藏顶部标题块与精选大图块(由 site-tuning.js 加 body 类驱动) * · 选分类(.hbpe-filtering):标题块 + 精选块都隐藏(用的是顶部分类导航,不影响操作) * · 搜索(.hbpe-searching):隐藏精选块 + 标题里的大标题文案,但保留搜索框以便继续输入 * ------------------------------------------------------------------------- */ body.hbpe-filtering .event-wrapper > .section-title, body.hbpe-filtering .event-wrapper > .section-recom, body.hbpe-filtering .section-recom{ display:none !important; } body.hbpe-searching .event-wrapper > .section-recom, body.hbpe-searching .section-recom{ display:none !important; } body.hbpe-searching .section-title .event-title{ /* 隐藏大标题/描述,但保留搜索框 */ display:none !important; } /* ============================================================================ * RTL 基础支持(阶段一)—— 仅当 (阿拉伯语/希伯来语/波斯语/乌尔都语等)生效。 * 当前站点语言均为 LTR,以下规则全部休眠,对现有版式零影响。 * 说明:这是「能跑起来、方向正确」的基础层;复杂栅格/绝对定位的精细镜像建议在真实 * 阿语渲染上做一次视觉走查后再逐项微调(详见评审报告 P1)。 * ========================================================================== */ html[dir="rtl"] body{ direction:rtl; text-align:right; } html[dir="rtl"] .sh-list, html[dir="rtl"] .sh-nav, html[dir="rtl"] .cta-stats, html[dir="rtl"] .faq-grid, html[dir="rtl"] .art-rel-grid{ direction:rtl; } /* 文本默认右对齐,但数字/参数磁贴等保持 LTR 阅读(型号、单位、数值不应翻转) */ html[dir="rtl"] .spec-tile .spec-val, html[dir="rtl"] [data-field="value"], html[dir="rtl"] .pd-model, html[dir="rtl"] code, html[dir="rtl"] .lang-code{ direction:ltr; unicode-bidi:isolate; display:inline-block; } /* 语言选择框:在 RTL 下整体右起,勾选标记移到行首(左侧) */ html[dir="rtl"] .sh-lm-panel{ direction:rtl; text-align:right; } html[dir="rtl"] .sh-lm-opt{ flex-direction:row; } html[dir="rtl"] .sh-lm-check{ margin-right:auto; margin-left:0; } /* 面包屑/箭头类分隔符在 RTL 下水平翻转 */ html[dir="rtl"] .breadcrumb, html[dir="rtl"] .crumb{ direction:rtl; } html[dir="rtl"] .btn-arr, html[dir="rtl"] .arr, html[dir="rtl"] .next-ico, html[dir="rtl"] .prev-ico{ transform:scaleX(-1); } /* --------------------------------------------------------------------------- * 8) 语言切换器:白/亮色表头下的药丸按钮更干净;浮层面板参考 DJI(电脑端多列、 * 名称在左语言在右、去 emoji 国旗以兼容 Windows);打开浮层锁滚动时不引起页面横向跳动。 * ------------------------------------------------------------------------- */ /* 8a. 锁滚动时保留滚动条宽度,避免页面横向晃动 */ html{ scrollbar-gutter: stable; } /* 8b. 药丸按钮:白色/亮色/展开态表头下用中性浅灰,去描边与小三角(贴近参考样式) */ .sh.is-scrolled .sh-lang-pill, .sh.on-light .sh-lang-pill, .sh.nav-open .sh-lang-pill{ background:#f1f2f4 !important; border-color:transparent !important; color:#1d1d1f !important; } .sh.is-scrolled .sh-lang-pill:hover, .sh.on-light .sh-lang-pill:hover, .sh.nav-open .sh-lang-pill:hover{ background:#e7e9ec !important; } .sh-lang-pill .sh-lang-caret{ display:none !important; } /* 8c. 浮层面板加宽 + 电脑端多列网格 */ .sh-lm-panel{ width:min(640px, 94vw) !important; } .sh-lm-grid{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) !important; gap:8px !important; } /* 8d. 选项 DJI 风格:名称在左、语言在右;若残留 emoji 国旗 / 对勾列一并隐藏 */ .sh-lm-flag, .sh-lm-check{ display:none !important; } .sh-lm-opt{ justify-content:space-between !important; align-items:baseline !important; gap:14px !important; padding:13px 16px !important; } .sh-lm-name{ flex:0 1 auto !important; } .sh-lm-sub{ flex:none !important; white-space:nowrap !important; } @media (max-width:760px){ .sh-lm-panel{ width:min(440px, 94vw) !important; } .sh-lm-grid{ grid-template-columns:1fr !important; } } /* --------------------------------------------------------------------------- * 9) 新闻/案例等页面的二级「话题」导航(.exhibition-navbar):手机端话题较多会溢出被截。 * 改成可横向滑动的条(从左起、不换行、隐藏滚动条),即 swiper/抽屉式滑动浏览。 * 作用于 news/cases/tech-support/legal/document-center/after-sales 等共用此导航的页面。 * ------------------------------------------------------------------------- */ @media (max-width:640px){ .exhibition-navbar .navbar-inner{ justify-content:flex-start !important; /* 从第一个话题开始,而非右对齐 */ overflow-x:auto !important; /* 横向滑动 */ -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; /* Firefox:隐藏滚动条 */ } .exhibition-navbar .navbar-inner::-webkit-scrollbar{ display:none; } /* WebKit:隐藏滚动条 */ .exhibition-navbar .nav-links{ flex:0 0 auto !important; flex-wrap:nowrap !important; } .exhibition-navbar .nav-links li{ flex:0 0 auto !important; } .exhibition-navbar .nav-links li a{ scroll-snap-align:start; } }