首页头部左侧改版：见面倒计时胶囊 + 大孕周 + 水果进度条 + 陪伴天数卡，替代孕周圆环

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:26100124 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100125 缓存版本标记：改 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 第四节） -->
@@ -99,35 +99,27 @@
           <p class="hero-slogan">每次记录都是一生记忆</p>
         </div>
 
-        <div class="hero-main">
-          <div class="week-ring">
-            <svg viewBox="0 0 120 120" class="ring-svg">
-              <circle class="ring-bg" cx="60" cy="60" r="56"/>
-              <circle class="ring-fg" id="heroRing" cx="60" cy="60" r="56" data-ring="0.6"/>
-            </svg>
-            <div class="week-num"><b id="heroWeek">24</b><span>孕周</span></div>
+        <!-- 2026-10-01 头部左侧改版（用户：「LOGO 下边、小孩左边那块太单一，好好设计一下」）。
+             原来是「孕周圆环 + 一张天数玻璃卡」，信息只有两条、形状又都是圆/方块。现在四层，从情绪到数据：
+               ① .hi-due   见面倒计时小胶囊（♥ 跳动）—— 最有期待感的一句放最上面
+               ② .hi-week  超大孕周数字「31 周 +6天」—— 主角，替代圆环
+               ③ .hi-bar   孕程进度条，进度头上骑着「本周水果」（宝宝大小），右边写「像菠萝」
+               ④ .hd-card  原来的玻璃卡，「小名在妈妈肚子里 / 已经生活了 N 天」原样保留
+             竖向账（橙区 250 不变）：hero-top 止于 42 → ①顶 54 高 22 → ②顶 82 高 50 → ③顶 140 高 16 → ④顶 166 高 52 → 底 218，
+             离「宝宝来信」卡顶 234 留 16px（和旧版一样）。宽度不超过 x≈197（旧玻璃卡的右缘），不伸进宝宝插画。
+             JS 只认 id：heroLeft / heroWeek / heroWeekU / heroPlus / heroBar / heroFruit / heroSize / heroWho / heroDays。 -->
+        <div class="hero-pane">
+          <span class="hi-due" id="heroDue"><svg class="hi-heart" viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M12 20.4S3.6 14.9 3.6 9.3a4.6 4.6 0 0 1 8.4-2.6 4.6 4.6 0 0 1 8.4 2.6c0 5.6-8.4 11.1-8.4 11.1z" fill="#fff"/></svg><span id="heroDueT">距离见面还有 <b id="heroLeft">--</b> 天</span></span>
+          <div class="hi-week"><b id="heroWeek">--</b><span class="hi-unit"><em id="heroWeekU">周</em><span id="heroPlus"></span></span></div>
+          <div class="hi-prog">
+            <div class="hi-bar"><i class="hi-fill" id="heroBar"><span class="hi-knob" id="heroFruit" aria-hidden="true"></span></i></div>
+            <span class="hi-size" id="heroSize"></span>
           </div>
-          <div class="week-plus" id="heroPlus">+3天</div>
-        </div>
-
-        <!-- 原来是一行干巴巴的白字浮在橙底上。改成一张毛玻璃小卡：
-             上行小名，下行天数（数字放大当主角）。卡片是 inline-flex，
-             宽度由内容撑开，两行排布让它窄到不会伸进右边气泡宝宝底下。 -->
-        <div class="hero-days">
           <div class="hd-card">
             <span class="hd-who">
-              <svg class="hd-heart" viewBox="0 0 24 24" width="12" height="12" aria-hidden="true">
-                <path d="M12 20.4S3.6 14.9 3.6 9.3a4.6 4.6 0 0 1 8.4-2.6 4.6 4.6 0 0 1 8.4 2.6c0 5.6-8.4 11.1-8.4 11.1z" fill="rgba(255,255,255,.92)"/>
-              </svg>
-              <b id="heroWho">小汤圆</b><span class="hd-where">在妈妈肚子里</span>
+              <b id="heroWho">宝宝</b><span class="hd-where">在妈妈肚子里</span>
             </span>
-            <!-- ⚠️ 这句话是**拆成两行**放的，别合成一行。
-                 .hero-days 是 max-width:196px，.hd-tail 又是 white-space:nowrap，
-                 「在妈妈肚子里已经生活了 188 天」整句 ≈ 182px + 卡内边 26px = 208px，
-                 超出 196px 会溢出到插画上。
-                 拆开后：第一行 ♥+小名+「在妈妈肚子里」≈ 163px，
-                        第二行「已经生活了 188 天」≈ 133px，两行都放得下。 -->
-            <span class="hd-tail">已经生活了 <b id="heroDays">171</b> 天</span>
+            <span class="hd-tail">已经生活了 <b id="heroDays">--</b> 天</span>
           </div>
         </div>
       </div>