孕妈广场：正文扩写到 400~700 字；列表页加大号「全部/家庭关系/宝妈经验」分类；v26110112

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-01 08:00:44 +00:00
parent 4125e82540
commit 7cd3702554
4 changed files with 178 additions and 130 deletions
--- a/guangchang/index.html
+++ b/guangchang/index.html
@@ -40,11 +40,28 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 .nav h1 span{background:linear-gradient(transparent 60%,#FFD0DC 60%,#FFD0DC 92%,transparent 92%);padding:0 3px}
 .nav .sp{width:36px}

-.tabs{display:flex;gap:6px;padding:2px 12px 10px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
+/* ---------- 一级分类：全部 / 家庭关系 / 宝妈经验（11-01 第二版：原先右侧小分段太不显眼） ---------- */
+.cats{display:flex;gap:8px;padding:4px 12px 10px}
+.cats button{flex:1;min-width:0;height:42px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;background:#fff;border:1.5px solid #F1E2DA;
+  font-size:15px;font-weight:800;color:#6E5A55;letter-spacing:.3px;box-shadow:0 2px 8px rgba(170,110,90,.06);transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
+.cats button .ci2{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--cb);color:var(--cf)}
+.cats button .ci2 .ic{width:14px;height:14px}
+.cats button small{font-size:11px;font-weight:700;color:#B09A94;margin-left:-2px}
+.cats button.on{background:var(--cf);border-color:var(--cf);color:#fff;box-shadow:0 6px 14px -6px var(--cf)}
+.cats button.on .ci2{background:rgba(255,255,255,.22);color:#fff}
+.cats button.on small{color:rgba(255,255,255,.8)}
+.cats button:active{transform:scale(.97)}
+.cats .c-all{--cf:#F4593C;--cb:#FFEDE6}
+.cats .c-family{--cf:#E0566F;--cb:#FFE6EB}
+.cats .c-exp{--cf:#2E8A7C;--cb:#DDF2EE}
+.tabs{display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .tabs::-webkit-scrollbar{display:none}
 .tabs::after{content:"";flex:none;width:6px}
 .tabs button{flex:none;height:30px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.75);border:1px solid #F0E2DA;font-size:13px;font-weight:600;color:#7A6663;white-space:nowrap;transition:background .15s,color .15s}
 .tabs button.on{background:#2F2424;border-color:#2F2424;color:#fff;font-weight:800}
+.tabs.k-family button.on{background:#FFE6EB;border-color:#F3A9B7;color:#C23A55}
+.tabs.k-exp button.on{background:#DDF2EE;border-color:#93CFC4;color:#21705F}
+.tabs.k-family button.on .hb,.tabs.k-exp button.on .hb{background:#FF5A3C}
 .tabs button .hb{display:inline-block;margin-left:3px;padding:0 4px;border-radius:5px;background:#FF5A3C;color:#fff;font-size:9.5px;font-weight:800;line-height:15px;vertical-align:1px}
 .tabs button.on .hb{background:#FF7A5C}

@@ -53,6 +70,8 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  background:linear-gradient(150deg,var(--c1),var(--c2));color:var(--tk);box-shadow:0 12px 26px -16px var(--tk)}
 .th .tg{position:absolute;right:-6px;top:-10px;font-size:110px;font-weight:900;line-height:1;color:#fff;opacity:.5;font-family:"STKaiti","KaiTi","Kaiti SC",serif;pointer-events:none}
 .th .tc{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.65);font-size:11px;font-weight:800;letter-spacing:.5px}
+.th .tc.k-family{background:#E0566F;color:#fff}
+.th .tc.k-exp{background:#2E8A7C;color:#fff}
 .th h2{position:relative;margin:8px 0 4px;font-size:21px;font-weight:900;line-height:1.3;color:#2A1E1E;letter-spacing:.3px}
 .th h2 em{font-style:normal;color:var(--tk);margin-right:2px}
 .th p{position:relative;margin:0;max-width:270px;font-size:12.5px;line-height:1.6;color:#5E4E4A}
@@ -64,12 +83,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 .th .avs img:first-child{margin-left:0}
 .th .join{flex:none;height:32px;padding:0 14px;border-radius:99px;background:#fff;color:var(--tk);font-size:13px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.08);display:inline-flex;align-items:center;gap:4px}
 .th .join .ic{width:14px;height:14px}
-/* 「全部」时的一句引导 */
+/* 未选具体话题时的一句引导 */
 .intro{display:flex;align-items:center;gap:8px;margin:2px 14px 0;font-size:12px;color:var(--muted)}
 .intro b{color:var(--ink);font-weight:800}
-.intro .seg{margin-left:auto;display:flex;padding:2px;border-radius:99px;background:#EFE4DD}
-.intro .seg button{height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:700;color:#8A746E}
-.intro .seg button.on{background:#fff;color:#E04A2E;box-shadow:0 1px 4px rgba(190,120,96,.18)}

 /* ---------- 瀑布流 ---------- */
 .wf{display:flex;align-items:flex-start;gap:8px;padding:10px 12px 0}
@@ -89,6 +105,8 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 .lk.pop .ic{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.35)}}
 .nc .ttag{position:absolute;left:7px;top:7px;z-index:2;height:18px;padding:0 6px;border-radius:6px;background:rgba(40,28,26,.38);color:#fff;font-size:10px;font-weight:700;line-height:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);max-width:82%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.nc .ttag.k-family{background:rgba(214,74,100,.82)}
+.nc .ttag.k-exp{background:rgba(38,128,114,.82)}

 .end{padding:22px 0 calc(26px + var(--safe-b));text-align:center}
 .end b{display:block;font-size:12px;font-weight:600;color:#C2ABA4;letter-spacing:2px}
@@ -158,7 +176,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 .dbody{padding:16px 18px 6px}
 .dbody h2{margin:0;font-size:19px;font-weight:900;line-height:1.45;letter-spacing:.2px}
 .dbody .tx{margin-top:10px;font-size:15px;line-height:1.85;color:#3A302C;letter-spacing:.2px}
-.dbody .tx p{margin:0 0 10px}
+.dbody .tx p{margin:0 0 14px}
+.dbody .tx p.li{margin:-6px 0 14px;padding-left:1.3em;text-indent:-1.3em}
+.dbody .tx p.li+p.li{margin-top:-10px}
 .dbody .tgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
 .dbody .tgs button{height:24px;padding:0 9px;border-radius:99px;background:var(--peach);color:#D9583C;font-size:12.5px;font-weight:700}
 .dbody .tm{margin-top:12px;font-size:12px;color:#B8A49E}
@@ -216,6 +236,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  <symbol id="i-star-f" viewBox="0 0 24 24"><path d="M12 3.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z" fill="currentColor"/></symbol>
  <symbol id="i-chat" viewBox="0 0 24 24"><path d="M4.5 18.8V7.6A3 3 0 017.5 4.6h9a3 3 0 013 3v6a3 3 0 01-3 3H8.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></symbol>
  <symbol id="i-pen" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+  <symbol id="i-grid" viewBox="0 0 24 24"><path d="M4.5 4.5h6v6h-6zM13.5 4.5h6v6h-6zM4.5 13.5h6v6h-6zM13.5 13.5h6v6h-6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
+  <symbol id="i-home" viewBox="0 0 24 24"><path d="M3.8 11.2L12 4.3l8.2 6.9M6.2 9.4v10h11.6v-10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17.6s-2.9-1.7-2.9-3.6c0-1 .8-1.7 1.6-1.7.6 0 1 .3 1.3.8.3-.5.7-.8 1.3-.8.8 0 1.6.7 1.6 1.7 0 1.9-2.9 3.6-2.9 3.6z" fill="currentColor"/></symbol>
+  <symbol id="i-bulb" viewBox="0 0 24 24"><path d="M9 17.5h6M9.8 20.5h4.4M12 3.5a6 6 0 00-3.6 10.8c.5.4.8 1 .8 1.6v1.6h5.6v-1.6c0-.6.3-1.2.8-1.6A6 6 0 0012 3.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
 </svg>

@@ -226,6 +249,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
      <h1><span>孕妈广场</span></h1>
      <span class="sp"></span>
    </div>
+    <div class="cats" id="cats" role="tablist" aria-label="分类"></div>
    <div class="tabs" id="tabs" role="tablist"></div>
  </div>
  <div id="head"></div>
@@ -250,8 +274,8 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 </div>
 <div class="toast" id="toast"></div>

-<script src="topics.js?v=26110109"></script>
-<script src="data.js?v=26110109"></script>
+<script src="topics.js?v=26110112"></script>
+<script src="data.js?v=26110112"></script>
 <script>
 (function () {
  'use strict';
@@ -361,15 +385,26 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  }
  function cardHTML(n, showTopic) {
    return '<button type="button" class="nc" data-id="' + n.id + '"><div class="cvw">' +
-      (showTopic ? '<span class="ttag"># ' + esc(TBY[n.t].name) + '</span>' : '') +
+      (showTopic ? '<span class="ttag k-' + TBY[n.t].cat + '"># ' + esc(TBY[n.t].name) + '</span>' : '') +
      coverHTML(n, 'calc(var(--cw) * ' + n.ratio + ')') + '</div>' +
      '<div class="nb"><h3>' + esc(n.title) + '</h3><div class="nf"><img src="' + avSrc(n.author) + '" alt="" loading="lazy"><span class="nm">' + esc(n.author) + '</span>' + likeHTML(n) + '</div></div></button>';
  }

  /* ---------- 列表 ---------- */
+  /* cur 当前话题（'' = 不限话题）；catF 一级分类（'' 全部 / family 家庭关系 / exp 宝妈经验）。选了话题时 catF 恒等于该话题的 cat */
  var cur = '', catF = '';
+  var CATS = [['', '全部', 'i-grid'], ['family', '家庭关系', 'i-home'], ['exp', '宝妈经验', 'i-bulb']];
+  var CAT_NAME = { family: '家庭关系', exp: '宝妈经验' };
+  var inCat = function (t) { return !catF || t.cat === catF; };
+  function renderCats() {
+    $('#cats').innerHTML = CATS.map(function (x) {
+      return '<button type="button" role="tab" data-c="' + x[0] + '" class="c-' + (x[0] || 'all') + (catF === x[0] ? ' on' : '') + '" aria-selected="' + (catF === x[0]) + '">' +
+        '<span class="ci2"><svg class="ic"><use href="#' + x[2] + '"/></svg></span>' + x[1] + '</button>';
+    }).join('');
+  }
  function renderTabs() {
-    var h = '<button type="button" data-t="" class="' + (cur ? '' : 'on') + '">全部</button>' + T.map(function (t) {
+    $('#tabs').className = 'tabs' + (catF ? ' k-' + catF : '');
+    var h = '<button type="button" data-t="" class="' + (cur ? '' : 'on') + '">' + (catF ? '全部' + CAT_NAME[catF] : '全部话题') + '</button>' + T.filter(inCat).map(function (t) {
      return '<button type="button" data-t="' + t.id + '" class="' + (cur === t.id ? 'on' : '') + '">' + esc(t.name) + (t.hot ? '<i class="hb">热</i>' : '') + '</button>';
    }).join('');
    $('#tabs').innerHTML = h;
@@ -377,20 +412,20 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  function renderHead() {
    var t = TBY[cur], el = $('#head');
    if (!t) {
-      el.innerHTML = '<div class="intro"><span><b>' + T.length + '</b> 个话题 · 都是孕妈们的真心话</span><span class="seg" id="seg">' +
-        [['', '推荐'], ['family', '家庭'], ['exp', '经验']].map(function (x) { return '<button type="button" data-c="' + x[0] + '" class="' + (catF === x[0] ? 'on' : '') + '">' + x[1] + '</button>'; }).join('') + '</span></div>';
+      var tip = catF === 'family' ? '老公、婆婆、爸妈，家里那些暖事和糟心事' : catF === 'exp' ? '过来人的干货，少走弯路' : '都是孕妈们的真心话';
+      el.innerHTML = '<div class="intro"><span><b>' + T.filter(inCat).length + '</b> 个话题 · ' + tip + '</span></div>';
      return;
    }
    var d = D[t.id] || {};
    var avs = [0, 1, 2, 3].map(function (k) { return '<img src="' + avSrc(t.id + k) + '" alt="">'; }).join('');
    el.innerHTML = '<div class="th" style="--c1:' + t.c[0] + ';--c2:' + t.c[1] + ';--tk:' + t.ink + '"><span class="tg" aria-hidden="true">' + esc(t.g) + '</span>' +
-      '<span class="tc">' + (t.cat === 'family' ? '家庭关系' : '宝妈经验') + (t.hot ? ' · 热门' : '') + '</span>' +
+      '<span class="tc k-' + t.cat + '">' + (t.cat === 'family' ? '家庭关系' : '宝妈经验') + (t.hot ? ' · 热门' : '') + '</span>' +
      '<h2><em>#</em>' + esc(t.name) + '</h2><p>' + esc(d.desc || '') + '</p>' +
      '<div class="tf"><span class="ts"><span class="avs">' + avs + '</span><span><b>' + kfmt(t.n) + '</b> 篇笔记 · <b>' + kfmt(t.talk) + '</b> 人在聊</span></span>' +
      '<button type="button" class="join" id="join"><svg class="ic"><use href="#i-plus"/></svg>参与话题</button></div></div>';
  }
  function renderFeed() {
-    var list = cur ? NOTES.filter(function (n) { return n.t === cur; }) : MIXED.filter(function (n) { return !catF || TBY[n.t].cat === catF; });
+    var list = cur ? NOTES.filter(function (n) { return n.t === cur; }) : MIXED.filter(function (n) { return inCat(TBY[n.t]); });
    var wf = $('#wf'), cols = wf.children;
    cols[0].innerHTML = ''; cols[1].innerHTML = '';
    var cw = cols[0].clientWidth || 175;
@@ -408,6 +443,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  function setQuery(t, n) {
    var q = new URLSearchParams(location.search);
    if (t) q.set('t', t); else q.delete('t');
+    if (!t && catF) q.set('c', catF); else q.delete('c');   /* 只选了分类没选话题时记在 ?c=，刷新 / 详情返回还在原分类 */
    if (n) q.set('n', n); else q.delete('n');
    var s = q.toString();
    return location.pathname + (s ? '?' + s : '') + location.hash;   /* hash（身份）原样保留 */
@@ -415,7 +451,8 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  function selectTopic(t, smooth) {
    if (!TBY[t]) t = '';
    cur = t;
-    renderTabs(); renderHead(); renderFeed();
+    if (t) catF = TBY[t].cat;   /* 首页带 ?t= 进来 / 点详情里的话题标签：分类跟着切到该话题所属类 */
+    renderCats(); renderTabs(); renderHead(); renderFeed();
    history.replaceState(history.state, '', setQuery(cur, ''));
    var on = $('#tabs .on');
    if (on) { var tb = $('#tabs'); tb.scrollLeft = Math.max(0, on.offsetLeft - tb.clientWidth / 2 + on.offsetWidth / 2); }
@@ -425,9 +462,13 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
    var b = e.target.closest('button[data-t]');
    if (b && b.dataset.t !== cur) { haptic(); selectTopic(b.dataset.t); }
  });
+  $('#cats').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-c]');
+    if (!b || (b.dataset.c === catF && !cur)) return;
+    catF = b.dataset.c; haptic();
+    selectTopic('');   /* 换分类回到该类「全部」，避免停在别类话题上 */
+  });
  $('#head').addEventListener('click', function (e) {
-    var s = e.target.closest('#seg button');
-    if (s && s.dataset.c !== catF) { catF = s.dataset.c; haptic(); renderHead(); renderFeed(); return; }
    if (e.target.closest('#join')) toast('发布笔记马上开放，先去看看大家怎么说吧');
  });

@@ -454,7 +495,12 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin

  /* ---------- 详情 ---------- */
  var openId = '', pushed = false;
-  function bodyHTML(s) { return String(s).split(/\n+/).filter(Boolean).map(function (p) { return '<p>' + esc(p) + '</p>'; }).join(''); }
+  /* 正文按 \n 分段；「1. 」「2、」开头的行当清单项：悬挂缩进、条间距更紧 */
+  function bodyHTML(s) {
+    return String(s).split(/\n+/).map(function (p) { return p.trim(); }).filter(Boolean).map(function (p) {
+      return /^\d{1,2}[.、．]\s*/.test(p) ? '<p class="li">' + esc(p) + '</p>' : '<p>' + esc(p) + '</p>';
+    }).join('');
+  }
  function commentHTML(c, mine) {
    if (mine) {
      return '<div class="ci mine"><span class="me">我</span><div class="ci-b"><div class="ci-n"><b>' + esc(MYNAME) + '</b><span class="mt">我</span></div>' +
@@ -534,7 +580,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  $('#dsc').addEventListener('scroll', function () { $('#dnav').classList.toggle('on', this.scrollTop > 8); }, { passive: true });
  $('#dsc').addEventListener('click', function (e) {
    var g = e.target.closest('[data-go]');
-    if (g) { var to = g.dataset.go; closeNote(); setTimeout(function () { selectTopic(to); }, 60); return; }
+    if (g) { var to = g.dataset.go; closeNote(); setTimeout(function () { if (!to) catF = ''; selectTopic(to); }, 60); return; }
    var cl = e.target.closest('[data-cl]');
    if (cl) {
      var k = cl.dataset.cl, on;
@@ -579,7 +625,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin

  /* ---------- 返回 ---------- */
  function homeURL() {
-    var q = new URLSearchParams(location.search); q.delete('t'); q.delete('n');
+    var q = new URLSearchParams(location.search); q.delete('t'); q.delete('n'); q.delete('c');
    var s = q.toString();
    return '../' + (s ? '?' + s : '') + location.hash;
  }
@@ -623,6 +669,8 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin

  /* ---------- 启动 ---------- */
  var deep = new URLSearchParams(location.search).get('n');   /* 先读：selectTopic 会 replaceState 把 n 去掉 */
+  var c0 = new URLSearchParams(location.search).get('c');
+  if (c0 === 'family' || c0 === 'exp') catF = c0;
  selectTopic(param('t') && TBY[param('t')] ? param('t') : '', false);
  if (deep && NBY[deep]) openNote(deep, false);
  var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(renderFeed, 150); });