jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

婴儿房上下沿改为渐隐融进页面底色（去掉两道硬阴影），夜间渐隐收短防发灰 (v26100134)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 15:03:56 +00:00
parent 8ca26162ce
commit 782f0b8c58
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100133 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100134 缓存版本标记：改 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 第四节） -->

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100133';
var VER = '26100134';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

8
mama-box.css
View File

@@ -611,8 +611,11 @@ a.skip:focus{left:16px;top:16px}
/* 2026-10-01h：封面改成满幅远景（天空/远山/田野铺满整张图），不再是「纯色底上一栋房子」→ 图铺满缝宽、不羽化，
左右下沿不会再露底色；底色只在图片加载前兜底，取图顶天色 */
.nyp-layer img{width:100%;max-width:none;margin-top:30px}
/* 上下沿融进页面底色（2026-10-01 用户反馈：和上面孕期小知识、下面今日脚印「衔接得有点硬」）：
原来是两道向内的阴影 = 一条硬切口；改成上下各一段 --bg → 透明 的渐隐，房子像从页面里慢慢浮出来、再沉回去。 */
.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)}
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)}
.nyp-chip{position:absolute;left:26px;top:16px;z-index:2;font-size:11px;font-weight:800;color:#E0708A;letter-spacing:.3px;
background:rgba(255,255,255,.86);border-radius:999px;padding:3px 10px;box-shadow:0 2px 8px rgba(224,112,138,.15)}
.nyp-bar{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:center;gap:10px;
@@ -629,6 +632,9 @@ a.skip:focus{left:16px;top:16px}
@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::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)}
.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}