feat(首页): 婴儿房空隙换成婴儿房导出的无 UI 高清渲染(日/夜两版,夜间底色 #5A5890)(v26100113)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
BIN
assets/img/nursery-day.jpg
Normal file
BIN
assets/img/nursery-day.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
assets/img/nursery-night.jpg
Normal file
BIN
assets/img/nursery-night.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
11
index.html
11
index.html
@@ -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>
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
10
mama-box.css
10
mama-box.css
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user