底部导航推荐版：线稿图标/缺口托住记一下/暖白底+淡出/我的用头像/来信新信晃动 (v26100198)

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:26100197 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100198 缓存版本标记：改 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 第四节） -->
@@ -27,12 +27,14 @@
   <span class="idn-txt" id="idNoticeTxt">未获取到微信身份，页面数据可能不完整</span>
   <button class="idn-retry" id="idNoticeRetry">重试</button>
 </div>
+<!-- 2026-10-02 底部导航「推荐版」：内容滑到导航下面时淡出，而不是被白条硬切 -->
+<div class="tab-fade" aria-hidden="true"></div>
 <nav class="tabbar" id="tabbar">
     <button class="tab is-active" data-tab="home">
-      <span class="t-ico ic-home"></span><span class="t-txt">首页</span>
+      <span class="t-ico t-line"><svg class="t-svg" viewBox="0 0 24 24" aria-hidden="true"><path class="tf" d="M4 10.4 12 4l8 6.4V18a2.4 2.4 0 0 1-2.4 2.4H6.4A2.4 2.4 0 0 1 4 18z"/><path class="td" d="M12 16.6s-2.9-1.7-2.9-3.6a1.45 1.45 0 0 1 2.9-.4 1.45 1.45 0 0 1 2.9.4c0 1.9-2.9 3.6-2.9 3.6z"/></svg></span><span class="t-txt">首页</span>
     </button>
     <button class="tab" data-tab="archive">
-      <span class="t-ico ic-archive"></span><span class="t-txt">档案</span>
+      <span class="t-ico t-line"><svg class="t-svg" viewBox="0 0 24 24" aria-hidden="true"><path class="tf" d="M8.3 20.4c-1.9 0-2.9-1.5-2.6-3.4l.5-3c.3-1.9 1.4-3 2.9-3 1.6 0 2.5 1.3 2.2 3.2l-.5 3.1c-.3 1.9-1.1 3.1-2.5 3.1z"/><path class="tf" d="M15.9 14.4c-1.4 0-2.2-1.2-2.5-3.1l-.5-3.1c-.3-1.9.6-3.2 2.2-3.2 1.5 0 2.6 1.1 2.9 3l.5 3c.3 1.9-.7 3.4-2.6 3.4z"/><circle class="td" cx="6.6" cy="8.4" r=".95"/><circle class="td" cx="8.6" cy="7.6" r=".85"/><circle class="td" cx="10.4" cy="8.3" r=".75"/><circle class="td" cx="13.6" cy="2.9" r=".8"/><circle class="td" cx="15.5" cy="2.3" r=".85"/><circle class="td" cx="17.5" cy="3" r=".95"/></svg></span><span class="t-txt">档案</span>
     </button>
     <button class="tab tab-fab" data-sheet="open">
       <span class="fab"><img src="assets/img/69818ea975da.png" alt="" aria-hidden="true"></span><span class="t-txt">记一下</span>
@@ -48,10 +50,10 @@
            ⚠️ 红点 #tabBadge 也挂在这枚 tab 上，数据源是 laixin 的
               /api/mp/public/laixin/unread，owner 只有 syncLaixinReminder() 一处
               （第九批曾把红点挪到「首页」，现已挪回）。 -->
-      <span class="t-ico ic-letter"></span><span class="t-badge" id="tabBadge"></span><span class="t-txt">宝宝来信</span>
+      <span class="t-ico t-line"><svg class="t-svg" viewBox="0 0 24 24" aria-hidden="true"><rect class="tf" x="3.4" y="5.6" width="17.2" height="13" rx="2.6"/><path class="tl" d="M4 7.2l8 5.6 8-5.6"/><path class="td" d="M12 15.9s-2-1.2-2-2.5a1 1 0 0 1 2-.3 1 1 0 0 1 2 .3c0 1.3-2 2.5-2 2.5z"/></svg></span><span class="t-badge" id="tabBadge"></span><span class="t-txt">宝宝来信</span>
     </button>
     <button class="tab" data-tab="me">
-      <span class="t-ico ic-me"></span><span class="t-txt">我的</span>
+      <span class="t-ico t-line"><svg class="t-svg" viewBox="0 0 24 24" aria-hidden="true"><circle class="tf" cx="12" cy="8.6" r="3.9"/><path class="tf" d="M4.8 20.2c.6-3.7 3.5-5.9 7.2-5.9s6.6 2.2 7.2 5.9z"/></svg><img class="t-ava" id="tabAva" alt=""></span><span class="t-txt">我的</span>
     </button></nav>
 
   <main class="screens" id="screens">

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100197';
+  var VER = '26100198';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -798,6 +798,28 @@
     if (body) body.classList.remove('no-letter');
     if (badge) badge.classList.add('show');
   }
+  /* 2026-10-02 底部导航：「宝宝来信」tab 的信封在有红点时轻轻晃（CSS .has-new）。
+     红点的 owner 仍是 renderLetterReminder，这里只跟着它的 .show 走，不另立判据。 */
+  (function () {
+    const badge = $('#tabBadge'), tab = $('#tabLetter');
+    if (!badge || !tab || !window.MutationObserver) return;
+    const sync = () => tab.classList.toggle('has-new', badge.classList.contains('show'));
+    new MutationObserver(sync).observe(badge, { attributes: true, attributeFilter: ['class'] });
+    sync();
+  })();
+  /* 「我的」tab 图标换成妈妈自己的头像：跟随 #meAvatarImg 的 src（资料接口 / 换头像 都写它），没有就回到线稿小人 */
+  (function () {
+    const src = $('#meAvatarImg'), ava = $('#tabAva');
+    if (!src || !ava || !window.MutationObserver) return;
+    const sync = () => {
+      const u = src.getAttribute('src') || '';
+      if (u) ava.src = u; else ava.removeAttribute('src');
+      ava.closest('.tab').classList.toggle('has-ava', !!u);
+    };
+    ava.addEventListener('error', () => ava.closest('.tab').classList.remove('has-ava'));
+    new MutationObserver(sync).observe(src, { attributes: true, attributeFilter: ['src'] });
+    sync();
+  })();
 
   $$('[data-detail="close"]').forEach(b => b.addEventListener('click', closePanel));
 

