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

style(首页): 此刻减到三行（她们在做合成一句、删今天别忘了、动态压成一行小字）；婴儿房空隙恢复 v26100114 版式（用户澄清：要改的是此刻） (v26100117)

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

17
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:26100115 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100117 缓存版本标记：改 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 第四节） -->
@@ -290,7 +290,10 @@
用户 2026-10-01：「把此刻跟上面的孕育工具结合到一起……此刻相当于上面那个卡片的一个轻量化的展示」
→ 不再单独成卡，收进工具卡底部一条浅色带：一行人数 + 她们在做 / 和你比 + 今天别忘了 + 一行滚动动态。
「她们在聊」按用户要求删除；全站版（访客）的「今日三项」小卡也去掉（和上面工具宫格重复）。
show=false 或接口失败 → 整条保持 .hide，工具卡和以前一样。 -->
show=false 或接口失败 → 整条保持 .hide，工具卡和以前一样。
同日三改（用户：「此刻有一点点不够清爽，文字太多了，密密麻麻的」）：从 5 行减到 3 行 ——
① 标题行不变；② 「她们在做」两条进度条合成**一句**，只挑你今天还没做的那项（都做了就一句夸奖），去掉进度条；
③ 「今天别忘了」整行删（产检、盲盒在上面工具宫格和盲盒横幅里都有）；④ 滚动动态去掉白底卡片，压成一行小字。 -->
<div class="pulse hide" id="pulse" role="region" aria-label="此刻，孕妈们在做什么">
<div class="pl-head">
<span class="pl-live"><i></i>此刻</span>
@@ -298,7 +301,6 @@
<span class="pl-title" id="plTitle"></span>
</div>
<div class="pp-doing hide" id="ppDoing"></div>
<div class="pl-todo hide" id="plTodo"><span class="tdo-h">今天别忘了</span><span class="tdo-list" id="plTodoList"></span></div>
<div class="pl-feed hide" id="plFeed"><div class="pl-track" id="plTrack"></div></div>
</div>
</section>
@@ -468,10 +470,11 @@
位置：今天的动线 → 这道空隙 → 书架（首页后半段）。北京时间 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>
<!-- 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>
<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>
</section>
<!-- 模块三 · 书架卡带。

