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

孕期小知识：首页四张卡去掉文字，改成图标+标题四个入口；点进详情页 #detailTips 看四张卡全文（滚到对应卡并高亮）(v26100131)

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

32
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:26100130 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100131 缓存版本标记：改 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 第四节） -->
@@ -325,11 +325,12 @@
</div>
<div class="pt-days" id="ptDays" role="tablist" aria-label="本周每天的小知识"></div>
</div>
<div class="pt-grid" id="ptGrid">
<div class="pt-card pc-baby"><span class="pt-ico" id="ptBabyIco" aria-hidden="true">👶</span><b>宝宝这周</b><p id="ptBaby"></p></div>
<div class="pt-card pc-mom"><span class="pt-ico" aria-hidden="true">🤰</span><b>妈妈身体</b><p id="ptMom"></p></div>
<div class="pt-card pc-eat"><span class="pt-ico" aria-hidden="true">🥗</span><b>吃点什么</b><p id="ptEat"></p></div>
<div class="pt-card pc-care"><span class="pt-ico" aria-hidden="true">📋</span><b>这周留心</b><p id="ptCare"></p></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>
<p class="pt-foot">仅供参考，身体有任何不适请以医生意见为准</p>
</section>
@@ -1175,6 +1176,25 @@
<!-- ================= 孕期小知识 · 这一周 详情页（2026-10-01）=================
首页 #pregTips 下面四个入口点进来：宝宝 / 妈妈 / 饮食 / 留心 四张卡竖排、全文不截断；
点哪个入口就滚到哪张并闪一下。内容由 renderTips() 写入 ptBaby/ptMom/ptEat/ptCare。 -->
<section class="detail" id="detailTips">
<div class="detail-bar">
<button class="dt-back" data-detail="close">‹</button>
<span class="dt-title" id="ptDtTitle">孕期小知识</span>
</div>
<div class="detail-body pt-page">
<div class="pt-grid" id="ptGrid">
<div class="pt-card pc-baby" data-pt="baby"><span class="pt-ico" id="ptBabyIco" aria-hidden="true">👶</span><b>宝宝这周</b><p id="ptBaby"></p></div>
<div class="pt-card pc-mom" data-pt="mom"><span class="pt-ico" aria-hidden="true">🤰</span><b>妈妈身体</b><p id="ptMom"></p></div>
<div class="pt-card pc-eat" data-pt="eat"><span class="pt-ico" aria-hidden="true">🥗</span><b>吃点什么</b><p id="ptEat"></p></div>
<div class="pt-card pc-care" data-pt="care"><span class="pt-ico" aria-hidden="true">📋</span><b>这周留心</b><p id="ptCare"></p></div>
</div>
<p class="pt-foot">仅供参考，身体有任何不适请以医生意见为准</p>
</div>
</section>
<!-- ================= AI 小结 内容页 ================= -->
<section class="detail" id="detailAI">
<div class="detail-bar">

