diff --git a/assets/img/nursery-day-sky.jpg b/assets/img/nursery-day-sky.jpg new file mode 100644 index 0000000..f3aa721 Binary files /dev/null and b/assets/img/nursery-day-sky.jpg differ diff --git a/assets/img/nursery-night-sky.jpg b/assets/img/nursery-night-sky.jpg new file mode 100644 index 0000000..9517836 Binary files /dev/null and b/assets/img/nursery-night-sky.jpg differ diff --git a/index.html b/index.html index 806ca2f..80f3faa 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -375,7 +375,7 @@ 缝高 300→340、图宽 100%→88%(max 420)、上提 40px:缝滚到屏幕中间时屋顶到草坪整栋都露出来,草坪压在玻璃条下面;标题改「我们的家」。 位置:2026-10-01 用户要求和消消乐对调 —— 后又和孕期小知识对调 —— 现在在孕期小知识下面、今天的动线上面(原来在今天的动线和书架之间)。北京时间 19:00–6:00 换夜间图(开灯版)。JS 在 app.js nurseryRender()。 -->
- + 进去看看 · 宝宝的婴儿房
我们的家做孕期任务攒兜豆,一件件布置好
diff --git a/js/app.js b/js/app.js index 5f7469e..9b696fd 100644 --- a/js/app.js +++ b/js/app.js @@ -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); diff --git a/mama-box.css b/mama-box.css index fe103b2..0fb3827 100644 --- a/mama-box.css +++ b/mama-box.css @@ -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)} diff --git a/night.css b/night.css index 09d8bac..2ad0785 100644 --- a/night.css +++ b/night.css @@ -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%)} diff --git a/tools/gen-night.py b/tools/gen-night.py index 3942b3a..b9c9cc0 100644 --- a/tools/gen-night.py +++ b/tools/gen-night.py @@ -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*)?\)') diff --git a/tools/gen-nursery-sky.md b/tools/gen-nursery-sky.md new file mode 100644 index 0000000..f6483ec --- /dev/null +++ b/tools/gen-nursery-sky.md @@ -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 那条删掉即可。