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

首页婴儿房封面上方补天空：树尖补全、往上渐变成天空，滑到顶不再截断树 (v26100463)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-06 09:06:57 +00:00
parent 323acc3dc3
commit 26bff164c3
8 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/nursery-day-sky.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 384 KiB

BIN
assets/img/nursery-night-sky.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

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:26100462 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100463 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -375,7 +375,7 @@
缝高 300→340、图宽 100%→88%（max 420）、上提 40px：缝滚到屏幕中间时屋顶到草坪整栋都露出来，草坪压在玻璃条下面；标题改「我们的家」。
位置：2026-10-01 用户要求和消消乐对调 —— 后又和孕期小知识对调 —— 现在在孕期小知识下面、今天的动线上面（原来在今天的动线和书架之间）。北京时间 19:00–6:00 换夜间图（开灯版）。JS 在 app.js nurseryRender()。 -->
<section class="ny-peek" id="nursery">
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img id="nypImg" src="assets/img/nursery-day.jpg?v=20261001h" alt="" decoding="async"></div>
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img id="nypImg" src="assets/img/nursery-day-sky.jpg?v=20261006a" alt="" decoding="async"></div>
<span class="nyp-chip" id="nyChip">进去看看 · 宝宝的婴儿房</span>
<div class="nyp-bar">
<div class="nyp-txt"><b id="nyTitle">我们的家</b><span id="nySub">做孕期任务攒兜豆，一件件布置好</span></div>

6
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100462';
var VER = '26100463';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3469,12 +3469,12 @@
if ('IntersectionObserver' in window) new IntersectionObserver(req).observe(sec);
place();
/* 封面版本：3D 婴儿房会话换图（文件名不变）时改这里，强制微信 webview 重新拉图 */
const NY_COVER_V = '20261001p';
const NY_COVER_V = '20261006a';
const tick = () => {
const h = new Date(Date.now() + 8 * 3600e3).getUTCHours(); // 北京时间
const night = h >= 19 || h < 6;
sec.classList.toggle('is-night', night);
const img = $('#nypImg'), src = 'assets/img/nursery-' + (night ? 'night' : 'day') + '.jpg?v=' + NY_COVER_V;
const img = $('#nypImg'), src = 'assets/img/nursery-' + (night ? 'night' : 'day') + '-sky.jpg?v=' + NY_COVER_V; // 2026-10-06 换补了天空的版本
if (img.getAttribute('src') !== src) img.setAttribute('src', src);
};
tick(); setInterval(tick, 600e3);

12
mama-box.css
View File

