祈福小树改为藏在工具卡后面、只从卡片上沿露出树冠 (v26100443)

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:26100442 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100443 缓存版本标记：改 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 第四节） -->
@@ -97,6 +97,10 @@
              所以只能把气泡整体下移到 top:40，给字底留 6px。
              气泡一动，橙区那笔竖列账要连着重算 —— 已经算过，见 style.css 的 .home-hero。
              改字号 / 加字 / 挪气泡之前，把上面两笔账都重算一遍。 -->
+        <!-- 2026-10-05 祈福小树（用户：「树藏在页面底部边缘，微微露出来」）：放在头图右下角，下半截被下面的工具卡挡住，
+             只有树冠顶从卡片上沿冒出来；⚠️ 必须排在 #heroWater / #heroBaby 后面：它们同为 z-index:1 的话后出现的盖住前面的；又必须在 #homeBody 前面，才会被卡片盖住。
+             点它和卡片里的「祈福」两个字一样跳祈福树（js/app.js #dockQifu 附近）。 -->
+        <a class="hero-qifu" id="heroQifu" href="/qifu-shu/" aria-label="宝宝祈福树"><img src="assets/img/qifu-tree.png" alt="" width="58" height="56"></a>
         <div class="hero-top">
           <!-- 2026-10-01 左上角文字换成正式 LOGO（用户提供的红字原稿）。头图是橙红底，红色原稿压上去会糊，
                所以抠成白色透明 PNG（按红色浓度转 alpha，3x 高清），和旁边白字 slogan、宝宝插画同一套白色语言。 -->
@@ -194,7 +198,7 @@
             <!-- 2026-10-05 用户：「把『所有工具』取消，右上角放祈福树，『祈福』两个小字，树在右上角露出一点点，偶尔动一动」。
                  跳宝宝祈福树（第三方 H5，nginx /qifu-shu/ 反代到 taidong.douba.top；小程序 web-view 只放行业务域名）。
                  「所有工具」抽屉本身没删，宫格最后那张「更多」仍能打开。样式见 mama-box.css「祈福树入口」。 -->
-            <a class="dock-qifu" id="dockQifu" href="/qifu-shu/" aria-label="宝宝祈福树"><span class="dq-t">祈福</span><img class="dq-tree" src="assets/img/qifu-tree.png" alt="" width="46" height="44"></a>
+            <a class="dock-qifu" id="dockQifu" href="/qifu-shu/" aria-label="宝宝祈福树"><span class="dq-t">祈福</span></a>
           </div>
           <p class="dock-note"><svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M11 2.6l1.9 5.2 5.2 1.9-5.2 1.9L11 16.8l-1.9-5.2L3.9 9.7l5.2-1.9L11 2.6z" fill="currentColor"/><path d="M18.4 14.6l.8 2.1 2.2.8-2.2.8-.8 2.1-.8-2.1-2.2-.8 2.2-.8.8-2.1z" fill="currentColor" opacity=".6"/></svg>妈妈每记录一次，宝宝就多一段成长记忆</p>
           <!-- 2026-09-30 五张卡改版：白色粗标题 + 各工具 LOGO 里的图形（取自点进去那个工具页左上角的 LOGO，

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100442';
+  var VER = '26100443';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -544,8 +544,7 @@
   $$('[data-sheet="open"]').forEach(b => b.addEventListener('click', openSheet));
   /* 工具卡右上角「祈福」小树 → 宝宝祈福树（2026-10-05）。走业务域名反代 /qifu-shu/，jumpApp 负责带身份和上报。 */
   const QIFU_URL = location.origin + '/qifu-shu/';
-  const dq = $('#dockQifu');
-  if (dq) dq.addEventListener('click', e => { e.preventDefault(); jumpApp(QIFU_URL); });
+  [$('#dockQifu'), $('#heroQifu')].forEach(el => el && el.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); jumpApp(QIFU_URL); }));
   $$('[data-sheet="close"]').forEach(b => b.addEventListener('click', closeSheet));
   scrim.addEventListener('click', closeSheet);
 

mama-box.css

@@ -4663,21 +4663,23 @@ a.skip:focus{left:16px;top:16px}
 
 
 
+
 /* ============ 祈福树入口（2026-10-05） ============
-   用户：「把『所有工具』取消，右上角放『祈福』两个小字，树在右上角露出一点点，偶尔会动一动」。
+   用户：「把『所有工具』取消，右上角放『祈福』两个小字」+「树藏在页面底部边缘，微微露出来，偶尔动一动」。
    · 树图用宝宝祈福会话提供的缩略图（/qifu-shu/static/tree-thumb.png，600² 裁边后缩到 150px 存本地，免得每次拉 550KB）；
-   · 小树贴在工具卡右上角，右边和顶上各有一截被卡片圆角 / 边线裁掉（.tool-dock 本来就 overflow:hidden），像从卡片外探进来；
-   · 「祈福」小字在树左边，和标题同一行；整块都是点击区（≥44px 高）；
-   · 「偶尔动一动」：每 7 秒里前 6 秒静止，最后 1 秒绕树根轻轻摆 3 度左右再回正，不抢眼。 */
-.tool-dock{position:relative}
-.dock-head{position:relative}
-.dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:2px;
-  padding:0 46px 0 10px;margin-right:-16px;min-height:44px;margin-top:-10px;margin-bottom:-10px;
+   · 树放在头图（.home-hero，overflow:hidden）右下角：#homeBody 的 z-index 比头图高，工具卡上沿（≈231px）盖住树的下半截，
+     只露树冠顶 ≈17px（卡片停稳后上沿 236px，树顶 219px）；被盖住那截透过卡片毛玻璃是一团模糊的绿，像树藏在玻璃后面；
+   · 「祈福」小字在卡片标题行右边（原「所有工具」的位置），正好在树下方；两处都能点（≥44px 高的点击区）；
+   · 「偶尔动一动」：每 7 秒里前 6 秒静止，最后 1 秒绕树根轻轻摆 3 度左右再回正。 */
+.dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;
+  padding:0 2px 0 14px;min-height:44px;margin-top:-10px;margin-bottom:-10px;
   text-decoration:none;-webkit-tap-highlight-color:transparent}
 .dock-qifu .dq-t{font-size:12px;font-weight:700;color:#C2503E;letter-spacing:1px}
-.dock-qifu .dq-tree{position:absolute;right:-12px;top:-15px;width:46px;height:44px;
-  transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;
-  filter:drop-shadow(0 1.5px 2px rgba(60,40,20,.22));pointer-events:none}
 .dock-qifu:active{opacity:.6}
+.hero-qifu{position:absolute;z-index:1;right:4px;bottom:-1px;width:58px;height:44px;display:block;
+  -webkit-tap-highlight-color:transparent}
+.hero-qifu img{position:absolute;left:0;top:0;width:58px;height:56px;display:block;
+  transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;
+  filter:drop-shadow(0 -1px 3px rgba(80,30,10,.25))}
 @keyframes dqSway{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-3.5deg)}93%{transform:rotate(2.5deg)}97%{transform:rotate(-1deg)}}
-@media (prefers-reduced-motion:reduce){.dock-qifu .dq-tree{animation:none}}
+@media (prefers-reduced-motion:reduce){.hero-qifu img{animation:none}}