feat(首页): 婴儿房空隙换成婴儿房导出的无 UI 高清渲染(日/夜两版,夜间底色 #5A5890)(v26100113)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-01 08:43:59 +00:00
parent a90f348061
commit 3de3bbdccc
6 changed files with 15 additions and 13 deletions

BIN
assets/img/nursery-day.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title> <title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100112 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 --> <!-- V:26100113 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css"> <link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) --> <!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -462,11 +462,12 @@
做法:这一块没有底色,是页面上开的一道「空隙」;房间图层(#nypLayer)由 JS 每次滚动都对齐到 .screen 的可视区, 做法:这一块没有底色,是页面上开的一道「空隙」;房间图层(#nypLayer)由 JS 每次滚动都对齐到 .screen 的可视区,
所以页面往上滚时房间不跟着走,看起来就是铺在整页背后、从缝里露出来(视差)。上下两条内阴影 = 上下模块压在房间上面。 所以页面往上滚时房间不跟着走,看起来就是铺在整页背后、从缝里露出来(视差)。上下两条内阴影 = 上下模块压在房间上面。
只有「进去布置」按钮能点(整块不点,免得滚动时误触)。 只有「进去布置」按钮能点(整块不点,免得滚动时误触)。
图:assets/img/nursery-peek.jpg 是从 yef/cover-full.png 裁的临时图(390 宽、抹掉了「调试」按钮), 图:assets/img/nursery-day.jpg / nursery-night.jpg,由「3D 婴儿房」会话(33d6c837)导出的无 UI 渲染
已找「3D 婴儿房」会话(33d6c837)要无 UI 的 1125×1500 日/夜两版高清渲染,到了换掉。 (原图 yef/cover-day.png、cover-night.png,1125×1500,这里缩到 750×1000);里面摆的是演示布置,不是用户自己的房间。
位置:今天的动线 → 这道空隙 → 书架(首页后半段)。北京时间 19:00–6:00 叠一层夜色。JS 在 app.js nurseryRender()。 --> 底色必须和图边一致:白天 #FFECD8、夜间 #5A5890,否则缝里会露出图片边框。
位置:今天的动线 → 这道空隙 → 书架(首页后半段)。北京时间 19:00–6:00 换夜间图(开灯版)。JS 在 app.js nurseryRender()。 -->
<section class="ny-peek" id="nursery"> <section class="ny-peek" id="nursery">
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img src="assets/img/nursery-peek.jpg" alt="" decoding="async"></div> <div class="nyp-layer" id="nypLayer" aria-hidden="true"><img id="nypImg" src="assets/img/nursery-day.jpg" alt="" decoding="async"></div>
<span class="nyp-chip">往里看看 · 3D 婴儿房</span> <span class="nyp-chip">往里看看 · 3D 婴儿房</span>
<div class="nyp-bar"> <div class="nyp-bar">
<div class="nyp-txt"><b id="nyTitle">宝宝的房间</b><span id="nySub">做孕期任务攒兜豆,一件件布置好</span></div> <div class="nyp-txt"><b id="nyTitle">宝宝的房间</b><span id="nySub">做孕期任务攒兜豆,一件件布置好</span></div>

View File

@@ -3,7 +3,7 @@
(function () { (function () {
'use strict'; 'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */ /* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
var VER = '26100112'; var VER = '26100113';
const $ = (s, c) => (c || document).querySelector(s); const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3140,7 +3140,10 @@
place(); place();
const tick = () => { const tick = () => {
const h = new Date(Date.now() + 8 * 3600e3).getUTCHours(); // 北京时间 const h = new Date(Date.now() + 8 * 3600e3).getUTCHours(); // 北京时间
sec.classList.toggle('is-night', h >= 19 || h < 6); const night = h >= 19 || h < 6;
sec.classList.toggle('is-night', night);
const img = $('#nypImg'), src = 'assets/img/nursery-' + (night ? 'night' : 'day') + '.jpg';
if (img.getAttribute('src') !== src) img.setAttribute('src', src);
}; };
tick(); setInterval(tick, 600e3); tick(); setInterval(tick, 600e3);
nurseryRender(); nurseryRender();

View File

@@ -566,9 +566,8 @@ a.skip:focus{left:16px;top:16px}
::after = 上下模块压在房间上的阴影,要盖在图层之上、按钮之下。 */ ::after = 上下模块压在房间上的阴影,要盖在图层之上、按钮之下。 */
.ny-peek{position:relative;margin:16px -26px 0;height:300px;overflow:hidden;background:#FFECD8} .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; .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%)} display:flex;align-items:center;justify-content:center;background:#FFECD8}
.nyp-layer img{display:block;width:100%;max-width:440px;height:auto; .nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-64px}
-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; .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)} 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; .nyp-chip{position:absolute;left:26px;top:16px;z-index:2;font-size:11px;font-weight:800;color:#E0708A;letter-spacing:.3px;
@@ -585,9 +584,8 @@ a.skip:focus{left:16px;top:16px}
animation:nypNudge 2.8s ease-in-out infinite} animation:nypNudge 2.8s ease-in-out infinite}
.nyp-btn:active{transform:scale(.96)} .nyp-btn:active{transform:scale(.96)}
@keyframes nypNudge{0%,80%,100%{transform:translateX(0)}86%{transform:translateX(3px)}92%{transform:translateX(0)}} @keyframes nypNudge{0%,80%,100%{transform:translateX(0)}86%{transform:translateX(3px)}92%{transform:translateX(0)}}
/* 夜间:房间整体压暗,中间留一团暖灯 */ /* 夜间:JS 换成开灯版图,底色跟着换成图边的 #5A5890 */
.ny-peek.is-night .nyp-layer::after{content:"";position:absolute;inset:0; .ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#5A5890}
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-bar{background:rgba(58,47,79,.78)}
.ny-peek.is-night .nyp-txt b{color:#FFF3F5} .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{color:#D9C5D0}