From b3b768722a079f911bc56ed18c84a76497f342fa Mon Sep 17 00:00:00 2001 From: Karlcarlo Date: Thu, 1 Oct 2026 13:09:56 +0000 Subject: [PATCH] =?UTF-8?q?=E5=AD=95=E6=9C=9F=E5=B0=8F=E7=9F=A5=E8=AF=86?= =?UTF-8?q?=EF=BC=9A=E9=A6=96=E9=A1=B5=E5=9B=9B=E5=BC=A0=E5=8D=A1=E5=8E=BB?= =?UTF-8?q?=E6=8E=89=E6=96=87=E5=AD=97=EF=BC=8C=E6=94=B9=E6=88=90=E5=9B=BE?= =?UTF-8?q?=E6=A0=87+=E6=A0=87=E9=A2=98=E5=9B=9B=E4=B8=AA=E5=85=A5?= =?UTF-8?q?=E5=8F=A3=EF=BC=9B=E7=82=B9=E8=BF=9B=E8=AF=A6=E6=83=85=E9=A1=B5?= =?UTF-8?q?=20#detailTips=20=E7=9C=8B=E5=9B=9B=E5=BC=A0=E5=8D=A1=E5=85=A8?= =?UTF-8?q?=E6=96=87=EF=BC=88=E6=BB=9A=E5=88=B0=E5=AF=B9=E5=BA=94=E5=8D=A1?= =?UTF-8?q?=E5=B9=B6=E9=AB=98=E4=BA=AE=EF=BC=89(v26100131)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- index.html | 32 ++++++++++++++++++++++++++------ js/app.js | 50 +++++++++++++++++++++----------------------------- mama-box.css | 25 ++++++++++++++++++++----- 3 files changed, 67 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 38b0ba3..1c937ec 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -325,11 +325,12 @@
-
-
宝宝这周

-
妈妈身体

-
吃点什么

-
这周留心

+ +
+ + + +

仅供参考，身体有任何不适请以医生意见为准

@@ -1175,6 +1176,25 @@ + +
+
+ + 孕期小知识 +
+
+
+
宝宝这周

+
妈妈身体

+
吃点什么

+
这周留心

+
+

仅供参考，身体有任何不适请以医生意见为准

+
+
+
diff --git a/js/app.js b/js/app.js index 0acb639..ef0d984 100644 --- a/js/app.js +++ b/js/app.js @@ -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'); diff --git a/mama-box.css b/mama-box.css index 5446ec1..c6a8217 100644 --- a/mama-box.css +++ b/mama-box.css @@ -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）：下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */ /* 下周预告：卡片剪影（同一张插画压成纯色）+ 倒计时 */