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

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

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title> <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"> <link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) --> <!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -97,6 +97,10 @@
所以只能把气泡整体下移到 top:40,给字底留 6px。 所以只能把气泡整体下移到 top:40,给字底留 6px。
气泡一动,橙区那笔竖列账要连着重算 —— 已经算过,见 style.css 的 .home-hero。 气泡一动,橙区那笔竖列账要连着重算 —— 已经算过,见 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"> <div class="hero-top">
<!-- 2026-10-01 左上角文字换成正式 LOGO(用户提供的红字原稿)。头图是橙红底,红色原稿压上去会糊, <!-- 2026-10-01 左上角文字换成正式 LOGO(用户提供的红字原稿)。头图是橙红底,红色原稿压上去会糊,
所以抠成白色透明 PNG(按红色浓度转 alpha,3x 高清),和旁边白字 slogan、宝宝插画同一套白色语言。 --> 所以抠成白色透明 PNG(按红色浓度转 alpha,3x 高清),和旁边白字 slogan、宝宝插画同一套白色语言。 -->
@@ -194,7 +198,7 @@
<!-- 2026-10-05 用户:「把『所有工具』取消,右上角放祈福树,『祈福』两个小字,树在右上角露出一点点,偶尔动一动」。 <!-- 2026-10-05 用户:「把『所有工具』取消,右上角放祈福树,『祈福』两个小字,树在右上角露出一点点,偶尔动一动」。
跳宝宝祈福树(第三方 H5,nginx /qifu-shu/ 反代到 taidong.douba.top;小程序 web-view 只放行业务域名)。 跳宝宝祈福树(第三方 H5,nginx /qifu-shu/ 反代到 taidong.douba.top;小程序 web-view 只放行业务域名)。
「所有工具」抽屉本身没删,宫格最后那张「更多」仍能打开。样式见 mama-box.css「祈福树入口」。 --> 「所有工具」抽屉本身没删,宫格最后那张「更多」仍能打开。样式见 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> </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> <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, <!-- 2026-09-30 五张卡改版:白色粗标题 + 各工具 LOGO 里的图形(取自点进去那个工具页左上角的 LOGO,

View File

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

View File

@@ -4663,21 +4663,23 @@ a.skip:focus{left:16px;top:16px}
/* ============ 祈福树入口(2026-10-05) ============ /* ============ 祈福树入口(2026-10-05) ============
用户:「把『所有工具』取消,右上角放『祈福』两个小字,树在右上角露出一点点,偶尔会动一动」。 用户:「把『所有工具』取消,右上角放『祈福』两个小字」+「树藏在页面底部边缘,微微露出来,偶尔动一动」。
· 树图用宝宝祈福会话提供的缩略图(/qifu-shu/static/tree-thumb.png,600² 裁边后缩到 150px 存本地,免得每次拉 550KB); · 树图用宝宝祈福会话提供的缩略图(/qifu-shu/static/tree-thumb.png,600² 裁边后缩到 150px 存本地,免得每次拉 550KB);
· 小树贴在工具卡右上角,右边和顶上各有一截被卡片圆角 / 边线裁掉(.tool-dock 本来就 overflow:hidden),像从卡片外探进来; · 树放在头图(.home-hero,overflow:hidden)右下角:#homeBody 的 z-index 比头图高,工具卡上沿(≈231px)盖住树的下半截,
· 「祈福」小字在树左边,和标题同一行;整块都是点击区(≥44px 高); 只露树冠顶 ≈17px(卡片停稳后上沿 236px,树顶 219px);被盖住那截透过卡片毛玻璃是一团模糊的绿,像树藏在玻璃后面;
· 「偶尔动一动」:每 7 秒里前 6 秒静止,最后 1 秒绕树根轻轻摆 3 度左右再回正,不抢眼。 */ · 「祈福」小字在卡片标题行右边(原「所有工具」的位置),正好在树下方;两处都能点(≥44px 高的点击区);
.tool-dock{position:relative} · 「偶尔动一动」:每 7 秒里前 6 秒静止,最后 1 秒绕树根轻轻摆 3 度左右再回正。 */
.dock-head{position:relative} .dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;
.dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:2px; padding:0 2px 0 14px;min-height:44px;margin-top:-10px;margin-bottom:-10px;
padding:0 46px 0 10px;margin-right:-16px;min-height:44px;margin-top:-10px;margin-bottom:-10px;
text-decoration:none;-webkit-tap-highlight-color:transparent} 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-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} .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)}} @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}}