feat(首页): 3D 婴儿房入口三版——今天的动线与书架之间开一道空隙,房间铺在整页背后随滚动视差露出,「进去布置」按钮跳入并带 return_url (v26100112)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-01 08:40:05 +00:00
parent 3394a1f6b0
commit a90f348061
4 changed files with 83 additions and 235 deletions

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100111 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100112 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -456,6 +456,24 @@
⚠️ 纸团飞进树洞的动画靠 Element.animate;不支持的老内核直接跳到「已收好」,不影响收存。 -->
<!-- 「妈妈的树洞」整块已删(2026-10-01 用户要求)。样式与 JS 一并删除,需要恢复看 git 历史 70c9786。 -->
<!-- 3D 婴儿房 · 「透过页面看到后面的房间」(2026-10-01 三版)。用户原话:
「把那个房间整体……铺到它的后边……两个模块中间,它不用点击,从外边其实就能看到这个里边是什么,
整个铺到这个背景的后边,有一个引导进入的按钮,我点进去再弹出这个新的页面」。
做法:这一块没有底色,是页面上开的一道「空隙」;房间图层(#nypLayer)由 JS 每次滚动都对齐到 .screen 的可视区,
所以页面往上滚时房间不跟着走,看起来就是铺在整页背后、从缝里露出来(视差)。上下两条内阴影 = 上下模块压在房间上面。
只有「进去布置」按钮能点(整块不点,免得滚动时误触)。
图:assets/img/nursery-peek.jpg 是从 yef/cover-full.png 裁的临时图(390 宽、抹掉了「调试」按钮),
已找「3D 婴儿房」会话(33d6c837)要无 UI 的 1125×1500 日/夜两版高清渲染,到了换掉。
位置:今天的动线 → 这道空隙 → 书架(首页后半段)。北京时间 19:00–6:00 叠一层夜色。JS 在 app.js nurseryRender()。 -->
<section class="ny-peek" id="nursery">
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img src="assets/img/nursery-peek.jpg" alt="" decoding="async"></div>
<span class="nyp-chip">往里看看 · 3D 婴儿房</span>
<div class="nyp-bar">
<div class="nyp-txt"><b id="nyTitle">宝宝的房间</b><span id="nySub">做孕期任务攒兜豆,一件件布置好</span></div>
<button class="nyp-btn" id="nyBtn" type="button">进去布置 <svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></button>
</div>
</section>
<!-- 模块三 · 书架卡带。
上一版是「一张横排大卡 + 下面两张小卡」的老三段,和上面两个模块
一样都是往下堆。这里改成一条横向可滑的书架:三张等宽等高的**竖版**书
@@ -534,56 +552,6 @@
<p class="unlock"><b>128</b> 份孕育资料等你来领 · <a data-open="detailResList">查看全部 ›</a></p>
</section>
<!-- 3D 婴儿房 · 入口(2026-10-01 二版)。用户原话:「放到首页……不用太靠前……有想法有创意一些,要合理一些,点击之后进入 3D 婴儿房」;
一版(今天的动线后面的小房子卡)被评「创意不够」,用户从 8 个方案里拍了组合 1+2+3+4:
④ 位置:书架之后、首页最底 —— 一路逛下来,最后「回家」看看宝宝的房间,不抢前面每天要用的工具;
② 门:走廊尽头一扇虚掩的拱门,墙上挂木牌「{小名}的房间」,门边一本撕页日历 = 入住倒计时(预产期 − 今天);
① 门缝里的房间随孕周一件件布置好:粉墙 → 窗帘 12 → 地毯 16 → 小床 20 → 风铃 24 → 夜灯 28 → 小熊 32 → 待产包 36 → 星星灯 39,
本周刚到的那件会「蹦」一下;下方 9 颗进度点 + 「下一件」预告;
③ 宝宝开口:门缝里冒出宝宝的对话气泡(「妈妈,我的房间布置好了吗?」等),几句轮播。
原方案是写进「宝宝来信」卡,但那张卡的内容来自 laixin 应用、点了去 laixin,不归首页管,所以改成宝宝在门里说话。
⚠️ 首页读不到婴儿房里真实的布置(对方数据在它自己域名的 localStorage),这里的布置进度**只按孕周推演**,和房里实际摆了什么无关;
对方接后端后可以换成真实进度。
点击:门整扇推开、房间往前一凑,约 0.7 秒后 jumpApp 进 https://beian3.douba.top/yef/ 。北京时间 19:00–6:00 换夜间版。JS 在 app.js nurseryRender()。 -->
<section class="nursery" id="nursery">
<button class="ny" id="nyCard" type="button" aria-label="推门进入 3D 婴儿房">
<span class="ny-head">
<span class="ny-eyebrow">逛完啦,回家看看 · 3D 婴儿房</span>
<span class="ny-title" id="nyTitle">宝宝的房间</span>
</span>
<span class="ny-scene" aria-hidden="true">
<span class="ny-glow"></span>
<span class="ny-way">
<span class="ny-room">
<svg viewBox="0 0 120 168" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
<rect class="r-wall" width="120" height="120" fill="#FCE1E4"/>
<path d="M0 96h120" stroke="#F6C9D0" stroke-width="2"/>
<rect class="r-floor" y="118" width="120" height="50" fill="#F2D3BA"/>
<path d="M0 132h120M0 150h120M30 118v14M80 132v18M50 150v18" stroke="#E7BFA2" stroke-width="1.2"/>
<g class="r-win"><rect x="70" y="16" width="38" height="34" rx="16" fill="#fff"/><rect class="r-sky" x="73" y="19" width="32" height="28" rx="14" fill="#CFE9F2"/><circle class="r-moon" cx="96" cy="28" r="4" fill="#FFE2A8"/><path d="M89 19v28M73 34h32" stroke="#fff" stroke-width="2"/></g>
<g data-k="curtain"><path d="M66 12h10c-2 14 1 30 4 42H66z" fill="#F9C9A8"/><path d="M112 12h-10c2 14-1 30-4 42h14z" fill="#F9C9A8"/><path d="M64 11h50" stroke="#E0A07E" stroke-width="2.4" stroke-linecap="round"/></g>
<g data-k="stars"><path d="M30 6q44 16 90 2" fill="none" stroke="#E7B7A3" stroke-width="1"/><g fill="#FFD27A"><circle cx="40" cy="10" r="2.2"/><circle cx="54" cy="14" r="2.2"/><circle cx="68" cy="15.5" r="2.2"/><circle cx="82" cy="15" r="2.2"/><circle cx="96" cy="13" r="2.2"/><circle cx="110" cy="10" r="2.2"/></g></g>
<g data-k="rug"><ellipse cx="62" cy="148" rx="44" ry="11" fill="#A9DCC7"/><ellipse cx="62" cy="148" rx="34" ry="7" fill="none" stroke="#fff" stroke-width="1.4" stroke-dasharray="3 3"/></g>
<g data-k="mobile"><path d="M64 0v62M50 62h28" stroke="#C9A89A" stroke-width="1.2"/><path d="M50 62v8M64 62v12M78 62v8" stroke="#C9A89A" stroke-width=".8"/><circle cx="50" cy="73" r="3.4" fill="#F18DA2"/><path d="M64 74l2 4 4 .6-3 3 .7 4-3.7-2-3.7 2 .7-4-3-3 4-.6z" fill="#FFD27A"/><path d="M80 70a4 4 0 1 1-4 5 3 3 0 0 0 4-5z" fill="#A9DCC7"/></g>
<g data-k="crib"><rect x="30" y="98" width="68" height="8" rx="3" fill="#fff"/><rect x="32" y="112" width="64" height="12" rx="3" fill="#F7B5C2"/><path d="M38 106v18M46 106v18M54 106v18M62 106v18M70 106v18M78 106v18M86 106v18" stroke="#fff" stroke-width="2.4"/><rect x="28" y="88" width="6" height="52" rx="3" fill="#fff"/><rect x="94" y="88" width="6" height="52" rx="3" fill="#fff"/><rect x="30" y="124" width="68" height="5" rx="2" fill="#fff"/></g>
<g data-k="lamp"><circle class="r-glow" cx="110" cy="96" r="20" fill="#FFE2A8" opacity=".35"/><path d="M110 104v30" stroke="#C9A89A" stroke-width="2"/><ellipse cx="110" cy="135" rx="7" ry="2.4" fill="#C9A89A"/><path d="M102 104l3-12h10l3 12z" fill="#FFD9A8"/></g>
<g data-k="bear"><circle cx="54" cy="140" r="4" fill="#D9A27E"/><circle cx="66" cy="140" r="4" fill="#D9A27E"/><circle cx="60" cy="150" r="9" fill="#D9A27E"/><circle cx="60" cy="143" r="7.5" fill="#E2B08E"/><circle cx="57" cy="142" r="1" fill="#6B5048"/><circle cx="63" cy="142" r="1" fill="#6B5048"/><ellipse cx="60" cy="145.5" rx="2.4" ry="1.8" fill="#F6DCC8"/></g>
<g data-k="bag"><path d="M88 146a6 6 0 0 1 12 0" fill="none" stroke="#E0708A" stroke-width="2"/><rect x="84" y="146" width="20" height="16" rx="4" fill="#F18DA2"/><path d="M84 152h20" stroke="#fff" stroke-width="1.2"/><circle cx="94" cy="156" r="1.6" fill="#fff"/></g>
</svg>
</span>
<span class="ny-door"><i class="ny-knob"></i><i class="ny-heart"></i></span>
</span>
<span class="ny-bubble" id="nyBubble">妈妈,我的房间布置好了吗?</span>
<span class="ny-sign"><b id="nySign">宝宝的房间</b></span>
<span class="ny-cal"><span class="ny-cal-top" id="nyCalTop">入住倒计时</span><span class="ny-cal-num"><b id="nyCalNum">?</b><i id="nyCalUnit">天</i></span><span class="ny-cal-foot" id="nyCalFoot">填预产期</span></span>
</span>
<span class="ny-track" aria-hidden="true"><span class="ny-dots" id="nyDots"></span></span>
<span class="ny-foot">
<span class="ny-prog" id="nyProg">填好预产期,看看哪天搬进来</span>
<span class="ny-cta">推门进去 <svg viewBox="0 0 24 24" width="11" height="11"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></span>
</span>
</button>
</section>
</div>
</section>