mama-box.css

@@ -4156,3 +4156,51 @@ a.skip:focus{left:16px;top:16px}
 /* 同日：外圈也缩小 52 → 44（外径含 2px 白边 56 → 48），底边位置不变；加号 17 → 15 */
 .tab-fab .fab{width:44px;height:44px;margin-left:-24px;top:-12px}
 .tab-fab .fab::before{width:15px;height:15px;background:linear-gradient(#fff,#fff) center/100% 2.6px no-repeat,linear-gradient(#fff,#fff) center/2.6px 100% no-repeat}
+
+/* ================= 底部导航「推荐版」（2026-10-02）=================
+   用户要的方向：图标和页面同一套语言（圆头线稿，同「今日待办」）、只留一个焦点、「记一下」被底栏托住、底栏暖白 + 内容淡出。
+   ⚠️ 选中态仍按 2026-10-01 用户要求：不加背景胶囊，只靠颜色 + 加粗 + 弹一下 + 下方小圆点；本版只多了「线稿 → 实心」。
+   · 缺口：底色挪到 ::before 上用 mask 挖一个圆；阴影改成父级 filter:drop-shadow，才会沿着缺口走（box-shadow 会被 mask 切掉）。
+     代价：父级有 filter 后子元素的 backdrop-filter 失效，所以底色改成近不透明的暖白，不再磨砂。
+   · 圆钮中心在底栏顶边下 6px，直径 46；缺口半径 = 23 + 5 留白。改圆钮尺寸/位置要同步改 mask 的圆心和半径。 */
+.tabbar{background:none!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;
+  filter:drop-shadow(0 6px 14px rgba(170,90,60,.12)) drop-shadow(0 0 1px rgba(170,90,60,.18))}
+.tabbar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
+  background:linear-gradient(180deg,#FFFDFB,#FFF8F3);box-shadow:inset 0 0 0 1px rgba(255,214,196,.55);
+  -webkit-mask:radial-gradient(circle 28px at 50% 6px,transparent 27.5px,#000 28.5px);
+          mask:radial-gradient(circle 28px at 50% 6px,transparent 27.5px,#000 28.5px)}
+.tabbar{isolation:isolate}
+.tab-fade{position:absolute;left:0;right:0;bottom:0;z-index:59;pointer-events:none;
+  height:calc(96px + env(safe-area-inset-bottom));
+  background:linear-gradient(180deg,rgba(248,243,239,0),rgba(248,243,239,.88) 55%,rgba(248,243,239,.96))}
+
+/* 线稿图标：.tf 主体（选中时实心填色）、.td 小细节（选中时反白）、.tl 只在主体上的折线（选中时反白） */
+.tab{color:#A3958D}
+.t-ico.t-line{background:none;-webkit-mask:none;mask:none;width:25px;height:25px}
+.t-svg{display:block;width:100%;height:100%;overflow:visible}
+.t-svg .tf,.t-svg .tl{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:fill .25s}
+.t-svg .td{fill:currentColor;stroke:none;transition:fill .25s}
+.tab.is-active .t-svg .tf{fill:currentColor}
+.tab.is-active .t-svg .tl{stroke:#fff}
+.tab.is-active .t-svg .td{fill:#fff}
+
+/* 「我的」：有头像就用头像（圆形 + 1.5px 描边，选中时描边变橙） */
+.t-ava{display:none;position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;
+  box-shadow:0 0 0 1.5px currentColor;background:#F3ECE7}
+.tab.has-ava .t-ava{display:block}
+.tab.has-ava .t-svg{visibility:hidden}
+.tab.has-ava.is-active .t-ava{box-shadow:0 0 0 2px currentColor}
+
+/* 「宝宝来信」有新信：信封每 4 秒轻晃一下 */
+#tabLetter.has-new .t-ico{animation:letterWiggle 4s ease-in-out infinite;transform-origin:50% 80%}
+@keyframes letterWiggle{0%,76%,100%{transform:rotate(0)}80%{transform:rotate(-12deg)}84%{transform:rotate(10deg)}88%{transform:rotate(-6deg)}92%{transform:rotate(3deg)}}
+#tabLetter.has-new{color:#8E7F78}
+
+/* 「记一下」：圆钮去掉白圈，坐进缺口；文字平时和其它 tab 同色，弹层打开时才变橙 → 底栏只有一个焦点 */
+.tab-fab .fab{border:0;width:46px;height:46px;margin-left:-23px;top:-17px;
+  box-shadow:0 3px 8px rgba(244,89,60,.26),inset 0 1px 0 rgba(255,255,255,.25)}
+.tab-fab .t-txt{color:inherit;font-weight:600}
+.phone.sheet-open .tab-fab .t-txt{color:#F4593C;font-weight:800}
+@media (prefers-reduced-motion:reduce){#tabLetter.has-new .t-ico{animation:none}}
+/* 档案的小脚丫：脚趾圆点在脚掌外面，选中时不反白、跟主体同色 */
+.tab[data-tab="archive"].is-active .t-svg .td{fill:currentColor}