孕期小知识：首页只留标题+一行摘要+四个入口，全文挪到详情页 #detailTips

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

index.html

@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26100119 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100120 缓存版本标记：改 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 第四节） -->
@@ -340,22 +340,20 @@
             <h2 class="pt-title"><span class="pt-wk" id="ptWk">孕 — 周</span>今日孕期小知识</h2>
             <span class="pt-when" id="ptWhen"></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>
+          <!-- 2026-10-01 用户反馈「文字太多」：首页只留核心 —— 今天这条的标题 + 一行摘要，下面一排四个入口；
+               整段正文、7 天回看、宝宝/妈妈/饮食/留心四张卡全挪进详情页 #detailTips（点卡或点入口进去，入口会滚到对应那张）。 -->
+          <div class="pt-mini" id="ptMini" role="button" tabindex="0" aria-label="查看今日孕期小知识详情">
+            <span class="pt-float" id="ptMiniFloat" aria-hidden="true"></span>
+            <div class="pt-mini-t" id="ptMiniT"></div>
+            <div class="pt-mini-d" id="ptMiniD"></div>
+            <span class="pt-mini-go">看详情 ›</span>
           </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>
+          <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 id="ptChipBabyT">宝宝这周</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>
 
         <!-- 模块二 · 今天的动线。
@@ -1179,6 +1177,35 @@
 
 
 
+  <!-- ================= 孕期小知识 详情页（2026-10-01）=================
+       首页 #pregTips 只放标题 + 一行摘要，完整内容都在这里：今天这条全文 + 本周 7 天回看 + 四张卡全文 + 免责。
+       各 id（ptT/ptD/ptDays/ptBaby…）仍由 renderTips()/showTip() 写，只是从首页搬到了这一页。 -->
+  <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-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>
+      <h3 class="pt-sub">这一周</h3>
+      <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">

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100119';
+  var VER = '26100120';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -3773,6 +3773,14 @@
     $('#ptMom').textContent = wk.mom || '';
     $('#ptEat').textContent = wk.eat || '';
     $('#ptCare').textContent = wk.care || '';
+    /* 首页只放核心：今天这条的标题 + 一行摘要（CSS 截一行），全文在详情页 */
+    const td = wk.days[today] || wk.days[0];
+    $('#ptMiniFloat').textContent = size.emoji;
+    $('#ptMiniT').textContent = td.t || '';
+    $('#ptMiniD').textContent = td.d || '';
+    $('#ptChipBaby').textContent = size.emoji;
+    $('#ptChipBabyT').textContent = '像' + size.name;
+    $('#ptDtTitle').textContent = '孕 ' + state.week + ' 周 · 孕期小知识';
     /* 一周 7 个圆点：以前可回看，今天实心，以后锁着 */
     const box = $('#ptDays');
     box.textContent = '';
@@ -3810,10 +3818,27 @@
     const body = $('#ptBody');
     body.classList.remove('is-in'); void body.offsetWidth; body.classList.add('is-in');   // 重播进场动画
   }
-  /* 四张小卡压成横滑后正文只露 3 行，点一下展开全文、再点收起 */
+  /* 首页小卡 / 四个入口 → 详情页。入口带 data-pt，进去后滚到对应那张卡并闪一下。
+     每次进来都回到今天那一条（上次可能停在回看的某天）。 */
+  function openTips(key) {
+    const wk = TIPS && TIPS[Math.max(4, Math.min(40, state.week || 0))];
+    if (wk) showTip(wk, Math.max(0, Math.min(6, state.day || 0)), Math.max(0, Math.min(6, state.day || 0)));
+    openPanel('detailTips');
+    const body = $('#detailTips .detail-body');
+    body.scrollTop = 0;
+    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);   // 等详情页滑入（.38s）再滚
+  }
   (function () {
-    const g = $('#ptGrid');
-    if (g) g.addEventListener('click', e => { const c = e.target.closest('.pt-card'); if (c) c.classList.toggle('is-open'); });
+    const m = $('#ptMini'), ch = $('#ptChips');
+    if (m) {
+      m.addEventListener('click', () => openTips());
+      m.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openTips(); } });
+    }
+    if (ch) ch.addEventListener('click', e => { const b = e.target.closest('.pt-chip'); if (b) openTips(b.dataset.pt); });
   })();
   function revealTipsGrid() {
     const g = $('#ptGrid');

mama-box.css

@@ -2708,6 +2708,46 @@ a.skip:focus{left:16px;top:16px}
 .pt-card p{font-size:13px;line-height:1.6;margin-top:6px}
 .pt-foot{font-size:11.5px}
 
+/* 孕期小知识 · 首页只放核心（2026-10-01 用户反馈「文字太多」）：
+   首页 = 一张小卡（今天这条的标题 + 一行摘要 + 看详情）+ 一排四个入口；正文 / 7 天 / 四张卡全文都在详情页 #detailTips。 */
+.pt-mini{position:relative;overflow:hidden;border-radius:20px;padding:14px 16px 12px;cursor:pointer;
+  background:linear-gradient(135deg,#FFE9E1 0%,#FFF1E6 55%,#FFF7EE 100%);transition:transform .16s}
+.pt-mini:active{transform:scale(.98)}
+.pt-mini::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;
+  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);pointer-events:none}
+.pt-mini .pt-float{top:12px;font-size:30px}
+.pt-mini-t{font-size:17px;font-weight:800;color:#5A2E22;letter-spacing:-.2px;padding-right:44px}
+.pt-mini-d{margin-top:4px;padding-right:30px;font-size:14px;color:var(--ink-2);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pt-mini-go{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--brand)}
+.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:4px;padding:10px 2px 9px;border:0;border-radius:14px;
+  font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);min-width:0;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}
+.preg-tips .pt-foot{display:none}
+
+/* 详情页：今天这条放大；四张卡竖排、全文不截断 */
+.pt-page{padding:16px 16px 40px}
+.pt-page .pt-today{padding:16px 18px 12px}
+.pt-page .pt-float{font-size:34px;top:12px}
+.pt-page .pt-t{margin-top:8px;font-size:18px}
+.pt-page .pt-d{margin-top:6px;font-size:15px;line-height:1.8}
+.pt-page .pt-days{margin-top:12px;padding-top:10px}
+.pt-page .pt-day i{width:28px;height:28px;line-height:28px;font-size:12.5px}
+.pt-sub{margin:20px 2px 10px;font-size:15.5px;font-weight:800}
+.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）：下周预告 / 待解锁任务 / 集齐奖励 / 宝宝周记 ============ */
 /* 下周预告：卡片剪影（同一张插画压成纯色）+ 倒计时 */
 .bx-next{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:var(--sh)}