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

首页撤下今日脚印；孕期小知识改为「其他妈妈也在搜」问题列表 v26103107

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 12:12:27 +00:00
parent 173dfffc95
commit e3c92d1f8c
2 changed files with 72 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
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:26103106 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26103107 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -417,45 +417,43 @@
⚠️ 一周 7 个圆点 = 这一周的第 1–7 天。今天及以前可以点开回看；以后的几天锁着，
写「明天见」—— 让每天回来看一条，而不是一口气翻完。 -->
<section class="preg-tips hide" id="pregTips">
<!-- 2026-10-01 用户要求：标题前写明孕周 ——「孕 26 周 · 今日孕期小知识」，按她填的孕周自动取，每天换一条；整块压矮一些。
#ptWk 由 renderTips() 写；#ptWhen 改成「第 N 天」。下面四张小卡由 2×2 改成一行横滑，高度省一半。 -->
<div class="pt-head">
<h2 class="pt-title"><span class="pt-wk" id="ptWk">孕 — 周</span>今日孕期小知识</h2>
<span class="pt-when" id="ptWhen"></span>
<!-- 2026-10-31 用户定：「孕期小知识」首页这块改成「其他妈妈也在搜」（照用户给的参考图）：
黄色荧光笔大标题 + 一排妈妈头像 + 6 条问题，每条点进去都有内容 ——
妊娠纹专题（孕 12 周起）、今天 / 昨天的小知识、宝宝这周、妈妈身体、吃点什么、这周留心（后几条进 #detailTips）。
问题按孕周每周自动换（assets/data/preg-tips.json），渲染在 app.js renderTips()。 -->
<div class="ms-head">
<h2 class="ms-title"><span>其他妈妈也在搜</span></h2>
<span class="ms-wk" id="msWk"></span>
</div>
<div class="pt-today" id="ptToday">
<span class="pt-float" id="ptFloat" aria-hidden="true"></span>
<span class="pt-badge" id="ptBadge">今日小知识</span>
<div class="pt-body" id="ptBody">
<div class="pt-t" id="ptT"></div>
<div class="pt-d" id="ptD"></div>
</div>
<div class="pt-days" id="ptDays" role="tablist" aria-label="本周每天的小知识"></div>
</div>
<!-- 2026-10-01 用户要求：四张卡不在首页放文字，只留图标 + 标题四个入口，点进详情页 #detailTips 看全文 -->
<div class="pt-chips" id="ptChips">
<button type="button" class="pt-chip pc-baby" data-pt="baby"><i id="ptChipBaby" aria-hidden="true">👶</i><span>宝宝这周</span></button>
<button type="button" class="pt-chip pc-mom" data-pt="mom"><i aria-hidden="true">🤰</i><span>妈妈身体</span></button>
<button type="button" class="pt-chip pc-eat" data-pt="eat"><i aria-hidden="true">🥗</i><span>吃点什么</span></button>
<button type="button" class="pt-chip pc-care" data-pt="care"><i aria-hidden="true">📋</i><span>这周留心</span></button>
</div>
<!-- 2026-10-31 用户定：孕期专题入口（第一篇妊娠纹，topic/wen/）。孕 12 周起显示，20 周起换「肚子长得最快」文案，见 app.js renderTips -->
<a class="pt-topic hide" id="ptTopic" href="topic/wen/">
<img src="topic/wen/img/hero.webp" alt="" loading="lazy">
<span class="ptt-tx"><em>孕期专题</em><b>妊娠纹：为什么会长、现在抹什么</b><span id="ptTopicD">3 分钟看懂，从现在开始打底</span></span>
<i class="ptt-go">›</i>
</a>
<div class="ms-who"><span class="ms-avs" id="msAvs" aria-hidden="true"></span><span class="ms-cnt" id="msCnt"></span></div>
<div class="ms-list" id="msList"></div>
<style>
.pt-topic{display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:8px 12px 8px 8px;border-radius:16px;background:linear-gradient(110deg,#FFEDE6,#FFF8F4);text-decoration:none;color:inherit}
.pt-topic.hide{display:none}
.pt-topic img{flex:none;width:62px;height:62px;border-radius:12px;object-fit:cover}
.ptt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ptt-tx em{font-style:normal;font-size:11px;color:#F4593C;font-weight:600}
.ptt-tx b{font-size:14px;line-height:1.35;color:#3B2A2A}
.ptt-tx span{font-size:12px;color:#8A7471}
.ptt-go{font-style:normal;font-size:20px;color:#E4A595}
html.night .pt-topic{background:linear-gradient(110deg,#3a2a2a,#2c2222)}
html.night .ptt-tx b{color:#f3e6e2}
.ms-head{display:flex;align-items:center;gap:8px}
.ms-title{margin:0;font-size:21px;font-weight:900;font-style:italic;letter-spacing:.5px;color:#2A1E1E}
.ms-title span{background:linear-gradient(transparent 58%,#FFE066 58%,#FFE066 92%,transparent 92%);padding:0 3px}
.ms-wk{margin-left:auto;padding:2px 9px;border-radius:99px;background:#FFEDE6;color:#E0573A;font-size:11.5px;font-weight:700}
.ms-who{display:flex;align-items:center;gap:8px;margin:10px 0 4px}
.ms-avs{display:flex}
.ms-avs img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#FFE3D3;margin-left:-7px;box-shadow:0 2px 5px rgba(160,100,90,.15)}
.ms-avs img:first-child{margin-left:0}
.ms-cnt{font-size:12px;color:#9A8380}
.ms-list{display:flex;flex-direction:column}
.ms-it{display:flex;align-items:center;gap:10px;width:100%;padding:12px 2px;border:0;border-bottom:1px dashed #F1DDD6;background:none;font:inherit;color:inherit;text-align:left;text-decoration:none}
.ms-it:last-child{border-bottom:0}
.ms-no{flex:none;width:20px;font-size:16px;font-weight:900;font-style:italic;color:#C9B4AF;text-align:center}
.ms-it:nth-child(1) .ms-no{color:#F2533A}
.ms-it:nth-child(2) .ms-no{color:#F7843F}
.ms-it:nth-child(3) .ms-no{color:#F5AE3A}
.ms-q{flex:1;min-width:0;font-size:15.5px;line-height:1.4;font-weight:600;color:#2F2424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-tag{flex:none;padding:0 6px;border-radius:6px;font-size:10.5px;line-height:17px;font-weight:700;background:#FFF1DC;color:#C77A1E}
.ms-tag.hot{background:#FFE4DE;color:#E8492F}
.ms-tag.new{background:#E6F5EC;color:#2F8A5E}
.ms-go{flex:none;font-style:normal;font-size:18px;color:#D9C2BC}
html.night .ms-title{color:#F3E8F0}
html.night .ms-title span{background:linear-gradient(transparent 58%,rgba(255,214,90,.45) 58%,rgba(255,214,90,.45) 92%,transparent 92%)}
html.night .ms-q{color:#EFE3EA}
html.night .ms-it{border-color:rgba(255,255,255,.1)}
html.night .ms-avs img{border-color:#2A2231}
</style>
<p class="pt-foot">仅供参考，身体有任何不适请以医生意见为准</p>
</section>
@@ -514,7 +512,9 @@
· AI 小结做成「宝宝写给妈妈的一张便签」：信纸横线 + 宝宝口吻 + 落款小名。
⚠️ 「AI」角标必须保留（唯一的机器生成提示，见 syncBabyWords 那段注释）。
JS 依赖的 id / class（.today-line / #tlSteps / .step 系列 / #tlGuide* / .ai-bubble / .ab-say / #abTag / #tlTitle）都沿用。 -->
<section class="today-line fp2">
<!-- 2026-10-31 用户：「把宝宝的今日脚印这个模块去掉」→ 整块不显示（含祈福掀角、AI 便签）。
节点先留着：app.js 足迹 / AI 小结 / 此刻 等逻辑还在往里面写数，删节点要连带改 JS。 -->
<section class="today-line fp2" hidden style="display:none">
<!-- 2026-10-05 祈福树入口（用户：「放到今日脚印的右上角，把右上角掀开一点，露出祈福树」）：
卡片右上角像纸一样折起一角（.pl-flap 是翻过来的纸背），底下那块（.pl-hole）露出祈福树；点它跳祈福树（js/app.js #fpQifu）。
之前放在工具卡右上角 / 头图底边的版本已撤，工具卡恢复「所有工具 ›」。样式见 mama-box.css「祈福树入口 · 今日脚印掀角」。 -->
@@ -2148,7 +2148,7 @@
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
<script src="js/baby-limbs.js?v=26101201"></script>
<script src="js/coach.js?v=26101211"></script>
<script src="js/birth-flow.js?v=26103106"></script>
<script src="js/birth-flow.js?v=26103107"></script>
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
<script>

84
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26103106';
var VER = '26103107';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -5022,46 +5022,16 @@
if (!wk || !(wk.days || []).length) { sec.classList.add('hide'); return; }
const today = Math.max(0, Math.min(6, state.day || 0));
const size = babySize(w);
$('#ptWk').textContent = '孕 ' + state.week + ' 周';
/* 孕期专题入口：12 周起显示；20 周起肚子长得最快，换提醒文案。专题页自己按 openid 点亮对应阶段，链接带上身份 */
const _tp = $('#ptTopic');
if (_tp) {
_tp.classList.toggle('hide', !(state.week >= 12));
_tp.setAttribute('href', 'topic/wen/' + location.search + location.hash);
const _td = $('#ptTopicD');
if (_td) _td.textContent = state.week >= 20 ? '肚子长得最快的时候，该开始护理肚皮了' : '3 分钟看懂，从现在开始打底';
}
$('#ptWhen').textContent = '本周第 ' + (today + 1) + ' 天';
/* 2026-10-12 用户：小知识里的 emoji 换成兜爸手绘图标库（/_bridge/hand-icons.js，小程序后台 375797cf 维护）；
图标按孕周从 handIcons.week() 取，SIZE 表只管文字；库没加载 / 图片挂了 → 退回原来的 emoji，位置不空 */
const hw = window.handIcons && handIcons.week(w);
setHandIco($('#ptFloat'), hw && hw.id, size.emoji);
setHandIco($('#ptBabyIco'), hw && hw.id, size.emoji);
/* 四张卡全文只在详情页 #detailTips；首页那排入口只有图标 + 标题 */
$('#ptBaby').textContent = '像' + size.name + '那么大。' + (wk.baby || '');
$('#ptMom').textContent = wk.mom || '';
$('#ptEat').textContent = wk.eat || '';
$('#ptCare').textContent = wk.care || '';
setHandIco($('#ptChipBaby'), hw && hw.id, size.emoji);
$('#ptDtTitle').textContent = '孕 ' + state.week + ' 周 · 这一周';
/* 一周 7 个圆点：以前可回看，今天实心，以后锁着 */
const box = $('#ptDays');
box.textContent = '';
for (let i = 0; i < 7; i++) {
const b = document.createElement('button');
b.type = 'button';
b.className = 'pt-day ' + (i < today ? 'is-past' : i === today ? 'is-today' : 'is-lock');
b.setAttribute('role', 'tab');
const n = document.createElement('i'); n.textContent = i + 1;
const t = document.createElement('span');
t.textContent = i === today ? '今天' : (i === today + 1 ? '明天' : '\u00a0'); // 圈里已是「第几天」，只给今天/明天配字
b.appendChild(n); b.appendChild(t);
b.addEventListener('click', () => {
if (i > today) { toast(i === today + 1 ? '明天再来看新的小知识～' : '到那天再来看哦～'); return; }
showTip(wk, i, today);
});
box.appendChild(b);
}
/* 详情页「本周每日小知识」：今天在上，往前倒着排到第 1 天；后面几天只露一行「明天见」 */
const list = $('#ptList');
list.textContent = '';
@@ -5083,24 +5053,41 @@
lk.textContent = '第 ' + (today + 2) + (today < 5 ? '–7' : '') + ' 天 · 明天见，每天解锁一条';
list.appendChild(lk);
}
tipSel = -1;
showTip(wk, today, today);
renderSearch(wk, today, size);
sec.classList.remove('hide');
revealTipsGrid();
}
function showTip(wk, i, today) {
if (i === tipSel) return;
tipSel = i;
const d = wk.days[i] || wk.days[0];
$('#ptBadge').textContent = i === today ? '今日小知识' : '第 ' + (i + 1) + ' 天 · 回看';
$('#ptT').textContent = d.t || '';
$('#ptD').textContent = d.d || '';
$$('#ptDays .pt-day').forEach((b, k) => {
b.classList.toggle('is-sel', k === i);
b.setAttribute('aria-selected', k === i ? 'true' : 'false');
/* 2026-10-31 首页「其他妈妈也在搜」：6 条问题，全部有落点（专题页 / 小知识详情页），按孕周每周换 */
function renderSearch(wk, today, size) {
const W = state.week, L = $('#msList');
if (!L) return;
$('#msWk').textContent = '孕 ' + W + ' 周';
$('#msCnt').textContent = '孕 ' + W + ' 周的妈妈都在看';
const pool = AVA_TOP.concat(AVA_FEED), s0 = (W * 7) % pool.length;
$('#msAvs').innerHTML = [0, 1, 2, 3, 4, 5, 6, 7].map(i => avaImg(pool[(s0 + i * 3) % pool.length])).join('');
const q = t => /[？?吗呢]$/.test(t) ? t : t + (/怎么办|什么|多少|怎么|几/.test(t) ? '？' : '');
const items = [];
if (W >= 12) items.push({ q: '妊娠纹怎么防？现在该抹什么', tag: '专题', cls: 'hot', href: 'topic/wen/' + location.search + location.hash });
const d0 = wk.days[today];
if (d0 && d0.t) items.push({ q: q(d0.t), tag: '今日', cls: 'new' });
items.push({ q: '孕' + W + '周，宝宝长多大了？', tag: '热', cls: 'hot', pt: 'baby' });
items.push({ q: '这周身体会有哪些变化？', pt: 'mom' });
items.push({ q: '孕' + W + '周吃什么对宝宝好？', pt: 'eat' });
items.push({ q: '这周产检和生活要留心什么？', pt: 'care' });
const d1 = today > 0 && wk.days[today - 1];
if (items.length < 6 && d1 && d1.t) items.push({ q: q(d1.t), tag: '昨天' });
L.textContent = '';
items.slice(0, 6).forEach((it, i) => {
const el = document.createElement(it.href ? 'a' : 'button');
el.className = 'ms-it ripple';
if (it.href) el.href = it.href; else { el.type = 'button'; el.addEventListener('click', () => openTips(it.pt)); }
const no = document.createElement('i'); no.className = 'ms-no'; no.textContent = i + 1;
const t = document.createElement('span'); t.className = 'ms-q'; t.textContent = it.q;
el.appendChild(no); el.appendChild(t);
if (it.tag) { const g = document.createElement('span'); g.className = 'ms-tag' + (it.cls ? ' ' + it.cls : ''); g.textContent = it.tag; el.appendChild(g); }
const go = document.createElement('i'); go.className = 'ms-go'; go.textContent = '›'; el.appendChild(go);
L.appendChild(el);
});
const body = $('#ptBody');
body.classList.remove('is-in'); void body.offsetWidth; body.classList.add('is-in'); // 重播进场动画
}
/* 首页四个入口 → 详情页，滚到对应那张卡并闪一下 */
function openTips(key) {
@@ -5114,13 +5101,6 @@
c.classList.remove('is-hit'); void c.offsetWidth; c.classList.add('is-hit');
}, 400); // 等详情页滑入再滚
}
(function () {
const ch = $('#ptChips');
if (ch) ch.addEventListener('click', e => { const b = e.target.closest('.pt-chip'); if (b) openTips(b.dataset.pt); });
/* 首页今日小知识大卡也能点进详情页；底下 7 个圆点仍是切换回看，不跳页 */
const td = $('#ptToday');
if (td) td.addEventListener('click', e => { if (!e.target.closest('#ptDays')) openTips(); });
})();
function revealTipsGrid() {
const g = $('#ptGrid');
if (!g || g.classList.contains('is-shown')) return;