feat(首页): 新增 3D 婴儿房入口卡（小房子造型、昼夜两版），放在今天的动线与书架之间 (v26100110)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-01 07:33:37 +00:00
parent 4637412e26
commit df95d1fae0
4 changed files with 115 additions and 4 deletions
--- a/assets/img/nursery-room.jpg
+++ b/assets/img/nursery-room.jpg
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26100109 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100110 缓存版本标记：改 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,33 @@
             ⚠️ 纸团飞进树洞的动画靠 Element.animate；不支持的老内核直接跳到「已收好」，不影响收存。 -->
        <!-- 「妈妈的树洞」整块已删（2026-10-01 用户要求）。样式与 JS 一并删除，需要恢复看 git 历史 70c9786。 -->

+        <!-- 3D 婴儿房 · 入口（2026-10-01）。用户原话：「把这个 3D 婴儿房放到首页……不用太靠前……有想法有创意一些，要合理一些，点击之后进入 3D 婴儿房」。
+             应用由「3D 婴儿房」会话（33d6c837）维护：https://beian3.douba.top/yef/ ，目前只有这一个地址、前端假数据、不读身份参数。
+             位置：今天的动线之后、书架之前 —— 首页后半段，属于「逛一逛」的内容，不和每天要点的工具抢位置。
+             造型：右边是一座小房子（屋顶 + 烟囱 + 窗户），从窗户看进去就是房间截图（assets/img/nursery-room.jpg，
+             由 yef/cover-full.png 裁的房间部分），截图慢慢左右平移，暗示房间能 360° 转着看。
+             昼夜：按北京时间 19:00–6:00 换夜间版（深色底 + 窗户亮暖灯 + 小星星），和婴儿房自己的昼夜灯光呼应。
+             文案：有真实孕周时写「再过 N 周，TA 就要住进来啦」（40 − 当前孕周），否则用通用一句。JS 在 app.js nurseryCard()。 -->
+        <section class="nursery" id="nursery">
+          <button class="ny-card" id="nyCard" type="button" aria-label="进入 3D 婴儿房，布置宝宝的小房间">
+            <span class="ny-text">
+              <span class="ny-tag">3D 婴儿房</span>
+              <span class="ny-name">给宝宝布置<br>一间小房间</span>
+              <span class="ny-sub" id="nySub">做孕期任务攒兜豆，换小床、墙纸和挂饰</span>
+              <span class="ny-cta">推门进去 <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></span>
+            </span>
+            <span class="ny-house" aria-hidden="true">
+              <span class="ny-chim"><i></i><i></i><i></i></span>
+              <span class="ny-roof"></span>
+              <span class="ny-body">
+                <span class="ny-win"><img src="assets/img/nursery-room.jpg" alt="" loading="lazy" decoding="async"></span>
+                <span class="ny-stars"><i></i><i></i></span>
+              </span>
+              <span class="ny-360">360°</span>
+            </span>
+          </button>
+        </section>
+
        <!-- 模块三 · 书架卡带。
             上一版是「一张横排大卡 + 下面两张小卡」的老三段，和上面两个模块
             一样都是往下堆。这里改成一条横向可滑的书架：三张等宽等高的**竖版**书
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100109';
+  var VER = '26100110';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

