/* ═══════════════════════════════════════════════════════════════════════════ 雅之林® 前台 · 页脚落款 —— **唯一源** 2026-10-01 --------------------------------------------------------------------------- 谁引它：**8 个页面全部**（商品中心 / 会员中心 / 会员中心 / 会员打卡站 / 我的订单 / 商品详情 / 支付 / 慢病管理）。 🔴🔴 为什么从 yzl.css 里抽出来： `商品详情.html` 与 `支付.html` 是**自带一套 .shell/.wrap 样式**的页面， **没有引 yzl.css** ⇒ 落款规则一条都吃不到，`.ux-footer-nav` 直接退化成 `display:block`、12 个链接挤成 2~3 行（实测 320 屏 `[5,4,3]` 这种孤行）。 用户原话：「所有页面的底部的落款，需要锁定格式，在有个手机上面会员中心换行到下一列了。」 ⛔ 别再往 yzl.css 里加落款规则 —— 那两页引不到。 ⚠️ 本文件里所有设计令牌都写了**兜底值** `var(--x, fallback)`， 这样没引 yzl.css 的页面也能正确渲染落款（颜色、字体、动效曲线）。 ═══════════════════════════════════════════════════════════════════════════ */ /* 落款「全出血」用的是 `calc(50% - 50vw)`，`50vw` 含滚动条宽度 ⇒ 需要 html 裁掉横向溢出。 桌面端有滚动条时最明显。用 `clip` 不用 `hidden`（`hidden` 会破坏顶栏的 position:sticky）。 注：引了 yzl.css 的页面里已有同一条，重复声明无害。 */ html{ overflow-x:clip } @supports not (overflow: clip){ html{ overflow-x:hidden } } /* ── 落款底色：**按站令牌 `--foot`** ────────────────────────────────────── 🔴 2026-10-01 用户令：「你刚才部署的商品详情页下面的导航，应该用**克莱因蓝**啊，不要用黑色。」 根因：`--foot` 原本只定义在 `yzl.css` 里，而「商品详情」「支付」**没引 yzl.css** ⇒ 变量取不到 ⇒ 落到 `.ux-footer` 的兜底 `#131A17`（墨绿黑），看起来就是"黑色"。 ⇒ 把 `--foot` 的定义搬到本文件（8 页都引），默认克莱因蓝；各站按 `data-tone` 覆盖。 ⚠️ 本文件必须**在 yzl.css 之后**加载，否则会被 yzl.css 里的同名定义盖掉（值其实一样，但顺序要一致）。 ⛔ 改站点颜色只改这里，别在页面里写死。 */ :root{ --foot:#002FA7 } html[data-tone="clock"]{ --foot:#4C1D95 } html[data-tone="admin"]{ --foot:#8E2361 } html[data-tone="me"]{ --foot:#7A1226 } /* 落款外壳：全出血 + 底部为悬浮胶囊让位（含 iOS 安全区）──────────────────── 🔴 让位高度必须与 `#tabbar` 的 bottom 成对改（两个数是一套）： 胶囊底距 3px + 安全区 + 胶囊高 62 ⇒ 让位给到 72px + 安全区，恒定留 7px 余量。 ⚠️ 原来写死 86px 是**没算安全区**的 ⇒ 真机最后一行免责声明被压住 22px。 🔴🔴🔴 2026-10-24 再修（72 → 84）：72px 那笔算的是「胶囊高 62」， 但手机端媒体查询里 `--lx-h` 实际是 **74px**（`#tabbar` 的 rect 实测 74，底距 2px） ⇒ 需要让位 76px，只给 72px ⇒ **最后一行免责声明被胶囊压住 4px**（截图里那行被切）。 ⇒ 取 84px：非全面屏留 8px 呼吸位；iPhone（安全区 34）算下来余量更大，两头都够。 ⛔ 别只改这里不改 `#tabbar` 的 bottom，也别把这个数改回 72。 */ .ux-footer{ background:var(--foot,#002FA7); color:#fff; position:relative; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); /* 默认（**本页没有悬浮底栏**时）：只留 20px 呼吸位，与 shared/footer.css 的手机值一致。 */ padding:26px 32px calc(20px + env(safe-area-inset-bottom,0px)); font:400 12.5px/1.6 var(--f,-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","HarmonyOS Sans","MiSans","OPPO Sans","vivo Sans","Source Han Sans SC","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",sans-serif) } /* 🔴🔴🔴 2026-10-24 **必须按"有没有底栏"分开给**（这是判据修正后闸抓到的一处真回归）： 我把让位一股脑改成 84px 后，`支付.html` / `现场抽奖.html` 这两页**没有 `#tabbar`** ⇒ 那 84px 变成页脚下方一片**纯留白**（实测 blank=84px，闸当场红）。 ⇒ 有悬浮底栏的页才需要让位 84px；没底栏的页按默认 20px。 ⚠️ `:has()` 在本项目已是既有依赖（`yzl.css` 里 `#tabbar:has(> a:nth-child(1)[aria-selected])` 在用）， 不是新引入的能力。⛔ 别改成"给 body 加 class"——那要每页的 JS 配合，漏一页就回到 84px 空白。 */ body:has(#tabbar) .ux-footer{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) } .ux-footer-inner{ max-width:1000px; margin:0 auto } /* ── 全站导航：**与 `shared/footer.css` 逐字相同的一套** ───────────────── 🔴🔴🔴 2026-10-22 用户令（第 46 轮，原话）： 「所有页面都要一样，并且你要检查，所有的页面的底部是不是用的同一套导航栏，**必须只用一套**。」 --------------------------------------------------------------------------- 历史（为什么这里曾经是 grid，现在改成 flex-wrap）： 2026-10-01 用户令：「所有页面的底部的落款，需要锁定格式，在有个手机上面 会员中心换行到下一列了。」⇒ 当时用 `grid repeat(3,1fr)` 锁 3 列， 12 个链接正好 3×4，确实不会出现孤行。 2026-10-21 夜 落款减到 10 项、2026-10-22 又加到 **11 项**（末尾三项 AI健康顾问 / 会员打卡站 / 会员中心）⇒ 3 列 grid 变成 3/3/3/**2**， 末行 2 项被放在第 1、2 列＝**贴左**，跟主站（4 列 flex、末行整体居中）**长得不一样**。 ⇒ 统一改成主站那一套：`flex-wrap + justify-content:center` + 每项 `flex:0 0 calc((100% - 66px)/4)`（66＝3 个列间距 × 22px）⇒ 满行 4 列， **不满的最后一行自动整体居中**，以后增删项都不用再补 nth-child。 ⛔ 别再改回 grid（对"不满的最后一行"只能硬指列号，项数一变就错位 = 这次踩的坑）。 ⛔ 别在这里写第二个版本：主站/hub 的落款导航**只此一套几何**， 改数值必须 **两个文件同时改**（`shared/footer.css` 与本文件）， 验收闸：`node tools/gate_footer_one_set.mjs`（逐条比 11 项 / 4 列 / 末行居中的实测坐标）。 */ .ux-footer-nav{ display:flex;flex-wrap:wrap; justify-content:center;align-items:center; gap:10px 22px;margin:0 auto 18px;max-width:760px; } .ux-footer-nav a{ color:rgba(255,255,255,.92);text-decoration:none;font-size:13px; text-align:center;transition:color .2s; flex:0 0 calc((100% - 66px) / 4); /* 66px = 3 个列间距 × 22px */ } .ux-footer-nav a:hover{ color:#C9A24A } /* © 一律落在右边同一行（用户 2026-09-29：「©是在右边，不是右上角！」）。 ⚠️ 标记保持官方源的 `©`（与官方源逐字同构，只改渲染）。 取值＝官方主站另一处导航的写法：font-size:.85em + baseline + margin-left:2px。 */ .ux-footer-nav a sup{ font-size:.85em; line-height:1; vertical-align:baseline; margin-left:2px } /* 与主站同一条 ≤480 收窄（⚠️ gap 变 14 ⇒ 3 个间距合计 42px，flex 基准必须跟着改， 否则每项偏宽、4 列会掉成 3 列，落款行数就变了） */ @media (max-width:480px){ .ux-footer-nav{ gap:8px 14px; margin-bottom:14px } .ux-footer-nav a{ font-size:12px; flex:0 0 calc((100% - 42px) / 4) } } /* ── 版本号 / 备案号一行 ── */ .ux-footer-row{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:nowrap; margin:0 0 8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.18); white-space:nowrap } .ux-footer-version{ font-weight:800; color:#fff; font-size:12.5px; letter-spacing:.3px } .ux-footer-record{ color:rgba(255,255,255,.85); font-size:12.5px } .ux-footer-copy{ color:rgba(255,255,255,.6); font-size:11.5px; margin-bottom:8px; text-align:center; white-space:nowrap } .ux-footer-disclaimer{ color:rgba(255,255,255,.45); font-size:10.5px; max-width:720px; margin:0 auto; line-height:1.6; text-align:center; white-space:normal; overflow-wrap:anywhere } /* ── 左下角统计图标 ── */ .ux-footer-tongji{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:flex-end; gap:2px; height:14px; color:rgba(255,255,255,.55); text-decoration:none } .ux-footer-tongji:hover{ opacity:.85 } .ux-footer-tongji svg{ width:16px; height:16px } /* ═══════════════════════════════════════════════════════════════════════════ 防「双击放大」—— **全站兜底**（2026-10-02 移到本文件） --------------------------------------------------------------------------- 🔴 用户报：「点的时候很容易自动就放大了，就跟一个图片自动放大了一样。」 ⇒ 那是移动端**双击缩放**（double-tap zoom）。 🔴🔴 为什么规则放在 `footer.css`（一个叫"页脚"的文件里）： 这条防护必须**8 个页面全部生效**，而 `商品详情.html` / `支付.html` **没有引 yzl.css**（它们自带一套 .shell/.wrap，见本文件顶部说明）， 所以整套前台里只有 `footer.css` 是**8 页全引**的样式文件。 ⛔ 别把它挪回 yzl.css —— 挪回去那两页立刻又会双击放大。 ⚠️ 实测过的现状（2026-10-02）：8 页里**只有会员中心.html 自己写了这一条**， 其余 7 页全裸 ⇒ 用户在商品详情页双击就放大。 `touch-action:manipulation` = 关掉双击缩放，但**保留单指滚动与双指捏合** （比 `user-scalable=no` / `maximum-scale=1` 更不伤无障碍：想放大还是能捏合放大）。 ⛔ 别改成 `none` —— 那样连滚动都没了。 =========================================================================== */ html,body{touch-action:manipulation} button,a,[role="button"],input,select,textarea,label,summary{touch-action:manipulation} /* ═══════════════════════════════════════════════════════════════════════════ 悬浮玻璃胶囊 · 底栏外壳（**全站唯一源**） 2026-10-02 --------------------------------------------------------------------------- 🔴 用户令：「把底部这个一条，重构交互，左边两个钮有点小了，点击不方便。 给我重新 3 套方案，最好是能像会员中心 4 个页面那样的悬浮横条，也更统一。」 ⇒ 选定**方案 B「图标方块 + 双 CTA」**。此前全站是**两套底栏**： · 4 个主页 `#tabbar`（yzl.css） ＝ 悬浮玻璃胶囊 · 商品详情页 `.gfoot`（页面内嵌样式）＝ 整幅贴边通栏 + 顶边线 现在合并成一套 —— 本区块就是那**一份定义**。 ⚠️ 所有引用都**带兜底**（`var(--lx-h,62px)`）：`yzl.css` 的 `#tabbar` 也改成引用这里， 而 `抽奖.html` 引了 yzl.css **却没引本文件** ⇒ 少了兜底它就会直接塌掉。 ⚠️ 下面这些值必须与 `#tabbar` 的**现值逐字相等**（62 / 24 / 19 / rgba(253,253,253,.84) / blur(22px) saturate(180%) / 同一串 box-shadow）。改动后跑 `node _t_底栏基线.mjs diff` —— 逐条比对 4 个主页 `#tabbar` 的 computed style， **必须 0 项不一致**，否则就是抽变量时手抖改到了会员中心。 ═══════════════════════════════════════════════════════════════════════════ */ :root{ --lx-h:62px; /* 胶囊高 */ --lx-r:24px; /* 胶囊圆角 */ --lx-cell-r:19px; /* 胶囊内单元格圆角 */ --lx-pad:5px; /* 胶囊内边距 */ --lx-gap:4px; /* 单元格间距 */ --lx-w:min(406px, calc(100% - 24px)); /* 胶囊宽：不贴屏边 */ /* 🔴🔴🔴 2026-10-21 修安卓「底栏自动隐藏」——**这里只能用纯长度，⛔ 别写 max()/env()** --------------------------------------------------------------------------- 用户原话：「再有的安卓手机上面，**底部的导航栏会自动隐藏**，要上拉页面才会显示出来， 这是一个 bug，需要修复。」 真因（CSS 变量替换阶段的坑，一路踩到底）： `#tabbar{bottom:var(--lx-lift, max(2px, calc(env(safe-area-inset-bottom,0px) - 14px)))}` `--lx-lift` 的值本身是 `max(2px, calc(env(...) - 14px))`。 在**老内核**（不认 `max()` 或 `env()` 的安卓 WebView / 老 Chrome / 部分国产浏览器）上： · 解析 `bottom` 时只看到 `var(...)`，语法合法 ⇒ 声明**保留**； · 到**计算值阶段**替换变量后才发现 `max()/env()` 不认识 ⇒ 该值「invalid at computed-value time」 · ⇒ 属性回落到 **initial（auto）**，⛔ **不是**回退到前一条声明！ `bottom:auto` 的 `position:fixed` 元素会停在**静态位置** = 文档流里 `` 之后 ⇒ 也就是**整页最底部** ⇒ 看上去就是"底栏不见了，要一直下拉到页面最底才冒出来"。 修法（三层，缺一层就可能复发）： ① 这里给**纯长度** `2px`（任何浏览器都认）； ② `#tabbar` 里先写一条纯长度的 `bottom:2px` 保底； ③ 真正要 `env()` 的那条放进 `@supports` 里 —— 老内核条件判不过，自然用 ①②。 判据（真机）：老内核下 `getComputedStyle(nav).bottom` 必须是 `2px`（⛔ 不能是 `auto`）。 */ --lx-lift:2px; /* 底部浮起 · 纯长度，见上方说明 */ --lx-bg:rgba(253,253,253,.84); --lx-blur:blur(22px) saturate(180%); --lx-sh:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(255,255,255,.34), 0 18px 40px -18px rgba(18,24,48,.40),0 2px 10px rgba(18,24,48,.08); } /* ══════════════════════════════════════════════════════════════════════════════ 🔴🔴🔴 2026-10-12 20:30 下单栏换成「方案 v2 · 浮动玻璃胶囊」 用户令：「**下单栏，点进 4 个商品之后才看到**」（＝它在商品详情页，4 款商品共用一个详情页） ＋ 之前已批「把**底部的两个区域**的按钮改成这种形式，**但是大小不要改**」。 ------------------------------------------------------------------------------ ⚠️ 位置写在这里（`_footer.css`）而不是 `yzl.css`：**商品详情/支付两页压根不引 yzl.css** （只引 `_footer.css` + 自己的内联样式）⇒ 放进 yzl.css 等于没生效（本文件末尾 那条 `.yz-toast` 的教训就是同一个原因）。 ⚠️ 原样式是「贴底通栏白条」：`left:0;right:0;bottom:0;border-top:1px`。 本段只改**外框**（内缩 / 圆角 / 材质），⛔ **不动 padding、gap、按钮尺寸** ⇒ `#gAdd/#gBuy` 的 118px 宽、52px 高、以及 `.icbtn` 的 52×52 **一律不变**（用户铁律「大小不要改」）。 ⚠️ `padding` 里那句 `env(safe-area-inset-bottom)` 保持原样：现在靠 `bottom:10px` 抬起来， 再把安全区内边距去掉会改变内部高度 ⇒ 按钮会跟着变。 ⚠️ 深色主题单给一档玻璃色。⛔ 不要硬编码同一支白。 ══════════════════════════════════════════════════════════════════════════════ */ .gfoot{ left:12px; right:12px; bottom:10px; max-width:536px; /* 不贴边：左右内缩 12、底部浮 10 */ border-radius:24px; border:1px solid rgba(255,255,255,.62); border-top:1px solid rgba(255,255,255,.62); /* ⛔ 必须显式盖掉原来的 border-top */ background:rgba(255,255,255,.34); -webkit-backdrop-filter:blur(28px) saturate(2); backdrop-filter:blur(28px) saturate(2); box-shadow:0 10px 30px rgba(16,20,19,.18),inset 0 1px 0 rgba(255,255,255,.8); transform:translateZ(0); /* 提层：子元素动只走合成器 */ --gm-dur:.5s} /* 玻璃描边按钮（加入购物车）——只换材质，⛔ 宽高不动 */ .gfoot .go.ghost{background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 12px rgba(16,20,19,.08)} /* 导航方块（首页/购物车）也一样只换材质 */ .gfoot .icbtn{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 12px rgba(16,20,19,.08)} /* ② 动效：整条受压 · 图标弹 · 角标 +1 弹跳 */ .gfoot.gm-press{animation:gmBar var(--gm-dur,.5s) cubic-bezier(.3,1.35,.45,1)} @keyframes gmBar{0%{scale:1 1}22%{scale:1.03 .965}58%{scale:.976 1.012}100%{scale:1 1}} .gfoot .icbtn{position:relative} .gfoot .icbtn svg{transform-origin:50% 50%} .gfoot .icbtn.gm-tap svg{animation:gmTap calc(var(--gm-dur,.5s) * .72) cubic-bezier(.3,1.4,.45,1) both} @keyframes gmTap{0%{scale:1 1}30%{scale:.84 .9}62%{scale:1.07 1.05}100%{scale:1 1}} .gfoot .icn-badge.gm-pop{animation:gmPop calc(var(--gm-dur,.5s) * .8) cubic-bezier(.3,1.5,.45,1) both} @keyframes gmPop{0%{transform:scale(1)}26%{transform:scale(1.6) translateY(-1.5px)}56%{transform:scale(.9)}100%{transform:scale(1)}} @media (prefers-reduced-motion:reduce){ .gfoot.gm-press,.gfoot .icbtn.gm-tap svg,.gfoot .icn-badge.gm-pop{animation:none!important}} /* ══════════════════════════════════════════════════════════════════════════════ 🔴🔴🔴 2026-10-12 21:07 滚动面板一律**截断滚动链** 用户令：「在『余额』的『余额明细』里向上拉查看、再往下拉往回翻，**很容易自动触发页面刷新**； 要求**每一个单独的小卡片**上下拉动时都**不要触发页面刷新**，并**排查所有页面**。」 ------------------------------------------------------------------------------ 原理：面板内滑到顶/底之后，手势会**继续冒泡给页面**（scroll chaining） ⇒ 触发浏览器/微信的**原生下拉刷新**、或把上拉甩给微信（露出工具栏）。 `overscroll-behavior:contain` 把滚动链**在本容器内截断**，页面收不到这个手势。 ⚠️ 只加在**面板**上；⛔ 不要加在 `html/body` —— 本文件记过：页面级 `overscroll-behavior-y:none` 会**关掉 iOS 橡皮筋回弹**， 且会让 4 页手感不一致（用户已点名）。⛔ 别再加回去。 ⚠️ `.wm-*`（钱包/余额明细那套）之前**漏了** —— 这正是用户报的那一处。 ══════════════════════════════════════════════════════════════════════════════ */ .wm,.wm-card,.wm-body,.ys-box,.modal-card,.sheet .box,#ordDetail > .modal-card,.fzs-body, .lib-card,.set-card,.qr-card,.fz-box,.yzpop,.yz-toast,#tabbar,.gfoot{ overscroll-behavior:contain;overscroll-behavior-y:contain}