mama-box 9.19 需求: 资料弹窗去兑换码闸门、底tab改回宝宝来信、我的页卡片改兜爸心选商城 (v26092001)
资料详情页（需求 1.1/1.2）： - #modalWx 删掉兑换码输入框与「以后再说」「解锁全部资料」两颗按钮，is-gate/is-gift/is-done 三模式合并成单态（唯一出口是右上角 .modal-x）；二维码下方文案改需求指定句 - 需求方确认「扫码加顾问 → 回复领资料 → 顾问直接发资料」，故「解锁」概念整体取消 死代码清理（D1 的连带）： - 删 PAN/PAN_DEFAULT 网盘链接表、panOf、WX_CODE/wxCodeOK、givePan、#modalPan 弹窗、 state.wxUnlocked/WXOK_KEY、syncUnlockCopy、fetchRemoteConfig - 删「已领」整套：state.resGot/RESGOT_KEY/isGot/列表「已领 ✓」标与筛选 chip/详情页「再拿一次链接」 底 tab（需求 2，D2=C）： - 「兜爸心选」→「宝宝来信」，图标换回 ic-letter，点击改走 jumpApp 跳第三方 H5 mp.yizhezhe.com/laixin/（App 表 identifier=laixin，取不到时兜底硬编码） - 红点 #tabBadge 挪回该 tab；角标数据源改为 box_app 封装的 /laixin/unread （syncLaixinBadge，ok=false 时保持现状，不把红点抹掉） 其它： - 我的页卡片「兜爸心选」→「兜爸心选商城」（需求 3） - 内置来信屏 #screen-letter 与 box_app /letters 链路保留不动，但不再有底 tab 入口
This commit is contained in:
111
mama-box.css
111
mama-box.css
@@ -2279,9 +2279,9 @@ a.skip:focus{left:16px;top:16px}
|
||||
.ri-row{display:flex;align-items:center;gap:6px}
|
||||
.ri-row em{font-style:normal;font-size:11px;line-height:1}
|
||||
/* 状态标顶到最右（原来 margin-left:auto 挂在「8 分钟读完」上）。
|
||||
「免费」和「已领 ✓」是同一格的两种状态，必须共用这条，
|
||||
否则领完之后标签会从行首跳到行尾。 */
|
||||
.pill-free,.pill-got{margin-left:auto}
|
||||
⚠️ 2026-09-19：这一格原来还有「已领 ✓」这个状态（.pill-got），
|
||||
9.19 需求取消「已领」概念后只剩「免费」，相关样式一并删除。 */
|
||||
.pill-free{margin-left:auto}
|
||||
.pill-free{background:rgba(110,154,86,.14);color:var(--green);font-weight:700;padding:3.5px 7px;border-radius:6px}
|
||||
.ri-cat{background:rgba(244,89,60,.1);color:var(--brand);font-weight:700;padding:3.5px 7px;border-radius:6px}
|
||||
/* 适用孕周，顶掉了原来的「几分钟读完」。不给底色 —— 左边已经有一个实心分类标，
|
||||
@@ -2289,23 +2289,11 @@ a.skip:focus{left:16px;top:16px}
|
||||
nowrap：「孕24-28周」这种断在中间比溢出还难看 */
|
||||
.ri-ga{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
|
||||
/* ---- 已领的资源 ---- */
|
||||
/* 顶掉同一位置上的「免费」。绿底是这套里表示「成了」的颜色（和领取按钮的 .got 一致），
|
||||
但比 .pill-free 实一档 —— 「免费」是背景信息，「已领」是状态，该更跳一点 */
|
||||
.pill-got{background:var(--green);color:#fff;font-weight:700;padding:3.5px 7px;border-radius:6px;white-space:nowrap}
|
||||
/* 缩略图右下角的小勾。压在图片上，所以 .ri-thumb 要 relative；
|
||||
它本来是 overflow:hidden 的方形圆角块，角标贴着内边缘不会被裁掉。
|
||||
加一圈白描边，免得撞上深色缩略图看不清 */
|
||||
.ri-thumb{position:relative}
|
||||
.ri-got-tick{position:absolute;right:3px;bottom:3px;width:17px;height:17px;border-radius:50%;
|
||||
background:var(--green);color:#fff;border:1.5px solid #fff;
|
||||
font-style:normal;font-size:10px;font-weight:800;line-height:1;display:grid;place-items:center}
|
||||
/* 整张卡不做灰化处理：领过不等于失效，用户还会回来拿链接。
|
||||
只把标题的字重降半档，让没领过的在列表里更抢眼一点 */
|
||||
.res-item.is-got .ri-title{font-weight:700}
|
||||
/* chip 用绿色，和上面两个标记对齐；选中态复用 .chip-fav 那套翻转（白字 + 实底） */
|
||||
.chip-got{color:var(--green)}
|
||||
.chip-got.is-active{color:#fff;background:var(--green);border-color:var(--green)}
|
||||
/* ---- 已领的资源：整块已删除（2026-09-19） ----
|
||||
.pill-got / .ri-got-tick / .res-item.is-got / .chip-got 都随「已领」概念一起删了
|
||||
（9.19 需求：资料由顾问在微信里直接发，H5 不再有「立即领取即到手」这个动作）。
|
||||
⚠️ .ri-thumb 的 position:relative 曾经挂在这一块里给角标定位用 —— 现在没有角标了，
|
||||
也就不需要；若以后要往里放绝对定位元素，记得自己加回来。 */
|
||||
|
||||
.res-list.slim .ri-thumb{width:50px;height:50px;border-radius:12px}
|
||||
.res-list.slim .ri-title{font-size:14px}
|
||||
@@ -2337,25 +2325,17 @@ a.skip:focus{left:16px;top:16px}
|
||||
content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;pointer-events:none;
|
||||
background:linear-gradient(rgba(248,243,239,0),rgba(248,243,239,.94));
|
||||
}
|
||||
.rd-cta .dl-btn.main.got{background:var(--green);box-shadow:0 10px 22px rgba(110,154,86,.32)}
|
||||
/* ⚠️ 这里原来有一条 .rd-cta .dl-btn.main.got（领过之后按钮变绿）——
|
||||
9.19 需求取消「已领」概念后按钮只有一种状态，该条删除。 */
|
||||
/* 吸底条已占掉底部空间，滚动区不用再留 40px */
|
||||
#detailRes .detail-body,#detailPoster .detail-body{padding-bottom:18px}
|
||||
/* 档案预览有三个按钮，挤一点、字小一号 */
|
||||
.pst-cta .dl-btn{padding-left:0;padding-right:0;font-size:14px}
|
||||
|
||||
/* ---- 百度网盘领取弹窗 ---- */
|
||||
.pan-box{background:#F7F0EA;border-radius:16px;padding:2px 14px;margin-top:4px}
|
||||
.pan-row{display:flex;align-items:center;gap:12px;padding:11px 0}
|
||||
.pan-row + .pan-row{border-top:1px solid var(--line)}
|
||||
.pan-k{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--muted)}
|
||||
/* 用 readonly input 而不是 <span>：长按能直接唤起「全选 / 拷贝」 */
|
||||
.pan-v{
|
||||
flex:1;min-width:0;background:none;border:0;padding:0;
|
||||
font-size:13.5px;color:var(--ink);text-overflow:ellipsis;
|
||||
font-family:ui-monospace,Menlo,Consolas,monospace;
|
||||
}
|
||||
.pan-v.code{font-size:16px;font-weight:800;letter-spacing:3px;color:var(--brand)}
|
||||
.pan-note{font-size:11.5px;color:var(--muted);line-height:1.7;margin:11px 0 0}
|
||||
/* ---- 百度网盘领取弹窗：整块已删除（2026-09-19） ----
|
||||
.pan-box / .pan-row / .pan-k / .pan-v / .pan-note 随 #modalPan 一起删
|
||||
（9.19 需求：资料由顾问在微信里直接发，H5 不再发网盘链接与提取码）。
|
||||
要恢复「H5 自己发链接」，等于把「解锁」概念加回来 —— 先回问需求方。 */
|
||||
|
||||
/* ---- 加企业微信顾问弹窗 ----
|
||||
紧挨着上面的网盘弹窗放：这两个弹窗是同一条领取动线的前后两步
|
||||
@@ -2365,33 +2345,13 @@ a.skip:focus{left:16px;top:16px}
|
||||
⚠️ 别改成 .wx-qr img 或 svg.wx-qr —— 那样一换成 <img> 尺寸就全丢。 */
|
||||
.wx-qr{display:block;width:168px;height:168px;margin:0 auto;border-radius:14px;background:#fff}
|
||||
.wx-qr-cap{font-size:12px;color:var(--muted);margin-top:10px}
|
||||
.wx-code{letter-spacing:2px;font-weight:700;text-transform:uppercase}
|
||||
/* 红边只在这一格上加，不动全局 .fld input:focus 那套 */
|
||||
.wx-code.is-err{border-color:#D9603F;box-shadow:0 0 0 3px rgba(217,96,63,.13)}
|
||||
/* ⚠️ min-height 是留给一行红字的位置，空着也占着。
|
||||
不留的话，红字冒出来的一瞬间整个 modal-foot 会往下跳一格 ——
|
||||
用户手指正落向「解锁全部资料」，按钮却在他按下去之前挪走了。 */
|
||||
.wx-err{min-height:18px;font-size:12.5px;color:#D9603F;font-weight:600;margin:8px 0 0;line-height:1.5}
|
||||
/* 三种模式里有两种要收起兑换码那一格和「解锁全部资料」，只剩二维码：
|
||||
is-done —— 已经解锁过的人再点福利入口，他来找顾问，不是再解锁一遍；
|
||||
is-gift —— 福利入口本身。这儿只谈领试用装，码由顾问连同试用装一起发，
|
||||
让人当场填码是给了他一个手上根本没有的东西。
|
||||
（闸门 is-gate 里那一格照旧留着 —— 那才是填码的地方。）
|
||||
⚠️ 这条只管「看不见」。JS 那边 #wxOk 开头还有一句
|
||||
if (!wxModal.classList.contains('is-gate')) return;
|
||||
—— display:none 的按钮 dispatchEvent 照样会触发监听，
|
||||
少了那句，「兑换码不对」的红字会冒在一个根本没有输入框的弹窗上。
|
||||
别看这儿收起来了就把那句 guard 当冗余删掉。 */
|
||||
.wx-modal.is-done .wx-form,.wx-modal.is-done #wxOk,
|
||||
.wx-modal.is-gift .wx-form,.wx-modal.is-gift #wxOk{display:none}
|
||||
/* gift 模式：「先不领」按用户要求删了，而 #wxOk 上面刚被收起来 ——
|
||||
.modal-foot 里就一个人都不剩了。不收起整条的话，弹窗底下会多出
|
||||
一截带 padding 的空白，看着像没加载完。
|
||||
⚠️ 只写 .is-gift，**不能带上 .is-done**：done 模式下「知道了」是那一屏
|
||||
唯一的按钮，连坐隐藏就没有出口了。
|
||||
⚠️ gift 的退路是右上角 .modal-x（modalWx 头部有这颗，删按钮前确认过）。
|
||||
哪天有人想给 .modal-head 做「无按钮时隐藏」的优化，先回来读这一句。 */
|
||||
.wx-modal.is-gift .modal-foot{display:none}
|
||||
/* ⚠️ 这里原来有 .wx-code（兑换码输入框）与 .wx-code.is-err（码错标红）——
|
||||
9.19 需求删掉输入框后一并删除。 */
|
||||
|
||||
/* ⚠️ 2026-09-19（9.19 需求 1.2）：这里原来是 .wx-err（兑换码红字）以及
|
||||
is-done / is-gift / is-gate 三模式的收起规则（把 .wx-form 与 #wxOk 藏起来）。
|
||||
兑换码输入框和两颗按钮整个删掉之后，这些规则没有对应元素了，一并删除。
|
||||
弹窗现在是单态（只剩标题 + 引导语 + 二维码），唯一出口是右上角 .modal-x。 */
|
||||
|
||||
/* ============ 记一下 弹层 ============ */
|
||||
.scrim{position:absolute;inset:0;background:rgba(50,30,22,.42);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s;z-index:90}
|
||||
@@ -2469,12 +2429,11 @@ a.skip:focus{left:16px;top:16px}
|
||||
.t-ico.ic-home{-webkit-mask-image:url(assets/img/1afd85e578dd.png);mask-image:url(assets/img/1afd85e578dd.png)}
|
||||
.t-ico.ic-archive{-webkit-mask-image:url(assets/img/fa7b793b47e8.png);mask-image:url(assets/img/fa7b793b47e8.png)}
|
||||
.t-ico.ic-letter{-webkit-mask-image:url(assets/img/949338312a1f.png);mask-image:url(assets/img/949338312a1f.png)}
|
||||
/* 「兜爸心选」商城 tab 的购物袋图标（第九批新增，占原「宝宝来信」那枚 tab 的坑位）。
|
||||
实心剪影风格：袋身圆角矩形 + 提手粗环，与另外四枚 mask 图标同规格（30×30 RGBA）。
|
||||
源图 assets/img/b3253e3c7a83.png。
|
||||
⚠️ 上面 .ic-letter 的规则与 949338312a1f.png **保留不删**：来信屏还在（swipe 可进），
|
||||
哪天要把 tab 挂回「宝宝来信」，把 index.html 那枚 span 的 class 换回去即可。 */
|
||||
.t-ico.ic-shop{-webkit-mask-image:url(assets/img/b3253e3c7a83.png);mask-image:url(assets/img/b3253e3c7a83.png)}
|
||||
/* ⚠️ 2026-09-19（9.19 需求第 2 条）：底 tab 从「兜爸心选」改回「宝宝来信」，
|
||||
用的是上面 .ic-letter（图标资源一直在，没删过）。原来这条 .ic-shop（购物袋图标）
|
||||
已随改名删除 —— 商城入口仍在「我的」页服务卡与首页商城主卡上。
|
||||
图标源文件 assets/img/b3253e3c7a83.png 保留在仓库里（不引用的二进制无害），
|
||||
哪天要再挂一枚商城 tab，把这条规则抄回来即可。 */
|
||||
.t-ico.ic-me{-webkit-mask-image:url(assets/img/0ebc7631fea4.png);mask-image:url(assets/img/0ebc7631fea4.png)}
|
||||
.tab.is-active .t-ico{transform:translateY(-2px) scale(1.06)}
|
||||
/* nowrap：最长的那条是「兜爸心选」（原「宝宝来信」，同为四个汉字），12.5px ≈ 50px，
|
||||
@@ -2550,20 +2509,10 @@ a.skip:focus{left:16px;top:16px}
|
||||
.alog-stats .ai-st em.eq{color:var(--muted)}
|
||||
.modal-lead{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.6}
|
||||
.modal-lead b{color:var(--brand)}
|
||||
/* 引导语里被挑出来的那四个字「全部解锁」（setLead 包的 <em class="lead-hi">）。
|
||||
⚠️ 必须写 font-style:normal —— <em> 默认是斜体，而手写体几乎都没有斜体字重，
|
||||
浏览器会拿正体去**算法伪斜**（整体切变），中文伪斜出来是歪的、发虚，
|
||||
比不强调还难看。这一行不是可省的重置。
|
||||
⚠️ 下划线用 text-decoration 而不是 border-bottom：border 会把行盒撑高，
|
||||
这句话在 gate 弹窗里正好排到第三行，撑高会顶到下面那格输入框。
|
||||
underline-offset 给 3px 是让线离汉字底再远一点，不然会贴着「锁」的竖钩。 */
|
||||
.modal-lead .lead-hi{
|
||||
font-family:var(--font-kid);font-style:normal;font-weight:800;
|
||||
font-size:15px;color:var(--brand);
|
||||
text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
|
||||
/* 线比字淡一档：--brand #F4593C 兑 .5 alpha。手写体本来笔画就细，
|
||||
配一条同样浓的实线会显得字被压在线上面。改这里记得跟着 --brand 走。 */
|
||||
text-decoration-color:rgba(244,89,60,.5)}
|
||||
/* ⚠️ 这里原来是 .modal-lead .lead-hi（给「全部解锁」四个字加重的 <em>）——
|
||||
setLead() 已随三模式删除，该样式一并删除。 */
|
||||
|
||||
|
||||
/* 输入框：必须显式给 font-family，否则 textarea/input 会退回成系统等宽字体 */
|
||||
.modal-ta,.fld input{
|
||||
font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
|
||||
|
||||
Reference in New Issue
Block a user