/* ========================================================== 管店宝关于我们 - 增量自定义样式（custom.css） ------------------------------------------------------------ 工作方式：页面以原文件 + theme.min.css 为底， 本文件只放自己的增量样式，在 head 中最后加载（同权重时胜出）。 当前进度：导航已对齐拓客页规范（2026-09-20）， 其余分区（字体/颜色双色制/动效等）随后续批次补齐。 目录： ① 顶栏与导航 —— 固定悬浮 / 移动端汉堡菜单 改样式须知： · theme.min.css 是 Odoo 引擎，不要手改；增量一律写本文件。 · 覆盖 theme.min.css 里带 !important 的规则时，本文件也要带 !important。 ========================================================== */ /* ========================================================== ① 顶栏与导航 ========================================================== */ /* -- 1.1 固定悬浮 ------------------------------------------------ 原文件 header 已带 o_header_fixed 类，但 theme.min.css 里对应规则 依赖 Odoo JS 补偿，本地不生效；这里纯 CSS 补齐（与拓客/收银页同款）。 left/right 必须同时为 0 才能撑满全宽，缺一会被内容宽度收缩。 */ header.o_header_fixed { position: fixed !important; left: 0; right: 0; z-index: 1030; } /* -- 1.2 移动端汉堡菜单（<992px，配合 js/mobile-nav.js）----------- Odoo JS 移除后 offcanvas 抽屉失效，换自研实现（与拓客/收银页同款交互）： 导航胶囊作为定位参照，菜单以下拉卡片浮层展示（避免撑破胶囊圆角）。 菜单项由 JS 从桌面 #top_menu 自动克隆——改菜单只改 HTML 里 #top_menu 一处。 */ .o_header_mobile { position: relative; } /* 汉堡按钮：三条橙色横线，点击后变叉 */ .mobile-nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .mobile-nav-toggle:hover { background: rgba(0, 0, 0, .05); } /* 键盘焦点环（2026-10-03 第 6 轮）：汉堡按钮落在浅底导航胶囊上 → 深橙轮廓 5.50:1 */ .mobile-nav-toggle:focus-visible { outline: 2px solid var(--brand-800, #B34700); outline-offset: 2px; } .mobile-nav-toggle-bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--o-color-2, var(--brand-500, #FF7C1C)); transition: transform .2s ease, opacity .2s ease; } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(2) { opacity: 0; } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 折叠菜单：默认收起；.open 时在胶囊下方弹出白色圆角卡片 */ .mobile-nav-menu { display: none; position: absolute; top: calc(100% + 8px); left: 8px; right: 8px; background: #FFFFFF; border-radius: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); padding: 8px; margin: 0; z-index: 1040; } .mobile-nav-menu.open { display: flex; flex-direction: column; gap: 2px; } /* ---------- 手机菜单项（2026-10-01 定稿，7 份页面 CSS 同步） ---------- 基座 `.navbar-nav.nav-pills .nav-link`（特异性 0,3,0）会把本页左右内边距压成 1.5rem、圆角打成 10rem， 故本规则补足到 (0,4,0) 直接胜出，不再依赖 !important。 padding 维持 10px 16px：项高 = 10 + 10 + 继承行高 27px（header font-size 1.125rem × body line-height 1.5） ≈ 47px，本就过 44px 触摸门槛。本次改动实质 = 7 页左右内边距统一到 16px + 去掉 !important，高度不变。 */ .mobile-nav-menu.navbar-nav.nav-pills .nav-link { padding: 10px 16px; border-radius: 999px; text-align: center; } /* ---------- 商家管理中心入口（桌面导航最右端，2026-10-01 恢复） ---------- 规格沿用 2026-09-21 定稿：透明底 + 深橙字 + 1px 深橙描边，悬停变深橙底白字 （与价格卡 .btn-pricing 同一套双色制：深橙字压白 5.50:1、白字压深橙 4.67:1，均过 WCAG AA）。 三条成组：菜单先撑满整行，按钮才有空间右推——缺 flex-grow 时 ul 宽度自适应内容， margin-left:auto 没有可分配空间，按钮会紧贴「关于我们」而不靠右。 padding 带 !important：用于压过下方 `header #top_menu > li > .nav-link` 的同属性 !important(28px)。 */ #top_menu { flex-grow: 1; } #top_menu .nav-item-enter { margin-left: auto; } #top_menu .nav-item-enter .nav-link { padding: 6px 18px !important; color: var(--brand-800, #B34700); background: transparent; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--brand-800, #B34700); font-weight: 500; white-space: nowrap; } #top_menu .nav-item-enter .nav-link:hover { background: var(--brand-700, #C25200); color: #FFFFFF; } /* 手机菜单里的同名入口：白面板上保持同款描边，与站内导航项区分（该项是外链，新窗口跳商家后台）。 带 `#top_menu` 前缀的两条不会命中克隆项，故此处按 .mobile-nav-menu 作用域重写。 */ .mobile-nav-menu .nav-item-enter .nav-link { color: var(--brand-800, #B34700); box-shadow: inset 0 0 0 1px var(--brand-800, #B34700); } /* ---------- 字体本地化（图片本地化批次补齐） ---------- */ /* 源 CSS（_files/web.assets_frontend.min.css）的 @font-face 指向官网服务器绝对路径， 本地加载不到 → 图标全消失；这里用本地 fonts/ 副本声明同名家族（本文件后加载优先），图标恢复。 */ @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'); font-weight: normal; font-style: normal; font-display: block; } /* Poppins 本地化（源 CSS 无 Poppins @font-face，仅 Google @import——已删。 与微商城/拓客/收银同一份 woff2，保证全站字形一致） */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins/poppins-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2'); } /* ---------- 全站字体基准（2026-09-21 静态化批次） ---------- */ /* card-title 钉 px：h5→h3 升级标签后字号不再随标签走（rem 手机端会翻车，钉 px） */ .card-title { font-size: 18.75px; line-height: 22.5px; font-weight: 400; } /* lead 导语 18px/27px，与其它五页一致；包在 ≥1200px 内，移动端保持主题流式缩放 */ @media (min-width: 1200px) { .lead { font-size: var(--fs-prose-lead, 18px); line-height: 27px; } } /* ---------- 批1-① 页脚二维码窄屏溢出修复（2026-09-21） ---------- 现象：992–1024px 时页面出现横向滚动条（实测 scrollWidth 1011 > 视口 992，溢出 +19px）。 原因：二维码 img 带内联 max-width:260px，而 col-lg-3 在 992px 时列宽仅 240px， 居中后左右各溢出 10px。内联样式需 !important 才能压。 修法：max-width 改成 min(260px, 100%) —— 容器够宽时仍 260px（与另三页一致）， 容器变窄时自动收到 100%，不再撑破视口。 */ footer .o_we_custom_image { max-width: min(260px, 100%) !important; } /* ---------- 批4 资质大图灯箱（点击卡片在当前页弹大图，不再跳转 Odoo 页） ---------- */ .cert-zoom { cursor: zoom-in; } .cert-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .82); padding: 3vmin; } .cert-lightbox.open { display: flex; } .cert-lightbox img { max-width: 96vw; max-height: 88vh; width: auto; height: auto; background: #FFFFFF; border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, .5); } .cert-lightbox-close { position: absolute; top: 2.2vmin; right: 2.6vmin; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #FFFFFF; font-size: 26px; line-height: 44px; cursor: pointer; } .cert-lightbox-close:hover { background: rgba(255, 255, 255, .3); } .cert-lightbox-caption { position: absolute; bottom: 3vmin; left: 0; right: 0; text-align: center; color: #FFFFFF; font-size: 15px; opacity: .85; } body.cert-lightbox-open { overflow: hidden; } /* ========================================================== ⑦ 颜色体系 —— 对比度双色制（2026-09-21，对齐拓客/收银/微商城） ------------------------------------------------------------ 品牌橙 var(--brand-500, #FF7C1C) 只做装饰；凡「文字压在浅底上」一律深橙档。 --brand-text var(--brand-800, #B34700) = 橙字压白/米白底（白底 5.50:1、米白底 4.93:1）。 联系板块的「一键拨打」hover 是深橙底白字，故本页自第三十八批起补 --brand-surface。 ========================================================== */ :root { --brand-text: var(--brand-800, #B34700); --brand-surface: var(--brand-700, #C25200); } /* 「跳至内容」无障碍链接：纯橙 var(--brand-500, #FF7C1C)（2.31:1 不达标）→ 深橙。 本页 btn-primary 仅此一处，无深底按钮，无需白字还原变体。 */ .btn-primary { --btn-color: var(--brand-text) !important; --btn-border-color: var(--brand-text) !important; } /* ---------- 站点动效（2026-09-21，与拓客/收银页同款）---------- 配合 js/site-effects.js：头部滚动响应 / 板块进场淡入。 .fx-reveal 由脚本动态添加——JS 不运行时该类不存在，页面完整可读，SEO 零风险。 （本页无数字统计条，数字计数部分为空操作，保留同款脚本便于全站一致。） */ header#top .navbar { transition: box-shadow .25s ease, padding .25s ease; } /* 滚动后：只微收高度，阴影保持不变（与未滚动完全一致） 2026-10-02 用户反馈：滚动后阴影由橙色光晕变成深棕（rgba(46,31,20,.18)），要求颜色一致 → 不再覆盖 box-shadow，基础态 #FF9C00 0 8px 16px 由 *-base.css 的 !important 规则统一提供。 */ header#top.is-scrolled .navbar.navbar-expand-lg { padding-top: .55rem !important; padding-bottom: .55rem !important; } /* 进场单元：初始隐藏下移 16px，滚入视口后过渡显现；错峰延迟由脚本注入 --fx-delay */ .fx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease var(--fx-delay, 0ms), transform .5s ease var(--fx-delay, 0ms); will-change: opacity, transform; } .fx-reveal.fx-in { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } @media print { .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================== ⑧ Odoo 参考设计版板块（2026-09-21 晚，第二轮） ------------------------------------------------------------ 按用户在 Odoo 后台自行设计的参考页（w.guandb.cn/guan-yu-wo-men） 重写板块：s_shape_image 公司介绍 / s_features 服务保障（三列图标）等。 （原产品矩阵、官方账号两板块后已删除，其规则一并清理。） 橙卡数据条已删除（用户定），数字下沉到公司介绍正文加粗。 本节规则分三类，**均为必需**： A) 精简版 min.css 丢失、新板块用到的工具类 —— 按微商城完整版 原始定义逐条回填（值一字不改）。 B) 4 套 Odoo snippet 的专属规则 —— 同样取自完整版原样回填。 C) 新图标（fontawesome content 码位）—— 精简版没有这些图标声明， 从完整版原样回填。 ========================================================== */ /* ---------- A. 回填工具类（原始定义，勿改值） ---------- */ .pt8 { padding-top: 8px !important; } .pb48 { padding-bottom: 48px !important; } .pb16 { padding-bottom: 16px !important; } .pt16 { padding-top: 16px !important; } .pt24 { padding-top: 24px !important; } .pb24 { padding-bottom: 24px !important; } .pb0 { padding-bottom: 0px !important; } .pt-4 { padding-top: 1.5rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .px-3 { padding-right: 1.25rem !important; padding-left: 1.25rem !important; } @media (min-width: 992px) { .col-lg-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 41.66666667%; } .offset-lg-1 { margin-left: 8.33333333%; } .d-lg-block { display: block !important; } } .rounded { border-radius: var(--border-radius, .375rem) !important; } .rounded-circle { border-radius: 50% !important; } .overflow-hidden { overflow: hidden !important; } .flex-column { flex-direction: column !important; } .float-start { float: left !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .align-items-center { align-items: center !important; } .d-flex { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; } .ms-auto { margin-left: auto !important; } .me-auto { margin-right: auto !important; } img.ms-auto { display: block; } .text-o-color-1 { color: var(--brand-500, #FF7C1C) !important; } .text-o-color-2 { color: var(--brand-800, #B34700) !important; } a.text-o-color-1:hover, a.text-o-color-1:focus { color: var(--brand-900, #9C4200) !important; } .bg-o-color-3 { --bg-light: #f5f2f0; --color-light: #212529; background-color: #f5f2f0 !important; color: #212529; } .h2-fs { font-size: calc(1.359375rem + 1.3125vw); } @media (min-width: 1200px) { .h2-fs { font-size: var(--fs-h2, 2.4375rem); } } .h3-fs { font-size: calc(1.3125rem + 0.75vw); } @media (min-width: 1200px) { .h3-fs { font-size: var(--fs-h3, 1.9375rem); } } .h4-fs { font-size: calc(1.265625rem + 0.1875vw); } @media (min-width: 1200px) { .h4-fs { font-size: var(--fs-h4, 1.5rem); } } .h5-fs { font-size: 1.171875rem; } @media (min-width: 1200px) { .h5-fs { font-size: var(--fs-h5, 1.25rem); } } /* FontAwesome 底块图标：完整版对 .fa.rounded-circle / .fa.rounded 有成套尺寸规则（60×60 底块）。 ⚠️ s_features 圆底图标 rounded-circle 变体为本页在用（原产品矩阵方底变体 随板块删除已清理；2026-09-21 曾因漏回填出现「小图标带小正方形底色」问题）。 background-color 在产品图标上会被 .bg-o-color-3 的 !important 覆盖为 #f5f2f0，与参考设计一致。 */ .fa.rounded-circle, .fa.rounded { display: inline-block; vertical-align: middle; text-align: center; width: 3.75rem; height: 3.75rem; line-height: 3.75rem; background-color: #F8F9FA; } /* s_hr 分隔符 ⚠️ 线条颜色（2026-09-21 用户反馈「颜色不合适」）： 精简版 min.css 把 Bootstrap 的 `hr{border-top: var(--border-width) solid var(--o-border-color)}` 整条裁掉了，只剩 `hr{margin-right:0;margin-left:0}` → hr 回落到浏览器默认的 深灰 rgb(128,128,128)，比参考设计重得多。 另：精简版 :root 里 --o-border-color 有两条（后写的 color-mix 15% 生效）， 而官方账号连线 stroke 用的就是它 → 与 s_hr 出现明显色差（一深一浅）。 修法：按完整版原始定义补回 hr 的边框声明，颜色统一走 var(--o-border-color)， 与官方账号连线同一来源，全页线条色彩一致。 */ hr { color: inherit; border: 0; border-top: var(--border-width, 1px) solid var(--o-border-color); opacity: 1; } .s_hr { line-height: 0; } .s_hr hr { padding: 0; margin: 0; opacity: 1; } /* ---------- C. 新图标码位（原样回填） ---------- */ .fa-star-o:before { content: "\f006"; } .fa-cube:before { content: "\f1b2"; } .fa-headphones:before { content: "\f025"; } .fa-refresh:before { content: "\f021"; } .fa-shield:before { content: "\f132"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-exchange:before { content: "\f0ec"; } .fa-mobile:before { content: "\f10b"; } .fa-comments:before { content: "\f086"; } /* ---------- D0. 公司介绍双栏间距（2026-09-21 晚，第三轮·二次修正） ---------- ⚠️ 本节曾两易其稿，记录正确认知以免再犯： ① 第一版误判「两栏上下堆叠、中间零间距」。真相：top 不同是 align-items-center 的垂直居中（两栏高度不等所致），570+570=1140 恰好占满容器，本来就是标准并排；「贴在一起」的观感来自 Bootstrap 的 gutter 实现方式——30px 间距藏在两栏各自的 15px 内边距里， 栏盒(box)边缘相接，但**文字块之间本来就有 30px**。 ② 第二版把列宽改成 calc(50% - 30px) 想造出间隙——结果右栏右边缘 缩进容器 60px，与全页其它板块不对齐，属于回归，已废弃。 ✅ 正确做法（本版）：不动列宽（保持 50%/50%、右缘对齐容器）， 只把两栏内边距 15px→24px，文字间距 30px→48px； ≥1200px 再把 row 的负外边距同步到 -24px，让文字左/右缘 与容器内容缘精确对齐（其余断点容忍 9px 内缩，不可感知）。 <992px 两规则均不生效，移动端堆叠布局零影响。 */ @media (min-width: 992px) { .s_shape_image .row > .col-lg-6 { padding-right: 24px; padding-left: 24px; } } @media (min-width: 1200px) { .s_shape_image .row { margin-right: -24px; margin-left: -24px; } } /* ---------- D. 新板块自身微调（仅布局节奏，不改主题令牌） ---------- */ /* 公司介绍：双栏底距 */ .s_shape_image p { margin: 0 0 14px; } .s_shape_image p:last-child { margin-bottom: 0; } /* 服务保障：图标与标题正文的呼吸感。 ⚠️ 保障项标题 = 20px（对齐拓客 s_key_images 的 h5-fs 档实测值） */ .s_features .s_features_icon { margin-bottom: 1rem; } .s_features h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.5; font-weight: 400; } .s_features p { margin: 0; } /* ========================================================== E. 全页正文提档（2026-09-21 用户拍板「B. 全页提档」） ------------------------------------------------------------ 背景：本页正文原为 15px（--body-font-size: 0.9375rem，Odoo 设计稿原值）。 用户实测阅读后反馈偏小、不如拓客页耐读，选择全页提档。 做法：以 --body-font-size 为单一真源整体上调，再单独约束 「标题档」与「法定小字」不被连带放大。 边线： · 正文 15→17px，行高 1.5→1.6（17px 下 = 27.2px，中文更透气） · 标题档（h1/h2/h3/h4/h5-fs/card-title）不动，本就比正文大 · 页脚版权/备案/跳至内容 保持 15px（法定小字，业界惯例小一号） ⚠️ 不要在此改动 .h6 / h5-fs 以外的标题档；标题档已在上文 D 节定档。 ========================================================== */ :root { --body-font-size: 1.0625rem; /* 17px（原 0.9375rem / 15px） */ --body-line-height: 1.6; /* 原 1.5 */ } /* lead 保持「比正文大一号」：正文 17px → lead 19px（原 18px） */ p.lead, .lead { font-size: 1.1875rem; } /* 20261004：hero 眉行（标题上方「专注门店数字化…」）并入头图副题档 20px（用户拍板，与其它频道头对齐；正文区 lead 维持 19px 不动） */ .s_kickoff .lead { font-size: var(--fs-hero-sub, 1.25rem); } /* 页脚法定小字：显式钉回 15px，不随全页提档放大 */ /* 跳至内容（无障碍隐藏按钮）不参与视觉提档 */ .o_skip_to_content, .o_skip_to_content * { font-size: 0.9375rem; } /* ---------- E2. 服务保障：标题下方间距（2026-09-21） ---------- 问题：本板块标题列是裸 .col-lg-12，标题下方的间距原本由参考设计稿里的


占位元素提供（h2 mb8 + 占位段 25px + mb16 ≈ 49px）。 第六轮按用户要求删掉该副标题后间距随之消失，且 h2 的 mb:8px 会把 下方 .row 拉进标题列边界（实测行顶比标题列底还高 8px，视觉贴合）。 修法：不动 HTML，纯 CSS 给本板块标题列补 padding-bottom， 恢复「标题 → 首个内容元素」的呼吸感。 实测（1440）：标题底→内容行顶 由 -8px 转为 24px，标题底→首个图标 由 8px 转为 40px。 ⚠️ 用 > 子选择器限定，只作用于本板块；不写 !important（无同权重竞争对手）。 */ .s_features > .container > .col-lg-12 { padding-bottom: 32px; } /* ---------- E4. CTA 卡片：左栏被 Bootstrap 栅格压窄导致文字换行（2026-09-21） ---------- 症状：页脚上方 CTA 卡片里「北京管店宝科技有限公司」断成 3 行、 「使用管店宝拓客，让您的商户从此不缺顾客。」断成 3-5 行（992px）。 根因：该板块用 CSS Grid（.row.o_grid_mode）定位，左栏声明 grid-area: 3/2/6/7 （应跨第 2~6 列 = 537.5px），但元素同时带 Bootstrap 的 .col-lg-5 类， `.col-lg-5{flex:0 0 auto;width:41.6667%}` 生效 → 实宽 537.5×0.416667=223.95px。 参考页因样式表顺序不同，被 `.o_grid_mode > *{width:100%}` 正确覆盖（538px）。 修法：在 ≥992px 下恢复 grid 语义——让 .o_grid_mode 的直接子项宽度交还 grid， 并显式钉住列跨度为 100%（覆盖 .col-lg-* 的百分比宽度）。 ⚠️ 仅限 .o_grid_mode 内；不影响页面其它正常使用 .col-lg-* 的区域。 */ @media (min-width: 992px) { .o_grid_mode > .o_grid_item { width: 100% !important; max-width: none; flex: none !important; } } /* ---------- 联系我们 CTA 板块样式已随板块删除（2026-09-22 第二十八批）---------- */ /* ------------------------------------------------------------------ 头图（2026-10-03 第 5 批改深字）：hero-about-brand.webp 实为亮橙底 —— 与案例橙带同族， 白字压亮橙仅 2.5:1 级别且旧阴影方案不计入 WCAG → 改深棕字（--on-brand，与橙带页同一支），阴影一并去除。 字色原本继承 .o_cc5（#f5f2f0 / h1 #FFFFFF），此处用同特异性后加载覆盖。 ------------------------------------------------------------------ */ .s_kickoff h1, .s_kickoff h1 strong, .s_kickoff strong, .s_kickoff font { color: var(--on-brand, #2E1F14) !important; } .s_kickoff .lead, .s_kickoff p { color: var(--on-brand-muted, #4A2A12) !important; } /* ---------- 导航选中态（2026-09-22 五页统一，用户拍板 A 方案） ---------- 原：主题橙底药丸+深灰字（5.99:1 达标但视觉拉胯：与品牌 logo 橙块相撞、 与头图「白色药丸+橙字」按钮语言打架、字重不加粗层级弱）。 改：白药丸+品牌深橙字+柔影，与头图主按钮同一套语言。 #top_menu 前缀确保不影响手机菜单（.mobile-nav-menu 内克隆项，白面板保留橙药丸） */ #top_menu .nav-link.active { background: #FFFFFF !important; color: var(--brand-800, #B34700) !important; font-weight: 600 !important; box-shadow: 0 2px 10px rgba(194, 82, 0, .28) !important; } /* ========================================================== ⑧ 关于我们页新增四块内容 + 联系我们板块（2026-09-24 第三十八批） ------------------------------------------------------------ 用户拍板：企业愿景 / 发展历程 / 客户评价 / 注册资本 先按已知信息实现一版， 之后再优化；「联系我们」与首页、收银、微商城、两个试用页同款， 故样式照拓客页 tuike.css 的语言搬入（本页样式表精简时这段规则随板块一起 被删过，此次属恢复，不是新增设计）。 底色节奏：白(简介) → 浅橙#FFF7F1(愿景) → 灰#F5F2F0(产品矩阵) → 白(保障) → 浅橙(历程) → 灰(官方账号) → 白(资质) → 有色(合规卡) → 白(评价) → 灰(联系) → 页脚 ========================================================== */ /* ---------- 企业愿景：浅橙强调带 + 三条主张白卡 ---------- */ .s_vision, .s_history { background-color: #FFF7F1; } .gdb-vision-quote { margin: 0 0 14px; font-weight: 700; line-height: 1.5; font-size: calc(1.25rem + .55vw); color: var(--brand-text, var(--brand-800, #B34700)) !important; } .gdb-vision-point { height: 100%; padding: 24px 22px; background: #FFF; border-radius: 12px; box-shadow: 0 6px 20px rgba(46, 31, 20, .06); } .gdb-vision-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #FFF1E5; color: var(--brand-800, #B34700); font-size: 1.05rem; } .gdb-vision-point h3 { margin: 0 0 6px; font-size: 1.0625rem; } .gdb-vision-point p { margin: 0; font-size: .9375rem; line-height: 1.7; color: rgba(0, 0, 0, .68); } @media (max-width: 991px) { .s_vision .col-lg-4 { margin-bottom: 16px; } .s_vision .col-lg-4:last-child { margin-bottom: 0; } } /* ---------- 发展历程：竖向时间轴（左轨 + 圆点 + 年份/标题同行） ---------- */ .gdb-timeline { position: relative; margin: 0; padding: 0 0 0 4px; list-style: none; } .gdb-timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#FFB27A, #FFDCC4); } .gdb-tl-item { position: relative; padding: 0 0 30px 44px; } .gdb-tl-item:last-child { padding-bottom: 0; } /* 圆点：left 必须为 0 —— 它的定位基准是 .gdb-tl-item 的 padding box，而 li 的左边缘 已经落在 ul 的 content 起点上（ul 有 padding-left:4px）。原先写 left:4px 等于把 ul 的 4px 内距算了两遍 → 圆点整体右移 4px，中线跑到 16px，而轨道中线在 12px，看着「跑偏」。 归零后：圆点 4..20、中线 12 = 轨道（left:11px / 2px）中线，二者重合； 外发光 0 0 0 4px 的左沿正好落在 ul 左边缘（即 ul 那 4px 内距就是给发光留的位）。 2026-10-04 实测（无头 Chrome 1280 视口）：改前 轨道中心 x=90 / 圆点中心 x=94（偏 4px）， 改后均为 x=90；圆点垂直中心 2095 vs 首行文字中心 2094.5（偏 0.5px，可忽略，垂直方向不动）。 */ .gdb-tl-item::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-500, #FF7C1C); box-shadow: 0 0 0 4px #FFE7D6; } .gdb-tl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; } .gdb-tl-year { flex: none; font-weight: 700; font-size: 1.0625rem; color: var(--brand-text, var(--brand-800, #B34700)) !important; } .gdb-tl-head h3 { margin: 0; } .gdb-tl-item p { margin: 0; color: rgba(0, 0, 0, .72); } @media (max-width: 575px) { .gdb-tl-item { padding-left: 34px; } } /* ---------- 联系我们（与首页 tuike 同款；本页样式表精简时被删，此处恢复） ---------- */ .contact-item { margin-bottom: 20px; } .contact-item p { padding-left: 42px; } .s_contact_info .contact-item h3 { display: flex; align-items: center; margin-bottom: 6px; } .s_contact_info .contact-item h3 .fa { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #FFF1E5; color: var(--brand-800, #B34700); font-size: .95rem; margin-right: 10px; } /* 咨询热线：号码即链接，移动端点按直接拨号。 o_cc1（浅底）下主题的 `.o_cc1 a:not(.btn)` 会接管字色，故四条规则统一 !important， 并沿双色制：号深橙、悬停更深；按钮深橙描边，悬停深橙底白字。 */ .s_contact_info .contact-phone-link { font-size: calc(1.25rem + .5vw); font-weight: 700; color: var(--brand-text, var(--brand-800, #B34700)) !important; text-decoration: none; } .s_contact_info .contact-phone-link:hover { color: var(--brand-surface, var(--brand-700, #C25200)) !important; text-decoration: none; } .s_contact_info .contact-call-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 42px; padding: 6px 18px; border: 1px solid var(--brand-text, var(--brand-800, #B34700)) !important; border-radius: 999px; color: var(--brand-text, var(--brand-800, #B34700)) !important; background: #fff; font-weight: 700; text-decoration: none; } .s_contact_info .contact-call-btn:hover { background: var(--brand-surface, var(--brand-700, #C25200)) !important; color: #fff !important; text-decoration: none; } /* 2026-10-05：实测 41px 高 < 44px 触控目标 → 触摸端补到 44px（桌面维持原值）。 注：.contact-call-btn 在 tuike/gygdb/lxgdb-contact 三处各有一份定义，改时须同步。 */ @media (max-width: 991.98px) { .s_contact_info .contact-call-btn { min-height: 44px; } } .s_contact_info .col-lg-6 img.img-fluid { box-shadow: 0 4px 20px rgba(0, 0, 0, .08); } .s_contact_info .contact-item .contact-note { margin-top: 6px; margin-bottom: 0; color: rgba(0, 0, 0, .6); font-size: .9375rem; line-height: 1.6; } /* ===== 188 批：板块间距统一（实测调整，仅本页使用）===== 目标视觉间距：hero 后 72px；常规板块间 88px；同底色相邻（资质→营业执照，白接白）104px 手法：只调各 section 的 padding-top（「官方账号→我们的资质」这一对两边同时收），逐对独立互不影响 */ section.s_shape_image{padding-top:55px !important;} /* ① 头图 → 公司介绍 49 → 72 */ section.s_vision{padding-top:44px !important; padding-bottom:24px !important;} /* ② 公司介绍 → 我们的愿景 44 → 88；底部补 24px（原 pb=0，底色块贴内容）*/ section.s_features{padding-top:44px !important;} /* ④ 产品矩阵 → 服务保障 92 → 88 */ section.s_history{padding-top:44px !important; padding-bottom:46px !important;} /* ⑤ 服务保障 → 发展历程 44 → 88；底部补 46px（原 pb=0，底色块贴内容）*/ section.s_key_images{padding-top:14px !important;} /* ⑦ 同上（两侧各留 27px，底色块边缘不贴内容） */ section.s_three_columns{padding-top:64px !important;} /* ⑧ 资质 → 营业执照（两块同为白底）68 → 104 */ section.s_contact_info{padding-top:24px !important;} /* ⑩ 客户评价 → 联系我们 69 → 88 */ /* ===== 191 批：「我们的资质」证书墙（主次式 2 大 + 3 小）===== ① 去橙色边框：卡片缩略图已从大图重制（四边橙占比 0%），卡框另配中性细边 ② 图区浅灰衬底（装裱感）+ 证书完整可见（contain，不再 16:9 裁边） ③ 主次式：营业执照 / 工信部备案 = 大卡（col-lg-6）；回执 / iOS / 安卓软著 = 小卡（col-lg-4） ④ 标题块与卡片块收紧为一组（板块 padding-top 4px → 视觉间距 ≈40px） */ section.s_three_columns.s-cert-wall{padding-top:4px !important;} .s-cert-wall .s_card{border:1px solid #EFE7E0 !important;border-radius:14px !important;background:#fff !important;box-shadow:0 2px 10px rgba(46,31,20,.05) !important;transition:transform .22s ease,box-shadow .22s ease;} .s-cert-wall .s_card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(46,31,20,.10) !important;} .s-cert-wall .o_card_img_wrapper{margin:0 !important;padding:14px !important;background:#FAF8F6 !important;display:flex !important;align-items:center;justify-content:center;width:100% !important;} .s-cert-wall .cert-fig-sm{height:240px !important;} .s-cert-wall .o_card_img_wrapper > a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;} .s-cert-wall .o_card_img{width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important;border-radius:6px;box-shadow:0 1px 4px rgba(46,31,20,.10);transition:transform .25s ease;} .s-cert-wall .s_card:hover .o_card_img{transform:scale(1.02);} .s-cert-wall .card-body{padding:16px 18px 18px !important;background:#fff !important;} .s-cert-wall .card-title{margin:0 0 6px !important;font-size:1.125rem !important;font-weight:600 !important;color:#241A12 !important;} .s-cert-wall .card-text{margin:0 !important;font-size:.875rem !important;line-height:1.55;color:#6F6459 !important;} @media (max-width:1199px){.s-cert-wall .cert-fig-sm{height:220px !important;}} @media (max-width:767px){.s-cert-wall .cert-fig-sm{height:180px !important;}.s-cert-wall .card-title{font-size:1rem !important;}.s-cert-wall .card-text{font-size:.8125rem !important;}} @media (max-width:575px){.s-cert-wall .cert-fig-sm{height:150px !important;}.s-cert-wall .card-body{padding:12px !important;}} /* 191c：栅格改用自定义 flex 类（本页 Odoo 的 .col-sm-6 不生效，故不依赖其栅格） 20261002：资质 3 张同行，统一 3 等分列；平板（≤991.98）2 列；手机（≤767.98）1 列 */ .s-cert-wall .cert-col{position:relative;width:100%;padding-left:15px;padding-right:15px;} .s-cert-wall .cert-col-small{flex:0 0 33.3333%;max-width:33.3333%;} @media (max-width:991.98px){ .s-cert-wall .cert-col-small{flex:0 0 50%;max-width:50%;} } @media (max-width:767.98px){.s-cert-wall .cert-col-small{flex:0 0 100%;max-width:100%;}} /* ===== 192 批：资质 CTA 板块移至页面最底部后的间距补偿（拆掉原「CTA↔客户评价」的设定） ===== */ section.s_three_columns.s-cert-wall{padding-bottom:40px !important;} /* 证书墙底部留白 70→46px */ section.s_contact_info{padding-bottom:64px !important;} /* 联系我们 → CTA 间距 68→88px */ /* ===== 194 批：关于我们页内容精简（删「三大产品矩阵」「客户评价」；「官方账号」并入「联系我们」） ===== 官方账号在联系板块内改为一行式列表（原独立板块的步骤卡与连接线随板块移除） */ /* 194 批：窄屏下「联系我们→资质 CTA」的间距补偿（窄屏 CTA 的 grid 布局使顶部留白偏小） */ @media (max-width:991.98px){section.s_contact_info{padding-bottom:88px !important;}} /* ===== 196/197 批：页面最后一个板块（资质 CTA）底色 = 白（先 #FFF7F1，第197批改 #FFFFFF）===== */ section.s_cta_card{background-color:#FFFFFF !important;} /* ===== 移动端间距专项（2026-09-25）：≤767px 大间距降档，首屏露出文案+按钮；桌面端零变化 ===== */ @media (max-width:767px){ .pt256,.pt192,.pt152,.pt136,.pt104{padding-top:56px !important;} .pb256,.pb192,.pb160,.pb136,.pb104{padding-bottom:40px !important;} .pt88{padding-top:48px !important;} .pb88{padding-bottom:36px !important;} section.s_contact_info{padding-bottom:56px !important;} .s_kickoff.pt152{padding-top:var(--nav-offset-sm, 104px) !important;} /* 手机头图给固定导航胶囊留出空间 */ } /* ============================================================ 顶部导航胶囊：内边距与间距（2026-10-01 定稿） ------------------------------------------------------------ 问题：logo 文字距胶囊左边缘仅 20px，恰为圆角半径（80px 高 / 2 = 40px） 的一半，文字的起点还在圆弧里；而末项距右边缘 44px —— 左右不对称， 读作「logo 贴边」。全站 5 项导航在 1140px 胶囊里仅占约 744px， 右侧空 400px+，间距预算充足。 改法：不动 .px-3 / .me-4 的全局定义（全站工具类，会影响其它元素）， 只在本页作用域内覆盖导航三处 —— 胶囊左右内边距 20px → 40px（992–1199px 随容器收窄为 32px） logo 与首项间距 30px → 40px 菜单项左右内边距 24px → 28px（项间净距 48 → 56px） 宽度预算（最紧的 992px / 容器 960px）：需 744px，余 152px，不溢出。 保留：@media (min-width:992px) and (max-width:1003.98px) 的 22px 项距压缩档 （历史为 7 项导航防溢出所设），因此新值从 ≥1004px 起生效。 手机端（<992px）：桌面胶囊带 d-none，本块全部不生效，移动端维持原样。 注意：这里给的是胶囊「内部」留白，胶囊本身仍与页面主体同宽同左边界， 不移动容器，否则会与下方正文栅格错位。 ============================================================ */ @media (min-width: 992px) { header nav.navbar.d-lg-block.px-3 { padding-left: 32px !important; padding-right: 32px !important; } header nav.navbar .navbar-brand.me-4 { margin-right: 40px !important; } } @media (min-width: 1200px) { header nav.navbar.d-lg-block.px-3 { padding-left: 40px !important; padding-right: 40px !important; } } @media (min-width: 1004px) { header #top_menu > li > .nav-link { padding-left: 28px !important; padding-right: 28px !important; } } /* ========================================================== 2026-10-03 第 6 轮 · 中英混排 C 方案（与 tuike.css 同一决策） ---------------------------------------------------------- 关于页首屏大标题「15 年专注门店拓客」，数字 15 原本走 Poppins、 汉字走 PingFang，一行内高低略不齐；换 --font-cjk-num 后同族齐平。 ⚠️ 只作用于首屏 s_kickoff 区块的 h1（本页仅 1 处）， 正文与其它标题一律不动。 ========================================================== */ .s_kickoff h1 { font-family: var(--font-cjk-num); font-variant-numeric: tabular-nums; }