@@ -1053,6 +1053,7 @@
  function syncPregnancy() {
    /* 孕期小知识：只认真实孕周（自己判显隐，见 renderTips） */
    renderTips();
+    nurseryCopy();
    /* ---- 产后态：宝宝已出生 → 一律不显示孕周数字（2026-09-22） ----
       ⚠️ 必须放在 pregEmpty 之前：产后返回体的 week 也是 null，
          落到空态分支会给**已经生产**的用户弹「完善孕期信息」引导。
@@ -3097,6 +3098,32 @@
    }, 2600);
  })();

+  /* ================= 3D 婴儿房 · 入口（2026-10-01）=================
+     地址由「3D 婴儿房」会话（33d6c837）维护；对方目前不读任何参数，jumpApp 多带的 openid 无害（以后接后端正好用上）。
+     · 昼夜：北京时间 19:00–6:00 挂 .is-night（和婴儿房里的昼夜灯光呼应）；每 10 分钟查一次，跨点时自己换。
+     · 文案：syncPregnancy() 调 nurseryCopy()，只认真实孕周（同孕期小知识的口径）。 */
+  const NURSERY_URL = 'https://beian3.douba.top/yef/';
+  const NURSERY_ID = 'yef-nursery';
+  function nurseryCopy() {
+    const sub = $('#nySub');
+    if (!sub) return;
+    const left = (state.pregEmpty === false && !state.postpartum) ? 40 - (state.week || 0) : -1;
+    sub.innerHTML = left > 1 ? '再过 <b>' + left + '</b> 周 TA 就要住进来啦，<br>攒兜豆换小床、墙纸和挂饰'
+      : left >= 0 ? 'TA 马上就要住进来啦，<br>攒兜豆换小床、墙纸和挂饰'
+      : '做孕期任务攒兜豆，<br>换小床、墙纸和挂饰';
+  }
+  (function nurseryCard() {
+    const sec = $('#nursery');
+    if (!sec) return;
+    $('#nyCard').addEventListener('click', () => jumpApp(NURSERY_URL, NURSERY_ID));
+    const tick = () => {
+      const h = new Date(Date.now() + 8 * 3600e3).getUTCHours();   // 北京时间
+      sec.classList.toggle('is-night', h >= 19 || h < 6);
+    };
+    tick(); setInterval(tick, 600e3);
+    nurseryCopy();
+  })();
+
  /* ================= 此刻，孕妈们在做什么（2026-10-01，需求文档 v1.0 第二节） =================
     GET /api/mp/public/mama-box/pulse（免登录、所有人同一份）→ { show, total, today[], feed[] }。
     · 数据是模拟还是真实由 box_app 后台 pulseMode 决定，前端不区分、不兜底造数：show=false / 接口失败 → 整卡隐藏。
--- a/mama-box.css
+++ b/mama-box.css
@@ -414,7 +414,7 @@ a.skip:focus{left:16px;top:16px}
      对齐的是内容，出血的是底色，这两件事要分开。
   ⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
      别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
-.tool-dock,.game-promo,.preg-tips,.today-line,.shelf{
+.tool-dock,.game-promo,.preg-tips,.today-line,.nursery,.shelf{
  margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
  background-color:#fff;
  /* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
@@ -428,7 +428,7 @@ a.skip:focus{left:16px;top:16px}
 /* 块间距。给后两块，第一块的上间距另有规则（来信卡收放要用）。
   ⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤，要调的是那块的 padding，
      不是这里 —— 改这里会把三块的关系一起改掉。 */
-.tool-dock,.game-promo,.preg-tips,.today-line,.shelf{margin-top:16px}
+.tool-dock,.game-promo,.preg-tips,.today-line,.nursery,.shelf{margin-top:16px}

 /* ===== 后两块的暖色渐变底（本批新增）=====
   用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
@@ -560,6 +560,63 @@ a.skip:focus{left:16px;top:16px}
@keyframes gpTw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gp-cta,.gp-spark{animation:none}.gp-spark{opacity:.8}}

+/* ============ 3D 婴儿房 · 入口（2026-10-01）============
+   奶油粉（取婴儿房自己的主色 #E0708A / 背景 #FFF9F3）。右边一座小房子：三角屋顶 + 冒烟的烟囱 + 窗户里的房间截图，
+   截图慢慢左右平移（暗示 360° 可转）。.is-night = 北京时间 19:00–6:00：深色底、窗户里亮暖灯、两颗小星星。 */
+.ny-card{position:relative;display:flex;align-items:center;gap:8px;width:100%;overflow:hidden;
+  border:0;border-radius:22px;padding:16px 14px 16px 18px;text-align:left;font:inherit;color:#6B5048;
+  background:linear-gradient(135deg,#FFF9F3 0%,#FFEDE8 60%,#FDE0E4 100%);box-shadow:0 8px 22px rgba(224,112,138,.16);
+  transition:transform .2s var(--ease)}
+.ny-card:active{transform:scale(.98)}
+.ny-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:#F9E3D6;opacity:.7}
+.ny-text{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
+.ny-tag{font-size:10.5px;font-weight:800;color:#E0708A;background:#fff;border-radius:999px;padding:2px 9px;letter-spacing:.3px}
+.ny-name{margin-top:7px;font-size:19px;font-weight:900;line-height:1.25;letter-spacing:.3px;color:#5A3E37}
+.ny-sub{margin-top:5px;font-size:12px;line-height:1.5;color:#8A6C63}
+.ny-sub b{color:#E0708A;font-weight:900}
+.ny-cta{margin-top:10px;display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:6px 14px;
+  font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.3)}
+.ny-house{position:relative;z-index:1;flex:0 0 auto;width:128px;height:132px;margin-bottom:-4px}
+.ny-roof{position:absolute;left:0;right:0;top:12px;height:46px;background:linear-gradient(180deg,#F59AA9,#E0708A);
+  clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:6px}
+.ny-chim{position:absolute;right:28px;top:14px;width:14px;height:34px;background:#FFE3D3;border-radius:3px 3px 0 0}
+.ny-chim i{position:absolute;left:3px;top:-4px;width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;
+  animation:nySmoke 3.6s ease-out infinite}
+.ny-chim i:nth-child(2){animation-delay:1.2s}.ny-chim i:nth-child(3){animation-delay:2.4s}
+@keyframes nySmoke{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.9}100%{opacity:0;transform:translate(10px,-26px) scale(1.4)}}
+.ny-body{position:absolute;left:12px;right:12px;top:56px;bottom:0;background:#FFF9F3;border-radius:0 0 12px 12px;
+  box-shadow:inset 0 0 0 3px #fff}
+.ny-win{position:absolute;left:10px;right:10px;top:8px;bottom:10px;overflow:hidden;border-radius:30px 30px 8px 8px;
+  border:3px solid #fff;background:#FDE7DD;box-shadow:0 3px 8px rgba(160,90,90,.18)}
+.ny-win img{position:absolute;top:50%;left:50%;width:148px;height:148px;max-width:none;object-fit:cover;
+  transform:translate(-50%,-46%);animation:nyPan 9s ease-in-out infinite alternate}
+@keyframes nyPan{from{transform:translate(-62%,-46%)}to{transform:translate(-38%,-46%)}}
+.ny-win::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%);pointer-events:none}
+.ny-360{position:absolute;left:-6px;bottom:10px;font-size:10px;font-weight:900;color:#E0708A;background:#fff;
+  border-radius:999px;padding:2px 7px;box-shadow:0 2px 6px rgba(224,112,138,.25);animation:nyBob 2.4s ease-in-out infinite}
+@keyframes nyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
+.ny-stars{display:none}
+/* 夜间版 */
+.nursery.is-night .ny-card{color:#F4E3E7;background:linear-gradient(135deg,#3A2F4F 0%,#4B3756 60%,#5E3D5A 100%);
+  box-shadow:0 8px 22px rgba(58,47,79,.3)}
+.nursery.is-night .ny-card::before{background:#2E2540}
+.nursery.is-night .ny-name{color:#FFF3F5}
+.nursery.is-night .ny-sub{color:#D9C5D0}
+.nursery.is-night .ny-sub b{color:#FFB3C3}
+.nursery.is-night .ny-tag{background:rgba(255,255,255,.14);color:#FFC6D2}
+.nursery.is-night .ny-body{background:#4A3B5C;box-shadow:inset 0 0 0 3px #6A5478}
+.nursery.is-night .ny-chim{background:#6A5478}
+.nursery.is-night .ny-chim i{background:#B9A9C9}
+.nursery.is-night .ny-win{border-color:#FFE2A8;box-shadow:0 0 16px rgba(255,200,120,.55)}
+.nursery.is-night .ny-win img{filter:brightness(.85) sepia(.25) saturate(1.2)}
+.nursery.is-night .ny-win::after{background:radial-gradient(circle at 50% 30%,rgba(255,210,140,.35),rgba(40,20,60,.25) 75%)}
+.nursery.is-night .ny-stars{display:block}
+.ny-stars i{position:absolute;width:10px;height:10px;background:#FFE2A8;animation:gpTw 2s ease-in-out infinite;
+  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
+.ny-stars i:first-child{left:-22px;top:-50px}
+.ny-stars i:last-child{right:-14px;top:-36px;width:7px;height:7px;animation-delay:.9s}
+@media (prefers-reduced-motion:reduce){.ny-win img,.ny-chim i,.ny-360,.ny-stars i{animation:none}.ny-win img{transform:translate(-50%,-46%)}}
+
 /* ============ 孕期小知识（2026-09-30）============
   外壳是公共白色通栏。里面三层：
     ① .pt-today  今日小知识大卡：暖粉渐变 + 右上角一颗慢慢浮动的「宝宝大小」emoji（本周水果）；