/* ============================================================================ * mobile-drawer.css —— 手机端右侧「全部栏目」抽屉菜单 * ---------------------------------------------------------------------------- * 配套脚本：/assets/mobile-nav.js（注入 .bnm-tab / .bnm-mask / .bnm-panel） * 引用范围：6 个内容页的（index / credit / hire / members / travel / xq） * * 背景：站内原本**没有**任何汉堡菜单 —— 主包 CSS 里虽然有 .mobile-menu / * .mm-panel 之类的样式，但 JS 里从未渲染过那份 DOM（grep 为 0）， * 所以这里是全新的 .bnm-* 命名空间，跟既有样式零冲突。 * * 交互：右边缘竖直居中的小凸舌「菜单」→ 抽屉从右侧滑入；点遮罩 / 点关闭 / * 按 Esc / 切路由都会收起。展开期间锁住页面滚动。 * * z-index 层次（站内既有）：正文 < .bottom-nav(90) < 弹窗(100) < 顶栏(1000) * 抽屉要盖住顶栏才算正经菜单 → 遮罩 1190 / 面板 1200。 * =========================================================================== */ /* --------------------------------------------------------------------------- * 一、展开期间锁滚动 * -------------------------------------------------------------------------- */ html.bnm-lock { overflow: hidden; } /* --------------------------------------------------------------------------- * 二、菜单按钮（挂在**顶栏最右侧**，不是贴右边缘） * ---------------------------------------------------------------------------- * v1 做成了贴右边缘竖直居中的凸舌，用户要求改到顶部导航的最右侧，所以这里 * 只剩「顶栏里的一颗方形图标按钮」。 * * 宽度是有账要算的：mobile-v5.css 里为「≤360px 顶栏不许折行」做了很多妥协 * （.header-in gap 收到 10px、logo 允许省略号、.btn-login 锁死不收缩）， * 实测 320px 中文态下原来只剩约 29px 余量。本按钮要吃掉 30~36px + 一个 gap， * 所以这里必须同步把 .header-right 的 gap 与按钮尺寸按档收窄， * 否则 320~400px 会先把 logo 文案挤成省略号。 * 万一某个页面没有可挂的顶栏容器，退化成 .bnm-tab--float（贴右边缘）兜底。 * -------------------------------------------------------------------------- */ .bnm-tab { display: none; /* 默认隐藏，≤1024px 才出现（与 .bottom-nav 同一区间） */ flex: none; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid var(--c-line, #e3d9cf); border-radius: 10px; background: #fff; color: var(--c-ink, #26211d); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .bnm-tab svg { width: 19px; height: 19px; display: block; } .bnm-tab:active { background: #f3eae0; } /* 抽屉开着的时候面板(1200)与遮罩(1190)都在顶栏(1000)之上，按钮本来就被盖住了；这个类只是给"顶栏浮在遮罩之上"的意外情况留个保险 */ .bnm-tab.hide { opacity: 0; pointer-events: none; } /* 兜底形态：找不到顶栏容器时贴右边缘竖直居中 */ .bnm-tab--float { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 95; width: 44px; height: 44px; border: none; border-radius: 13px 0 0 13px; background: linear-gradient(180deg, #cf3a2b 0%, #a63329 100%); color: #fff; box-shadow: 0 10px 26px -10px rgba(166, 51, 41, 0.9); } .bnm-tab--float.hide { opacity: 0; pointer-events: none; } /* --------------------------------------------------------------------------- * 三、遮罩 * -------------------------------------------------------------------------- */ .bnm-mask { position: fixed; inset: 0; z-index: 1190; background: rgba(22, 17, 14, 0.48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.24s ease; -webkit-tap-highlight-color: transparent; } .bnm-mask.open { opacity: 1; } /* 关键：脚本用 hidden 属性控制显隐，而下面给 .bnm-* 写了 display， display 会盖掉 UA 的 [hidden]{display:none} —— 必须显式补回来 */ .bnm-mask[hidden], .bnm-panel[hidden] { display: none; } /* --------------------------------------------------------------------------- * 四、抽屉面板 * -------------------------------------------------------------------------- */ .bnm-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200; width: min(80vw, 306px); display: flex; flex-direction: column; background: var(--c-bg-2, #fffdf9); border-left: 1px solid var(--c-line, #e3d9cf); box-shadow: -26px 0 64px -30px rgba(0, 0, 0, 0.62); transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; overscroll-behavior: contain; } .bnm-panel.open { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .bnm-mask, .bnm-panel { transition: none; } } /* 头部 */ .bnm-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 13px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--c-line, #e3d9cf); background: linear-gradient(180deg, #fffdf9 0%, #fdf9f3 100%); } .bnm-head b { font-size: 16px; font-weight: 900; letter-spacing: -0.01em; color: var(--c-ink, #26211d); } .bnm-close { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--c-line, #e3d9cf); border-radius: 10px; background: #fff; color: var(--c-ink-soft, #665b51); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .bnm-close:hover { background: var(--c-ink, #26211d); color: #fff; border-color: transparent; } /* 栏目网格：两列，图标在上、全称在下 */ .bnm-grid { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; /* 底部安全区，别让最后一排压到 iPhone 横条 */ padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .bnm-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 1px solid transparent; border-radius: 13px; background: #f6f1ea; color: var(--c-ink, #26211d); font-size: 12.5px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bnm-item:active { background: #efe6da; } .bnm-item .bnm-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--c-primary, #c93628); box-shadow: 0 4px 12px -6px rgba(38, 33, 29, 0.32); } /* 当前栏目高亮 */ .bnm-item.active { background: #fdf0ec; border-color: rgba(201, 54, 40, 0.28); color: var(--c-primary, #c93628); } .bnm-item.active .bnm-ico { background: var(--c-primary, #c93628); color: #fff; box-shadow: 0 6px 16px -7px rgba(201, 54, 40, 0.9); } /* --------------------------------------------------------------------------- * 五、只在手机/平板区间启用，桌面一律不出现 * -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .bnm-tab { display: grid; } /* 兜底形态在同一个区间才生效 */ .bnm-tab--float { display: grid; } } /* 窄屏按档收窄：按钮本身 + .header-right / .header-in 的 gap 一起收，把空间还给 logo。 ⚠️ 这不是"顺手优化"，是**必须做的补偿**：mobile-v5.css 为「≤360px 顶栏不许折行」已经把所有余量用光了（.header-in gap 收到 10、logo 允许省略号、.btn-login 锁死不收缩），中文态下 375px 左右本来刚好卡死。本按钮要额外吃掉 30~36px，不补 gap 就一定会把「河北内卷网」挤成省略号 —— 实测 390px 下差 2px。所以这里逐档把 .header-in / .header-right 的间距收窄，把宽度让回去。 --------------------------------------------------------------------------- 2026-09-14 第二次调整（用户反馈：「手机端顶部导航栏还是不太明显，稍微大一些，美化一下，菜单右对齐一下」） --------------------------------------------------------------------------- 原实现为了给 logo 腾地方，把按钮一路收到 32 / 30 / 26px、图标 17 / 16 / 14px，灰底灰线（--c-line + #fff）在奶白顶栏上几乎看不见，也确实只有拇指盖大小。本次改成： ① 尺寸：640 档 40px / 400 档 38px / 360 档 36px（都 ≥ 36px，接近 44px 触控下限）； ② 视觉：品牌色描边 + 浅红渐变底 + 浅红投影 + 图标加粗到 2.6； ③ 右对齐：.main-nav 在 ≤1024 是 display:none，而 .header-in 只写了 `display:flex`（没有 justify-content）→ .header-right 紧跟在 logo 后面，右侧白留一大截（390px 实测留 21px）。给 .header-right 加 margin-left:auto，只在有富余空间时才生效，不影响桌面端。 ④ 宽度预算重新核算（比原来还宽松）：≤640 的 gap 从 12/6 收到 12/6 不变， ≤400 把 .header-in gap 从 10 收到 9、.btn-login 内边距 12→10， ≤360 把 .header-in gap 收到 8、左右 padding 12→11、logo-mark 34→32、 logo 字号 15→14.5、语言切换器与登录按钮各再收一档。实测 320 / 360 / 375 / 390 / 430 均无省略号、无折行、无横向滚动（用 shots/logo-fit.js 五档回归）。 */ @media (max-width: 1024px) { .bnm-tab { display: grid; } /* 兜底形态在同一个区间才生效 */ .bnm-tab--float { display: grid; } /* 菜单/语言/登录整体贴右 —— 主包 .header-in 没有 justify-content， .main-nav 又在这一档隐藏，不补这一句右侧就会白留一截。 */ .header-right { margin-left: auto; } } @media (max-width: 640px) { .header-in { gap: 12px; } .header-right { gap: 6px; } .bnm-tab { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(201, 54, 40, .32); background: linear-gradient(180deg, #fff8f5, #fdeee9); color: var(--c-primary, #c93628); box-shadow: 0 1px 3px rgba(201, 54, 40, .14); } .bnm-tab svg { width: 21px; height: 21px; stroke-width: 2.6; } .bnm-tab:active { background: #f8e2da; box-shadow: none; } } @media (max-width: 400px) { .header-in { gap: 9px; } .header-right { gap: 5px; } .bnm-tab { width: 38px; height: 38px; border-radius: 11px; } .bnm-tab svg { width: 20px; height: 20px; } /* 375px 实测：.logo-txt 仍是桌面档的 19px，文案 93px 而只分到 84px → 裁掉 9px。收到 16px（≈78px）后就放得下了。主包自己在 ≤360 也是收到 15px，口径一致。 */ .logo-txt { font-size: 16px; } .btn-login { padding: 7px 10px; } } @media (max-width: 360px) { .bnm-tab { width: 36px; height: 36px; border-radius: 10px; } .bnm-tab svg { width: 19px; height: 19px; } /* 320px 余量最小，从"最不伤视觉"的地方各抠一点：语言切换器 / 登录按钮的内边距、logo 内部间距与字号、顶栏左右留白。 2026-09-14 第二次调整后实测 320px 仍差 8px（logo 走省略号），这里再各收一档（合计约 9px）：padding 11→10、gap 8→7、logo gap 7→6、 logo-mark 32→30、logo 字号 14.5→14。收完 320px 也有约 1px 余量，不再触发省略号，同时保持「不折行、不横向溢出」。 */ .header-in { gap: 7px; padding-left: 10px; padding-right: 10px; } .header-right .i18n-seg { padding: 3px 4px; font-size: 11px; } .btn-login { padding: 6px 9px; font-size: 12.5px; } .logo { gap: 6px; } .logo-mark { width: 30px; height: 30px; border-radius: 8px; } .logo-mark svg { width: 25px; height: 25px; } .logo-txt { font-size: 14px; } } @media (min-width: 1025px) { .bnm-tab, .bnm-mask, .bnm-panel { display: none !important; } } /* 极窄机（360px 及以下）再收一点，保证「寻找产业带」这种 5 字名不折行 */ @media (max-width: 360px) { .bnm-panel { width: min(86vw, 300px); } .bnm-grid { gap: 8px; padding: 12px; } .bnm-item { font-size: 11.5px; padding: 12px 4px 10px; } }