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

style(首页): 婴儿房空隙减字放大——去掉小标签和毛玻璃横条，只留大标题+一句短话+居中大按钮，空隙加高到 380 (v26100115)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-01 08:55:32 +00:00
parent 3eea304818
commit fcabec28dd
3 changed files with 27 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
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:26100114 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100115 缓存版本标记：改 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 第四节） -->
@@ -468,11 +468,10 @@
位置：今天的动线 → 这道空隙 → 书架（首页后半段）。北京时间 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>
<span class="nyp-chip">往里看看 · 3D 婴儿房</span>
<div class="nyp-bar">
<div class="nyp-txt"><b id="nyTitle">宝宝的房间</b><span id="nySub">做孕期任务攒兜豆，一件件布置好</span></div>
<button class="nyp-btn" id="nyBtn" type="button">进去布置 <svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></button>
</div>
<!-- 2026-10-01 用户：「有点小，密密麻麻全是文字……文字太小、太密了」→ 去掉小标签和毛玻璃横条，
只留一个大标题 + 一句短话（左上）和一个大按钮（底部居中），房间本身占主角。 -->
<div class="nyp-head"><b id="nyTitle">宝宝的房间</b><span id="nySub">攒兜豆，一件件布置好</span></div>
<button class="nyp-btn" id="nyBtn" type="button">进去布置 <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></button>
</section>
<!-- 模块三 · 书架卡带。

10
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100114';
var VER = '26100115';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3112,10 +3112,10 @@
const t = new Date(); t.setHours(0, 0, 0, 0);
days = Math.round((state.due - t) / 864e5);
}
$('#nySub').innerHTML = state.postpartum ? 'TA 已经住进来啦，再添点新东西吧'
: days > 0 ? '还有 <em>' + days + '</em> 天入住 · 攒兜豆把它布置好'
: days != null ? 'TA 随时会住进来，快去布置好'
: '做孕期任务攒兜豆，一件件布置好';
$('#nySub').innerHTML = state.postpartum ? 'TA 已经住进来啦'
: days > 0 ? '还有 <em>' + days + '</em> 天入住'
: days != null ? 'TA 随时会住进来'
: '攒兜豆，一件件布置好';
}
(function nurseryInit() {
const sec = $('#nursery');

37
mama-box.css
View File

@@ -564,32 +564,29 @@ 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:300px;overflow:hidden;background:#FFECD8}
.ny-peek{position:relative;margin:16px -26px 0;height:380px;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:#FFECD8}
.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-64px}
.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-10px}
.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;
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;
padding:10px 10px 10px 14px;border-radius:18px;background:rgba(255,255,255,.82);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(160,90,90,.16)}
.nyp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nyp-txt b{font-size:15px;font-weight:900;color:#5A3E37;letter-spacing:.3px}
.nyp-txt span{font-size:11.5px;color:#8A6C63;line-height:1.4}
.nyp-txt span em{font-style:normal;color:#E0708A;font-weight:900}
.nyp-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border:0;border-radius:999px;padding:8px 14px;font:inherit;
font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F9B4C1,#F18DA2);box-shadow:0 4px 10px rgba(224,112,138,.32);
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)}}
/* 文字只有两行：大标题 + 一句短话。白色描边光晕保证压在房间上也读得清 */
.nyp-head{position:absolute;left:26px;top:22px;z-index:2;display:flex;flex-direction:column;gap:4px;
text-shadow:0 0 10px rgba(255,236,216,.95),0 0 3px rgba(255,236,216,.95)}
.nyp-head b{font-size:22px;font-weight:900;color:#5A3E37;letter-spacing:.5px}
.nyp-head span{font-size:14px;font-weight:700;color:#8A6C63}
.nyp-head em{font-style:normal;color:#E0708A;font-weight:900;font-size:16px}
.nyp-btn{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;
border:0;border-radius:999px;padding:12px 30px;font:inherit;font-size:16px;font-weight:900;letter-spacing:1px;color:#fff;
background:linear-gradient(135deg,#F48FA6,#E0708A);box-shadow:0 8px 20px rgba(224,112,138,.45);text-shadow:0 1px 2px rgba(160,50,80,.25);animation:nypBreath 2.8s ease-in-out infinite}
.nyp-btn:active{transform:translateX(-50%) scale(.96)}
@keyframes nypBreath{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}
/* 夜间：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}
.ny-peek.is-night .nyp-txt span em{color:#FFB3C3}
.ny-peek.is-night .nyp-head{text-shadow:0 0 10px rgba(60,55,110,.95),0 0 3px rgba(60,55,110,.95)}
.ny-peek.is-night .nyp-head b{color:#FFF3F5}
.ny-peek.is-night .nyp-head span{color:#E6D6EA}
.ny-peek.is-night .nyp-head em{color:#FFB3C3}
@media (prefers-reduced-motion:reduce){.nyp-btn{animation:none}}
/* ============ 孕期小知识（2026-09-30）============