diff --git a/assets/img/nursery-day.jpg b/assets/img/nursery-day.jpg new file mode 100644 index 0000000..a311f14 Binary files /dev/null and b/assets/img/nursery-day.jpg differ diff --git a/assets/img/nursery-night.jpg b/assets/img/nursery-night.jpg new file mode 100644 index 0000000..1585b5a Binary files /dev/null and b/assets/img/nursery-night.jpg differ diff --git a/assets/img/nursery-peek.jpg b/assets/img/nursery-peek.jpg deleted file mode 100644 index e4b3d65..0000000 Binary files a/assets/img/nursery-peek.jpg and /dev/null differ diff --git a/index.html b/index.html index 4da1345..8b629e8 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -462,11 +462,12 @@ 做法:这一块没有底色,是页面上开的一道「空隙」;房间图层(#nypLayer)由 JS 每次滚动都对齐到 .screen 的可视区, 所以页面往上滚时房间不跟着走,看起来就是铺在整页背后、从缝里露出来(视差)。上下两条内阴影 = 上下模块压在房间上面。 只有「进去布置」按钮能点(整块不点,免得滚动时误触)。 - 图:assets/img/nursery-peek.jpg 是从 yef/cover-full.png 裁的临时图(390 宽、抹掉了「调试」按钮), - 已找「3D 婴儿房」会话(33d6c837)要无 UI 的 1125×1500 日/夜两版高清渲染,到了换掉。 - 位置:今天的动线 → 这道空隙 → 书架(首页后半段)。北京时间 19:00–6:00 叠一层夜色。JS 在 app.js nurseryRender()。 --> + 图:assets/img/nursery-day.jpg / nursery-night.jpg,由「3D 婴儿房」会话(33d6c837)导出的无 UI 渲染 + (原图 yef/cover-day.png、cover-night.png,1125×1500,这里缩到 750×1000);里面摆的是演示布置,不是用户自己的房间。 + 底色必须和图边一致:白天 #FFECD8、夜间 #5A5890,否则缝里会露出图片边框。 + 位置:今天的动线 → 这道空隙 → 书架(首页后半段)。北京时间 19:00–6:00 换夜间图(开灯版)。JS 在 app.js nurseryRender()。 -->
- + 往里看看 · 3D 婴儿房
宝宝的房间做孕期任务攒兜豆,一件件布置好
diff --git a/js/app.js b/js/app.js index e390097..883721b 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */ - var VER = '26100112'; + var VER = '26100113'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); @@ -3140,7 +3140,10 @@ place(); const tick = () => { 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); nurseryRender(); diff --git a/mama-box.css b/mama-box.css index bc2dd03..fae12aa 100644 --- a/mama-box.css +++ b/mama-box.css @@ -566,9 +566,8 @@ a.skip:focus{left:16px;top:16px} ::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%)} + display:flex;align-items:center;justify-content:center;background:#FFECD8} +.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-64px} .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; @@ -585,9 +584,8 @@ a.skip:focus{left:16px;top:16px} 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%)} +/* 夜间:JS 换成开灯版图,底色跟着换成图边的 #5A5890 */ +.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#5A5890} .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}