diff --git a/index.html b/index.html index b0269a9..75567d9 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -410,7 +410,7 @@ - 祈福 + 祈福
diff --git a/js/app.js b/js/app.js index 474258c..4276b81 100644 --- a/js/app.js +++ b/js/app.js @@ -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)); diff --git a/mama-box.css b/mama-box.css index 1aec342..e74d77f 100644 --- a/mama-box.css +++ b/mama-box.css @@ -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:"";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:"";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}}