diff --git a/index.html b/index.html index a00ef91..7f5396e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -27,12 +27,14 @@ 未获取到微信身份,页面数据可能不完整 + +
diff --git a/js/app.js b/js/app.js index 27d1712..5e64c11 100644 --- a/js/app.js +++ b/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)); diff --git a/mama-box.css b/mama-box.css index 1edc09b..e3bcfdf 100644 --- a/mama-box.css +++ b/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}