-
-
-
24孕周
+
+
+
距离见面还有 -- 天
+
--周
+
-
+3天
-
-
-
-
-
- 小汤圆在妈妈肚子里
+ 宝宝在妈妈肚子里
-
-
已经生活了 171 天
+
已经生活了 -- 天
diff --git a/js/app.js b/js/app.js
index 420f6f3..7f1cdd9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
- var VER = '26100124';
+ var VER = '26100125';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -993,6 +993,19 @@
el.dataset.ring = Math.max(0, Math.min(1, p)).toFixed(3);
el.style.strokeDashoffset = '';
}
+ /* 首页头部 2026-10-01 改版：见面倒计时 / 孕程条（骑着本周水果）/ 大小一句话。三种状态都走这里，别各写各的。
+ 进度条先归 0 再隔一帧写目标值，才有「长出来」的动画（同 replayArBar 的道理）。 */
+ function setHero(o) {
+ const bar = $('#heroBar');
+ if (!bar) return;
+ $('#heroDueT').innerHTML = o.due;
+ $('#heroFruit').textContent = o.emoji || '';
+ $('#heroSize').textContent = o.size || '';
+ $('#heroWeekU').textContent = o.unit == null ? '周' : o.unit;
+ $('.hero-pane').classList.toggle('is-born', !!o.born);
+ bar.style.width = '0%';
+ requestAnimationFrame(() => requestAnimationFrame(() => { bar.style.width = Math.max(0, Math.min(100, o.pct || 0)) + '%'; }));
+ }
/* ---------- 页面里那些写死的示例日期 ----------
时光轴、珍贵时刻、首页两张小卡、指南标题、「记一下」抬头、搜索热词，
@@ -1082,11 +1095,8 @@
});
/* ② 首页 hero */
const hw = $('#heroWeek');
- if (hw) {
- hw.textContent = '已出生';
- const lb = hw.nextElementSibling;
- if (lb) lb.textContent = '';
- }
+ if (hw) hw.textContent = '已出生';
+ setHero({ due: nm + '已经来到身边', emoji: '👶', size: '', unit: '', pct: 100, born: true });
const hp = $('#heroPlus');
if (hp) hp.textContent = (ageDays == null ? '' : ageDays + '天');
const hd = $('#heroDays');
@@ -1095,7 +1105,6 @@
if (hwho) hwho.textContent = nm;
const hwhere = document.querySelector('.hd-where');
if (hwhere) hwhere.textContent = '来到这个世界';
- setRing($('#heroRing'), 1);
/* ③ 档案页 */
const arN = $('#arTitleName'); if (arN) arN.textContent = nm;
const arL1 = $('#arLine1'); if (arL1) arL1.textContent = ageTxt;
@@ -1142,7 +1151,7 @@
$('#heroPlus').textContent = '';
$('#heroDays').textContent = '--';
$('#heroWho').textContent = nm;
- setRing($('#heroRing'), 0);
+ setHero({ due: '填好预产期，开启倒计时', emoji: '🌱', size: '', pct: 0 });
/* ③ 档案页 → 占位 */
$('#arTitleName').textContent = nm;
$('#arLine1').textContent = '完善孕期信息后开启';
@@ -1231,7 +1240,13 @@
$('#heroPlus').textContent = '+' + day + '天';
$('#heroDays').textContent = days;
$('#heroWho').textContent = name;
- setRing($('#heroRing'), pct / 100);
+ {
+ const sz = babySize(week);
+ setHero({
+ due: left > 0 ? '距离见面还有
' + left + ' 天' : '宝宝随时会来见你',
+ emoji: sz.emoji, size: '像' + sz.name.replace(/^一[个颗根只串把粒条棵颗]/, ''), pct: pct
+ });
+ }
animateRings($('#screen-home'));
/* ③ 档案页顶部：页面名、孕周、大小图标、孕程条 */
diff --git a/mama-box.css b/mama-box.css
index 1c65e22..1296a5b 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -360,6 +360,40 @@ a.skip:focus{left:16px;top:16px}
.hd-tail{white-space:nowrap;font-size:12.5px;opacity:.88;line-height:20px}
.hd-tail b{font-size:17px;font-weight:800;letter-spacing:-.3px;opacity:1;margin:0 1px}
+/* ===== 头部左侧 2026-10-01 改版：倒计时胶囊 / 大孕周 / 水果进度条 / 玻璃卡（结构与竖向账见 index.html .hero-pane 注释）=====
+ 旧的 .hero-main / .week-ring / .hero-days 已不在页面上，相关规则保留无害。 */
+.hero-pane{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
+ width:172px;margin:12px 0 0 8px;text-shadow:0 1px 3px rgba(120,30,10,.28)}
+.hi-due{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px 0 8px;border-radius:999px;
+ font-size:11.5px;font-weight:700;white-space:nowrap;
+ background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.35)}
+.hi-due b{font-size:13.5px;font-weight:900;margin:0 1px;color:#FFF3C4}
+.hi-heart{flex:0 0 auto;display:block;animation:hiBeat 1.6s ease-in-out infinite}
+@keyframes hiBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.25)}30%{transform:scale(.95)}}
+.hi-week{display:flex;align-items:flex-end;height:50px;margin-top:6px}
+.hi-week b{font-size:54px;font-weight:900;line-height:46px;letter-spacing:-2px;font-variant-numeric:tabular-nums}
+.hi-unit{display:flex;flex-direction:column;justify-content:flex-end;margin:0 0 3px 5px;line-height:1}
+.hi-unit em{font-style:normal;font-size:17px;font-weight:800}
+.hi-unit span{margin-top:3px;font-size:12px;font-weight:700;opacity:.92}
+.hi-prog{display:flex;align-items:center;gap:8px;width:100%;height:16px;margin-top:8px}
+.hi-bar{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.28)}
+.hi-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
+ background:linear-gradient(90deg,rgba(255,255,255,.7),#fff);box-shadow:0 0 8px rgba(255,255,255,.55);
+ transition:width 1.4s var(--ease)}
+.hi-knob{position:absolute;right:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
+ display:grid;place-items:center;font-size:12px;line-height:1;text-shadow:none;
+ background:#fff;box-shadow:0 2px 6px rgba(150,50,30,.3);animation:hiBob 2.4s ease-in-out infinite}
+.hi-knob:empty{display:none}
+@keyframes hiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
+.hi-size{flex:0 0 auto;font-size:11.5px;font-weight:700;opacity:.95;white-space:nowrap}
+.hi-size:empty{display:none}
+.hero-pane .hd-card{margin-top:10px;padding:7px 12px 8px}
+.hero-pane .hd-who{font-size:12.5px}
+.hero-pane .hd-who b{font-size:13.5px;margin-right:1px}
+/* 产后：「已出生」三个字当主角太宽，收一号；单位留空 */
+.hero-pane.is-born .hi-week b{font-size:40px;letter-spacing:0}
+@media (prefers-reduced-motion:reduce){.hi-heart,.hi-knob{animation:none}.hi-fill{transition:none}}
+
/* 「宝宝来信」卡：设计稿 x150..648 → left 75 · 宽 249 · 高 80。
气泡补全成整圆后下缘到 215.5，卡顶必须 ≥215.5 才不会再压住宝宝，
故上移量由 34.5 改为 16（橙区 252 − 16 = 卡顶 236）。