50
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100130';
var VER = '26100131';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3784,11 +3784,13 @@
$('#ptWhen').textContent = '本周第 ' + (today + 1) + ' 天';
$('#ptFloat').textContent = size.emoji;
$('#ptBabyIco').textContent = size.emoji;
/* 2026-10-01 用户反馈「四张小卡文字太多」：卡上只露一句重点，点开再看全文（全文存 data-full） */
setTipCard('#ptBaby', '像' + size.name + '那么大', '像' + size.name + '那么大。' + (wk.baby || ''));
setTipCard('#ptMom', tipGist(wk.mom), wk.mom);
setTipCard('#ptEat', tipGist(wk.eat), wk.eat);
setTipCard('#ptCare', tipGist(wk.care), wk.care);
/* 四张卡全文只在详情页 #detailTips；首页那排入口只有图标 + 标题 */
$('#ptBaby').textContent = '像' + size.name + '那么大。' + (wk.baby || '');
$('#ptMom').textContent = wk.mom || '';
$('#ptEat').textContent = wk.eat || '';
$('#ptCare').textContent = wk.care || '';
$('#ptChipBaby').textContent = size.emoji;
$('#ptDtTitle').textContent = '孕 ' + state.week + ' 周 · 这一周';
/* 一周 7 个圆点：以前可回看，今天实心，以后锁着 */
const box = $('#ptDays');
box.textContent = '';
@@ -3826,31 +3828,21 @@
const body = $('#ptBody');
body.classList.remove('is-in'); void body.offsetWidth; body.classList.add('is-in'); // 重播进场动画
}
/* 一句重点 = 全文的第一个分句；太短（如「从这周末起」）就再带上下一句 */
function tipGist(txt) {
const parts = String(txt || '').split(/[，。；！]/).filter(Boolean);
let g = parts[0] || '';
if (g.length < 7 && parts[1]) g += '，' + parts[1];
return g;
/* 首页四个入口 → 详情页，滚到对应那张卡并闪一下 */
function openTips(key) {
openPanel('detailTips');
const body = $('#detailTips .detail-body');
body.scrollTop = 0;
$('#ptGrid').classList.add('is-shown');
const c = key && $('#ptGrid .pt-card[data-pt="' + key + '"]');
if (c) setTimeout(() => {
body.scrollTo({ top: c.offsetTop - 16, behavior: 'smooth' });
c.classList.remove('is-hit'); void c.offsetWidth; c.classList.add('is-hit');
}, 400); // 等详情页滑入再滚
}
function setTipCard(sel, gist, full) {
const p = $(sel);
if (!p) return;
p.dataset.gist = gist || '';
p.dataset.full = full || '';
const open = p.closest('.pt-card').classList.contains('is-open');
p.textContent = open ? p.dataset.full : p.dataset.gist;
}
/* 四张小卡只露一句重点，点一下展开全文、再点收回一句 */
(function () {
const g = $('#ptGrid');
if (g) g.addEventListener('click', e => {
const c = e.target.closest('.pt-card');
if (!c) return;
const open = c.classList.toggle('is-open');
const p = $('p', c);
if (p && p.dataset.full) p.textContent = open ? p.dataset.full : p.dataset.gist;
});
const ch = $('#ptChips');
if (ch) ch.addEventListener('click', e => { const b = e.target.closest('.pt-chip'); if (b) openTips(b.dataset.pt); });
})();
function revealTipsGrid() {
const g = $('#ptGrid');

25
mama-box.css
View File

@@ -2750,11 +2750,26 @@ a.skip:focus{left:16px;top:16px}
.pt-card b{font-size:14px}
.pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
.pt-foot{font-size:11.5px}
/* 四张小卡精简（2026-10-01）：收起时只一句重点（最多 2 行），标题右侧小箭头提示可点；展开后箭头朝下、显示全文 */
.pt-card{cursor:pointer;align-content:start}
.pt-card p{-webkit-line-clamp:2}
.pt-card b::after{content:"›";margin-left:4px;font-weight:700;opacity:.45;display:inline-block;transition:transform .2s}
.pt-card.is-open b::after{transform:rotate(90deg)}
/* 首页四个入口（2026-10-01 用户要求：首页不放卡片文字，点进详情页）：图标 + 标题，一行四个 */
.pt-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.pt-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 2px 10px;border:0;border-radius:14px;
font:inherit;font-size:12.5px;font-weight:700;min-width:0;cursor:pointer;transition:transform .16s}
.pt-chip:active{transform:scale(.95)}
.pt-chip i{font-style:normal;font-size:20px;line-height:1}
.pt-chip span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-chip.pc-baby span{color:#C4583C}.pt-chip.pc-mom span{color:#B3547E}.pt-chip.pc-eat span{color:#4F7F3E}.pt-chip.pc-care span{color:#4A6FA6}
/* 详情页 #detailTips：四张卡竖排、全文不截断 */
.pt-page{padding:16px 16px 40px}
.pt-page .pt-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
.pt-page .pt-card{display:block;padding:14px 16px 15px;border-radius:18px;transform:translateY(10px)}
.pt-page .pt-grid.is-shown .pt-card{transform:none}
.pt-page .pt-card b{display:inline-block;margin-left:8px;font-size:15px;vertical-align:middle}
.pt-page .pt-ico{width:30px;height:30px;font-size:17px;vertical-align:middle}
.pt-page .pt-card p{margin-top:8px;font-size:14.5px;line-height:1.75;display:block;-webkit-line-clamp:unset}
.pt-page .pt-foot{margin-top:16px;text-align:center}
.pt-card.is-hit{animation:ptHit 1.2s ease}
@keyframes ptHit{0%,100%{box-shadow:0 0 0 0 rgba(244,89,60,0)}30%{box-shadow:0 0 0 3px rgba(244,89,60,.35)}}
/* ============ 孕期盲盒 · 价值感改造（2026-10-01）：下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
/* 下周预告：卡片剪影（同一张插画压成纯色）+ 倒计时 */