祈福树入口移到今日脚印右上角掀角；工具卡恢复「所有工具」(v26100447)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-05 02:41:03 +00:00
parent 19525a6f68
commit de68ae20d4
3 changed files with 35 additions and 36 deletions
--- a/index.html
+++ b/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:26100446 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100447 缓存版本标记：改 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,10 +97,6 @@
             所以只能把气泡整体下移到 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、宝宝插画同一套白色语言。 -->
@@ -195,10 +191,7 @@
          <span class="wm" aria-hidden="true">兜爸</span>
          <div class="dock-head">
            <h2 class="dock-title" id="dockTitle">宝宝的孕育工具</h2>
-            <!-- 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></a>
+            <button class="dock-all" data-sheet="open">所有工具 ›</button>
          </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，
@@ -414,6 +407,10 @@
               ⚠️ 「AI」角标必须保留（唯一的机器生成提示，见 syncBabyWords 那段注释）。
             JS 依赖的 id / class（.today-line / #tlSteps / .step 系列 / #tlGuide* / .ai-bubble / .ab-say / #abTag / #tlTitle）都沿用。 -->
        <section class="today-line fp2">
+          <!-- 2026-10-05 祈福树入口（用户：「放到今日脚印的右上角，把右上角掀开一点，露出祈福树」）：
+               卡片右上角像纸一样折起一角（.pl-flap 是翻过来的纸背），底下那块（.pl-hole）露出祈福树；点它跳祈福树（js/app.js #fpQifu）。
+               之前放在工具卡右上角 / 头图底边的版本已撤，工具卡恢复「所有工具 ›」。样式见 mama-box.css「祈福树入口 · 今日脚印掀角」。 -->
+          <a class="fp-peel" id="fpQifu" href="/qifu-shu/" aria-label="宝宝祈福树"><span class="pl-hole"><img src="assets/img/qifu-tree.png" alt="" width="36" height="35"></span><span class="pl-flapw"><span class="pl-flap"></span></span></a>
          <div class="fp-head">
            <div class="fp-cal" aria-hidden="true"><i class="fc-ring"></i><b id="fpCalD">--</b><span id="fpCalM">--</span></div>
            <div class="fp-ht">
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100446';
+  var VER = '26100447';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

@@ -542,9 +542,10 @@
    setStatusbar('auto');
  }
  $$('[data-sheet="open"]').forEach(b => b.addEventListener('click', openSheet));
-  /* 工具卡右上角「祈福」小树 → 宝宝祈福树（2026-10-05）。走业务域名反代 /qifu-shu/，jumpApp 负责带身份和上报。 */
+  /* 「今日脚印」右上角掀角里的祈福树 → 宝宝祈福树（2026-10-05）。stopPropagation：卡片本身点了会跳档案。走业务域名反代 /qifu-shu/，jumpApp 负责带身份和上报。 */
  const QIFU_URL = location.origin + '/qifu-shu/';
-  [$('#dockQifu'), $('#heroQifu')].forEach(el => el && el.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); jumpApp(QIFU_URL); }));
+  const fq = $('#fpQifu');
+  if (fq) fq.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); jumpApp(QIFU_URL); });
  $$('[data-sheet="close"]').forEach(b => b.addEventListener('click', closeSheet));
  scrim.addEventListener('click', closeSheet);

--- a/mama-box.css
+++ b/mama-box.css
@@ -4668,28 +4668,29 @@ a.skip:focus{left:16px;top:16px}



