v26110286 孕期百问前10条加关键词方块（分类同色系），试看效果

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-04 01:56:37 +00:00
parent a6e9ddaf5d
commit 95a4255904
9 changed files with 47 additions and 23 deletions
--- a/guangchang/ceshi/index.html
+++ b/guangchang/ceshi/index.html
@@ -320,8 +320,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
 </div>
 <div class="toast" id="toast"></div>

-<script src="meta.js?v=26110285"></script>
-<script src="tests.js?v=26110285"></script>
+<script src="meta.js?v=26110286"></script>
+<script src="tests.js?v=26110286"></script>
 <script>
 (function () {
  'use strict';
--- a/guangchang/index.html
+++ b/guangchang/index.html
@@ -706,10 +706,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 <div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
 <div class="toast" id="toast"></div>

-<script src="topics.js?v=26110285"></script>
-<script src="data.js?v=26110285"></script>
-<script src="feed.js?v=26110285"></script>
-<script src="ceshi/meta.js?v=26110285"></script>
+<script src="topics.js?v=26110286"></script>
+<script src="data.js?v=26110286"></script>
+<script src="feed.js?v=26110286"></script>
+<script src="ceshi/meta.js?v=26110286"></script>
 <script>
 (function () {
  'use strict';
@@ -775,7 +775,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  var CMD = null, CMERR = false;
  /* 头像编码：数字 = av/NNNN.webp（旧代码头像）；'av:c012' = av/c012.webp（卡通/可爱卡通）；'/…' = 站内绝对路径（内置头像库 /_bridge/avatars/）；其余 = assets/img/mom/xxx.jpg */
  var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; };
-  fetch('cm.json?v=26110285').then(function (r) { return r.json(); }).then(function (j) {
+  fetch('cm.json?v=26110286').then(function (r) { return r.json(); }).then(function (j) {
    CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
  }).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
  function commentsOf(n) {
--- a/guangchang/mine/index.html
+++ b/guangchang/mine/index.html
@@ -105,7 +105,7 @@ main{padding:6px 16px 0}
 </div>
 <div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div>

-<script src="../topics.js?v=26110285"></script>
+<script src="../topics.js?v=26110286"></script>
 <script>
 (function () {
  'use strict';
--- a/index.html
+++ b/index.html
@@ -7,10 +7,10 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26110285 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26110286 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <link rel="stylesheet" href="night.css">
-<link rel="stylesheet" href="js/hero-cd.css?v=26110285">
+<link rel="stylesheet" href="js/hero-cd.css?v=26110286">
 <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
 <script>try{if(localStorage.getItem('mmbox.night.v1')==='1'){document.documentElement.classList.add('night');document.querySelector('meta[name=theme-color]').content='#2A2340'}}catch(e){}</script>
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
@@ -1711,6 +1711,17 @@
      .qa-it.open .qa-ch{transform:rotate(90deg)}
      .qa-a{display:none;margin:-4px 12px 14px 46px;padding:11px 13px;border-radius:12px;background:#FFF6F2;font-size:14px;line-height:1.75;color:#4A3B39}
      .qa-it.t3 .qa-a{margin-left:56px}
+      /* 11-04 关键词方块（app.js QA_KW）：分类同色系浅底 + 深色粗字，2 字一行大、3 字一行小、4 字两行 */
+      .qa-kw{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;margin-top:0;border-radius:14px;font-style:normal;font-weight:900;text-align:center;letter-spacing:.5px}
+      .qa-kw span{display:block;line-height:1.15}
+      .qa-kw.n1 span,.qa-kw.n2 span{font-size:16px}.qa-kw.n3 span{font-size:13.5px;letter-spacing:0}.qa-kw.n4 span{font-size:13.5px}
+      .qa-kw.c1{background:#FFE9EF;color:#E0507A}.qa-kw.c2{background:#EEEBFF;color:#6E5BD6}.qa-kw.c3{background:#E3F4FF;color:#2F86C9}
+      .qa-kw.c4{background:#FFF1DA;color:#D5871C}.qa-kw.c5{background:#E6F6EE;color:#2E9C6A}.qa-kw.c6{background:#FFEDE5;color:#E5683F}
+      .qa-rk{position:absolute;left:-5px;top:-5px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;color:#fff;font-size:10.5px;font-weight:900;line-height:14px;font-style:italic}
+      .qa-rk.r1{background:linear-gradient(135deg,#F0453A,#FF8A3D)}.qa-rk.r2{background:linear-gradient(135deg,#FF8A2E,#FFC06E)}.qa-rk.r3{background:linear-gradient(135deg,#8D6BFF,#B9A3FF)}
+      .qa-it.kw .qa-q{gap:12px}
+      .qa-it.kw .qa-a,.qa-it.kw.t3 .qa-a{margin-left:72px}
+      html.night .qa-rk{border-color:#2F2737}
      .qa-it.open .qa-a{display:block}
      .qa-it.hit{animation:qaHit 1.2s ease}
      @keyframes qaHit{0%,40%{box-shadow:0 0 0 2px #F4593C}100%{box-shadow:0 3px 12px -2px rgba(190,120,100,.10)}}
@@ -2559,17 +2570,17 @@
 <script src="/_bridge/avatar-picker.js?v=26101105"></script>
 <script src="/_bridge/hand-icons.js?v=26101202"></script>
 <script src="js/zodiac-art.js"></script>
-<script src="guangchang/topics.js?v=26110285"></script>
+<script src="guangchang/topics.js?v=26110286"></script>
 <script src="js/app.js"></script>
-<script src="js/hero-cd.js?v=26110285"></script>
-<script src="js/kit.js?v=26110285"></script>
+<script src="js/hero-cd.js?v=26110286"></script>
+<script src="js/kit.js?v=26110286"></script>
 <script>
 /* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
   11-02 用户：「用第一版，放到预览页面上」；后改定彩色卡 → 不带参数也默认用 V6 合并版（广场卡堆 + 其他妈妈也在搜 + 测一测第 4 版彩色卡），不滚动、不显示效果稿角标 */
 (function () {
  var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
  if (!m) window.__gcDefault = 1;
-  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110285';
+  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110286';
  var dir = n === '4' || n === '6' ? 'js/gch/' : 'demo/gch/';   /* 11-03 上正式：定稿 V6（含它套的 V4）并进 js/gch/，其余效果稿仍在 demo/ */
  l.rel = 'stylesheet'; l.href = dir + 'v' + n + '.css?' + q;
  s.src = dir + 'v' + n + '.js?' + q;
@@ -2578,7 +2589,7 @@
  /* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；11-03 已并进 js/gch/ */
  if (!/[?&]brand=0/.test(location.search)) {
    var bl = document.createElement('link'), bs = document.createElement('script');
-    bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110285'; bs.src = 'js/gch/brand.js?v=26110285';
+    bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110286'; bs.src = 'js/gch/brand.js?v=26110286';
    document.head.appendChild(bl); document.body.appendChild(bs);
  }
 })();
@@ -2589,7 +2600,7 @@
 <script src="js/hero-fx.js"></script>
 <!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
 <script src="js/baby-limbs.js?v=26101201"></script>
-<script src="js/coach.js?v=26110285"></script>
+<script src="js/coach.js?v=26110286"></script>
 <script src="js/birth-flow.js?v=26110201"></script>

 <!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26110285';
+  var VER = '26110286';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

@@ -5611,6 +5611,11 @@
    $('#qaHeroD').innerHTML = '<span class="qa-avs">' + [0, 1, 2, 3, 4].map(i => avaImg(AVA_TOP[(s0 + i * 2) % AVA_TOP.length])).join('') + '</span>' + wan(tot * 0.62) + ' 孕妈在这找答案';
    const QA_BD = i => i < 1 ? ['爆', 'bao'] : i < 7 ? ['热', 're'] : i < 10 ? ['新', 'xin'] : null;
    const QA_EM = { 身体: '🤰', 准备: '📋', 产检: '🩺', 宝宝: '👶', 生活: '🏠', 营养: '🥗', 职场: '💼', 花钱: '💰', 心情: '💗', 趣味: '🎈', 补剂: '💊', 专题: '📌' };
+    const QA_KW = {
+      '生娃计算器，到底要花多少钱？': '生娃花费', '大排畸什么时候做？能看出什么？': '大排畸', '糖耐怎么做？没过怎么办？': '糖耐',
+      '四维彩超有必要做吗？': '四维彩超', '胎动多少算正常？怎么数？': '数胎动', '妊娠期糖尿病要紧吗？怎么控糖？': '孕期控糖',
+      '肚子发紧是宫缩吗？': '宫缩', 'B 超说宝宝偏大或偏小，怎么办？': '胎儿大小', '孕期腿抽筋怎么办？': '抽筋', '糖耐前一天怎么吃？': '糖耐饮食'
+    };
    const QA_TC = { 身体: 'c1', 准备: 'c2', 产检: 'c3', 宝宝: 'c4', 生活: 'c5', 营养: 'c6', 职场: 'c2', 花钱: 'c6', 心情: 'c1', 趣味: 'c4', 补剂: 'c3', 专题: 'c5' };
    $('#qaTopic').classList.add('hide');
    const inBand = x => !!(band && x.st && x.st.indexOf(band) >= 0);
@@ -5642,6 +5647,14 @@
      if (inBand(x)) it.dataset.st = '1';
      const h = document.createElement('button'); h.type = 'button'; h.className = 'qa-q';
      const no = document.createElement('i'); no.className = 'qa-no'; no.textContent = i < 9 ? '0' + (i + 1) : i + 1;
+      /* 11-04 用户：「全是字，从标题里提炼 2～4 个核心字做成前面的小图标，扫一眼就知道讲啥」→ 先做孕 26 周前 10 条看效果（QA_KW），
+         有关键词的条目把序号换成关键词方块（底色 / 字色跟分类彩签同色系），前 3 条右上角带名次小圆点；没配关键词的照旧显示序号 */
+      const kw = QA_KW[x.q];
+      if (kw) {
+        it.classList.add('kw');
+        no.className = 'qa-kw ' + (QA_TC[x.tag] || 'c5') + ' n' + kw.length;
+        no.innerHTML = '<span>' + (kw.length === 4 ? kw.slice(0, 2) + '<br>' + kw.slice(2) : kw) + '</span>' + (i < 3 ? '<b class="qa-rk r' + (i + 1) + '">' + (i + 1) + '</b>' : '');
+      }
      const t = document.createElement('span'); t.className = 'qa-m';
      const tq = document.createElement('span'); tq.className = 'qa-tx'; tq.textContent = x.q; t.appendChild(tq);
      const mt = document.createElement('span'); mt.className = 'qa-mt';
--- a/js/gch/v4.js
+++ b/js/gch/v4.js
@@ -231,5 +231,5 @@
 }
  /* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
  if (window.GC_FEED) init();
-  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110285'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
+  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110286'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
 })();
--- a/js/gch/v6.js
+++ b/js/gch/v6.js
@@ -6,9 +6,9 @@
 (function () {
  var sec = document.getElementById('gcHome');
  if (!sec) return;
-  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110285';
+  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110286';
  document.head.appendChild(l);
-  var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110285';
+  var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110286';
  s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); };   /* v4 要先拉 feed.js 才渲染 */
  document.body.appendChild(s);

--- a/js/kit.js
+++ b/js/kit.js
@@ -9,7 +9,7 @@
  if (/[?&]kit=0(?:&|$)/.test(location.search)) return;
  var box = document.getElementById('kit'), sec = document.getElementById('kitHome');
  if (!box || !sec) return;
-  var V = '26110285';
+  var V = '26110286';
  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/kit.css?v=' + V; document.head.appendChild(l);
  document.documentElement.classList.add('has-kit');

--- a/topic/_shared/tools.js
+++ b/topic/_shared/tools.js
@@ -68,7 +68,7 @@
  function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }

  function related(box) {
-    getJSON('../_shared/idx.json?v=26110285').then(function (idx) {
+    getJSON('../_shared/idx.json?v=26110286').then(function (idx) {
      var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; });
      var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0;
      var rest = idx.filter(function (x) { return x[0] !== SLUG; });
@@ -175,7 +175,7 @@
    }
    fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
      .then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {});
-    getJSON('../_shared/cm/' + SLUG + '.json?v=26110285').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
+    getJSON('../_shared/cm/' + SLUG + '.json?v=26110286').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
  }

  function extras(el) {