From de68ae20d473dfffb323d66d23054dddf1e320ba Mon Sep 17 00:00:00 2001 From: Karlcarlo Date: Mon, 5 Oct 2026 02:41:03 +0000 Subject: [PATCH] =?UTF-8?q?=E7=A5=88=E7=A6=8F=E6=A0=91=E5=85=A5=E5=8F=A3?= =?UTF-8?q?=E7=A7=BB=E5=88=B0=E4=BB=8A=E6=97=A5=E8=84=9A=E5=8D=B0=E5=8F=B3?= =?UTF-8?q?=E4=B8=8A=E8=A7=92=E6=8E=80=E8=A7=92=EF=BC=9B=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E5=8D=A1=E6=81=A2=E5=A4=8D=E3=80=8C=E6=89=80=E6=9C=89=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E3=80=8D(v26100447)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- index.html | 15 ++++++--------- js/app.js | 7 ++++--- mama-box.css | 49 +++++++++++++++++++++++++------------------------ 3 files changed, 35 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 4e5ea64..66d3bab 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -97,10 +97,6 @@ 所以只能把气泡整体下移到 top:40，给字底留 6px。 气泡一动，橙区那笔竖列账要连着重算 —— 已经算过，见 style.css 的 .home-hero。 改字号 / 加字 / 挪气泡之前，把上面两笔账都重算一遍。 --> - -
@@ -195,10 +191,7 @@

宝宝的孕育工具

- - 祈福 +

妈妈每记录一次，宝宝就多一段成长记忆

+ +
diff --git a/js/app.js b/js/app.js index b2b583d..f84f613 100644 --- 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); diff --git a/mama-box.css b/mama-box.css index 3b76c11..121bb06 100644 --- 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:"";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}}