diff --git a/index.html b/index.html index 6bfa0ba..57b64f6 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + diff --git a/js/app.js b/js/app.js index 0bbf39c..48f14ed 100644 --- a/js/app.js +++ b/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 })); } diff --git a/js/hero-fx.js b/js/hero-fx.js index 967521a..e21f5fa 100644 --- a/js/hero-fx.js +++ b/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 = '' + + '' + pair.map(x => x[2]).join('·') + '宝宝'; + 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); diff --git a/mama-box.css b/mama-box.css index e64386a..4ea102c 100644 --- a/mama-box.css +++ b/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)}