jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页孕期小知识与 3D 婴儿房对调位置：此刻 → 孕期小知识 → 婴儿房 → 今天的动线 (v26100128)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 11:39:10 +00:00
parent 0e0c23c806
commit f0428fea99
2 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
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:26100127 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100128 缓存版本标记：改 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 第四节） -->
@@ -301,28 +301,6 @@
</div>
</section>
<!-- 3D 婴儿房 · 「透过页面看到后面的房间」（2026-10-01 三版）。用户原话：
「把那个房间整体……铺到它的后边……两个模块中间，它不用点击，从外边其实就能看到这个里边是什么，
整个铺到这个背景的后边，有一个引导进入的按钮，我点进去再弹出这个新的页面」。
做法：这一块没有底色，是页面上开的一道「空隙」；房间图层（#nypLayer）由 JS 每次滚动都对齐到 .screen 的可视区，
所以页面往上滚时房间不跟着走，看起来就是铺在整页背后、从缝里露出来（视差）。上下两条内阴影 = 上下模块压在房间上面。
只有「进去布置」按钮能点（整块不点，免得滚动时误触）。
图：assets/img/nursery-day.jpg / nursery-night.jpg，由「3D 婴儿房」会话（33d6c837）导出的无 UI 渲染
（原图 yef/cover-day.png、cover-night.png，1125×1500，**原尺寸**存 JPG —— 375 宽 × 3 倍屏正好 1125 像素，别再缩，缩到 750 在 iPhone 上会糊（2026-10-01 用户反馈过）)；里面摆的是演示布置，不是用户自己的房间。
底色必须和图边一致：白天 #FFECD8、夜间 #5A5890，否则缝里会露出图片边框。
2026-10-01 晚：3D 婴儿房会话把封面换成「整栋小别墅外景」（婴儿房是二楼剖开那一间），房子占画面中部偏下、上方约 20% 纯底色。
缝高 300→340、图宽 100%→88%（max 420）、上提 40px：缝滚到屏幕中间时屋顶到草坪整栋都露出来，草坪压在玻璃条下面；标题改「我们的家」。
位置：2026-10-01 用户要求和消消乐对调 —— 现在在「此刻」下面、孕期小知识上面（原来在今天的动线和书架之间）。北京时间 19:00–6:00 换夜间图（开灯版）。JS 在 app.js nurseryRender()。 -->
<section class="ny-peek" id="nursery">
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img id="nypImg" src="assets/img/nursery-day.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>
<!-- 孕期小知识（2026-09-30）。用户原话：「按她填写的孕周，比如孕 20 周 5 天，给她列出几个小模块，
设计一定要漂亮、匹配母婴用户，最好是动态的；小知识匹配每周的每一天」。
内容：assets/data/preg-tips.json（孕 4–40 周，每周 宝宝/妈妈/饮食/注意 四句 + 每天一条小知识，共 7 条），
@@ -356,6 +334,27 @@
<p class="pt-foot">仅供参考，身体有任何不适请以医生意见为准</p>
</section>
<!-- 3D 婴儿房 · 「透过页面看到后面的房间」（2026-10-01 三版）。用户原话：
「把那个房间整体……铺到它的后边……两个模块中间，它不用点击，从外边其实就能看到这个里边是什么，
整个铺到这个背景的后边，有一个引导进入的按钮，我点进去再弹出这个新的页面」。
做法：这一块没有底色，是页面上开的一道「空隙」；房间图层（#nypLayer）由 JS 每次滚动都对齐到 .screen 的可视区，
所以页面往上滚时房间不跟着走，看起来就是铺在整页背后、从缝里露出来（视差）。上下两条内阴影 = 上下模块压在房间上面。
只有「进去布置」按钮能点（整块不点，免得滚动时误触）。
图：assets/img/nursery-day.jpg / nursery-night.jpg，由「3D 婴儿房」会话（33d6c837）导出的无 UI 渲染
（原图 yef/cover-day.png、cover-night.png，1125×1500，**原尺寸**存 JPG —— 375 宽 × 3 倍屏正好 1125 像素，别再缩，缩到 750 在 iPhone 上会糊（2026-10-01 用户反馈过）)；里面摆的是演示布置，不是用户自己的房间。
底色必须和图边一致：白天 #FFECD8、夜间 #5A5890，否则缝里会露出图片边框。
2026-10-01 晚：3D 婴儿房会话把封面换成「整栋小别墅外景」（婴儿房是二楼剖开那一间），房子占画面中部偏下、上方约 20% 纯底色。
缝高 300→340、图宽 100%→88%（max 420）、上提 40px：缝滚到屏幕中间时屋顶到草坪整栋都露出来，草坪压在玻璃条下面；标题改「我们的家」。
位置：2026-10-01 用户要求和消消乐对调 —— 后又和孕期小知识对调 —— 现在在孕期小知识下面、今天的动线上面（原来在今天的动线和书架之间）。北京时间 19:00–6:00 换夜间图（开灯版）。JS 在 app.js nurseryRender()。 -->
<section class="ny-peek" id="nursery">
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img id="nypImg" src="assets/img/nursery-day.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>
<!-- 模块二 · 今天的动线。
上一版这里是两个各自独立的模块：「AI今日小结」一张渐变卡，
下面「今日成长脚印」一张白卡装的时间轴。可 AI 那句话总结的