/* ═══════════════════════════════════════════════════════════════════════════ 雅之林® 会员中心 · 全站弹层外壳 —— **唯一源** 2026-10-06 引用：会员中心 / 商品中心 / 会员打卡站 / 会员中心（四页都引本文件） --------------------------------------------------------------------------- 用户令：「把会员中心全站所有页面的**弹出窗口全部统一**」 「**不是不是，结构也要统一。**」 「用 **2**（居中卡片），**根据内容调整上下高度**。**4 个页面分别是 4 种颜色**。部署吧」 方案＝②**居中卡片**：屏幕中间弹出、四角圆、四周留白。 --------------------------------------------------------------------------- 🔴 三件套结构（全站所有弹层都长这样，⛔ 不许哪个页面另起一套） `.ys-top` 顶栏（标题 + 关闭）—— **粘在卡片顶部** `.ys-bd` 内容区 —— 卡片自身滚动 `.ys-ft` 操作条（说明 + 按钮）—— **粘在卡片底部** 🔴 实现手法刻意选了**最不危险**的一种：**不新增/不移动任何 DOM** （20 个弹层的 JS 都钩着既有 id/属性/结构，批量搬结构＝高危，本项目有血泪史）。 做法＝卡片自己当**唯一滚动容器**，顶栏/操作条用 `position:sticky` 粘住。 ⇒ 行为与参考原型（健康中心·我的奖品）一致，而标记一行没动。 🔴 高度**按内容自适应**：卡片只给 `max-height:84vh`， ⛔ **不给 `height`、不给 `min-height`** —— 两行内容的确认框就是矮卡片，长列表才撑到 84vh。 🔴🔴 同时修掉历史 bug：本项目踩过"内容只有两行、卡片下面留一大块白" （用户 10-03 报的「背景中还有个白色的横条」），根因就是给通用卡片写了 `min-height`。 ⇒ 页面里 `#walletModal .wallet-card{min-height:min(84dvh,470px)}` 之类**已删**。 🔴 4 个页面 4 种颜色：外壳**只取本页栏目色**（`var(--brand)` 系列），全文件零硬编码 hex。 · 会员中心 `data-tone="me"` → `#7A1226` 胭脂红 · 商品中心 `data-tone="home"` → `#002FA7` 克莱因蓝 · 会员打卡站 `data-tone="clock"` → `#4C1D95` 紫罗兰 · 会员中心 `data-tone="admin"` → `#8E2361` 玫红紫 ⇒ 主按钮＝本页栏目色；关闭键/浅底＝`--card2`；分隔线＝`--line2`。换页自动换色。 🔴 层级：`z-index:var(--ys-z, 206)` —— 各弹层原有层级（200/205/206/207/208/210/212/214/215/216/9999） **原样保留**（弹层之间要能叠开：团队窗 → 会员详情 → 级别弹层）。 ⛔ 别在此写死一个 z-index，否则叠开顺序会乱。 ⛔ 新增弹层：**直接用 `.ys` / `.ys-box` / `.ys-top` / `.ys-ft` / `.ys-btn`**， 并且**不要再往下面的"别名收编"名单里加名字**（那是给历史弹层用的兼容层）。 ═══════════════════════════════════════════════════════════════════════════ */ /* ══ ① 遮罩 ══════════════════════════════════════════════════════════════ 名单里的选择器都是"各页历史上各起的名"，现在**统一收编**成一套遮罩。 */ .ys, #sheetModal, #ledgerModal, #waModal, #ordDetail, /* 会员中心：JS 动态建的 */ .cf-mask, /* 会员中心：自绘确认窗 */ .modal-mask, .yzpop-mask, .donemask, /* 会员打卡站（含**打卡完成遮罩**） */ #wbModal, /* 会员中心 */ .lot-sheet, .sheet { /* 商品中心：我的奖品 / 奖品展示 / 费用说明 */ position:fixed;inset:0;z-index:var(--ys-z,206); display:flex;align-items:center;justify-content:center;padding:18px; background:rgba(16,20,19,.5); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .ys[hidden]{display:none!important} /* 🔴 商品详情的「订单确认」`.cfm` 例外：它用 `display:none ⇄ flex` 开关（JS 直接改 display）， ⇒ ⛔ **不能**进上面那张表（那会把 `display:flex` 写死 ⇒ 一进页面就常显）。 只给视觉、不碰 display。 */ .cfm{position:fixed;inset:0;z-index:var(--ys-z,99); align-items:center;justify-content:center;padding:18px; background:rgba(16,20,19,.5); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} /* 🔴 各弹层**原有层级原样保留**（弹层之间要能叠开：团队窗 → 会员详情 → 级别弹层）。 ⇒ 用 `--ys-z` 逐个钉住，⛔ **不要统一成一个数**（统一了叠开顺序就会乱）。 会员中心那 9 个静态弹层的 `--ys-z` 写在标记上（见各页的 `class="ys" style="--ys-z:…"`）。 */ #sheetModal{--ys-z:214} #ledgerModal{--ys-z:210} #waModal{--ys-z:215} #ordDetail{--ys-z:212} .cf-mask{--ys-z:9999} .modal-mask{--ys-z:120} .yzpop-mask{--ys-z:140} /* 会员打卡站：实名/静音弹窗、入场引语 */ .donemask{--ys-z:150} /* 会员打卡站：打卡完成遮罩 */ #wbModal{--ys-z:200} /* 会员中心 */ .lot-sheet{--ys-z:210} /* 商品中心：我的奖品 / 奖品展示 */ .sheet{--ys-z:125} /* 商品中心：费用说明浮卡 */ .cfm{--ys-z:99} /* 商品详情：订单确认 */ /* ══ ② 卡片：唯一滚动容器 + 高度自适应 ═══════════════════════════════════ */ .ys-box, .wallet-card, .modal-card, .set-card, .lib-card, .qr-card, /* 会员中心 */ .modal-card, .yzpop, /* 会员打卡站 */ .wb-card, /* 会员中心 */ .lot-sheet-box, .sheet .box, /* 商品中心（含费用说明浮卡） */ .cfm-box, /* 商品详情：订单确认 */ .cf-card { /* 自绘确认窗 */ position:relative;z-index:1;display:block;box-sizing:border-box; width:min(430px,100%);max-width:min(430px,100%); /* ⛔ 不写 min-height / 固定 height —— 高度跟着内容走（这是用户点名要的"根据内容调整上下高度"） ⚠️ `height:auto` 必须写：会员中心原来写死了 `height:min(74vh,560px)`， 不覆盖它就不是自适应（同优先级下本文件后加载 ⇒ 本条生效）。 */ height:auto; max-height:84vh; min-height:0; overflow-y:auto;-webkit-overflow-scrolling:touch; background:var(--card,#FDFDFD); color:var(--ink,#101413); border-radius:22px; box-shadow:0 18px 50px rgba(0,0,0,.30); animation:ysPop .28s cubic-bezier(.34,1.42,.5,1) both} .ys-box::-webkit-scrollbar,.modal-card::-webkit-scrollbar,.wallet-card::-webkit-scrollbar, .lot-sheet-box::-webkit-scrollbar,.wb-card::-webkit-scrollbar{width:0} @keyframes ysPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} /* ══ ③ 顶栏（粘顶）═════════════════════════════════════════════════════ */ .ys-top, .set-head, .lib-head, .wm-head, .qr-title, /* 会员中心 */ .modal-t, .yzpop-lab, /* 会员打卡站（实名/静音卡标题、入场引语卡的「每日行动」） */ .wb-head, /* 会员中心 */ .lot-sheet-hd { /* 商品中心 */ position:sticky;top:0;z-index:2; display:flex;align-items:center;gap:10px; padding:16px 16px 12px; background:var(--card,#FDFDFD); border-bottom:1px solid var(--line2,#EDEFE9); font:900 16px/1.3 var(--f,sans-serif);color:var(--ink,#101413);text-align:left} .ys-top .ttl{flex:1;min-width:0} .ys-top .en{display:block;font:900 10px/1 var(--f,sans-serif);letter-spacing:.22em; color:var(--mute,#6E7773);text-transform:uppercase} .ys-top h3{display:block;margin:6px 0 0;font:900 16px/1.3 var(--f,sans-serif);color:var(--ink,#101413)} /* 顶栏里"中间那个元素"（标题/``）要吃掉剩余宽度，关闭键才能靠右 */ .ys-top > b, .set-head > b, .lib-head > b, .wm-head > b, .wb-head > b, .lot-sheet-hd > b, .lot-sheet-hd > div{flex:1;min-width:0} /* ══ ④ 内容区：卡片里所有"非顶栏/非操作条"的直接子元素 ══════════════════ */ .modal-card > *:not(.ys-top):not(.ys-ft):not(.qr-back):not(.cf-head), .wallet-card > *:not(.ys-top):not(.ys-ft):not(.qr-back), .set-card > *:not(.ys-top):not(.ys-ft), .lib-card > *:not(.ys-top):not(.ys-ft):not(.qr-back), .qr-card > *:not(.ys-top):not(.ys-ft), .modal-mask > .modal-card > *:not(.ys-top):not(.ys-ft), .wb-card > *:not(.ys-top):not(.ys-ft):not(.wb-back), .lot-sheet-box > *:not(.ys-top):not(.ys-ft), .yzpop > *:not(.ys-top):not(.ys-ft), .ys-box > *:not(.ys-top):not(.ys-ft):not(.qr-back){ padding-left:16px;padding-right:16px} .modal-card > *:not(.ys-top):not(.ys-ft):not(.qr-back):first-child, .set-card > *:not(.ys-top):not(.ys-ft):first-child, .qr-card > *:not(.ys-top):not(.ys-ft):first-child, .lib-card > *:not(.ys-top):not(.ys-ft):not(.qr-back):first-child, .ys-box > *:not(.ys-top):not(.ys-ft):not(.qr-back):first-child{margin-top:10px} .modal-card > *:last-child:not(.ys-ft), .set-card > *:last-child:not(.ys-ft), .qr-card > *:last-child:not(.ys-ft), .lib-card > *:last-child:not(.ys-ft), .ys-box > *:last-child:not(.ys-ft){margin-bottom:16px} .sheet .box > *, .cfm-box > *{padding-left:16px;padding-right:16px} .sheet .box > *:first-child, .cfm-box > *:first-child{margin-top:10px} .sheet .box > *:last-child, .cfm-box > *:last-child{margin-bottom:16px} /* 卡内的滚动块（老弹层自己带的）不再另开滚动条，交给卡片滚 */ .lib-body,.wm-body{overflow:visible!important;max-height:none!important} /* ══ ⑤ 操作条（粘底）═══════════════════════════════════════════════════ */ .ys-ft, .set-foot, .lot-sheet-ft { position:sticky;bottom:0;z-index:2; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important; background:var(--card,#FDFDFD); border-top:1px solid var(--line2,#EDEFE9)} .ys-ft p, .set-foot, .lot-sheet-ft p{ margin:0 0 10px;font:600 11.5px/1.7 var(--f,sans-serif);color:var(--mute,#6E7773)} .ys-ft p b,.lot-sheet-ft p b{color:var(--ink,#101413)} /* 主按钮＝本页栏目色（四色压白字对比度均 ≥5.5:1） */ .ys-btn, .ys-ft button, .set-foot button, .lot-sheet-ft button, .sheet .box button, .cfm-box .cfm-ok{ width:100%;height:46px;border:0;border-radius:13px;cursor:pointer;font-family:inherit; background:var(--brand,#7A1226);color:var(--brand-ink,#fff);font:900 14px/1 var(--f,sans-serif)} .ys-btn.ghost{background:var(--card2,#F3F6EE);color:var(--ink,#101413)} .ys-row{display:flex;gap:10px} .ys-row .ys-btn{flex:1} /* ══ ⑥ 关闭键 / 返回键（统一尺寸与样式）═════════════════════════════════ */ .ys-x, .qr-x, .lib-x, .lot-sheet-x, .wb-x{ margin-left:auto;flex:none;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer; background:var(--card2,#F3F6EE);color:var(--sub,#616966); font:700 19px/1 var(--f,sans-serif);font-family:inherit} /* 返回键（有的弹层是"列表→详情"两级）：统一成同尺寸，留在左侧。 🔴🔴🔴 2026-10-06 用户报「**工作站页面的几个还是不对，左上角有个圈**」——真因就在这里： `.wb-back` 在**工作站**里是**遮罩热区**（`
`，覆盖整屏、点它关闭）， **不是**返回按钮。我把它和 `.lib-back/.wm-back`（那两个才是真返回键）并列， 于是给它加了 `width/height:32px` + `border:1px solid` + `border-radius:50%` ⇒ 整屏热区被压成 **32×32 的带边圆圈**，跑到**左上角**去了（截图里那个圈就是它）。 ⛔ 以后加"返回键"名单前，**先确认那个类在该页是不是遮罩热区**（判据：它带 `data-*-close`）。 ⚠️ `.wb-back` 从此**只按遮罩热区**处理（见下面 ⑨ 那一段）。 */ .lib-back, .wm-back{ flex:none;width:32px;height:32px;padding:0;border:1px solid var(--line,#E4E7E0);border-radius:50%; background:var(--card2,#F3F6EE);color:var(--ink,#101413); font:900 17px/1 var(--f,sans-serif);font-family:inherit;cursor:pointer} /* 商品中心费用说明 `.sheet .box` 原来是**绝对定位在底部 84px**的浮卡 ⇒ 统一成居中卡片 */ .sheet .box{position:relative;left:auto;right:auto;bottom:auto;transform:none} /* 遮罩本身是可点的"关闭热区"，⛔ 别给它描边/背景。 ⚠️ 这里的 `.qr-back/.wb-back` 是**卡片内部**那层透明热区（点它＝关闭）， 真正的变暗由外层 `.ys` 遮罩统一提供 ⇒ 这两层必须透明，否则会**双层变暗**。 ⛔ `.cf-mask` **不在此列** —— 它本身就是遮罩（在①的名单里），误加会让确认窗没有背景。 */ .qr-back,.wb-back{position:absolute;inset:0;background:transparent;cursor:pointer} /* 🔴 工作站 `.wb-back` ＝**遮罩热区**（点它关闭），必须整屏透明、无边框、无圆角 —— 与 `.qr-back` 同性质。上面那条"返回键"名单里**绝不能**再出现它（会变成左上角一个圆）。 */ .wb-back{position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0; background:transparent;cursor:pointer} /* 商品中心费用说明的内层遮罩：变暗已由外层统一提供 ⇒ 这里必须透明 */ .sheet .mask{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} /* 打卡站的入场引语卡原来是**深底白字**（`--brand-dp` 底）：统一成白卡后必须同时把字改深色， ⛔ 否则就是"白底白字"（整块看不见）。 */ .yzpop{color:var(--ink,#101413)} /* ══ ⑦ 无障碍 / 动效 ═══════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .ys-box,.wallet-card,.modal-card,.set-card,.lib-card,.qr-card, .wb-card,.lot-sheet-box,.cf-card,.yzpop{animation:none} } .ys-x:focus-visible,.ys-btn:focus-visible,.qr-x:focus-visible,.lib-x:focus-visible, .lib-back:focus-visible,.wm-back:focus-visible,.wb-x:focus-visible,.wb-back:focus-visible{ outline:2px solid var(--brand,#7A1226);outline-offset:2px} /* ══ ⑩ 长名字自动滚动（2026-10-06 用户令）═════════════════════════════════ 用户原话：「名字太长了……名字格式不要变，**如果太长就自动滚动显示**，直到修改完名字。」 做法：只对**溢出**的元素生效（JS 量 `scrollWidth` 后加 `.ns-run`）， 用 `text-indent` 做位移动画 —— ⛔ 不包内层 span、不动 DOM 结构。 ⚠️ 为什么不用 `transform`：transform 位移要靠**父级** overflow:hidden 才裁得住， 而这两个名字元素的父级是 flex 容器，给它们加 overflow 会连带影响布局。 `text-indent` 只影响第一行 —— 而这里本来就是 `nowrap` 单行，正好。 */ .ns-ellip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%} .ns-run{text-overflow:clip;animation:nsIndent 5.8s ease-in-out infinite alternate} @keyframes nsIndent{0%,20%{text-indent:0}80%,100%{text-indent:var(--ns-dx,0)}} @media (prefers-reduced-motion:reduce){.ns-run{animation:none}} /* ⛔ 2026-10-06：这里原是"界面版本标记"的样式（我为了排查"改了没改"临时加的可见胶囊）。 用户截图圈出并令「修复错误」⇒ **可见标记已彻底移除**（`_sheet.js` 里也不再注入任何元素， 只留 `window.YZL_BUILD` + 控制台一行）。⛔ 别再往用户界面上加调试标记。 */ /* ══ 🔴🔴🔴 2026-10-07 用户令（两处，其实是同一个顶栏组件）══════════════════════════ 原话：①「右上角：第一行是英文名字，把『我的推荐人』放在英文下面，让格式跟下面一致。」 ②「左下角『我的团队』里也一样：第一行是英文，把『我的推荐人』放到英文下面， 跟下面『英文 + 直推粉丝』的格式一样。」 真因：顶栏是 **flex 行**，`.en` 与中文标题是**同一行并排**（实测 en 在 (34,223)、中文在 (140,218)）， 而下方的栏目名（`.lvc-sec` / `.op-sec`）是**上下两行**（英文上、中文下）⇒ 两处格式不一致。 ⇒ 修法：让顶栏的 `.en` **独占一行**（`flex:0 0 100%` + 容器 `flex-wrap:wrap`），中文自然落到第二行； 并给中文补 `margin-top:6px`，与 `.lvc-sec b` / `.op-sec b` 的 6px 完全一致。 ⚠️ 兼容两种 DOM：`.en` 是**顶栏直接子元素**、或包在 `.ttl` 里 —— 两条都覆盖到。 */ /* 🔴 2026-10-07 用户令第二轮：「『英文』跟『我的推荐人』的上下距离， 要跟『英文』跟『当前级别』的上下距离一样。」 实测：顶栏 en→中文 = **18px**，而 `.lvc-sec`/「当前级别」那组 = **6px**； 差的 12px 就是**顶栏自带的 `row-gap`**（换行后成了行间距）。 ⇒ `row-gap:0`（只改行间距，不动列间距）⇒ 剩下的就是中文那 6px 上距，两处**逐字一致**。 */ .ys-top, .set-head, .lib-head, .wm-head, .wb-head, .lot-sheet-hd{flex-wrap:wrap;row-gap:0} .ys-top .ttl, .set-head .ttl, .lib-head .ttl, .wm-head .ttl, .wb-head .ttl, .lot-sheet-hd .ttl{display:flex;flex-wrap:wrap;align-items:baseline} .ys-top .en, .set-head .en, .lib-head .en, .wm-head .en, .wb-head .en, .lot-sheet-hd .en{flex:0 0 100%;width:100%} /* 🔴 实测校正：顶栏因字体行盒/基线对齐会多出 2px ⇒ 中文上距用 4px，实测间距才等于 `.lvc-sec` 那组的 **6px**（逐像素一致）。 */ .ys-top .en+h3, .ys-top .en+b, .set-head .en+b, .set-head .en+h3, .lib-head .en+b, .wm-head .en+b, .wb-head .en+b{margin-top:4px}