From 3caee8e94b60b4adb89f05e9c7ac0c0fcee39a9b Mon Sep 17 00:00:00 2001 From: Karlcarlo Date: Mon, 5 Oct 2026 02:20:54 +0000 Subject: [PATCH] =?UTF-8?q?=E7=A5=88=E7=A6=8F=E5=B0=8F=E6=A0=91=E4=B8=8B?= =?UTF-8?q?=E7=A7=BB=EF=BC=8C=E5=8D=A1=E7=89=87=E4=B8=8A=E6=B2=BF=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E6=B8=90=E9=9A=90=E9=9C=B2=E5=87=BA=E6=A0=91=E8=BA=AB?= =?UTF-8?q?=20(v26100445)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- index.html | 2 +- js/app.js | 2 +- mama-box.css | 17 ++++++++++------- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 1dac013..543e965 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + diff --git a/js/app.js b/js/app.js index 8bfd757..4c89fb5 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ - var VER = '26100444'; + var VER = '26100445'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); diff --git a/mama-box.css b/mama-box.css index 63cf565..770614a 100644 --- a/mama-box.css +++ b/mama-box.css @@ -4665,11 +4665,12 @@ 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）盖住树的下半截， - 只露树冠顶 ≈17px（卡片停稳后上沿 236px，树顶 219px）；被盖住那截用 clip-path 裁掉（不然透过毛玻璃会糊成一团绿）； + 只露树冠顶 ≈13px（卡片停稳后上沿 236px，树顶 223px），卡片上沿往下渐隐；被盖住那截用渐隐遮罩慢慢淡掉（硬裁太生硬，全透又会在毛玻璃里糊成一团绿）； · 「祈福」小字在卡片标题行右边（原「所有工具」的位置），正好在树下方；两处都能点（≥44px 高的点击区）； · 「偶尔动一动」：每 7 秒里前 6 秒静止，最后 1 秒绕树根轻轻摆 3 度左右再回正。 */ .dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center; @@ -4677,13 +4678,15 @@ a.skip:focus{left:16px;top:16px} 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:44px;display:block; - /* 卡片是毛玻璃，盖住的那截树会透出来糊成一团绿（10-05 用户反馈）→ 卡片上沿以下直接裁掉。 - 裁切线 = 卡片上沿（本框内 y=17）+ 右上角 26px 圆角的圆弧（圆心在本框 x=36,y=43），多留 1px 压进卡片边免得露缝； - clip-path 挂在不摆动的外框上，树摆动时裁切线不跟着转。卡片位置/圆角/树的位置改了，这串数要一起重算。 */ - clip-path:polygon(-12px -30px,70px -30px,70px 44.0px,58px 30.1px,54px 25.2px,50px 22.1px,46px 20.0px,42px 18.7px,39px 18.2px,36px 18.0px,-12px 18px);-webkit-clip-path:polygon(-12px -30px,70px -30px,70px 44.0px,58px 30.1px,54px 25.2px,50px 22.1px,46px 20.0px,42px 18.7px,39px 18.2px,36px 18.0px,-12px 18px); +.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:0;width:58px;height:56px;display:block; +.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))} @keyframes dqSway{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-3.5deg)}93%{transform:rotate(2.5deg)}97%{transform:rotate(-1deg)}}