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

孕妈广场第四版：按用户选题清单分 家庭/婚姻/职场/母婴 四块共 40 个话题，每题 3 篇 450 字以上占位文章；首页广场分类同步四块；v26110114

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-01 08:23:55 +00:00
parent 8f1f7675ab
commit 6172a780d3
5 changed files with 4551 additions and 2298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
guangchang/index.html
View File

@@ -42,15 +42,19 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
/* ---------- 一级分类：分段按钮（11-01 第三版：用户说「经验 / 家庭不够明显、有点乱」→ 一条底槽三段，选中段实底） ---------- */
.cats{display:flex;gap:4px;margin:2px 12px 10px;padding:4px;border-radius:16px;background:#F0E4DE}
.cats button{flex:1;min-width:0;height:38px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:12px;
font-size:15px;font-weight:800;color:#8A7570;letter-spacing:.3px;transition:background .18s,color .18s,box-shadow .18s}
.cats button .ic{width:17px;height:17px;color:var(--cf)}
.cats button{flex:1;min-width:0;height:38px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:12px;
font-size:14.5px;font-weight:800;color:#8A7570;letter-spacing:.3px;transition:background .18s,color .18s,box-shadow .18s}
.cats button .ic{width:15px;height:15px;color:var(--cf)}
.cats button.on{background:var(--cf);color:#fff;box-shadow:0 6px 14px -6px var(--cf)}
.cats button.on .ic{color:#fff}
.cats button:active{transform:scale(.97)}
.cats .c-all{--cf:#F4593C}
.cats .c-family{--cf:#E0566F}
.cats .c-exp{--cf:#2E8A7C}
/* 四块分类色（11-01 第四版：按用户选题清单分 家庭 / 婚姻 / 职场 / 母婴）：kf 实色 · kt 深字 · kl/kl2 浅底两色 */
.k-family,.c-family{--kf:#E0566F;--kt:#C23A55;--kl:#FFF0F3;--kl2:#FFD9E0}
.k-marriage,.c-marriage{--kf:#7B5CC4;--kt:#6346B0;--kl:#F4F0FF;--kl2:#E0D5FA}
.k-work,.c-work{--kf:#3A72B8;--kt:#2C5E9E;--kl:#EEF4FC;--kl2:#D2E2F6}
.k-baby,.c-baby{--kf:#2E8A7C;--kt:#21705F;--kl:#EBF7F3;--kl2:#CDEBE3}
.cats .c-family,.cats .c-marriage,.cats .c-work,.cats .c-baby{--cf:var(--kf)}
/* ---------- 投稿有奖横幅 ---------- */
.rw{position:relative;display:flex;align-items:center;gap:12px;margin:2px 12px 0;padding:13px 14px;border-radius:18px;overflow:hidden;width:calc(100% - 24px);text-align:left;
@@ -72,6 +76,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.sh{display:flex;align-items:center;gap:6px;margin:18px 14px 8px}
.sh h2{margin:0;font-size:17px;font-weight:900;letter-spacing:.3px}
.sh .fire{width:18px;height:18px;color:#FF5A3C}
.sh small{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sh .more{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center}
/* ---------- 热门话题：横滑卡 ---------- */
@@ -79,8 +84,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.hot::-webkit-scrollbar{display:none}
.hot::after{content:"";flex:none;width:2px}
.hc{flex:none;width:168px;scroll-snap-align:start;display:flex;flex-direction:column;padding:12px 12px 11px;border-radius:18px;text-align:left;background:var(--hb);position:relative;overflow:hidden}
.hc.k-family{--hb:linear-gradient(160deg,#FFEEF1,#FFD9E0);--hk:#E0566F;--ht:#C23A55}
.hc.k-exp{--hb:linear-gradient(160deg,#E8F6F2,#CDEBE3);--hk:#2E8A7C;--ht:#21705F}
.hc{--hb:linear-gradient(160deg,var(--kl),var(--kl2));--hk:var(--kf);--ht:var(--kt)}
.hc .wm{position:absolute;right:-4px;bottom:-14px;font-size:72px;font-weight:900;line-height:1;color:#fff;opacity:.7;font-family:"STKaiti","KaiTi","Kaiti SC",serif;pointer-events:none}
.hc .kb{align-self:flex-start;position:relative}
.hc .rk{position:absolute;right:10px;top:10px;height:18px;padding:0 6px;border-radius:6px;background:#FF5A3C;color:#fff;font-size:10.5px;font-weight:800;line-height:18px}
@@ -92,13 +96,11 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
/* 分类小徽标：家庭 / 经验（封面、热门卡、话题头、详情共用） */
.kb{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px 0 5px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;white-space:nowrap}
.kb .ic{width:12px;height:12px}
.kb.k-family{background:#E0566F}
.kb.k-exp{background:#2E8A7C}
.kb{background:var(--kf)}
/* ---------- 话题头卡（选了具体话题时） ---------- */
.th{position:relative;margin:2px 12px 0;padding:14px 16px 14px;border-radius:20px;overflow:hidden;background:var(--hb);box-shadow:0 10px 24px -18px var(--hk)}
.th.k-family{--hb:linear-gradient(150deg,#FFEEF1,#FFD6DE);--hk:#E0566F;--ht:#C23A55}
.th.k-exp{--hb:linear-gradient(150deg,#E8F6F2,#C9E9E0);--hk:#2E8A7C;--ht:#21705F}
.th{--hb:linear-gradient(150deg,var(--kl),var(--kl2));--hk:var(--kf);--ht:var(--kt)}
.th .wm{position:absolute;right:-4px;top:-8px;font-size:104px;font-weight:900;line-height:1;color:#fff;opacity:.6;font-family:"STKaiti","KaiTi","Kaiti SC",serif;pointer-events:none}
.th .x{position:absolute;right:8px;top:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.7);color:#7A6663}
.th .x .ic{width:14px;height:14px}
@@ -128,8 +130,7 @@ 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 .tp{display:block;margin-top:4px;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc .tp.k-family{color:#D04A65}
.nc .tp.k-exp{color:#2A7E70}
.nc .tp{color:var(--kt)}
.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}
@@ -171,14 +172,12 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.dbody .tx p.li+p.li{margin-top:-10px}
.dbody .dk{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dbody .dk button{height:22px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:800}
.dbody .dk button.k-family{background:#FFE6EB;color:#C23A55}
.dbody .dk button.k-exp{background:#DDF2EE;color:#21705F}
.dbody .dk button{background:var(--kl);color:var(--kt)}
.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}
/* 详情正文后：参与本话题 */
.pj{display:flex;align-items:center;gap:12px;margin:14px 18px 4px;padding:13px 14px;border-radius:16px;background:var(--hb)}
.pj.k-family{--hb:linear-gradient(140deg,#FFF0F3,#FFDDE4);--hk:#E0566F;--ht:#C23A55}
.pj.k-exp{--hb:linear-gradient(140deg,#EBF7F3,#D2EDE6);--hk:#2E8A7C;--ht:#21705F}
.pj{--hb:linear-gradient(140deg,var(--kl),var(--kl2));--hk:var(--kf);--ht:var(--kt)}
.pj .pt{flex:1;min-width:0}
.pj .pt b{display:block;font-size:14.5px;font-weight:900;color:#2A1E1E}
.pj .pt small{display:block;margin-top:2px;font-size:12px;color:#6E5C57}
@@ -211,8 +210,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.tl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tl button{display:flex;align-items:center;gap:4px;min-height:42px;padding:6px 10px;border-radius:12px;text-align:left;font-size:13.5px;font-weight:700;line-height:1.35;background:var(--hb);color:#3A2C28}
.tl button.on{box-shadow:inset 0 0 0 2px var(--hk)}
.tl.k-family button{--hb:#FFF0F3;--hk:#E0566F}
.tl.k-exp button{--hb:#EBF7F3;--hk:#2E8A7C}
.tl button{--hb:var(--kl);--hk:var(--kf)}
.tl button i{flex:none;font-style:normal;padding:0 4px;border-radius:5px;background:#FF5A3C;color:#fff;font-size:9.5px;font-weight:800;line-height:15px}
.tl-all{display:block;width:100%;height:40px;margin-top:14px;border-radius:12px;background:#F6EEEA;font-size:14px;font-weight:800;color:#6E5C57}
.dbody .tm{margin-top:12px;font-size:12px;color:#B8A49E}
@@ -277,6 +275,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
<symbol id="i-fire" viewBox="0 0 24 24"><path d="M12 21c-4 0-6.5-2.7-6.5-6.2 0-3.6 2.9-5.6 3.6-9.3 2.6 1.4 3.6 3.6 3.6 5.4 1-.6 1.6-1.8 1.7-3 2.4 1.9 4.1 4.3 4.1 7 0 3.5-2.5 6.1-6.5 6.1z" fill="currentColor"/></symbol>
<symbol id="i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
<symbol id="i-right" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-ring" viewBox="0 0 24 24"><path d="M12 20.3s-7.6-4.6-9.2-9.4C1.7 7.6 3.9 4.5 7.2 4.5c2 0 3.6 1.1 4.8 2.8 1.2-1.7 2.8-2.8 4.8-2.8 3.3 0 5.5 3.1 4.4 6.4-1.6 4.8-9.2 9.4-9.2 9.4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
<symbol id="i-bag" viewBox="0 0 24 24"><path d="M4 8.5h16v10.5H4zM9 8.5V6.2c0-.9.7-1.7 1.7-1.7h2.6c.9 0 1.7.8 1.7 1.7v2.3M4 13h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></symbol>
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><path d="M9.2 14.6c1.6 1.4 4 1.4 5.6 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="9.3" cy="10.6" r="1.1" fill="currentColor"/><circle cx="14.7" cy="10.6" r="1.1" fill="currentColor"/></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>
@@ -314,8 +315,8 @@ 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=26110113"></script>
<script src="data.js?v=26110113"></script>
<script src="topics.js?v=26110114"></script>
<script src="data.js?v=26110114"></script>
<script>
(function () {
'use strict';
@@ -405,10 +406,15 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
/* ---------- 封面：一种版式，颜色只按分类（家庭粉 / 经验青绿）× 3 个深浅 ---------- */
var PAL = {
family: { ink: '#C23A55', c: [['#FFE6EB', '#FFC6D2'], ['#FFEAE2', '#FFCBB8'], ['#FCE8F2', '#F5C4DC']] },
exp: { ink: '#21705F', c: [['#E0F3EE', '#B8E3D8'], ['#E6F3E3', '#C2E2BE'], ['#E1EFF5', '#B9D9E7']] }
family: { ink: '#C23A55', c: [['#FFE6EB', '#FFC6D2'], ['#FFEAE2', '#FFCBB8'], ['#FCE8F2', '#F5C4DC']] },
marriage: { ink: '#6346B0', c: [['#EFE9FF', '#D6C8F6'], ['#F5E8FA', '#E2C6EF'], ['#E9EBFF', '#C9CEF5']] },
work: { ink: '#2C5E9E', c: [['#E4EFFB', '#BED5F1'], ['#E5F2F8', '#BFDDEB'], ['#ECEFF6', '#CBD3E6']] },
baby: { ink: '#21705F', c: [['#E0F3EE', '#B8E3D8'], ['#E6F3E3', '#C2E2BE'], ['#E1EFF5', '#B9D9E7']] }
};
var CAT_IC = { family: 'i-home', exp: 'i-bulb' }, CAT_SHORT = { family: '家庭', exp: '经验' };
var CAT_IC = { family: 'i-home', marriage: 'i-ring', work: 'i-bag', baby: 'i-baby' };
var CAT_SHORT = { family: '家庭', marriage: '婚姻', work: '职场', baby: '母婴' };
var CAT_SUB = { family: '婆家、原生家庭、长辈、亲戚、日常拉扯', marriage: '夫妻相处、落差、分工、情绪、细碎磨合',
work: '在岗孕妈、产检、边界、顾虑、复工', baby: '身体感受、囤货、预算、疼痛、未知焦虑' };
var kbHTML = function (cat) { return '<span class="kb k-' + cat + '"><svg class="ic"><use href="#' + CAT_IC[cat] + '"/></svg>' + CAT_SHORT[cat] + '</span>'; };
function coverHTML(n, h) {
var t = TBY[n.t], pl = PAL[t.cat], c = pl.c[n.tone];
@@ -427,10 +433,11 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
}
/* ---------- 列表 ---------- */
/* cur 当前话题（'' = 不限话题）；catF 一级分类（'' 全部 / family 家庭关系 / exp 宝妈经验）。选了话题时 catF 恒等于该话题的 cat */
/* cur 当前话题（'' = 不限话题）；catF 一级分类（'' 全部 / family 家庭 / marriage 婚姻 / work 职场 / baby 母婴）。选了话题时 catF 恒等于该话题的 cat */
var cur = '', catF = '';
var CATS = [['', '全部', 'i-grid'], ['family', '家庭关系', 'i-home'], ['exp', '宝妈经验', 'i-bulb']];
var CAT_NAME = { family: '家庭关系', exp: '宝妈经验' };
var CATS = [['', '全部', 'i-grid'], ['family', '家庭', 'i-home'], ['marriage', '婚姻', 'i-ring'], ['work', '职场', 'i-bag'], ['baby', '母婴', 'i-baby']];
var CAT_ORDER = ['family', 'marriage', 'work', 'baby'];
var CAT_NAME = { family: '家庭方向', marriage: '婚姻方向', work: '职场方向', baby: '母婴方向' };
var inCat = function (t) { return !catF || t.cat === catF; };
/* 投稿奖励（11-01 用户定）：话题投稿被选中 → 30 元现金 + 500 兜豆 */
var REWARD = '<em>¥30</em> 现金 + <em>500</em> 兜豆';
@@ -446,8 +453,13 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
}
/* 热门话题：带 hot 的排前面，其余按原顺序；跟着一级分类过滤 */
function hotList() {
var l = T.filter(inCat);
return l.filter(function (t) { return t.hot; }).concat(l.filter(function (t) { return !t.hot; }));
var l = T.filter(inCat), hot = l.filter(function (t) { return t.hot; });
if (!catF) { /* 「全部」下四块轮流排，避免前几张全是同一块 */
var by = CAT_ORDER.map(function (c) { return hot.filter(function (t) { return t.cat === c; }); }), rr = [];
for (var r = 0; r < 5; r++) by.forEach(function (x) { if (x[r]) rr.push(x[r]); });
hot = rr;
}
return hot.concat(l.filter(function (t) { return !t.hot; }));
}
function renderHead() {
var t = TBY[cur], el = $('#head'), fh = $('#fh');
@@ -455,12 +467,12 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
var hl = hotList();
el.innerHTML = rewardHTML() +
'<div class="sh"><svg class="fire"><use href="#i-fire"/></svg><h2>热门话题</h2><button type="button" class="more" data-all="1">全部 ' + hl.length + ' 个<svg class="ic" style="width:13px;height:13px"><use href="#i-right"/></svg></button></div>' +
'<div class="hot">' + hl.slice(0, 6).map(function (x) {
'<div class="hot">' + hl.slice(0, 8).map(function (x) {
return '<div class="hc k-' + x.cat + '" data-t="' + x.id + '" role="button"><i class="wm" aria-hidden="true">' + esc(x.g) + '</i>' + (x.hot ? '<span class="rk">热</span>' : '') + kbHTML(x.cat) +
'<h3># ' + esc(x.name) + '</h3><p>' + esc((D[x.id] || {}).desc || '') + '</p>' +
'<button type="button" class="jn" data-join="' + x.id + '"><svg class="ic"><use href="#i-plus"/></svg>参与话题</button></div>';
}).join('') + '</div>';
fh.innerHTML = '<h2>' + (catF ? CAT_NAME[catF] : '大家在聊') + '</h2>';
fh.innerHTML = '<h2>' + (catF ? CAT_NAME[catF] : '大家在聊') + '</h2>' + (catF ? '<small>' + CAT_SUB[catF] + '</small>' : '');
return;
}
var d = D[t.id] || {};
@@ -539,7 +551,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
return '<button type="button" data-pick="' + t.id + '" class="' + (cur === t.id ? 'on' : '') + '"># ' + esc(t.name) + (t.hot ? '<i>热</i>' : '') + '</button>';
}).join('') + '</div>';
};
openSheet('topics', '<h3>全部话题</h3>' + (catF === 'exp' ? grp('exp') + grp('family') : grp('family') + grp('exp')) +
openSheet('topics', '<h3>全部话题</h3>' + (catF ? [catF] : []).concat(CAT_ORDER.filter(function (c) { return c !== catF; })).map(grp).join('') +
'<button type="button" class="tl-all" data-pick="">看全部分享</button>');
}
$('#mask').addEventListener('click', closeSheet);
@@ -754,7 +766,7 @@ 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;
if (CAT_ORDER.indexOf(c0) >= 0) 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); });