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

feat(首页): 新增 3D 婴儿房入口卡（小房子造型、昼夜两版），放在今天的动线与书架之间 (v26100110)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 07:33:37 +00:00
parent 4637412e26
commit df95d1fae0
4 changed files with 115 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
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{
.tool-dock,.game-promo,.preg-tips,.today-line,.nursery,.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{margin-top:16px}
.tool-dock,.game-promo,.preg-tips,.today-line,.nursery,.shelf{margin-top:16px}
/* ===== 后两块的暖色渐变底（本批新增）=====
用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
@@ -560,6 +560,63 @@ 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 / 背景 #FFF9F3）。右边一座小房子：三角屋顶 + 冒烟的烟囱 + 窗户里的房间截图，
截图慢慢左右平移（暗示 360° 可转）。.is-night = 北京时间 19:00–6:00：深色底、窗户里亮暖灯、两颗小星星。 */
.ny-card{position:relative;display:flex;align-items:center;gap:8px;width:100%;overflow:hidden;
border:0;border-radius:22px;padding:16px 14px 16px 18px;text-align:left;font:inherit;color:#6B5048;
background:linear-gradient(135deg,#FFF9F3 0%,#FFEDE8 60%,#FDE0E4 100%);box-shadow:0 8px 22px rgba(224,112,138,.16);
transition:transform .2s var(--ease)}
.ny-card:active{transform:scale(.98)}
.ny-card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:#F9E3D6;opacity:.7}
.ny-text{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.ny-tag{font-size:10.5px;font-weight:800;color:#E0708A;background:#fff;border-radius:999px;padding:2px 9px;letter-spacing:.3px}
.ny-name{margin-top:7px;font-size:19px;font-weight:900;line-height:1.25;letter-spacing:.3px;color:#5A3E37}
.ny-sub{margin-top:5px;font-size:12px;line-height:1.5;color:#8A6C63}
.ny-sub b{color:#E0708A;font-weight:900}
.ny-cta{margin-top:10px;display:inline-flex;align-items:center;gap:3px;border-radius:999px;padding:6px 14px;
font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.3)}
.ny-house{position:relative;z-index:1;flex:0 0 auto;width:128px;height:132px;margin-bottom:-4px}
.ny-roof{position:absolute;left:0;right:0;top:12px;height:46px;background:linear-gradient(180deg,#F59AA9,#E0708A);
clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:6px}
.ny-chim{position:absolute;right:28px;top:14px;width:14px;height:34px;background:#FFE3D3;border-radius:3px 3px 0 0}
.ny-chim i{position:absolute;left:3px;top:-4px;width:9px;height:9px;border-radius:50%;background:#fff;opacity:0;
animation:nySmoke 3.6s ease-out infinite}
.ny-chim i:nth-child(2){animation-delay:1.2s}.ny-chim i:nth-child(3){animation-delay:2.4s}
@keyframes nySmoke{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.9}100%{opacity:0;transform:translate(10px,-26px) scale(1.4)}}
.ny-body{position:absolute;left:12px;right:12px;top:56px;bottom:0;background:#FFF9F3;border-radius:0 0 12px 12px;
box-shadow:inset 0 0 0 3px #fff}
.ny-win{position:absolute;left:10px;right:10px;top:8px;bottom:10px;overflow:hidden;border-radius:30px 30px 8px 8px;
border:3px solid #fff;background:#FDE7DD;box-shadow:0 3px 8px rgba(160,90,90,.18)}
.ny-win img{position:absolute;top:50%;left:50%;width:148px;height:148px;max-width:none;object-fit:cover;
transform:translate(-50%,-46%);animation:nyPan 9s ease-in-out infinite alternate}
@keyframes nyPan{from{transform:translate(-62%,-46%)}to{transform:translate(-38%,-46%)}}
.ny-win::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%);pointer-events:none}
.ny-360{position:absolute;left:-6px;bottom:10px;font-size:10px;font-weight:900;color:#E0708A;background:#fff;
border-radius:999px;padding:2px 7px;box-shadow:0 2px 6px rgba(224,112,138,.25);animation:nyBob 2.4s ease-in-out infinite}
@keyframes nyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ny-stars{display:none}
/* 夜间版 */
.nursery.is-night .ny-card{color:#F4E3E7;background:linear-gradient(135deg,#3A2F4F 0%,#4B3756 60%,#5E3D5A 100%);
box-shadow:0 8px 22px rgba(58,47,79,.3)}
.nursery.is-night .ny-card::before{background:#2E2540}
.nursery.is-night .ny-name{color:#FFF3F5}
.nursery.is-night .ny-sub{color:#D9C5D0}
.nursery.is-night .ny-sub b{color:#FFB3C3}
.nursery.is-night .ny-tag{background:rgba(255,255,255,.14);color:#FFC6D2}
.nursery.is-night .ny-body{background:#4A3B5C;box-shadow:inset 0 0 0 3px #6A5478}
.nursery.is-night .ny-chim{background:#6A5478}
.nursery.is-night .ny-chim i{background:#B9A9C9}
.nursery.is-night .ny-win{border-color:#FFE2A8;box-shadow:0 0 16px rgba(255,200,120,.55)}
.nursery.is-night .ny-win img{filter:brightness(.85) sepia(.25) saturate(1.2)}
.nursery.is-night .ny-win::after{background:radial-gradient(circle at 50% 30%,rgba(255,210,140,.35),rgba(40,20,60,.25) 75%)}
.nursery.is-night .ny-stars{display:block}
.ny-stars i{position:absolute;width:10px;height:10px;background:#FFE2A8;animation:gpTw 2s ease-in-out infinite;
clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ny-stars i:first-child{left:-22px;top:-50px}
.ny-stars i:last-child{right:-14px;top:-36px;width:7px;height:7px;animation-delay:.9s}
@media (prefers-reduced-motion:reduce){.ny-win img,.ny-chim i,.ny-360,.ny-stars i{animation:none}.ny-win img{transform:translate(-50%,-46%)}}
/* ============ 孕期小知识（2026-09-30）============
外壳是公共白色通栏。里面三层：
① .pt-today 今日小知识大卡：暖粉渐变 + 右上角一颗慢慢浮动的「宝宝大小」emoji（本周水果）；