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

feat(首页): 3D 婴儿房入口三版——今天的动线与书架之间开一道空隙，房间铺在整页背后随滚动视差露出，「进去布置」按钮跳入并带 return_url (v26100112)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 08:40:05 +00:00
parent 3394a1f6b0
commit a90f348061
4 changed files with 83 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
mama-box.css
View File

@@ -414,7 +414,7 @@ a.skip:focus{left:16px;top:16px}
对齐的是内容，出血的是底色，这两件事要分开。
⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
.tool-dock,.game-promo,.preg-tips,.today-line,.shelf,.nursery{
.tool-dock,.game-promo,.preg-tips,.today-line,.shelf{
margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
background-color:#fff;
/* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
@@ -428,7 +428,7 @@ a.skip:focus{left:16px;top:16px}
/* 块间距。给后两块，第一块的上间距另有规则（来信卡收放要用）。
⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤，要调的是那块的 padding，
不是这里 —— 改这里会把三块的关系一起改掉。 */
.tool-dock,.game-promo,.preg-tips,.today-line,.shelf,.nursery{margin-top:16px}
.tool-dock,.game-promo,.preg-tips,.today-line,.shelf{margin-top:16px}
/* ===== 后两块的暖色渐变底（本批新增）=====
用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
@@ -560,106 +560,39 @@ a.skip:focus{left:16px;top:16px}
@keyframes gpTw{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gp-cta,.gp-spark{animation:none}.gp-spark{opacity:.8}}
/* ============ 3D 婴儿房 · 入口（2026-10-01 二版：走廊尽头的门）============
配色取婴儿房自己的奶油粉：主色 #E0708A、按钮 #F9B4C1→#F18DA2、底 #FFF9F3、蜜桃 #F9C9A8、薄荷 #A9DCC7、字 #6B5048。
场景坐标都是绝对定位，改尺寸时门（.ny-way）、气泡、木牌、日历四样一起看，别互相压住。 */
.nursery{padding-top:14px;padding-bottom:16px}
.ny{position:relative;display:block;width:100%;overflow:hidden;border:0;border-radius:22px;padding:14px 16px 12px;
text-align:left;font:inherit;color:#6B5048;background:linear-gradient(180deg,#FFF9F3 0%,#FFEEE9 100%);
box-shadow:0 8px 22px rgba(224,112,138,.15);-webkit-tap-highlight-color:transparent}
.ny-head{display:flex;flex-direction:column;align-items:flex-start}
.ny-eyebrow{font-size:10.5px;font-weight:800;color:#E0708A;background:#fff;border-radius:999px;padding:2px 9px;letter-spacing:.3px}
.ny-title{margin-top:6px;font-size:17px;font-weight:900;color:#5A3E37;letter-spacing:.3px}
.ny-scene{position:relative;display:block;height:192px;margin:6px -16px 0}
.ny-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(180deg,#F5DCCB,#F9E6DA)}
/* 门洞：拱形，白色门框；里面是房间，外面盖一扇虚掩的门 */
.ny-way{position:absolute;left:28px;bottom:26px;width:112px;height:158px;border-radius:56px 56px 3px 3px;
box-shadow:0 0 0 6px #fff,0 6px 16px rgba(160,90,90,.18);z-index:1}
.ny-room{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#FCE1E4}
.ny-room svg{position:absolute;left:0;bottom:0;width:100%;height:100%;transform-origin:50% 70%;transition:transform .7s var(--ease)}
.ny-room [data-k]{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.ny-room [data-k].on{opacity:1}
.ny-room [data-k].new{animation:nyPop 2.6s ease-in-out infinite}
@keyframes nyPop{0%,70%,100%{transform:translateY(0) scale(1)}78%{transform:translateY(-4px) scale(1.06)}86%{transform:translateY(0) scale(.98)}}
.ny-room [data-k="mobile"].on{transform-origin:50% 0;animation:nySwing 4s ease-in-out infinite}
@keyframes nySwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.ny-room .r-moon{opacity:0}
.ny-door{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#FFF6EF,#FBE6DA);
transform-origin:0 50%;transform:perspective(380px) rotateY(62deg);transition:transform .7s var(--ease);
box-shadow:inset 0 0 0 2px #F3D3C2,6px 0 12px rgba(120,60,60,.18)}
.ny-door::before,.ny-door::after{content:"";position:absolute;left:14px;right:14px;border:2px solid #F3D3C2}
.ny-door::before{top:16px;height:58px;border-radius:40px 40px 6px 6px}
.ny-door::after{bottom:14px;height:52px;border-radius:6px}
.ny-knob{position:absolute;right:11px;top:56%;width:9px;height:9px;border-radius:50%;background:#E3AC72;box-shadow:inset -2px -2px 0 rgba(0,0,0,.08)}
.ny-heart{position:absolute;left:50%;top:38px;width:12px;height:12px;margin-left:-6px;background:#F18DA2;
clip-path:path("M6 11L1.2 6.2A3 3 0 0 1 6 2.4 3 3 0 0 1 10.8 6.2Z")}
/* 门缝里漏出来的暖光，铺在走廊地上 */
.ny-glow{position:absolute;left:46px;bottom:0;width:150px;height:28px;z-index:0;opacity:.75;transition:opacity .5s;
background:linear-gradient(180deg,rgba(255,214,150,.75),rgba(255,214,150,0));clip-path:polygon(0 0,62% 0,100% 100%,6% 100%)}
.ny-glow{z-index:1}
/* 宝宝从门缝里说话 */
.ny-bubble{position:absolute;left:116px;top:52px;z-index:3;box-sizing:border-box;max-width:104px;padding:6px 10px;border-radius:12px 12px 12px 3px;
background:#fff;color:#6B5048;font-size:11.5px;font-weight:700;line-height:1.45;box-shadow:0 4px 12px rgba(160,90,90,.18);
transition:opacity .35s,transform .35s}
.ny-bubble.out{opacity:0;transform:translateY(4px)}
/* 木牌 */
.ny-sign{position:absolute;right:18px;top:16px;z-index:2;transform-origin:50% -14px;animation:nySwing 5s ease-in-out infinite}
.ny-sign::before{content:"";position:absolute;left:22%;right:22%;top:-13px;height:13px;border:1.5px solid #C99A7A;border-bottom:0;border-radius:50% 50% 0 0}
.ny-sign::after{content:"";position:absolute;left:50%;top:-17px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#B9876A}
.ny-sign b{display:block;padding:6px 12px;border-radius:8px;background:linear-gradient(180deg,#EBC09A,#DCA683);color:#fff;
font-size:13px;font-weight:900;letter-spacing:.5px;white-space:nowrap;text-shadow:0 1px 0 rgba(150,90,60,.35);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 3px 6px rgba(150,90,60,.2)}
/* 撕页日历 = 入住倒计时 */
.ny-cal{position:absolute;right:22px;bottom:34px;z-index:2;width:80px;border-radius:9px;background:#fff;overflow:hidden;
display:flex;flex-direction:column;align-items:center;box-shadow:0 5px 12px rgba(160,90,90,.18);transform:rotate(2deg)}
.ny-cal-top{align-self:stretch;text-align:center;padding:4px 0 3px;font-size:10px;font-weight:800;color:#fff;
background:linear-gradient(135deg,#F9B4C1,#F18DA2);position:relative}
.ny-cal-num{display:flex;align-items:baseline;gap:1px;margin-top:2px;color:#E0708A}
.ny-cal-num b{font-size:28px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.ny-cal-num i{font-style:normal;font-size:11px;font-weight:800}
.ny-cal-foot{width:100%;text-align:center;padding:2px 0 5px;font-size:10px;color:#A0857C;border-top:1px dashed #F3D3C2}
/* 进度：9 颗点 */
.ny-track{display:block;margin-top:10px}
.ny-dots{position:relative;display:flex;justify-content:space-between;align-items:center}
.ny-dots::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:#F6DCD3}
.ny-dots::after{content:"";position:absolute;left:4px;top:50%;height:2px;margin-top:-1px;width:var(--p,0%);background:#F18DA2;border-radius:2px}
.ny-dots i{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #F6DCD3}
.ny-dots i.on{background:#F18DA2;box-shadow:none}
.ny-dots i.cur{width:12px;height:12px;box-shadow:0 0 0 3px rgba(241,141,162,.28);animation:nyPulse 1.8s ease-in-out infinite}
@keyframes nyPulse{50%{box-shadow:0 0 0 6px rgba(241,141,162,0)}}
.ny-foot{display:flex;align-items:center;gap:8px;margin-top:9px}
.ny-prog{flex:1;min-width:0;font-size:12px;color:#8A6C63;line-height:1.4}
.ny-prog b{color:#E0708A;font-weight:900}
.ny-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800;
color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.3)}
/* 点击：门推开、房间凑近 */
.ny.is-opening .ny-door{transform:perspective(380px) rotateY(88deg)}
.ny.is-opening .ny-room svg{transform:scale(1.22)}
.ny.is-opening .ny-glow{opacity:1}
.ny.is-opening .ny-bubble{opacity:0}
/* 已出生：门敞开 */
.nursery.is-born .ny-door{transform:perspective(380px) rotateY(80deg)}
/* 夜间（北京时间 19:00–6:00） */
.nursery.is-night .ny{color:#F4E3E7;background:linear-gradient(180deg,#3A2F4F 0%,#4B3756 100%);box-shadow:0 8px 22px rgba(58,47,79,.3)}
.nursery.is-night .ny-scene::after{background:linear-gradient(180deg,#2E2540,#3A2E4A)}
.nursery.is-night .ny-title{color:#FFF3F5}
.nursery.is-night .ny-eyebrow{background:rgba(255,255,255,.14);color:#FFC6D2}
.nursery.is-night .ny-prog{color:#D9C5D0}
.nursery.is-night .ny-prog b{color:#FFB3C3}
.nursery.is-night .ny-way{box-shadow:0 0 0 6px #6A5478,0 0 26px rgba(255,200,120,.45)}
.nursery.is-night .ny-door{background:linear-gradient(90deg,#6A5478,#5A4868);box-shadow:inset 0 0 0 2px #7D6690}
.nursery.is-night .ny-door::before,.nursery.is-night .ny-door::after{border-color:#7D6690}
.nursery.is-night .ny-room .r-wall{fill:#E7C2CF}
.nursery.is-night .ny-room .r-floor{fill:#DDB89E}
.nursery.is-night .ny-room .r-sky{fill:#3E3A66}
.nursery.is-night .ny-room .r-moon{opacity:1}
.nursery.is-night .ny-room .r-glow{opacity:.75}
.nursery.is-night .ny-room svg{filter:sepia(.18) saturate(1.15)}
.nursery.is-night .ny-glow{opacity:1}
.nursery.is-night .ny-dots::before{background:#5E4A70}
.nursery.is-night .ny-dots i{background:#4B3756;box-shadow:inset 0 0 0 2px #6A5478}
.nursery.is-night .ny-dots i.on{background:#F18DA2;box-shadow:none}
@media (prefers-reduced-motion:reduce){.ny-room [data-k],.ny-sign,.ny-dots i.cur{animation:none!important}}
/* ============ 3D 婴儿房 · 页面上的一道空隙（2026-10-01 三版）============
这一块**故意没有底色、没有圆角卡片**：它是页面上开的缝，里面是铺在整页背后的房间。
.nyp-layer 的 height / transform 由 JS 按 .screen 可视区每帧写入（见 app.js nurseryInit），这里别再给它写 top/transform。
::after = 上下模块压在房间上的阴影，要盖在图层之上、按钮之下。 */
.ny-peek{position:relative;margin:16px -26px 0;height:300px;overflow:hidden;background:#FFECD8}
.nyp-layer{position:absolute;left:0;top:0;width:100%;height:812px;will-change:transform;
display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 48%,#FFFDFB 0%,#FFF3E8 40%,#FFECD8 72%)}
.nyp-layer img{display:block;width:100%;max-width:440px;height:auto;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ny-peek::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
box-shadow:inset 0 16px 18px -14px rgba(120,70,50,.28),inset 0 -16px 18px -14px rgba(120,70,50,.28)}
.nyp-chip{position:absolute;left:26px;top:16px;z-index:2;font-size:11px;font-weight:800;color:#E0708A;letter-spacing:.3px;
background:rgba(255,255,255,.86);border-radius:999px;padding:3px 10px;box-shadow:0 2px 8px rgba(224,112,138,.15)}
.nyp-bar{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;
padding:10px 10px 10px 14px;border-radius:18px;background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(160,90,90,.16)}
.nyp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nyp-txt b{font-size:15px;font-weight:900;color:#5A3E37;letter-spacing:.3px}
.nyp-txt span{font-size:11.5px;color:#8A6C63;line-height:1.4}
.nyp-txt span em{font-style:normal;color:#E0708A;font-weight:900}
.nyp-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border:0;border-radius:999px;padding:8px 14px;font:inherit;
font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.32);
animation:nypNudge 2.8s ease-in-out infinite}
.nyp-btn:active{transform:scale(.96)}
@keyframes nypNudge{0%,80%,100%{transform:translateX(0)}86%{transform:translateX(3px)}92%{transform:translateX(0)}}
/* 夜间：房间整体压暗，中间留一团暖灯 */
.ny-peek.is-night .nyp-layer::after{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 46%,rgba(255,200,120,.18) 0%,rgba(46,32,70,.32) 45%,rgba(30,22,52,.62) 100%)}
.ny-peek.is-night .nyp-bar{background:rgba(58,47,79,.78)}
.ny-peek.is-night .nyp-txt b{color:#FFF3F5}
.ny-peek.is-night .nyp-txt span{color:#D9C5D0}
.ny-peek.is-night .nyp-txt span em{color:#FFB3C3}
@media (prefers-reduced-motion:reduce){.nyp-btn{animation:none}}
/* ============ 孕期小知识（2026-09-30）============
外壳是公共白色通栏。里面三层：