-/* ============ 祈福树入口（2026-10-05） ============
-   用户：「把『所有工具』取消，右上角放『祈福』两个小字」+「树藏在页面底部边缘，微微露出来，偶尔动一动」。
-   · 树图用宝宝祈福会话提供的缩略图（/qifu-shu/static/tree-thumb.png，600² 裁边后缩到 150px 存本地，免得每次拉 550KB）；
-   · 树放在头图（.home-hero，overflow:hidden）右下角：#homeBody 的 z-index 比头图高，工具卡上沿（≈231px）盖住树的下半截，
-     只露树冠顶 ≈13px（卡片停稳后上沿 236px，树顶 223px），卡片上沿往下渐隐；被盖住那截用渐隐遮罩慢慢淡掉（硬裁太生硬，全透又会在毛玻璃里糊成一团绿）；
-   · 「祈福」小字在卡片标题行右边（原「所有工具」的位置），正好在树下方；两处都能点（≥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:active{opacity:.6}
-.hero-qifu{position:absolute;z-index:1;right:4px;bottom:-1px;width:58px;height:50px;display:block;box-sizing:border-box;
-  /* 10-05 用户两轮反馈：硬裁 → 「树完整地在卡片下边，卡片上沿慢慢把树露出来，再往下一点」。
-     改成渐隐遮罩：外框比树高 10px 留出摆动余量（padding-top），卡片上沿在本框 y=23（框顶 213、卡片 236）；
-     上沿以上全显，往下 25px 内渐隐到 0 —— 树冠露 ≈13px，再往下透过毛玻璃隐约看到一点、慢慢淡没，卡片深处是干净的白。
-     mask 挂在不摆动的外框上。卡片位置 / 树的位置改了，这里的 23px、48px 要一起改。 */
-  -webkit-mask-image:linear-gradient(180deg,#000 23px,rgba(0,0,0,.62) 32px,rgba(0,0,0,0) 48px);
-          mask-image:linear-gradient(180deg,#000 23px,rgba(0,0,0,.62) 32px,rgba(0,0,0,0) 48px);
-  -webkit-tap-highlight-color:transparent}
-.hero-qifu img{position:absolute;left:0;top:10px;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))}
+
+/* ============ 祈福树入口 · 今日脚印掀角（2026-10-05） ============
+   用户：「祈福树放到今日脚印的右上角，把右上角掀开一点，再把祈福树露出来」（之前放工具卡右上角 / 头图底边，已撤）。
+   画法（全在卡片里面，不动卡片本身的毛玻璃 / 圆角）：
+   · .fp-peel 是右上角 S×S 的方块（S = --pl，默认 46px）；
+   · .pl-hole = 方块右上那半个三角（对角线以上），代表「纸掀开后底下那层」：暖米色 + 祈福树，右上角跟卡片一样 26px 圆角；
+   · .pl-flap = 方块左下那半个三角，就是被掀起来、翻过去的那一角纸背（对角线上最亮，往折角尖渐暗），外层 .pl-flapw 打投影；
+   · 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 46 → 52）、树轻轻摆，再落回去。
+   「全部 ›」往左让 20px，不被纸角压住。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
+.today-line{position:relative}
+.today-line .fp-all{margin-right:20px}
+@property --pl{syntax:"<length>";inherits:true;initial-value:46px}
+.fp-peel{--pl:46px;position:absolute;top:0;right:0;z-index:4;width:var(--pl);height:var(--pl);display:block;
+  -webkit-tap-highlight-color:transparent;animation:plLift 7s ease-in-out infinite}
+.pl-hole{position:absolute;inset:0;border-top-right-radius:26px;overflow:hidden;
+  -webkit-clip-path:polygon(0 0,100% 0,100% 100%);clip-path:polygon(0 0,100% 0,100% 100%);
+  background:linear-gradient(225deg,#F4E6DC 0%,#EBD6C8 70%,#E2C9B9 100%)}
+.pl-hole img{position:absolute;right:1px;top:1px;width:36px;height:35px;display:block;
+  transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;filter:drop-shadow(0 1px 1.5px rgba(70,40,20,.25))}
+.pl-flapw{position:absolute;inset:0;filter:drop-shadow(-2px 3px 3px rgba(90,50,30,.22));pointer-events:none}
+.pl-flap{position:absolute;inset:0;-webkit-clip-path:polygon(0 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 100%,0 100%);
+  background:linear-gradient(45deg,#E9DFD8 0%,#F7F2EE 45%,#FFFFFF 62%,#F3EDE9 100%)}
+.fp-peel:active{opacity:.7}
+@keyframes plLift{0%,82%,100%{--pl:46px}89%{--pl:52px}95%{--pl:47px}}
@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){.hero-qifu img{animation:none}}
+@media (prefers-reduced-motion:reduce){.fp-peel,.pl-hole img{animation:none}}