祈福小树:卡片下面那截裁掉,不再透过毛玻璃糊成一团 (v26100444)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-05 02:17:10 +00:00
parent bc4f5b38e6
commit 8993a86490
3 changed files with 8 additions and 3 deletions

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100443 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100444 缓存版本标记:改 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 第四节) -->

View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
var VER = '26100443';
var VER = '26100444';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

View File

@@ -4664,11 +4664,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);被盖住那截透过卡片毛玻璃是一团模糊的绿,像树藏在玻璃后面;
只露树冠顶 ≈17px(卡片停稳后上沿 236px,树顶 219px);被盖住那截用 clip-path 裁掉(不然透过毛玻璃会糊成一团绿);
· 「祈福」小字在卡片标题行右边(原「所有工具」的位置),正好在树下方;两处都能点(≥44px 高的点击区);
· 「偶尔动一动」:每 7 秒里前 6 秒静止,最后 1 秒绕树根轻轻摆 3 度左右再回正。 */
.dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;
@@ -4677,6 +4678,10 @@ a.skip:focus{left:16px;top:16px}
.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);
-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;