jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

今日脚印掀角缩到 56px 不压待办卡，「祈福」改写在纸背正中顺折痕 (v26100451)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-05 02:58:14 +00:00
parent 8f645186a1
commit f733855095
3 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
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:26100450 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100451 缓存版本标记：改 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 第四节） -->
@@ -410,7 +410,7 @@
<!-- 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="42" height="40"></span><span class="pl-flapw"><span class="pl-flap"></span></span><span class="pl-t">祈福</span></a>
<a class="fp-peel" id="fpQifu" href="/qifu-shu/" aria-label="宝宝祈福树"><span class="pl-hole"><img src="assets/img/qifu-tree.png" alt="" width="31" height="30"></span><span class="pl-flapw"><span class="pl-flap"></span></span><span class="pl-t">祈福</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">

2
js/app.js
View File

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

21
mama-box.css
View File

@@ -4672,30 +4672,31 @@ a.skip:focus{left:16px;top:16px}
/* ============ 祈福树入口 · 今日脚印掀角（2026-10-05） ============
用户：「祈福树放到今日脚印的右上角，把右上角掀开一点，再把祈福树露出来」（之前放工具卡右上角 / 头图底边，已撤）。
画法（全在卡片里面，不动卡片本身的毛玻璃 / 圆角）：
· .fp-peel 是右上角 S×S 的方块（S = --pl，默认 76px；10-05 用户「再大一点，把树大概完整露出来，加『祈福』两个小字」从 46 放大）；
· .fp-peel 是右上角 S×S 的方块（S = --pl，默认 56px；10-05 先按「再大一点、露出整棵树」放到 76，压住了下面「今日待办」小卡的边框，用户介意 → 收回 56，树缩到 31px 仍整棵可见）；
· .pl-hole = 方块右上那半个三角（对角线以上），代表「纸掀开后底下那层」：暖米色 + 祈福树，右上角跟卡片一样 26px 圆角；
· .pl-flap = 方块左下那半个三角，就是被掀起来、翻过去的那一角纸背（对角线上最亮，往折角尖渐暗），外层 .pl-flapw 打投影；
· 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 76 → 82）、树轻轻摆，再落回去。
「全部 ›」往左让 70px（纸角左边线是一条竖线，在卡片右边往里 76px、掀起时 82px，「全部」右边要落在它左边），不被纸角压住。
· .pl-t「祈福」两个小字写在翻起来的纸背（左下三角）上。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
· 偶尔动一动：每 7 秒最后一下纸角再掀起一点（--pl 56 → 60）、树轻轻摆，再落回去。
「全部 ›」往左让 48px（纸角左边线是一条竖线，在卡片右边往里 56px、掀起时 60px，「全部」右边要落在它左边），不被纸角压住。
· .pl-t「祈福」两个小字写在翻起来的纸背（左下三角）正中，顺着折痕斜 45°，像写在纸背上（10-05 用户嫌原来摆在左下角不协调）。图用宝宝祈福提供的缩略图（裁边缩到 150px 存本地）。 */
.today-line{position:relative}
.today-line .fp-all{margin-right:70px}
@property --pl{syntax:"<length>";inherits:true;initial-value:76px}
.fp-peel{--pl:76px;position:absolute;top:0;right:0;z-index:4;width:var(--pl);height:var(--pl);display:block;
.today-line .fp-all{margin-right:48px}
@property --pl{syntax:"<length>";inherits:true;initial-value:56px}
.fp-peel{--pl:56px;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:4px;top:4px;width:42px;height:40px;display:block;
.pl-hole img{position:absolute;right:4px;top:4px;width:31px;height:30px;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%)}
.pl-t{position:absolute;left:7px;bottom:7px;font-size:11px;font-weight:800;letter-spacing:1px;line-height:1;color:#C2503E;pointer-events:none}
.pl-t{position:absolute;left:33.3%;top:66.7%;transform:translate(-50%,-50%) rotate(45deg);font-size:9.5px;font-weight:800;letter-spacing:1px;line-height:1;white-space:nowrap;color:#C2503E;pointer-events:none}
.fp-peel:active{opacity:.7}
@keyframes plLift{0%,82%,100%{--pl:76px}89%{--pl:82px}95%{--pl:77px}}
@keyframes plLift{0%,82%,100%{--pl:56px}89%{--pl:60px}95%{--pl:57px}}
@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){.fp-peel,.pl-hole img{animation:none}}