feat(首页头图): 按预产期推算星座，孕囊右下角挂「xx宝宝」玻璃小牌 (v26100424)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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:26100423 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100424 缓存版本标记：改 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 第四节） -->

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100423';
+  var VER = '26100424';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -1219,7 +1219,8 @@
      syncPregnancy 有好几个提前 return 的分支，所以用微任务等它整个跑完再发，拿到的是最终状态。 */
   function pubPreg() {
     const d = { week: (state.postpartum || state.pregEmpty) ? null : state.week, day: state.day,
-      postpartum: !!state.postpartum, empty: !!state.pregEmpty };
+      postpartum: !!state.postpartum, empty: !!state.pregEmpty,
+      due: (state.due && !state.pregEmpty) ? [state.due.getFullYear(), state.due.getMonth() + 1, state.due.getDate()] : null };   // 2026-10-04 头图星座牌按预产期算
     window.__mbPreg = d;
     window.dispatchEvent(new CustomEvent('mb-preg', { detail: d }));
   }

js/hero-fx.js

@@ -57,7 +57,38 @@
     g.onload = () => { if (my !== seq) return; kid.src = g.src; kid.classList.add('is-on'); };
     g.src = IMG + gif;
   }
-  function onPreg(d) { show(stageOf(force != null ? +force : (d && d.week))); }
+  /* ---- 星座牌（2026-10-04，用户：「按预产期推算宝宝是哪个星座，在羊水囊外边放上『巨蟹宝宝』之类，协调、字不要太大、高级一些」） ----
+     挂在 .hero-baby 里（跟着孕囊一起浮），落在孕囊右下角那块空角上。
+     只在孕期显示（未建档 / 产后不显示：产后应按真实生日，而这里只有预产期）。
+     预产期离星座分界 ≤2 天时写成「巨蟹·狮子宝宝」—— 预产期本来就是估算，别说得太死。 */
+  const ZOD = [ // [起始月, 起始日, 名, 符号]  按起始日期排
+    [1, 20, '水瓶', '♒'], [2, 19, '双鱼', '♓'], [3, 21, '白羊', '♈'], [4, 20, '金牛', '♉'], [5, 21, '双子', '♊'], [6, 22, '巨蟹', '♋'],
+    [7, 23, '狮子', '♌'], [8, 23, '处女', '♍'], [9, 23, '天秤', '♎'], [10, 24, '天蝎', '♏'], [11, 23, '射手', '♐'], [12, 22, '摩羯', '♑']];
+  function zodiacOf(y, m, d) {
+    const t = Date.UTC(y, m - 1, d);
+    let i = ZOD.length - 1;                       // 1/1～1/19 是摩羯
+    for (let k = 0; k < ZOD.length; k++) if (t >= Date.UTC(y, ZOD[k][0] - 1, ZOD[k][1])) i = k;
+    // 摩羯跨年：1 月里的摩羯从去年 12/22 起、到今年 1/20 止；12 月里的摩羯到明年 1/20 止
+    const jan = i === 11 && m === 1, day = 864e5;
+    const start = Date.UTC(jan ? y - 1 : y, ZOD[i][0] - 1, ZOD[i][1]);
+    const nx = ZOD[(i + 1) % 12], nextStart = Date.UTC(i === 11 && !jan ? y + 1 : y, nx[0] - 1, nx[1]);
+    const near = (t - start) / day < 2 ? (i + 11) % 12 : (nextStart - t) / day <= 2 ? (i + 1) % 12 : -1;
+    return { main: ZOD[i], alt: near >= 0 ? ZOD[near] : null, prevAlt: near === (i + 11) % 12 };
+  }
+  const zEl = document.createElement('span');
+  zEl.className = 'hero-zod'; zEl.setAttribute('aria-hidden', 'true');
+  box.appendChild(zEl);
+  function renderZod(d) {
+    const due = d && !d.empty && !d.postpartum && d.due;
+    if (!due) { zEl.classList.remove('is-on'); return; }
+    const z = zodiacOf(due[0], due[1], due[2]);
+    const pair = z.alt ? (z.prevAlt ? [z.alt, z.main] : [z.main, z.alt]) : [z.main];
+    // 图标用自绘四角星：星座符号（♋ 之类）在部分安卓上没有字形，会显示成方框
+    zEl.innerHTML = '<i><svg viewBox="0 0 12 12" width="8" height="8"><path d="M6 .6c.4 2.9 1.5 4 4.4 4.4v.1C7.5 5.5 6.4 6.6 6 9.4h-.1C5.5 6.6 4.4 5.5 1.6 5.1V5C4.4 4.6 5.5 3.5 5.9.6z" fill="currentColor"/></svg></i>' +
+      '<b>' + pair.map(x => x[2]).join('·') + '宝宝</b>';
+    zEl.classList.add('is-on');
+  }
+  function onPreg(d) { show(stageOf(force != null ? +force : (d && d.week))); renderZod(d); }
   addEventListener('mb-preg', e => onPreg(e.detail));
   if (force != null || window.__mbPreg) onPreg(window.__mbPreg);
   else setTimeout(() => { if (cur < 0) show(DEFAULT); }, 2500);

mama-box.css

@@ -4529,3 +4529,17 @@ a.skip:focus{left:16px;top:16px}
 .fb-st{margin-left:auto;padding:1px 7px;border-radius:999px;background:#F3ECE6;color:#A08D80;font-size:11px}
 .fb-st.done{background:#E6F5EE;color:#2F9A6A}
 .fb-reply{margin-top:6px;padding:7px 9px;border-radius:9px;background:#FFF6EF;color:#9A5A3C;font-size:12.5px}
+
+/* ============ 2026-10-04 头图星座牌（js/hero-fx.js renderZod） ============
+   挂在 .hero-baby 右下角的空角里，随孕囊一起浮。小、轻、像一枚贴在羊水外的玻璃标签：
+   磨砂半透明底 + 发丝细边；左边一枚奶油色小圆里一颗自绘四角星（不用 ♋ 一类符号：部分安卓没字形会成方框），右边 11px 字、字距拉开。 */
+.hero-zod{position:absolute;right:-2%;bottom:3%;z-index:4;display:inline-flex;align-items:center;gap:5px;
+  height:20px;padding:0 9px 0 3px;border-radius:999px;white-space:nowrap;
+  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.10));border:.5px solid rgba(255,255,255,.55);
+  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(120,35,20,.16);
+  opacity:0;transform:translateY(4px);transition:opacity .8s ease .3s,transform .8s ease .3s}
+.hero-zod.is-on{opacity:1;transform:none}
+.hero-zod i{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#FFF4E6;color:#C8573A;
+  font-style:normal}
+.hero-zod svg{display:block;margin-top:.5px}
+.hero-zod b{font-size:10.5px;font-weight:600;letter-spacing:1.2px;color:#FFF7EE;text-shadow:0 1px 2px rgba(120,35,20,.25)}