/* ========================================================================== common/bridge.css — v10 数据钩子 ↔ www 皮肤的补丁样式 -------------------------------------------------------------------------- 只补三类东西，其余视觉一律交给 www 的 static/css/*.css： 1) v10 的 DOM 钩子（#headImg / .no-login / .login-in / .console-link …）在 www 皮肤里没有对应选择器，这里给出与皮肤一致的观感 2) 导航右侧「文档」链接（www 里由后台 rightContent 输出，v10 无此配置） 3) 悬浮工具条里 v10 用图标（www 用字体图标）时的尺寸归一章节： 1) 右侧文字链 4) 页脚友情链接弹层 2) 登录/注册/用户区 5) 当前页高亮改为按地址判定（覆盖皮肤「首项恒蓝」） 3) 悬浮工具条图标 6) 导航与正文的垂直关系（常规：正文让出 --navheight）注意：本文件必须在 www 的 static/css/*.css 之后加载。 ========================================================================== */ /* ---------- 1. 导航右侧：文字链（www 里由后台 rightContent 输出，v10 无此配置） ---------- */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-public { font-size: var(--navfontSize, 14px); } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-public a { color: var(--tc-ink, #16181a); transition: color 0.2s ease-out; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-public a:hover { color: var(--Original, #0056ff); } /* ---------- 2. 登录 / 注册 / 用户区（v10 钩子） ---------- */ /* .no-login 是「登录」容器与「免费注册」按钮共用的隐藏类，显示时不能让 display 写死——免费注册是 a.navbar-Login（flex + 满高） */ .nav-layoutcontainer .horizontal-menu-right-container .no-login { display: revert; } .nav-layoutcontainer .horizontal-menu-right-container a.navbar-Login.no-login { display: flex; } .nav-layoutcontainer .horizontal-menu-right-container .login-in.navbar-user { display: flex; align-items: center; } /* 头像：v10 用 #headImg 承载首字母 + 随机底色（JS 写入 inline background）注意：外层 .navbar-user-avatar 是「白底 + 4.5px 圆角的方框」，内层原写成 50% 会在四个角露出白边（看着像方框里套个圆头像）→ 这里统一按方角铺满，与皮肤一致 */ .nav-layoutcontainer .navbar-user .navbar-user-avatar #headImg { width: 100%; height: 100%; border-radius: 4.5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; line-height: 1; user-select: none; background: #3699ff; } /* 头像换成 QQ 头像时（插件「用户详情自定义字段」填了 QQ 号）： bridge.js 往 #headImg 里塞一个，图铺满方框、去掉首字母的底色 */ .nav-layoutcontainer .navbar-user .navbar-user-avatar #headImg.is-avatar { background: transparent !important; overflow: hidden; } .nav-layoutcontainer .navbar-user .navbar-user-avatar #headImg .navbar-user-avatar-img { display: block; width: 100%; height: 100%; border-radius: 4.5px; object-fit: cover; } /* 实名标签 */ .nav-layoutcontainer .navbar-user .no-real-name { color: #ff7a45; font-size: 14px; } .nav-layoutcontainer .navbar-user .real-name { color: #3dae4e; font-size: 14px; } /* 用户下拉菜单（悬停用户名 / 头像展开） -------------------------------------------------------------------------- 尺寸全部按参考图实测：白卡 207×291（6 行 × 44 + 上下 14）、左侧线性图标 24px 字号（字形约 19×17）+ 7px 间距、文字 14px #5f7292、直角无圆角、极轻投影；卡片右边缘停在头像左侧 6px 处，头像露在卡片外侧。 nav.css 里那套是源站官网的旧样式（min-width:170 / 行高 40 / hover 整行蓝底白字），这里覆盖掉：选择器比它多一个 .nav-layoutcontainer，权重够，不依赖加载顺序。展开靠纯 CSS :hover（含 .navbar-user 整个盒子，所以从名字滑到面板不会收起）； ::before 补上 2px 的 margin 缝隙，否则鼠标穿过缝隙时 hover 会断、面板闪退。 */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user:hover .navbar-user-dropdown { display: block; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown { /* = 24(内容右外边距) + 32(头像) + 6(与头像的间隙)，即卡片右边缘贴着头像左侧 */ right: 62px; /* ★ 必须显式给 top：v10 里 .navbar-user 是 display:flex（bridge.css 第 2 节），绝对定位子元素的静态位置会按 flex 规则算到「内容右边、垂直居中」，面板会整块跑到导航上方（实测 top=-130）。写死 top:100% 才贴着导航底边。 */ top: 100%; margin-top: 2px; min-width: 207px; width: 207px; background: #fff; border-radius: 0; box-shadow: 0 8px 24px rgba(16, 40, 84, 0.1); z-index: 1200; } /* 缝隙桥：让 2px 的透明间隙也算在触发区内，鼠标穿过去时面板不闪退 */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown .navbar-user-dropdown-container { padding: 14px 0; background: #fff; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown .navbar-user-dropdown-container .navbar-user-dropdown-item a { height: 44px; padding: 0 16px 0 22px; color: #5f7292 !important; font-size: 14px; line-height: 1; transition: background 0.16s ease-out, color 0.16s ease-out; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown .navbar-user-dropdown-container .navbar-user-dropdown-item a i { width: 24px; margin-right: 7px; font-size: 24px; line-height: 1; color: var(--Original, #0056ff); text-align: center; } /* 行内悬停：淡蓝底 + 文字加深，不做整行蓝底白字（参考图是浅色菜单） */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown .navbar-user-dropdown-container .navbar-user-dropdown-item a:hover { background: #f4f8ff; color: #16181a !important; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user .navbar-user-dropdown .navbar-user-dropdown-container .navbar-user-dropdown-item a:hover i { color: var(--Original, #0056ff) !important; } /* 名字 / 箭头：悬停时名字变主题蓝（参考图展开态就是这样；箭头保持向下，不翻转） */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user:hover .navbar-user-content .navbar-user-name span { color: var(--Original, #0056ff); } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-search .horizontal-menu-right-container .navbar-user:hover .navbar-user-content .navbar-user-name i { color: var(--Original, #0056ff); } /* ---------- 3. 悬浮工具条：v10 的图标 ---------- */ .online_Nav .online_body .online_navItem .onlineService .onlineService_icon_img { width: 20px; height: 20px; object-fit: contain; display: block; margin: 0 auto 2px; } /* 回到顶部：v10 无 iframe 干扰，补一个可点击态 */ .online_Nav .onlineTop { cursor: pointer; } /* ---------- 4. 页脚：友情链接弹层 ---------- www 里 .footerCopyleftcontainer 默认 display:none（弹层），靠 .friendlyLinkButton 触发；原实现藏在混淆 JS 里，这里用 .is-open 类重实现（见 bridge.js）。另外 footer.css:822 里 .linkbox 的箭头图标（../images/picture/remoteL16905459289824.png）在模板包里并不存在， www 自身那里就是坏的，这里用 CSS 画一个箭头替代。 */ .footerContainer .footerCopyleft .footerCopyleftcontainer.is-open { display: block; } .footerContainer .footerCopyleft .friendlyLinkButton .linkbox { background: none; position: relative; } .footerContainer .footerCopyleft .friendlyLinkButton .linkbox::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -6px 0 0 -3px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); transition: transform 0.2s ease-out; } .footerContainer .footerCopyleft .friendlyLinkButton.is-open .linkbox::after { transform: rotate(-135deg); margin-top: -2px; } /* ---------- 5. 当前页高亮 + 首项品牌蓝 ---------- www 的 nav.css 第 6-2 节把 `li:first-child>a` 用 !important 钉成品牌蓝（--tc-firstnav = #206fed），第 6-3 节再据此把下划线藏掉 —— 这是「首项是品牌位」的设计，不随当前页变化。这里分两件事： · 5-1 首项恒蓝，恢复 www 的品牌位设计（曾经写成「非当前页退回 ink」，结果首项在别的页面上变成黑字，与设计不符）； · 5-2 其它项谁变蓝交给 js/nav.js 按 URL 打的 .menu-active 类。权重说明：5-1 比 nav.css:1511 那条多一个 :first-child 的排除/命中，5-2 同级但本文件在 nav.css 之后加载，因此都能覆盖，!important 只是兜底。 */ /* 5-1 首项（品牌位）恒为品牌蓝 #206fed，所有交互态一致 */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:first-child > a, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:first-child > a:hover, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:first-child > a:focus, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:first-child > a:visited { color: var(--tc-firstnav, #206fed) !important; } /* 5-2 当前页（位置不限）恒为品牌蓝，所有交互态一致 */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li.menu-active > a, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li > a.menu-active, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li.menu-active > a:hover, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li.menu-active > a:focus, .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li.menu-active > a:visited { color: var(--tc-firstnav, #206fed) !important; } /* 5-3 下划线只在「hover 到非当前页项」时出现。当前页已经用蓝色标出，再叠一条横线是重复视觉（皮肤第 6-3 节原本就对首项这么做，这里推广到任意位置）；由 js/nav.js 负责加 .is-hidden。 ★ 2026-10-22 对齐源站：这里只改 opacity，**不写 visibility**。源站移出导航时是给 .underline 设 `opacity:0`，靠 `all .3s ease` 淡出（CDP 逐帧实测：0 → 0.887 → 0.424 → … → 0，历时 300ms）；加 visibility:hidden 会立刻消失，淡出过程一帧都看不到。 */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container > .underline.is-hidden { opacity: 0 !important; } /* 5-4 带下拉的一级项：下拉展开时 hover 也要变蓝，与「没有下级」的项一致。 -------------------------------------------------------------------------- 问题：hover 到有下级的项时 js/nav.js 会打开下拉并挂 .Force_white，而 nav.css:96 有一条 `.nav-layoutcontainer.Force_white … li a { color: var(--txtcl) !important }` 把文字钉成 #333 —— 于是同样是一次 hover，没下级的项变蓝、有下级的项变黑，只剩一条下划线在动（用户截图里就是这个现象）。为什么必须带 !important：对方就是 !important，且这条规则写在 nav.css 里、本文件后加载，同权重即可覆盖；这里选择器多一个 :hover（0,5,2 > 0,4,2），即使加载顺序变了也能压住，!important 只是兜底。为什么用 --Original 而不是 --tc-firstnav：无下级的项 hover 取的正是 --Original（nav.css:1533），这里取同一个值，两种项才有完全一致的 hover 反馈； --tc-firstnav 留给「当前页」那种持续高亮。 */ .nav-layoutcontainer.Force_white .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:not(.menu-active):not(:first-child) > a:hover, .nav-layoutcontainer.Force_white .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:not(.menu-active):not(:first-child) > a:focus { color: #0052d9 !important; } /* 5-4b 常态 hover（未展开下拉时）的变色也统一到 #0052D9，和 5-5 的横条同色。 nav.css:1533 是 `li a:hover { color: var(--Original) }`（#0056ff）；这里选择器多两个 :not() + 同样带 li/a/:hover，权重 (0,9,2) > (0,7,2)，不用 !important。首项「最新活动」与当前页项排除在外：它们各自有 --tc-firstnav 的固定蓝，不属于 hover 反馈。 */ .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:not(.menu-active):not(:first-child) > a:hover { color: #0052d9; } /* 下拉展开期间，当前页那一项仍保持品牌蓝（别被 .Force_white 的黑字规则按回去）。 5-2 的权重本来就比 nav.css:96 高，这条只是把 :hover/:focus 也补齐。 */ .nav-layoutcontainer.Force_white .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li.menu-active > a, .nav-layoutcontainer.Force_white .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li.menu-active > a:hover { color: var(--tc-firstnav, #206fed) !important; } /* 5-5 选中横条：数值全部按源站实测对齐（2026-10-22 用 CDP 逐帧采样）。 -------------------------------------------------------------------------- 源站 `.horizontal-menu-navbar-container .underline` 的 computed 值是 background-color: rgb(0, 82, 217) （#0052D9） height: 2px; bottom: 0; border-radius: 0 transition: all 0.3s ease 且 JS 只改 inline 的 width / left / opacity，位置移动实测过渡 300ms （transitionrun left 0.3s → transitionend 300ms 后），移出时只把 opacity 归 0， left/width 原地不动 —— 先淡出、下次直接在新位置淡入。本主题原来把它放慢到 0.52s easeOutCubic，且 opacity 单独 0.25s；与源站并排对比时「滑得太慢、落下太软」，故恢复源站原值。颜色为什么单独写：nav.css:278 用的是 `var(--Original)`（本主题 #0056ff），比源站品牌蓝偏亮偏紫。只在 .underline 这一处换成 #0052D9，不动 --Original，否则全站按钮/链接都会跟着变色。 ★ 深色页头顶态那条白线（6 节）权重比这里低，用 body:not(.nav-on-dark) 让开，深色页头依旧走它自己的白/蓝两态。 */ body:not(.nav-on-dark) .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container > .underline { background-color: #0052d9; } .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container > .underline { transition: all 0.3s ease; } /* 5-6 下拉面板的展开/收起裁切（配合 js/nav.js 第 2 节）。源站的面板是从导航条底下「推出来」的：容器高度 0 → 目标高度走 150ms，过程中必须 overflow:hidden 把超出部分裁掉，否则内容会在动画前就整块漏出来。 ★ 只在这里加 hidden，不要给 .Submenu-background 之外的层加 —— 面板阴影/关闭按钮都在容器内部，容器裁切正好把它们一起管住。 ★ 2026-10-22：换栏已改成瞬时替换（和源站一致），不再做高度过渡，但打开/收起仍走 slideDown/slideUp，这条裁切照旧需要。 */ .nav-layoutcontainer .menu-dropdown-container { overflow: hidden; } /* ---------- 6. 导航与正文的垂直关系 ---------- 导航是 position:fixed（nav.css:76），脱离文档流，所以正文必须自己让出头部高度，否则每页开头 62px 会被压住。两种模式二选一： A) 默认（body 上不加类）——正文从导航下方开始 padding-top: var(--navheight) 加在 body 上，不影响 fixed 定位的导航本身。 B) body.has-hero ——「Hero 顶到页面最上方、导航压在它上面」不让位（body 不补 padding-top）；导航默认是**半透明白 + 毛玻璃**， Hero 的颜色会透上来一层，导航条本身有底色、不是一条纯白空带；向下滚动 / 鼠标移入 / 下拉面板展开时整条变不透明白底。首页用 B（见 index.html 的 body 标签），内页全部用 A。 */ /* A) 内页：正文让出导航高度。排除 #index（首页）——首页由 Hero 自己顶到 y=0，不让位，否则 Hero 上方会多出一条和导航等高的白带。 ☆ 这里同时写 body:not(.has-hero) 与 :not(#index) 两个条件： has-hero 靠模板输出，万一模板条件没生效，#index 这条照样兜住，首页不会退回「导航下面一条白带」的老样子。 */ body:not(.has-hero):not(#index) { padding-top: var(--navheight, 62px); } /* 首页没有配横幅时 Hero 不渲染，这时仍需让位，否则首屏内容会被导航压住。 :has() 现代浏览器都支持；不支持时退化成上面那条规则（不让位），影响仅限「首页一条横幅都没配」这种少见情况。 */ body#index:not(:has(.hp-hero)) { padding-top: var(--navheight, 62px); } /* B-1) 全站顶部默认态：极淡白 + 轻背景模糊（轻毛玻璃）。 2026-10-19 起除「文章 / 帮助文档」族以外所有页面都用这套（原先是首页专属）。权重 (0,3,0)，高于 nav.css:141 的 .horizontal-menu-navbar .headerBg（0,2,0）与 nav.css:160 的 .headerBg.MenuColor（0,3,0），不加 !important。 ★ 这里只允许写一条**不带 body 前缀**的选择器：曾为了兜首页写过 body.has-hero / body#index 两个前缀，权重涨到 (0,4,0)/(1,3,0)，而 B-2 的悬停 / 滚动 / 下拉三条都只有 (0,3,0)，被这条压住 —— 表现就是「首页下拉、悬停也一直是模糊透明，变不白」。改权重前先看 B-2，两者必须同权重，靠书写顺序（B-2 在后）决出胜负。为什么不是全透明：全透明时导航条只剩文字，背后的 Banner（网格线、色块）原样穿过导航，看着像「导航没有底」；给一层很淡的白 + 一点模糊， Banner 的色相仍然透上来，但细节被柔化，导航条自然浮在图上。浓度只改一个数：0.20 几乎看不出底色、0.35 明显有白纱、0.5 更实。模糊只改一个数：4px 极轻、8px 明显、12px 已是磨砂玻璃。 ★ 模糊半径 2026-10-20 起改成**后台可配**：读 --nav-blur（默认 8px），由后台「站点设置 → 网页参数 → 导航模糊」填，header.html 把它写成 :root 变量带进来。改数值不用动 CSS，也不用升版本号。 */ .nav-layoutcontainer .horizontal-menu-navbar .headerBg { background-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(22, 24, 26, 0.06); box-shadow: 0 1px 3px rgba(49, 49, 49, 0.04); -webkit-backdrop-filter: blur(var(--nav-blur, 8px)) saturate(1.2); backdrop-filter: blur(var(--nav-blur, 8px)) saturate(1.2); } /* B-2) 下滑 / 悬停 / 下拉面板展开 → 整条变不透明白底 + 轻阴影。三个时机：页面滚动 .is-scrolled（js/nav.js 挂）、下拉面板 .Force_white（js/nav.js 挂）、鼠标移入 :hover。权重与 B-1 相同（都是 3 个类：2 个 class + 1 个 class/伪类），靠「写在 B-1 之后」生效 —— 所以这三条必须永远排在 B-1 下面，且 B-1 不能加 body / id 前缀，否则这里全部失效。 headerBg 自带 transition: all .5s，所以是淡入，不会硬切。 ★ 2026-10-23 :hover 只给「真的能悬停」的设备（鼠标 / 触控板）。手机上点一下会留下**粘滞 hover**：实测 393 触屏点完汉堡 2.1 秒后 `.horizontal-menu-navbar:hover` 仍为 true，整条导航就卡在不透明白，与源站「点开菜单导航条纹丝不动」完全相反。 (hover:hover)+(pointer:fine) 把这条整段排除在触屏之外；滚动 .is-scrolled 与下拉 .Force_white 不受影响，仍会正常变白。 */ .nav-layoutcontainer.is-scrolled .horizontal-menu-navbar .headerBg, .nav-layoutcontainer.Force_white .horizontal-menu-navbar .headerBg { background-color: #fff; border-bottom-color: rgba(22, 24, 26, 0.06); box-shadow: 0 1px 3px rgba(49, 49, 49, 0.1); /* 底色已经不透明白，背景模糊没有意义，关掉可以省一层 GPU 合成 */ -webkit-backdrop-filter: none; backdrop-filter: none; } @media (hover: hover) and (pointer: fine) { .nav-layoutcontainer .horizontal-menu-navbar:hover .headerBg { background-color: #fff; border-bottom-color: rgba(22, 24, 26, 0.06); box-shadow: 0 1px 3px rgba(49, 49, 49, 0.1); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* B-3) 文章页 / 公告族（body.nav-solid）：导航**始终是不透明白底**，不参与上面的毛玻璃 / 滚动变白。这类页正文是白色长文卡片，底色从导航下沿透上来会把标题区和面包屑搅在一起。开关在模板上：（没这个类就走 B-1/B-2 的毛玻璃）。 ★ 2026-10-21 用户要求「新闻动态 / 帮助文档的导航栏要和别的页面一样」，于是把 5 个列表 / 总览页的 nav-solid 去掉了（news / news-classify / help / help-result / help-view），**只留文章页**： news-details / help-details + 公告族的 announce / announce-details（用户未提，暂不动）。权重 (0,4,1) 高于 B-2 的 (0,4,0)，滚动 / 悬停也不会被改回半透明。 */ body.nav-solid .nav-layoutcontainer .horizontal-menu-navbar .headerBg { background-color: #fff; border-bottom-color: rgba(22, 24, 26, 0.06); box-shadow: 0 1px 3px rgba(49, 49, 49, 0.1); -webkit-backdrop-filter: none; backdrop-filter: none; } /* B-4) 内页页头（.globalBanner，紧跟的那一段）：顶到页面最上方、上半截压在导航下面 —— 和首页 Hero 同一个起点，上面 B-1 的毛玻璃才有东西可透（否则导航浮在 body 白底上，还是白条）。做法：margin-top 负一个导航高把页头拽回 y=0，height 再补一个导航高，让页头底边和原来重合。 ★ 这里**不能加 padding-top 抵消**（2026-10-20 前有一条 padding-top: var(--navheight)，本意是「内容位置一点不变」，实际把标题整体压低了 31px）：.pagebanner 是 absolute + leftSide/centered 的 top:50%，它的 50% 基准是 .pagebanner-relative（= 页头的**内容盒**），加了 padding-top 内容盒只剩 --banner_height，50% 就落在 62 + 360/2 = 242；去掉后内容盒是整块 422，50% 落在 211 —— 标题顶边从 193 回到 162，和源站（161）逐像素对齐，距导航下沿仍有约 100px 净空，不会顶到导航。 ★ 排除 .newsBanner（新闻/公告/文档，body.nav-solid 走白底、自带负 margin） ★ 排除 .white（白字页头 = 深色大图，如 /bt.html、/solution/*、 /partner/agent.html）—— 那种底色压在导航下，深色文字会糊成一片，保持原来的白色导航条（/bt.html 例外，它用 body.nav-on-dark 单独开了一套）。覆盖：public/page-banner.html 的 10 个页 + 各页手写的 .black 页头（/plan/*.html、/Introduction.html、/cooperation/*.html 等）。 */ header + .globalBanner:not(.newsBanner):not(.white) { margin-top: calc(-1 * var(--navheight, 62px)); height: calc(var(--banner_height) + var(--navheight, 62px)); box-sizing: border-box; } /* ---------- 6.5 深色页头（body.nav-on-dark）：页头压在导航下 + 导航顶部态白字 ---------- 用途：页头是**深色大图 + 白字**（.globalBanner.white）的页面。这类页头不能走 B-4（B-4 排除了 .white，因为深色底 + 深色导航字会糊），但也不能留一条白导航条 —— 那就和别的页面明显不一样了（用户 2026-10-20 在 /bt.html 上就是抱怨这个）。所以单独开一套：把加上 class="nav-on-dark" 即可，页面模板一行搞定，样式都在这里。目前用它的页面：/bt.html（宝塔面板）、/certificate.html（资质荣誉）、 /Introduction.html（公司简介）—— 三页的页头图都是深色，源站也都是白字。 ① 上拉一个导航高：算法与 B-4 逐字一致（margin-top 负一个导航高、height 补回）， **同样不加 padding-top**，理由见 B-4 的注释（加了会压低头衔 31px）。 ② 顶部态把导航的字变白：不逐条写 color，而是改 token —— 菜单项 / 首项高亮 / 首项分隔线 / 右侧链接 / 手机汉堡 / 手机人像全读 nav.css 第 1472 行那几个变量（--tc-ink / --tc-firstnav / --tc-firstnav-divider），改一处全跟着走。 ★ 变量只声明在 .horizontal-menu-navbar 上，不声明在 .nav-layoutcontainer：下拉面板 .menu-dropdown-container 是它的**兄弟**，声明在容器上会把两级/三级面板的字一起染白（白底白字）。 ★ 搜索框是白底的，里面 input 的文字也读 --tc-ink，必须就地改回深色。 ③ 顶部态的毛玻璃：**与首页同一层 20% 白纱**（模糊半径同 --nav-blur）。 2026-10-20 先试过 12% 的**黑**纱，用户反馈「黑色磨砂不好看」，最后定的方案是**只换纱、字色和白色LOGO 照旧**（白字 + 白纱）：白字压在这层白纱上的对比度实测 bt 3.50 / cert 3.50 / intro 8.22，不如换成深字的 5+，但用户要的是观感和首页统一，按这个来。 ★ 白字方案下**不要再给纱加厚**：纱越厚底越亮、白字越糊（intro 那版 nav-veil-strong 50% 白纱已删，别再加回来）。 ④ 回滚：下滑（.is-scrolled）、下拉展开（.Force_white）本来就不满足 :not()，自动回深色；只剩「鼠标移入导航条」这一态没有类可抓 —— B-2 那时会把整条变成白底，字必须跟着回深色，所以单写一条 :hover。 */ /* ① 页头上拉（受 body.nav-on-dark 控制：去掉这个类就回到「导航下一条白带」）。 ★ 手机断点**不单独覆盖**：B-4 那条公式在 ≤768 也是同样算（global.css 里 `.globalBanner{height:249px}` 权重 (0,1,0) 敌不过这条的 (0,2,0)，所以实际高度是 --banner_height + 导航高）。 2026-10-20 曾按 249 单独算过一次（299px），结果这几个页面在手机上比其他内页矮一大截（别的页 410、这里 299），看着像设置错了；现在与 B-4 对齐。 */ body.nav-on-dark header + .globalBanner { margin-top: calc(-1 * var(--navheight, 62px)); height: calc(var(--banner_height) + var(--navheight, 62px)); box-sizing: border-box; } /* ② 顶部态：白字（改 token） */ body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar { --tc-ink: #fff; --tc-firstnav: #fff; --tc-firstnav-divider: rgba(255, 255, 255, 0.45); } /* ②-1 顶部态：毛玻璃 —— **不着色，只模糊**（2026-10-20 定稿）。演进：12% 黑纱（用户嫌黑）→ 20% 白纱（用户嫌「过于白」）→ **transparent**。依据是拿源站三张效果图量化：同一张图里「导航区」与「紧邻其下的 banner 区」平均色差，源站 ≈ 0（宝塔 0/-2/-2、资质 -2/-4/0、简介 -2/-9/-12），我们 20% 白纱那版是 +15/+12/+1、4% 白纱那版还有 +2/+10/+13 —— 也就是说源站导航那层**完全不着色**，磨砂感 100% 来自 blur。 ★ 所以这里写 transparent，不是写错：backdrop-filter 在透明背景上照样模糊背后的 banner，「磨砂」成立；一旦给它加任何底色就又「发白」了。 ★ 模糊半径**必须**继续读 --nav-blur（后台「网页参数 → 导航模糊」写进 :root），不要在这里写死 8px —— 用户明确要求后台那个数值对这三页同样生效。 ★ 必须 :not(:hover) —— 光写前面的 :not(.is-scrolled):not(.Force_white) 挡不住 B-2 的「鼠标移入变白」（那条是 :hover 触发、没有类），本条权重更高，会把悬停的白底一起压掉。 */ body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar:not(:hover) .headerBg { background-color: transparent; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: blur(var(--nav-blur, 8px)) saturate(1.2); backdrop-filter: blur(var(--nav-blur, 8px)) saturate(1.2); } /* 搜索框白底，框内文字留在深色 */ body.nav-on-dark .nav-layoutcontainer .horizontal-menu-navbar .input-inner-wrapper { --tc-ink: #16181a; } /* 页签下划线（当前栏目指示条）：深色页头顶态是深色底，蓝条看不见 → 改白；其余所有状态（hover / 下滑后 / 展开下拉）都回品牌蓝 #0052D9。 -------------------------------------------------------------------------- ★ 2026-10-22 改写成「默认蓝 + 白态覆盖」，不再用「hover 才变蓝」：旧写法把蓝写在 `:hover` 上，而鼠标移到带下级的项会挂 .Force_white，选择器里的 :not(.Force_white) 立刻不成立 → 白蓝两条同时失效，颜色掉回 nav.css:278 的 var(--Original)（#0056ff，实测 bt.html 就是这个值）。现在第一条兜底给蓝（权重 0,5,1），第二条以 :not(:hover) 精确限定白态（0,7,1），条件互斥、不再有掉色路径。 */ body.nav-on-dark .nav-layoutcontainer .horizontal-menu-navbar .underline { background-color: #0052d9; } body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar:not(:hover) .underline { background-color: #fff; } /* logo 是彩色位图（PNG 带透明边），顶部态反相成纯白，下滑/悬停再还原 */ body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar .horizontal-menu-navbar-logo img#logo { filter: brightness(0) invert(1); } /* ②-2 白色 LOGO（后台上传）：有它就直接换图，不再靠 filter 反相。后台「站点设置 → 企业信息 → 白色LOGO」传的图存在插件页脚表 logo_white 里， header.html 里渲染成（没传就整张不渲染）。为什么要换图：彩色位图反相后色相会偏（蓝色鲸鱼反相成偏青的浅色），源站是另外准备一张纯白 PNG 的；留空时仍走上面那条反相，两路表现一致。两张图常驻 DOM，切态只切 display —— 不产生额外请求，也不会「先彩色闪一下再变白」。 */ .nav-layoutcontainer .horizontal-menu-navbar-logo img.logo-white { display: none; } body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar:not(:hover) .horizontal-menu-navbar-logo:has(img.logo-white) img#logo { display: none; } body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar:not(:hover) .horizontal-menu-navbar-logo:has(img.logo-white) img.logo-white { /* ★ 必须是 inline，不能写 block。 #logo 是 img 的默认 display:inline，基线对齐、被行盒的行高托着；白图若用 block，脱离行盒后顶边会比彩图**低 2.5px**（实测 idle 13 / hover 10.5），鼠标一移上去导航变白底、切回彩图，logo 就上下跳一下 —— 看上去像抖动。两张图宽高比一样（700×180，透明边也一致），display 对齐后 rect 完全相同。 */ display: inline; } /* 手机抽屉是白底，别跟着变白字 */ body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .m-nav-drawer { --tc-ink: #16181a; --tc-firstnav: #206fed; } /* ③ 鼠标移入导航条（B-2 会把它变成白底）→ 字和 logo 一起回深色 */ body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar:hover { --tc-ink: #16181a; --tc-firstnav: #206fed; --tc-firstnav-divider: #dedede; } body.nav-on-dark .nav-layoutcontainer:not(.is-scrolled):not(.Force_white) .horizontal-menu-navbar:hover .horizontal-menu-navbar-logo img#logo { filter: none; } /* ---------- 6.6 手机端页头高度：B-4 与 6.5 共用一份 ---------- 桌面端页头高度 = --banner_height（各页后台可调：360 / 400 / 340 …）。手机上照搬这个值会吃掉近半屏 —— 390×844 的机器上是 360+50 = 410px，用户 2026-10-20 反馈「手机端 banner 太大」。其实 global.css 里早有一条 `@media(max-width:768px){ .globalBanner{height:249px} }`，只是权重 (0,1,0) 敌不过 B-4 的 (0,2,0)，一直没生效。这里把它恢复成真正生效的规则：250 + 导航高。 ★ 顺带把文字往下挪半个导航高：.pagebanner 是 top:50% 居中，50% 是整块页头的中点 —— 300 的中点是 150，而带按钮的页 pagebanner 自身高 201，算出 top = 49.5，比导航底边（50）还高，标题会被压在导航下面。加半个导航高之后，文字居中在「导航以下」的可见区里（中心 = (300+50)/2 = 175），上下留白相等，也不会顶到导航。 ★ 位置必须在 6.5 之后：6.5 里 `body.nav-on-dark header + .globalBanner` 写的是桌面高度，与本节的 nav-on-dark 选择器**权重完全相同**（0,2,3），谁在后面谁赢 —— 放前面的话深色页头那三页手机上仍是 410。 */ @media screen and (max-width: 768px) { header + .globalBanner:not(.newsBanner):not(.white), body.nav-on-dark header + .globalBanner { height: calc(250px + var(--navheight, 50px)); } /* 只给「被上拉到导航底下」的页头调位置：.white 里没开 nav-on-dark 的那批（/solution/*、/partner/agent.html）页头本来就在导航下面，高度也没换，保持 global.css 原来的 top:50% 就好，别跟着挪。 */ header + .globalBanner:not(.newsBanner):not(.white) .pagebanner, body.nav-on-dark header + .globalBanner .pagebanner { top: calc(50% + var(--navheight, 50px) / 2); } /* ★ 2026-10-20：标题自带的 50px 上边距（global.css ≤768 那条 margin: var(--wapnavheight) 0 7px）要清零，否则文字整体偏下、上下留白不等。它是给「页头在导航下面」的老布局留的顶部空档；现在 .pagebanner 是按 **内容盒**在 translateY(-50%) 居中，这 50px 会整块算进盒子高度 —— 实测 300 高的页头里标题顶 124（离导航 74）、按钮底 277（离底 23），明显偏下。清零后标题 / 描述 / 按钮作为一个整体真正居中：49 / 48。这条对**所有内页页头**生效（含没上拉的 .white），它们同样偏下。 */ header + .globalBanner:not(.newsBanner) .pagebanner .pagebanner-text .pagebanner-title, body.nav-on-dark header + .globalBanner .pagebanner .pagebanner-text .pagebanner-title { margin-top: 0; } } /* ---------- 6.7 导航 LOGO 尺寸（PC）：36px → 30px ---------- 源站（www.jingyueyun.com）global.css 的 :root 里写的是 `--PcLogo: 30px`，而我们这套 common/vars.css 继承自 v10 默认主题，是 36px —— 渲染出来 140×36，比源站（116.7×30）整整大一圈。用户 2026-10-20 要求「导航这个 LOGO 改小一些」。 ★ 不去改 vars.css 里的 --PcLogo：同一个变量还被**页脚 LOGO** 用着（static/css/module.css → .sky-footer-left-logo img），改它会连带把页脚也缩小，而这次只要求导航。所以在这里按选择器覆盖，作用域限定在导航条。 ★ 权重 (0,4,0) 高于 nav.css 的 (0,3,0)，能压住 --PcLogo 的 36px；但必须再限定 min-width:769px —— mobile.css 的「手机用 --MobileLogo(28px)」是 (0,3,0) 且**加载顺序在后**，权重比不过这里，不限定就会把手机 LOGO 一起顶成 30px。 ★ #logo 和 img.logo-white 都带 .horizontal-logosize，黑 / 白两张图一处改完同步生效（宽度按原图 700×180 的比例自动算），不用分别写。 ★ 竖直方向由 .horizontal-menu-navbar 的 flex align-items:center 居中，高度变小只是上下各多留几像素空档；导航条总高仍是 --navheight(62px)，所有「给导航让位」的计算都不受影响。 ★ 想再微调只改这个 fallback（或页面里覆写 --nav-logo-height）。 -------------------------------------------------------------------- */ @media screen and (min-width: 769px) { .nav-layoutcontainer .horizontal-menu-navbar .horizontal-menu-navbar-logo .horizontal-logosize { height: var(--nav-logo-height, 30px); } } /* ---------- 7. 右侧悬浮条：悬停面板的显示开关 ---------- static/css/footer.css 里 .hoverWindow 默认 display:none，但整份 CSS（含源站那份，已逐行比对一致）**没有任何规则把它打开** —— 也就是说这套悬停面板从来没显示过。这里补两件事： 7-1 PC（>1200 且有 hover）= 老样子：**悬停即开、点击不参与**，见下面那条 :hover 规则。手机/触屏 = 只认 .item-open 一个类，由 bridge.js 4-2 点击开关。 ★ 手机上绝不能让 :hover 生效 —— 点完留下的粘滞 hover 还停在按钮上，点第二下虽然摘掉了 .item-open，:hover 立刻又把它打开，看上去就是「只能弹出、不会收回，只能点空白处才关」。所以 .item-open 之外的全部一律 display:none，把 hover 压死。不用 :focus-within：客服/反馈/建议的把手是，点一下就会拿到焦点，面板会一直挂着关不掉。不用 opacity 过渡，跟全局约定一致（淡入会先留一个空框，看着就是闪）。 7-2 面板挂在 right: calc(100% + 27px)，和按钮之间隔着 27px 空白；鼠标从按钮移到面板的中途会经过这块空白，那里既不是按钮也不是面板， hover 一断面板当场消失（等于根本进不去）。用一个铺满这段空隙的透明 ::before 把两边接起来。 7-3 最后一项（活动）本来就没有面板，它在右下角的定位由 footer.css 的 .online_navItem:last-child 负责，这里不动。 */ .online_Nav .online_navItem.item-open > .hoverWindow { display: block; } /* 没挂 .item-open 就一律不显示：压住所有 hover 来源（0,4,0）。手机端 footer（common/footer/m_footer.html 里的行内样式）还留着一条 .online_navItem:hover .hoverWindow（0,3,0，只在 $client=='wap' 时加载），不压回去手机点完的粘滞 hover 会把面板顶开。 */ .online_Nav .online_navItem:not(.item-open) > .hoverWindow { display: none; } /* PC 端恢复「悬停即开」（用户要求：PC 点击不参与开合）。 ★ 必须比上面那条 :not(.item-open) 更重 → 写成 0,5,0： .online_Nav + .online_navItem + :not(.item-open) + :hover + .hoverWindow ★ 用 (hover: hover) 排除触屏：平板/手机宽屏时不走这条，交给 JS 的点击开关（与 bridge.js 4-2 的 clickable() 判据一致）。 */ @media screen and (min-width: 1201px) and (hover: hover) { .online_Nav .online_navItem:not(.item-open):hover > .hoverWindow { display: block; } } .online_Nav .online_navItem > .hoverWindow::before { content: ""; position: absolute; top: 0; bottom: 0; right: -28px; width: 28px; } /* 面板本体提一层 z-index：图片/二维码加载完撑开尺寸后，要压住左侧可能存在的其它浮层（页脚弹层 z-index 是 99） */ .online_Nav .online_navItem > .hoverWindow { z-index: 120; }