婴儿房封面换 3D 婴儿房 v=20261001h(写实树木+远山田野满幅远景):图铺满缝宽、去羽化、下移 30px 露出远山;图片加 ?v= 缓存参数 (v26100133)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 109 KiB |
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26100132 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100133 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
|
||||
@@ -348,7 +348,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" alt="" decoding="async"></div>
|
||||
<div class="nyp-layer" id="nypLayer" aria-hidden="true"><img id="nypImg" src="assets/img/nursery-day.jpg?v=20261001h" alt="" decoding="async"></div>
|
||||
<span class="nyp-chip">往里看看 · 3D 婴儿房</span>
|
||||
<div class="nyp-bar">
|
||||
<div class="nyp-txt"><b id="nyTitle">我们的家</b><span id="nySub">做孕期任务攒兜豆,一件件布置好</span></div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100132';
|
||||
var VER = '26100133';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -3153,11 +3153,13 @@
|
||||
window.addEventListener('resize', req);
|
||||
if ('IntersectionObserver' in window) new IntersectionObserver(req).observe(sec);
|
||||
place();
|
||||
/* 封面版本:3D 婴儿房会话换图(文件名不变)时改这里,强制微信 webview 重新拉图 */
|
||||
const NY_COVER_V = '20261001h';
|
||||
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';
|
||||
const img = $('#nypImg'), src = 'assets/img/nursery-' + (night ? 'night' : 'day') + '.jpg?v=' + NY_COVER_V;
|
||||
if (img.getAttribute('src') !== src) img.setAttribute('src', src);
|
||||
};
|
||||
tick(); setInterval(tick, 600e3);
|
||||
|
||||
12
mama-box.css
12
mama-box.css
@@ -604,13 +604,13 @@ a.skip:focus{left:16px;top:16px}
|
||||
这一块**故意没有底色、没有圆角卡片**:它是页面上开的缝,里面是铺在整页背后的房间。
|
||||
.nyp-layer 的 height / transform 由 JS 按 .screen 可视区每帧写入(见 app.js nurseryInit),这里别再给它写 top/transform。
|
||||
::after = 上下模块压在房间上的阴影,要盖在图层之上、按钮之下。 */
|
||||
.ny-peek{position:relative;margin:16px -26px 0;height:340px;overflow:hidden;background:#DCE5EC}
|
||||
.ny-peek{position:relative;margin:16px -26px 0;height:340px;overflow:hidden;background:#E6EEF3}
|
||||
.nyp-layer{position:absolute;left:0;top:0;width:100%;height:812px;will-change:transform;
|
||||
display:flex;align-items:center;justify-content:center;background:#DCE5EC}
|
||||
display:flex;align-items:center;justify-content:center;background:#E6EEF3}
|
||||
.nyp-layer img{display:block;width:88%;max-width:420px;height:auto;margin-top:-40px}
|
||||
/* 写实版(2026-10-01g)底部是草地渐隐、不是纯色 → 图左右和下沿各羽化一截,免得草地在图边被齐刷刷切断、露出接缝 */
|
||||
.nyp-layer img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 82%,transparent);
|
||||
-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 82%,transparent);mask-composite:intersect}
|
||||
/* 2026-10-01h:封面改成满幅远景(天空/远山/田野铺满整张图),不再是「纯色底上一栋房子」→ 图铺满缝宽、不羽化,
|
||||
左右下沿不会再露底色;底色只在图片加载前兜底,取图顶天色 */
|
||||
.nyp-layer img{width:100%;max-width:none;margin-top:30px}
|
||||
.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;
|
||||
@@ -628,7 +628,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:#2C3350}
|
||||
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#2D3559}
|
||||
.ny-peek.is-night .nyp-bar{background:rgba(30,36,60,.78)}
|
||||
.ny-peek.is-night .nyp-txt b{color:#FFF3F5}
|
||||
.ny-peek.is-night .nyp-txt span{color:#D9C5D0}
|
||||
|
||||
Reference in New Issue
Block a user