@@ -614,6 +614,16 @@ a.skip:focus{left:16px;top:16px}
/* 2026-10-01h：封面改成满幅远景（天空/远山/田野铺满整张图），不再是「纯色底上一栋房子」→ 图铺满缝宽、不羽化，
左右下沿不会再露底色；底色只在图片加载前兜底，取图顶天色 */
.nyp-layer img{width:100%;max-width:none;margin-top:30px}
/* 2026-10-06 用户：「再往上滑会把树整个截掉，把树上面整体调成天空，衔接过渡一下」→
换成补了天空的封面 nursery-{day,night}-sky.jpg（1125×2000：原图 1125×1500 上方补 500 像素，
被截断的树尖补画完整、往上是天空（夜里带星星），和原图在 600–760 像素处渐变拼接，下半部分是原图像素没动）。
图高多出 500/3≈167px，margin-top 30→-136 让房子停在原来的位置（flex 居中：新顶 = 旧顶 − 167）。
底色改成新图顶部天色，屏幕很高时图上方露出来的也是同色天空。生成过程见 tools/gen-nursery-sky.md */
.nyp-layer img{margin-top:-136px}
/* 上半天色、下半草地色：屏幕高、缝滚到屏幕下半截时，图底边下面露出的是草地色而不是一块天蓝；
中间的分界线永远被图片盖住。图底边 24px 渐隐进草地色，不留硬边 */
.ny-peek,.nyp-layer{background:linear-gradient(#CDE2F5 50%,#83A559 50%)}
.nyp-layer img{-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
/* 上下沿融进页面底色（2026-10-01 用户反馈：和上面孕期小知识、下面今日脚印「衔接得有点硬」）：
原来是两道向内的阴影 = 一条硬切口；改成上下各一段 --bg → 透明 的渐隐，房子像从页面里慢慢浮出来、再沉回去。 */
.ny-peek::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
@@ -634,7 +644,7 @@ a.skip:focus{left:16px;top:16px}
.nyp-btn:active{transform:scale(.96)}
@keyframes nypNudge{0%,80%,100%{transform:translateX(0)}86%{transform:translateX(3px)}92%{transform:translateX(0)}}
/* 夜间：JS 换成开灯版图，底色跟着换成图边的 #2C3350 */
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#2D3559}
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:linear-gradient(#2F3759 50%,#18231D 50%)}
/* 夜间：浅底色渐隐进深色夜景容易发灰，渐隐段收短一半，像夜里从门缝透出来 */
.ny-peek.is-night::after{background:linear-gradient(var(--bg) 0,rgba(248,243,239,.6) 10px,rgba(248,243,239,0) 40px),
linear-gradient(0deg,var(--bg) 0,rgba(248,243,239,.6) 8px,rgba(248,243,239,0) 34px)}

33
night.css
View File

@@ -77,19 +77,20 @@ html.night .gp-board{background:rgba(45,39,48,0.35)}
html.night .gp-board i{background:#2D2730;box-shadow:0 2px 0 rgba(220,120,100,.25)}
html.night .gp-board i.is-hint{background:#29251A;box-shadow:0 0 0 2px #FFD36E}
html.night .gp-spark{color:#fff}
html.night .ny-peek{background:#1D2327}
html.night .nyp-layer{background:#1D2327}
html.night .ny-peek::after{background:linear-gradient(var(--bg) 0,rgba(44,37,31,0.82) 18px,rgba(248,243,239,0) 78px),
linear-gradient(0deg,var(--bg) 0,rgba(44,37,31,0.85) 14px,rgba(248,243,239,0) 64px)}
html.night .nyp-chip{color:#E0708A;background:rgba(45,39,48,0.86);box-shadow:0 2px 8px rgba(224,112,138,.15)}
html.night .nyp-bar{background:rgba(45,39,48,0.82);box-shadow:0 6px 18px rgba(160,90,90,.16)}
html.night .nyp-txt b{color:#D1C9C4}
html.night .nyp-txt span{color:#BAB0A8}
html.night .ny-peek{background:#E6EEF3}
html.night .nyp-layer{background:#E6EEF3}
html.night .ny-peek,html.night .nyp-layer{background:linear-gradient(#CDE2F5 50%,#83A559 50%)}
html.night .ny-peek::after{background:linear-gradient(var(--bg) 0,rgba(248,243,239,.82) 18px,rgba(248,243,239,0) 78px),
linear-gradient(0deg,var(--bg) 0,rgba(248,243,239,.85) 14px,rgba(248,243,239,0) 64px)}
html.night .nyp-chip{color:#E0708A;background:rgba(255,255,255,.86);box-shadow:0 2px 8px rgba(224,112,138,.15)}
html.night .nyp-bar{background:rgba(255,255,255,.82);box-shadow:0 6px 18px rgba(160,90,90,.16)}
html.night .nyp-txt b{color:#5A3E37}
html.night .nyp-txt span{color:#8A6C63}
html.night .nyp-txt span em{color:#E0708A}
html.night .nyp-btn{border:0;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.32)}
html.night .ny-peek.is-night,html.night .ny-peek.is-night .nyp-layer{background:#2D3559}
html.night .ny-peek.is-night::after{background:linear-gradient(var(--bg) 0,rgba(44,37,31,0.6) 10px,rgba(248,243,239,0) 40px),
linear-gradient(0deg,var(--bg) 0,rgba(44,37,31,0.6) 8px,rgba(248,243,239,0) 34px)}
html.night .ny-peek.is-night,html.night .ny-peek.is-night .nyp-layer{background:linear-gradient(#2F3759 50%,#18231D 50%)}
html.night .ny-peek.is-night::after{background:linear-gradient(var(--bg) 0,rgba(248,243,239,.6) 10px,rgba(248,243,239,0) 40px),
linear-gradient(0deg,var(--bg) 0,rgba(248,243,239,.6) 8px,rgba(248,243,239,0) 34px)}
html.night .ny-peek.is-night .nyp-bar{background:rgba(30,36,60,.78)}
html.night .ny-peek.is-night .nyp-txt b{color:#FFF3F5}
html.night .ny-peek.is-night .nyp-txt span{color:#D9C5D0}
@@ -1158,10 +1159,10 @@ html.night .tabbar::before{background:#322720}
}
html.night .nyp-btn{background:linear-gradient(135deg,#8FCF8A,#5DAE6B 60%,#46985A);box-shadow:0 4px 10px rgba(70,152,90,.3)}
html.night .ny-peek.is-night .nyp-btn{background:linear-gradient(135deg,#9AD69A,#62B474);box-shadow:0 4px 12px rgba(0,0,0,.3)}
html.night .nyp-chip{color:#AFC4B4;box-shadow:0 2px 8px rgba(70,152,90,.18)}
html.night .nyp-chip{color:#3F8F52;box-shadow:0 2px 8px rgba(70,152,90,.18)}
html.night #homeBody>section:not(.ny-peek):not(.game-promo){background:url(assets/img/glass-noise.png) repeat,
linear-gradient(155deg,#2D2730 0%,rgba(255,255,255,0) 38%),
linear-gradient(180deg,rgba(45,39,48,0.7),rgba(51,40,32,0.58))!important;border:1px solid rgba(45,39,48,0.95);box-shadow:0 10px 30px rgba(190,110,80,.10),inset 0 1px 0 #2D2730,inset 0 -1px 0 rgba(45,39,48,0.6)!important}
linear-gradient(155deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 38%),
linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,251,248,.58))!important;border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(190,110,80,.10),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6)!important}
html.night .fab-w{color:#DED5D3}
html.night .tab-fab .fab::before{background:linear-gradient(#2D2730,#2D2730) center/100% 4px no-repeat,linear-gradient(#2D2730,#2D2730) center/4px 100% no-repeat}
html.night .tab-fab .fab::before{background:linear-gradient(#2D2730,#2D2730) center/100% 3px no-repeat,linear-gradient(#2D2730,#2D2730) center/3px 100% no-repeat}
@@ -1185,9 +1186,9 @@ html.night #homeBody{background:radial-gradient(182px 154px at 8% 6%,rgba(36,26,
radial-gradient(182px 161px at 94% 94%,rgba(36,29,23,0.5),rgba(255,206,160,0) 70%)}
html.night #homeBody>section:not(.ny-peek):not(.game-promo){background:linear-gradient(90deg,rgba(var(--gt),.28),rgba(var(--gt),0) 60%) top/100% 2px no-repeat,
radial-gradient(240px 110px at 0 0,rgba(var(--gt),.20),rgba(var(--gt),0) 72%),
linear-gradient(180deg,rgba(45,39,48,0.62),rgba(45,39,48,0.5))!important;border:1px solid rgba(45,39,48,0.85);box-shadow:0 12px 30px rgba(190,110,80,.10),0 2px 6px rgba(190,110,80,.04),inset 0 1px 0 #2D2730!important}
linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.5))!important;border:1px solid rgba(255,255,255,.85);box-shadow:0 12px 30px rgba(190,110,80,.10),0 2px 6px rgba(190,110,80,.04),inset 0 1px 0 #fff!important}
@media (prefers-reduced-transparency:reduce){
html.night #homeBody>section:not(.ny-peek):not(.game-promo){background:#342821!important}
html.night #homeBody>section:not(.ny-peek):not(.game-promo){background:#FFFCFA!important}
}
html.night .mall-strip.exch .ms-ico{background:linear-gradient(140deg,#301E22,#291A1D)}
html.night #screen-me{background:linear-gradient(180deg,#2E231D 0%,#2F1E21 45%,#251E2F 100%)}

2
tools/gen-night.py
View File

@@ -23,7 +23,7 @@ BG_PROPS = {'background', 'background-color', 'background-image', 'border', 'bor
'border-bottom', 'border-left', 'border-right', 'border-top-color', 'border-bottom-color',
'border-left-color', 'border-right-color', 'outline', 'outline-color', 'box-shadow', 'caret-color'}
FG_PROPS = {'color', 'fill', 'stroke', '-webkit-text-fill-color', 'text-decoration-color'}
SKIP_SEL = re.compile(r'home-hero|hero-|\.hi-|\.hd-|\.letter-card|zd-|ar-hero|page-hero|::selection|\.skip')
SKIP_SEL = re.compile(r'home-hero|hero-|\.hi-|\.hd-|\.letter-card|zd-|ar-hero|page-hero|ny-peek|nyp-|::selection|\.skip')
COL = re.compile(r'#([0-9a-fA-F]{3,8})\b|rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+%?)\s*)?\)')

13
tools/gen-nursery-sky.md Normal file
View File

@@ -0,0 +1,13 @@
# 婴儿房封面补天空（2026-10-06）
起因：首页「我们的家」视差缝往上滑时，原封面（nursery-day/night.jpg，1125×1500）顶边正好切在松树中间，
树被一刀截断、上面是一块纯色。用户要求「把树上面整体调成天空，衔接过渡一下」。
做法（产出 assets/img/nursery-{day,night}-sky.jpg，1125×2000）：
1. 原图贴到 1125×2000 画布底部，上方 500 像素填原图顶部天色（白天 #F0F5F7、夜晚 #2F375A）。
2. 用图片生成技能（tupian，模型 nano_banana_pro，9:16 2k）图生图：只补上方空白——树尖补完整，往上是天空（白天淡云，夜晚小星星），其余不变。
3. AI 结果直接缩放到 1125×2000（实测和原图逐像素对齐，无需平移），y<600 用 AI、600–760 smoothstep 渐变、y>760 用原图像素。
4. JPG quality 88。
3D 婴儿房会话（33d6c837）以后若重新导出封面：照上面四步重做一遍，改 app.js 的 NY_COVER_V 和 index.html 的 ?v=。
旧的 nursery-day.jpg / nursery-night.jpg 保留没删，回滚时把 -sky 去掉、CSS 里 margin-top:-136px 那条删掉即可。