61
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100115';
var VER = '26100117';
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');
@@ -3227,31 +3227,13 @@
if (_fpMode !== 'rows' && _fpMode !== 'guide') return null;
return ((_fpData && _fpData.used) || []).some(u => u.appId === SELF_APP[k]);
}
/* 今日待办（B）：只放上面「她们在做」没覆盖的 —— 产检倒数（≤14 天）、本周盲盒没开 / 有可解锁的 */
function todos() {
const out = [];
if (state.pregEmpty === false && !state.postpartum) {
const m = String(($('#calNext') || {}).textContent || '').match(/(\d{1,2})月(\d{1,2})日/);
if (m) {
const t = midnight(new Date()), d = new Date(t.getFullYear(), +m[1] - 1, +m[2]);
if (d < t - 86400000 * 60) d.setFullYear(d.getFullYear() + 1);
const n = Math.round((d - t) / 86400000);
if (n >= 0 && n <= 14) out.push({ k: 'cal', t: n === 0 ? '今天产检' : n === 1 ? '明天产检' : '产检还有 <b>' + n + '</b> 天' });
}
}
if (BB && BB.enabled && !BB.notYet && !BB.needProfile && !BB.ended) {
if (!BB.currentOpened && (BB.openable || []).indexOf(BB.week) >= 0) out.push({ k: 'box', t: '本周盲盒还没开', hot: 1 });
else if ((BB.locked || []).length && BB.credits) out.push({ k: 'box', t: '可解锁 <b>' + BB.credits + '</b> 个盲盒', hot: 1 });
}
return out;
}
function rowHTML(f) {
/* 「孕 29 周的妈妈 数完胎动，宝宝动了 13 次」→ 上行「孕 29 周的妈妈 · 刚刚」（同周版式写「一位同周妈妈」），下行动作；数字标色 */
/* 一行：小头像 + 「同周妈妈 · 刚刚」+ 动作（数字标色）。原文「孕 29 周的妈妈 数完胎动……」按「的妈妈 」切 */
const t = String(f.text || ''), i = t.indexOf('的妈妈 ');
const who = peerMode ? '一位同周妈妈' : (i > 0 ? t.slice(0, i + 3) : '一位妈妈'), what = i > 0 ? t.slice(i + 4) : t;
const who = peerMode ? '同周妈妈' : (i > 0 ? t.slice(0, i + 3) : '一位妈妈'), what = i > 0 ? t.slice(i + 4) : t;
return '<div class="pl-row"><span class="pr-ava">' + momAva(strSeed(t + (f.ago || ''))) + '</span>' +
'<span class="pr-t"><span class="pr-who">' + esc(who) + ' · ' + esc(f.ago || '刚刚') + '</span><span class="pr-do">' +
esc(what).replace(/(\d+)/g, '<em>$1</em>') + '</span></span></div>';
'<span class="pr-who">' + esc(who) + ' · ' + esc(f.ago || '刚刚') + '</span><span class="pr-do">' +
esc(what).replace(/(\d+)/g, '<em>$1</em>') + '</span></div>';
}
function tick() {
const tr = $('#plTrack');
@@ -3259,7 +3241,7 @@
fi = (fi + 1) % feed.length;
tr.insertAdjacentHTML('beforeend', rowHTML(feed[fi]));
tr.classList.add('is-move');
tr.style.transform = 'translateY(-46px)';
tr.style.transform = 'translateY(-26px)'; /* = .pl-row 高度 */
setTimeout(() => {
tr.classList.remove('is-move');
/* 翻动途中若 paint() 重置过轨道（只剩 1 行），别把仅剩的那行也删了 */
@@ -3277,19 +3259,17 @@
function paintPeer(p) {
paintAvs(p.week);
$('#plTitle').innerHTML = '<b data-n="' + p.count + '">0</b> 位孕 ' + p.week + ' 周妈妈和你同一周';
$('#ppDoing').innerHTML = (p.doing || []).map(d => {
const me = SELF_TXT[d.key] ? selfDone(d.key) : null;
/* 只说一句：优先挑你今天还没做的那项；都做了（或读不到你的足迹）就取第一项 */
const ds = (p.doing || []).filter(d => SELF_TXT[d.key]);
const pick = ds.find(d => selfDone(d.key) === false) || ds[0];
if (pick) {
const me = selfDone(pick.key);
const meH = me == null ? '' : me
? '<span class="pp-me ok">' + SELF_TXT[d.key][1] + ' ✓</span>'
: '<button class="pp-me todo" type="button" data-go="' + d.key + '">' + SELF_TXT[d.key][0] + ' ›</button>';
return '<div class="pp-do k-' + esc(d.key) + '"><span class="pp-dt">她们 <b>' + (+d.pct || 0) + '%</b> ' + esc(d.label) + '</span>' +
'<span class="pp-bar"><i style="width:' + Math.min(100, +d.pct || 0) + '%"></i></span>' + meH + '</div>';
}).join('');
$('#ppDoing').classList.toggle('hide', !(p.doing || []).length);
const td = todos();
$('#plTodo').classList.toggle('hide', !td.length);
$('#plTodoList').innerHTML = td.map(x => '<button class="tdo-chip' + (x.hot ? ' hot' : '') + '" type="button" data-go="' + x.k + '">' +
pulseIco(x.k, 'tdo-ico') + '<span>' + x.t + '</span><i>›</i></button>').join('');
? '<span class="pp-me ok">' + SELF_TXT[pick.key][1] + ' ✓</span>'
: '<button class="pp-me todo" type="button" data-go="' + pick.key + '">' + SELF_TXT[pick.key][0] + ' ›</button>';
$('#ppDoing').innerHTML = '<div class="pp-do"><span class="pp-dt">她们有 <b>' + (+pick.pct || 0) + '%</b> ' + esc(pick.label) + '</span>' + meH + '</div>';
}
$('#ppDoing').classList.toggle('hide', !pick);
}
function paint() {
const r = last;
@@ -3302,7 +3282,6 @@
/* 全站版（访客 / real 模式）：只留一行总人数 + 滚动动态 */
paintAvs(0);
$('#ppDoing').classList.add('hide');
$('#plTodo').classList.add('hide');
const t = r.total;
/* 前缀「已有」省掉：一行放得下「10,037 位妈妈在这里迎接宝宝」，带上就会折出一个孤零零的「宝宝」 */
$('#plTitle').innerHTML = t ? '<b data-n="' + t.value + '">0</b> ' + esc(t.suffix) : '孕妈们在做什么';

77
mama-box.css
View File

@@ -564,29 +564,32 @@ 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:380px;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;
display:flex;align-items:center;justify-content:center;background:#FFECD8}
.nyp-layer img{display:block;width:100%;max-width:480px;height:auto;margin-top:-10px}
.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-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)}}
.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)}}
/* 夜间：JS 换成开灯版图，底色跟着换成图边的 #5A5890 */
.ny-peek.is-night,.ny-peek.is-night .nyp-layer{background:#5A5890}
.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}
.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}
@media (prefers-reduced-motion:reduce){.nyp-btn{animation:none}}
/* ============ 孕期小知识（2026-09-30）============
@@ -2415,18 +2418,17 @@ a.skip:focus{left:16px;top:16px}
.pl-live i{position:relative;width:5px;height:5px;border-radius:50%;background:#fff}
.pl-live i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #fff;animation:plPing 1.6s ease-out infinite}
@keyframes plPing{from{transform:scale(.6);opacity:1}to{transform:scale(1.9);opacity:0}}
.pl-title{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.35}
.pl-title b{font-size:15px;font-weight:900;letter-spacing:-.3px;color:var(--brand);font-variant-numeric:tabular-nums}
.pl-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.35}
.pl-title b{font-size:16px;font-weight:900;letter-spacing:-.3px;color:var(--brand);font-variant-numeric:tabular-nums}
.pl-feed.hide{display:none}
.pl-feed{position:relative;margin-top:8px;height:40px;overflow:hidden;border-radius:12px;background:#fff;
.pl-feed{position:relative;margin-top:8px;height:26px;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.pl-track{will-change:transform}
.pl-track.is-move{transition:transform .55s var(--ease)}
.pl-row{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px}
.pl-row .pr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.pl-row .pr-who{font-size:10px;color:var(--muted)}
.pl-row .pr-do{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-row{display:flex;align-items:center;gap:6px;height:26px;font-size:12px;white-space:nowrap}
.pl-row .pr-who{flex:0 0 auto;color:var(--muted)}
.pl-row .pr-do{flex:1;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.pl-row .pr-do em{font-style:normal;color:var(--brand)}
/* =====================================================================
@@ -2647,36 +2649,21 @@ a.skip:focus{left:16px;top:16px}
/* 此刻 · 同孕周（A+B 改版，2026-10-01）：人物头像表现「人」，不用应用 logo，和上面工具卡（色块 + logo）拉开。 */
.pl-row .pr-ava,.pp-avs i{flex:0 0 auto;display:block;border-radius:50%;overflow:hidden;background:#FFE3D3}
.pl-row .pr-ava{width:26px;height:26px}
.pl-row .pr-ava{width:18px;height:18px}
.pr-ava svg,.pp-avs svg{display:block;width:100%;height:100%}
.pp-avs{flex:0 0 auto;display:flex}
.pp-avs:empty{display:none}
.pp-avs i{width:22px;height:22px;margin-left:-7px;border:1.5px solid #FFF6F0}
.pp-avs i:first-child{margin-left:0}
.pp-doing.hide,.pl-todo.hide{display:none}
.pp-doing{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.pp-do{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.pp-doing.hide{display:none}
.pp-doing{display:flex;flex-direction:column;margin-top:10px}
.pp-do{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-2)}
.pp-dt{flex:0 0 auto;white-space:nowrap}
.pp-dt b{font-size:13px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.pp-bar{flex:1;min-width:24px;position:relative;height:5px;border-radius:99px;background:#F3E3DA;overflow:hidden}
.pp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#FFC2A8,#FF8A66);
transition:width 1.2s var(--ease)}
.pp-do.k-weight .pp-bar i{background:linear-gradient(90deg,#CBB9FF,#9F8CF0)}
.pp-me{flex:0 0 auto;font:inherit;font-size:11px;font-weight:700;border:0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.pp-dt b{font-size:15px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.pp-me{flex:0 0 auto;font:inherit;font-size:12px;font-weight:800;border:0;border-radius:999px;padding:4px 11px;white-space:nowrap}
.pp-me.todo{color:#fff;background:linear-gradient(135deg,#FF7A5C,#F4593C)}
.pp-me.todo:active{transform:scale(.95)}
.pp-me.ok{color:#4E8A43;background:#EAF5E6}
.pl-todo{display:flex;align-items:flex-start;gap:7px;margin-top:9px}
.tdo-h{flex:0 0 auto;font-size:11px;font-weight:800;color:#C2593F;line-height:22px}
.tdo-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.tdo-chip{display:inline-flex;align-items:center;gap:4px;border:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--ink);
background:#fff;border-radius:999px;padding:3px 8px 3px 4px;white-space:nowrap}
.tdo-chip:active{transform:scale(.95)}
.tdo-chip b{color:var(--brand)}
.tdo-chip i{font-style:normal;opacity:.4}
.tdo-ico{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#5B8FD6}
.tdo-ico svg{width:10px;height:10px}
.tdo-chip.hot .tdo-ico{background:linear-gradient(135deg,#FFB547,#FF7A5C)}
/* 孕期小知识 · 压缩版（2026-10-01：标题前带孕周；今日卡、7 天圆点、四张小卡都收紧，四卡改一行横滑） */
.pt-head{margin-bottom:8px;align-items:center}