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

孕妈广场第三版：封面统一一种版式、按家庭/经验配色；分类改分段按钮；加投稿有奖横幅（被选中 ¥30 现金 + 500 兜豆）、热门话题、全部话题弹层；详情页加参与话题卡；v26110113

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-01 08:10:48 +00:00
parent 7cd3702554
commit 8f1f7675ab
3 changed files with 226 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
guangchang/index.html
View File

@@ -40,52 +40,75 @@ 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}
/* ---------- 一级分类：全部 / 家庭关系 / 宝妈经验（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)}
/* ---------- 一级分类：分段按钮（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.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;--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}
.cats .c-all{--cf:#F4593C}
.cats .c-family{--cf:#E0566F}
.cats .c-exp{--cf:#2E8A7C}
/* ---------- 话题头卡 ---------- */
.th{position:relative;margin:4px 12px 2px;padding:16px 16px 14px;border-radius:22px;overflow:hidden;
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}
/* ---------- 投稿有奖横幅 ---------- */
.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;
background:radial-gradient(120px 90px at 100% 0,rgba(255,255,255,.35),transparent 70%),linear-gradient(120deg,#FF8A5B,#F4593C 60%,#E8473A);color:#fff;box-shadow:0 10px 22px -12px #E8473A}
.rw .gf{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.22)}
.rw .gf .ic{width:24px;height:24px}
.rw .rt{flex:1;min-width:0}
.rw .rt small{display:block;font-size:12px;font-weight:700;opacity:.9;letter-spacing:.5px}
.rw .rt b{display:block;margin-top:1px;font-size:17px;font-weight:900;letter-spacing:.3px;white-space:nowrap}
.rw .rt b em{font-style:normal;font-size:20px;color:#FFF3B8}
.rw .go{flex:none;height:30px;padding:0 11px;border-radius:99px;background:#fff;color:#E8473A;font-size:12.5px;font-weight:800;display:inline-flex;align-items:center}
.rw.sm{margin-top:12px;padding:10px 12px}
.rw.sm .gf{width:34px;height:34px;border-radius:11px}
.rw.sm .gf .ic{width:19px;height:19px}
.rw.sm .rt b{font-size:14.5px}
.rw.sm .rt b em{font-size:16px}
/* ---------- 区块标题 ---------- */
.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 .more{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center}
/* ---------- 热门话题：横滑卡 ---------- */
.hot{display:flex;gap:10px;padding:0 12px 2px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
.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 .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}
.hc h3{position:relative;margin:8px 0 0;font-size:15px;font-weight:900;line-height:1.35;color:#2A1E1E}
.hc p{position:relative;margin:4px 0 0;font-size:11.5px;line-height:1.5;color:#7A6663;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.hc .jn{position:relative;align-self:flex-start;margin-top:10px;height:28px;padding:0 12px;border-radius:99px;background:var(--hk);color:#fff;font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;gap:3px}
.hc .jn .ic{width:13px;height:13px}
/* 分类小徽标：家庭 / 经验（封面、热门卡、话题头、详情共用） */
.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}
/* ---------- 话题头卡（选了具体话题时） ---------- */
.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 .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}
.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}
.th .tf{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px}
.th .ts{flex:1;display:flex;align-items:center;gap:7px;font-size:12px;color:#6E5C57}
.th .ts b{color:var(--tk);font-weight:900;font-variant-numeric:tabular-nums}
.th .avs{display:flex}
.th .avs img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.9);margin-left:-6px;background:#FFE3D3}
.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 h2 em{font-style:normal;color:var(--ht);margin-right:2px}
.th p{position:relative;margin:0;max-width:280px;font-size:12.5px;line-height:1.6;color:#5E4E4A}
.th .tf{position:relative;display:flex;gap:8px;margin-top:12px}
.th .join{height:34px;padding:0 16px;border-radius:99px;background:var(--hk);color:#fff;font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px;box-shadow:0 6px 12px -6px var(--hk)}
.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}
.th .sw{height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.8);color:var(--ht);font-size:13px;font-weight:800}
/* ---------- 瀑布流 ---------- */
.wf{display:flex;align-items:flex-start;gap:8px;padding:10px 12px 0}
@@ -104,58 +127,24 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.lk.on{color:#F0453A}
.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)}
.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}
.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}
.end small{display:block;margin-top:8px;font-size:10.5px;color:#CDBBB5;opacity:.85}
/* ---------- 封面（em 计：卡片 1em≈13px，详情放大） ---------- */
.cv{position:relative;width:100%;overflow:hidden;font-size:13px;color:var(--tk);isolation:isolate}
.cv .t1{position:relative;z-index:1;font-weight:900;line-height:1.25;letter-spacing:.04em;word-break:break-all}
.cv .t2{position:relative;z-index:1;font-weight:700;opacity:.82;line-height:1.4}
.cv i{font-style:normal}
/* s0 渐变 + 荧光笔 */
.cv.s0{background:linear-gradient(160deg,var(--c1),var(--c2));display:flex;flex-direction:column;justify-content:center;padding:0 1.2em}
.cv.s0 .t1{font-size:1.75em;color:#2A1E1E}
.cv.s0 .t1 span{background:linear-gradient(transparent 58%,rgba(255,255,255,.85) 58%,rgba(255,255,255,.85) 90%,transparent 90%)}
.cv.s0 .t2{margin-top:.7em;font-size:.95em}
.cv.s0 .dc{position:absolute;right:-1.6em;top:-1.6em;width:6em;height:6em;border-radius:50%;background:rgba(255,255,255,.35)}
.cv.s0 .dc2{position:absolute;left:1.2em;bottom:1.1em;width:2.4em;height:.32em;border-radius:1em;background:var(--tk);opacity:.5}
/* s1 便签纸 + 胶带 */
.cv.s1{background:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px) 0 0/14px 14px,var(--c2);display:grid;place-items:center;padding:1.3em 1em}
.cv.s1 .pp{position:relative;width:100%;padding:1.3em .9em 1em;background:#FFFDF8;border-radius:.3em;box-shadow:0 .5em 1em -.4em rgba(80,40,30,.35);transform:rotate(-2.5deg)}
.cv.s1 .pp::before{content:"";position:absolute;left:50%;top:-.6em;width:4em;height:1.2em;margin-left:-2em;background:rgba(255,255,255,.65);border:1px solid rgba(0,0,0,.04);transform:rotate(3deg)}
.cv.s1 .t1{font-size:1.45em;color:#3A2C28}
.cv.s1 .t2{margin-top:.5em;font-size:.88em;color:var(--tk)}
/* s2 深色大引号 */
.cv.s2{background:radial-gradient(9em 7em at 100% 0,rgba(255,255,255,.18),transparent 70%),linear-gradient(160deg,var(--tk),#2E2230);color:#FFF4EA;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1em 1.1em 1.2em}
.cv.s2 .q{position:absolute;right:.45em;top:-.15em;font-size:5.5em;font-weight:900;line-height:1;color:var(--c2);opacity:.75;font-family:Georgia,serif}
.cv.s2 .t1{font-size:1.6em}
.cv.s2 .t2{margin-top:.55em;font-size:.9em;color:var(--c2);opacity:1}
/* s3 横线本 */
.cv.s3{background:repeating-linear-gradient(180deg,transparent 0,transparent 1.75em,rgba(170,140,120,.22) 1.75em,rgba(170,140,120,.22) calc(1.75em + 1px)),#FFFCF6;padding:1.2em 1em 1em 1.9em;display:flex;flex-direction:column;justify-content:center}
.cv.s3::before{content:"";position:absolute;left:1.15em;top:0;bottom:0;width:1.5px;background:rgba(240,110,100,.45)}
.cv.s3 .t1{font-size:1.5em;color:#2F2424}
.cv.s3 .t1 span{background:linear-gradient(transparent 55%,var(--c2) 55%,var(--c2) 92%,transparent 92%)}
.cv.s3 .t2{margin-top:.7em;font-size:.9em;color:var(--tk)}
.cv.s3 .ck{display:flex;gap:.35em;margin-top:.8em}
.cv.s3 .ck i{width:.95em;height:.95em;border-radius:.25em;border:1.5px solid var(--tk);opacity:.6}
.cv.s3 .ck i:first-child{background:var(--tk)}
/* s4 大圆 + 水印字 */
.cv.s4{background:var(--c1);display:flex;flex-direction:column;justify-content:flex-end;padding:1em 1.1em 1.1em}
.cv.s4 .bc{position:absolute;right:-1.4em;top:-1.2em;width:8.4em;height:8.4em;border-radius:50%;background:linear-gradient(150deg,var(--c2),rgba(255,255,255,.4));display:grid;place-items:center}
.cv.s4 .bc b{font-size:4em;font-weight:900;color:#fff;opacity:.8;font-family:"STKaiti","KaiTi","Kaiti SC",serif;transform:translate(-.08em,.06em)}
.cv.s4 .t1{font-size:1.6em;color:#2A1E1E}
.cv.s4 .t2{margin-top:.45em;font-size:.9em}
/* s5 方格纸 + 印章 */
.cv.s5{background:linear-gradient(rgba(170,140,120,.13) 1px,transparent 1px) 0 0/1.2em 1.2em,linear-gradient(90deg,rgba(170,140,120,.13) 1px,transparent 1px) 0 0/1.2em 1.2em,#FFF9F3;display:flex;flex-direction:column;justify-content:center;padding:1em 1.1em}
.cv.s5 .st{align-self:flex-start;margin-bottom:.7em;padding:.2em .6em;border-radius:.4em;background:var(--tk);color:#fff;font-size:.8em;font-weight:800;letter-spacing:.08em;transform:rotate(-3deg)}
.cv.s5 .t1{font-size:1.55em;color:#2F2424}
.cv.s5 .t2{margin-top:.55em;font-size:.88em}
.cv.s5 .sm{position:absolute;right:.8em;bottom:.8em;width:3.2em;height:3.2em;border-radius:50%;border:2px solid var(--tk);color:var(--tk);display:grid;place-items:center;font-size:.8em;font-weight:900;opacity:.55;transform:rotate(-14deg)}
/* ---------- 封面（em 计：卡片 1em≈13px，详情放大）
11-01 第三版：用户说列表「太乱」→ 原来 6 种花样（方格纸/横线本/波点胶带/深色引号…）全部去掉，只留一种版式；
颜色只按分类走：家庭 = 粉、经验 = 青绿，各 3 个深浅轮换。左上角实底「家庭 / 经验」徽标，一眼分清。 ---------- */
.cv{position:relative;width:100%;overflow:hidden;font-size:13px;isolation:isolate;display:flex;flex-direction:column;padding:.95em 1.05em 1.1em;background:linear-gradient(160deg,var(--c1),var(--c2))}
.cv .kb{align-self:flex-start;font-size:.85em;height:1.55em;padding:0 .55em 0 .4em;border-radius:.5em;gap:.2em}
.cv .kb .ic{width:1em;height:1em}
.cv .ct{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.cv .t1{font-size:1.65em;font-weight:900;line-height:1.25;letter-spacing:.04em;color:#2A1E1E;word-break:break-all}
.cv .t2{margin-top:.5em;font-size:.92em;font-weight:700;line-height:1.4;color:var(--tk)}
.cv .wm{position:absolute;right:-.1em;bottom:-.25em;font-size:5.6em;font-weight:900;line-height:1;color:#fff;opacity:.55;font-family:"STKaiti","KaiTi","Kaiti SC",serif;pointer-events:none;z-index:0}
/* ---------- 详情层 ---------- */
#dt{position:fixed;inset:0;z-index:40;background:#fff;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
@@ -172,15 +161,60 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
#dt .dnav .fo.on{border-color:#E5DAD5;color:var(--muted)}
#dsc{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none}
#dsc::-webkit-scrollbar{display:none}
.dcv .cv{font-size:26px}
.dcv .cv{font-size:24px}
.dcv .cv .kb{display:none}
.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 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 .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 .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 .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}
.pj .pt small em{font-style:normal;font-weight:800;color:#E8473A}
.pj button{flex:none;height:32px;padding:0 13px;border-radius:99px;background:var(--hk);color:#fff;font-size:13px;font-weight:800}
/* ---------- 底部弹层：投稿规则 / 全部话题 ---------- */
#mask{position:fixed;inset:0;z-index:60;background:rgba(30,20,18,.45);opacity:0;pointer-events:none;transition:opacity .22s}
#mask.show{opacity:1;pointer-events:auto}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:82vh;display:flex;flex-direction:column;border-radius:22px 22px 0 0;background:#FFFBF8;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#sheet.show{transform:none}
#sheet .sg{width:36px;height:4px;margin:8px auto 0;border-radius:4px;background:#E6D8D2;flex:none}
#sheet .sbd{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:none;padding:6px 18px calc(18px + var(--safe-b))}
#sheet h3{margin:8px 0 0;font-size:18px;font-weight:900;text-align:center}
.rb{margin:14px 0 0;padding:16px 14px;border-radius:18px;text-align:center;color:#fff;background:radial-gradient(140px 90px at 100% 0,rgba(255,255,255,.3),transparent 70%),linear-gradient(120deg,#FF8A5B,#F4593C 60%,#E8473A)}
.rb small{display:block;font-size:12.5px;font-weight:700;opacity:.9}
.rb b{display:block;margin-top:4px;font-size:24px;font-weight:900;letter-spacing:.5px}
.rb b em{font-style:normal;color:#FFF3B8}
.rb i{display:block;margin-top:2px;font-style:normal;font-size:12px;opacity:.9}
.stp{margin:16px 0 0;padding:0;list-style:none;counter-reset:s}
.stp li{position:relative;padding:0 0 14px 38px;font-size:14px;line-height:1.6;color:#3A302C;counter-increment:s}
.stp li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:#FFEDE6;color:#F4593C;font-size:13px;font-weight:900;display:grid;place-items:center}
.stp li b{display:block;font-size:14.5px;font-weight:800;color:#2A1E1E}
.stp li small{display:block;font-size:12.5px;color:var(--muted)}
.cur-t{margin-top:12px;padding:10px 12px;border-radius:12px;background:#F6EEEA;font-size:13px;color:#6E5C57}
.cur-t b{color:#2A1E1E}
.sbtn{display:block;width:100%;height:46px;margin-top:6px;border-radius:99px;background:var(--btn);color:#fff;font-size:16px;font-weight:900;box-shadow:0 8px 16px -8px #EE5A3E}
.snote{margin-top:10px;text-align:center;font-size:11.5px;color:#B8A49E}
.tl-h{display:flex;align-items:center;gap:6px;margin:16px 0 8px;font-size:14px;font-weight:900}
.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 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}
.cm{margin-top:8px;padding:14px 18px 20px;border-top:8px solid #F8F3EF}
.cm-h{display:flex;align-items:baseline;gap:6px;font-size:15px;font-weight:900}
@@ -239,6 +273,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
<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-gift" viewBox="0 0 24 24"><path d="M4 10.5h16v3H4zM5.5 13.5h13v6.5h-13zM12 10.5V20M12 10.5c-1.2-2.6-4.8-4.4-6-2.6-1 1.6 1.6 2.6 6 2.6zm0 0c1.2-2.6 4.8-4.4 6-2.6 1 1.6-1.6 2.6-6 2.6z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></symbol>
<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-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></symbol>
</svg>
@@ -250,9 +288,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
<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>
<div class="sh" id="fh"></div>
<div class="wf" id="wf"><div class="col"></div><div class="col"></div></div>
<div class="end"><b>— 到底啦 —</b><small>内容为示例占位，正式版将替换为妈妈们的真实分享</small></div>
</div>
@@ -272,10 +310,12 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
<button class="ib" id="bcm" type="button" aria-label="评论"><svg class="ic"><use href="#i-chat"/></svg><span></span></button>
</div>
</div>
<div id="mask"></div>
<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=26110112"></script>
<script src="data.js?v=26110112"></script>
<script src="topics.js?v=26110113"></script>
<script src="data.js?v=26110113"></script>
<script>
(function () {
'use strict';
@@ -308,16 +348,14 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
/* ---------- 笔记：data.js 的原始内容 + 确定性补字段（id / 封面样式 / 比例 / 评论） ---------- */
var NOTES = [], NBY = {};
var RATIO = [1.25, 0.96, 1.16, 0.84, 1.32, 1.06, 0.92];
var RATIO = [1.12, 0.94, 1.04, 0.88, 1.18, 0.98, 0.9];
T.forEach(function (t, ti) {
var d = D[t.id]; if (!d) return;
(d.notes || []).forEach(function (n, i) {
var o = {
id: t.id + '-' + (i + 1), t: t.id, i: i, title: n.title, cover: n.cover || n.title, coverSub: n.coverSub || '',
author: n.author, stage: n.stage, likes: +n.likes || 0, body: n.body || '',
style: (ti * 2 + i * 5) % 6, ratio: RATIO[(ti + i * 3) % RATIO.length],
/* 封面配色：三条里一条用本话题色，另两条借别的话题色，同一话题页里不至于一片同色 */
pal: i % 3 === 0 ? t : T[(ti + 3 + i * 4) % T.length]
ratio: RATIO[(ti + i * 3) % RATIO.length], tone: (ti + i) % 3
};
NOTES.push(o); NBY[o.id] = o;
});
@@ -365,29 +403,27 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
}
function haptic() { if (navigator.vibrate) navigator.vibrate(8); }
/* ---------- 封面 ---------- */
/* ---------- 封面：一种版式，颜色只按分类（家庭粉 / 经验青绿）× 3 个深浅 ---------- */
var PAL = {
family: { ink: '#C23A55', c: [['#FFE6EB', '#FFC6D2'], ['#FFEAE2', '#FFCBB8'], ['#FCE8F2', '#F5C4DC']] },
exp: { ink: '#21705F', c: [['#E0F3EE', '#B8E3D8'], ['#E6F3E3', '#C2E2BE'], ['#E1EFF5', '#B9D9E7']] }
};
var CAT_IC = { family: 'i-home', exp: 'i-bulb' }, CAT_SHORT = { family: '家庭', exp: '经验' };
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 = n.pal || t, st = 'style="--c1:' + pl.c[0] + ';--c2:' + pl.c[1] + ';--tk:' + pl.ink + ';' + (h ? 'height:' + h : '') + '"';
var t1 = esc(n.cover), t2 = esc(n.coverSub), inner;
switch (n.style) {
case 0: inner = '<i class="dc"></i><i class="dc2"></i><div class="t1"><span>' + t1 + '</span></div><div class="t2">' + t2 + '</div>'; break;
case 1: inner = '<div class="pp"><div class="t1">' + t1 + '</div><div class="t2">' + t2 + '</div></div>'; break;
case 2: inner = '<i class="q">“</i><div class="t1">' + t1 + '</div><div class="t2">' + t2 + '</div>'; break;
case 3: inner = '<div class="t1"><span>' + t1 + '</span></div><div class="t2">' + t2 + '</div><div class="ck"><i></i><i></i><i></i></div>'; break;
case 4: inner = '<i class="bc"><b>' + esc(t.g) + '</b></i><div class="t1">' + t1 + '</div><div class="t2">' + t2 + '</div>'; break;
default: inner = '<span class="st">' + (t.cat === 'family' ? '家有暖事' : '过来人经验') + '</span><div class="t1">' + t1 + '</div><div class="t2">' + t2 + '</div><i class="sm">' + esc(t.g) + '</i>';
}
return '<div class="cv s' + n.style + '" ' + st + '>' + inner + '</div>';
var t = TBY[n.t], pl = PAL[t.cat], c = pl.c[n.tone];
return '<div class="cv" style="--c1:' + c[0] + ';--c2:' + c[1] + ';--tk:' + pl.ink + ';' + (h ? 'height:' + h : '') + '">' + kbHTML(t.cat) +
'<div class="ct"><div class="t1">' + esc(n.cover) + '</div><div class="t2">' + esc(n.coverSub) + '</div></div><i class="wm" aria-hidden="true">' + esc(t.g) + '</i></div>';
}
function likeHTML(n) {
var on = liked(n.id);
return '<span class="lk' + (on ? ' on' : '') + '" data-like="' + n.id + '" role="button" aria-label="点赞"><svg class="ic"><use href="#i-heart' + (on ? '-f' : '') + '"/></svg>' + cfmt(likeN(n)) + '</span>';
}
function cardHTML(n, showTopic) {
var t = TBY[n.t];
return '<button type="button" class="nc" data-id="' + n.id + '"><div class="cvw">' +
(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>';
'<div class="nb"><h3>' + esc(n.title) + '</h3>' + (showTopic ? '<span class="tp k-' + t.cat + '"># ' + esc(t.name) + '</span>' : '') + '<div class="nf"><img src="' + avSrc(n.author) + '" alt="" loading="lazy"><span class="nm">' + esc(n.author) + '</span>' + likeHTML(n) + '</div></div></button>';
}
/* ---------- 列表 ---------- */
@@ -396,33 +432,42 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
var CATS = [['', '全部', 'i-grid'], ['family', '家庭关系', 'i-home'], ['exp', '宝妈经验', 'i-bulb']];
var CAT_NAME = { family: '家庭关系', exp: '宝妈经验' };
var inCat = function (t) { return !catF || t.cat === catF; };
/* 投稿奖励（11-01 用户定）：话题投稿被选中 → 30 元现金 + 500 兜豆 */
var REWARD = '<em>¥30</em> 现金 + <em>500</em> 兜豆';
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>';
'<svg class="ic"><use href="#' + x[2] + '"/></svg>' + x[1] + '</button>';
}).join('');
}
function renderTabs() {
$('#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;
function rewardHTML(sm) {
return '<button type="button" class="rw' + (sm ? ' sm' : '') + '" data-rule="1"><span class="gf"><svg class="ic"><use href="#i-gift"/></svg></span>' +
'<span class="rt"><small>参与话题投稿 · 被选中奖励</small><b>' + REWARD + '</b></span><span class="go">怎么参与<svg class="ic" style="width:12px;height:12px"><use href="#i-right"/></svg></span></button>';
}
/* 热门话题：带 hot 的排前面，其余按原顺序；跟着一级分类过滤 */
function hotList() {
var l = T.filter(inCat);
return l.filter(function (t) { return t.hot; }).concat(l.filter(function (t) { return !t.hot; }));
}
function renderHead() {
var t = TBY[cur], el = $('#head');
var t = TBY[cur], el = $('#head'), fh = $('#fh');
if (!t) {
var tip = catF === 'family' ? '老公、婆婆、爸妈，家里那些暖事和糟心事' : catF === 'exp' ? '过来人的干货，少走弯路' : '都是孕妈们的真心话';
el.innerHTML = '<div class="intro"><span><b>' + T.filter(inCat).length + '</b> 个话题 · ' + tip + '</span></div>';
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) {
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>';
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 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>';
el.innerHTML = '<div class="th k-' + t.cat + '"><i class="wm" aria-hidden="true">' + esc(t.g) + '</i><button type="button" class="x" data-t="" aria-label="看全部"><svg class="ic"><use href="#i-x"/></svg></button>' +
kbHTML(t.cat) + '<h2><em>#</em>' + esc(t.name) + '</h2><p>' + esc(d.desc || '') + '</p>' +
'<div class="tf"><button type="button" class="join" data-join="' + t.id + '"><svg class="ic"><use href="#i-plus"/></svg>参与话题</button><button type="button" class="sw" data-all="1">换个话题</button></div></div>' + rewardHTML(true);
fh.innerHTML = '<h2>这个话题下的分享</h2>';
}
function renderFeed() {
var list = cur ? NOTES.filter(function (n) { return n.t === cur; }) : MIXED.filter(function (n) { return inCat(TBY[n.t]); });
@@ -452,16 +497,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
if (!TBY[t]) t = '';
cur = t;
if (t) catF = TBY[t].cat; /* 首页带 ?t= 进来 / 点详情里的话题标签：分类跟着切到该话题所属类 */
renderCats(); renderTabs(); renderHead(); renderFeed();
renderCats(); 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); }
var sc = $('#sc'); if (smooth !== false) sc.scrollTop = 0;
}
$('#tabs').addEventListener('click', function (e) {
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;
@@ -469,7 +508,49 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
selectTopic(''); /* 换分类回到该类「全部」，避免停在别类话题上 */
});
$('#head').addEventListener('click', function (e) {
if (e.target.closest('#join')) toast('发布笔记马上开放，先去看看大家怎么说吧');
var j = e.target.closest('[data-join]'); if (j) { haptic(); openRule(j.dataset.join); return; }
if (e.target.closest('[data-rule]')) { openRule(''); return; }
if (e.target.closest('[data-all]')) { openTopics(); return; }
var b = e.target.closest('[data-t]'); if (b) { haptic(); selectTopic(b.dataset.t); }
});
/* ---------- 底部弹层：投稿规则 / 全部话题 ---------- */
var sheetOn = '';
function openSheet(kind, html) {
sheetOn = kind; $('#sbd').innerHTML = html; $('#sbd').scrollTop = 0;
$('#mask').classList.add('show'); $('#sheet').classList.add('show');
}
function closeSheet() { sheetOn = ''; $('#mask').classList.remove('show'); $('#sheet').classList.remove('show'); }
function openRule(tid) {
var t = TBY[tid];
openSheet('rule', '<h3>话题投稿有奖</h3>' +
'<div class="rb"><small>投稿被选中，每篇奖励</small><b>' + REWARD + '</b></div>' +
(t ? '<div class="cur-t">你要参与的话题：<b># ' + esc(t.name) + '</b></div>' : '') +
'<ol class="stp">' +
'<li><b>选一个话题</b><small>在「热门话题」或「全部话题」里挑你有话说的那个</small></li>' +
'<li><b>写下你的真实经历</b><small>家里的暖事、踩过的坑、过来人的经验都可以</small></li>' +
'<li><b>编辑挑选，被选中就发奖励</b><small>选中的故事会展示在孕妈广场，奖励发给作者</small></li></ol>' +
'<button type="button" class="sbtn" data-write="' + (t ? t.id : '') + '">' + (t ? '写我的故事' : '去选话题') + '</button>' +
'<div class="snote">投稿通道即将开放，开放后会在首页通知你</div>');
}
function openTopics() {
var grp = function (cat) {
return '<div class="tl-h">' + kbHTML(cat) + CAT_NAME[cat] + '</div><div class="tl k-' + cat + '">' + T.filter(function (t) { return t.cat === cat; }).map(function (t) {
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')) +
'<button type="button" class="tl-all" data-pick="">看全部分享</button>');
}
$('#mask').addEventListener('click', closeSheet);
$('#sheet').addEventListener('click', function (e) {
var p = e.target.closest('[data-pick]');
if (p) { closeSheet(); haptic(); if (!p.dataset.pick) catF = ''; selectTopic(p.dataset.pick); return; }
var w = e.target.closest('[data-write]');
if (w) {
if (w.dataset.write) { toast('投稿通道即将开放，开放后会在首页通知你'); return; }
closeSheet(); if (openId) closeNote(); setTimeout(openTopics, 300);
}
});
/* 卡片：点心形就地点赞，点别处进详情 */
@@ -539,12 +620,13 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
$('#dnm').textContent = n.author;
$('#dst').textContent = n.stage || '';
var fo = $('#dfo'); fo.classList.toggle('on', !!ME.fo[n.author]); fo.textContent = ME.fo[n.author] ? '已关注' : '关注';
var h = Math.round(window.innerWidth * Math.min(n.ratio, 1.05));
var h = Math.round(window.innerWidth * .72); /* 详情封面统一矮一点，正文早点露出来 */
var day = 26 + (seed(n.id) % 6), mon = day > 31 ? 11 : 10;
$('#dsc').innerHTML = '<div class="dcv">' + coverHTML(n, h + 'px') + '</div>' +
'<div class="dbody"><h2>' + esc(n.title) + '</h2><div class="tx">' + bodyHTML(n.body) + '</div>' +
'<div class="tgs"><button type="button" data-go="' + t.id + '"># ' + esc(t.name) + '</button><button type="button" data-go="">#孕妈广场</button></div>' +
'<div class="dbody"><div class="dk">' + kbHTML(t.cat) + '<button type="button" class="k-' + t.cat + '" data-go="' + t.id + '"># ' + esc(t.name) + '</button></div>' +
'<h2>' + esc(n.title) + '</h2><div class="tx">' + bodyHTML(n.body) + '</div>' +
'<div class="tm">' + mon + '-' + (day > 31 ? day - 31 : day) + ' · ' + esc(n.stage || '') + '</div></div>' +
'<div class="pj k-' + t.cat + '"><span class="pt"><b>你也有类似的经历？</b><small>投稿被选中得 ' + REWARD + '</small></span><button type="button" data-join="' + t.id + '">参与话题</button></div>' +
'<div class="cm" id="cmw"><div class="cm-h" id="cmh"></div>' +
'<div class="cm-in"><span class="me">我</span><button type="button" id="cmgo">留下你的温柔一句…</button></div>' +
'<div id="cml"></div><div class="cm-end">— 没有更多评论了 —</div></div>';
@@ -567,6 +649,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
hideNote(); history.replaceState(history.state, '', setQuery(cur, ''));
}
window.addEventListener('popstate', function () {
if (sheetOn) closeSheet();
pushed = false;
if (openId) hideNote();
});
@@ -579,6 +662,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 jn = e.target.closest('[data-join]'); if (jn) { haptic(); openRule(jn.dataset.join); return; }
var g = e.target.closest('[data-go]');
if (g) { var to = g.dataset.go; closeNote(); setTimeout(function () { if (!to) catF = ''; selectTopic(to); }, 60); return; }
var cl = e.target.closest('[data-cl]');

6
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26110112 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26110113 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -2396,7 +2396,7 @@
<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=26110112"></script>
<script src="guangchang/topics.js?v=26110113"></script>
<script src="js/app.js"></script>
<!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
<script src="js/bump.js"></script>
@@ -2405,7 +2405,7 @@
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
<script src="js/baby-limbs.js?v=26101201"></script>
<script src="js/coach.js?v=26101211"></script>
<script src="js/birth-flow.js?v=26110112"></script>
<script src="js/birth-flow.js?v=26110113"></script>
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
<script>

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26110112';
var VER = '26110113';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));