Files
mama-box/demo/gc-v5/index.html
2026-11-01 23:59:31 +00:00

437 lines
31 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>孕妈广场 · 效果稿 V5</title>
<!-- 效果稿 V5 · 今日广场:今日一问 + 故事卡堆 + 话题榜。演示页,独立文件,不接后端。 -->
<style>
:root{
--brand:#F4593C;--brand-2:#FF8A5B;--ink:#231B18;--ink-2:#5E534E;--muted:#9A8C86;--line:#EFE6E1;
--bg:#FBF7F4;--card:#fff;
--family:#E0566F;--work:#3A72B8;--baby:#2E8A7C;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Segoe UI",Roboto,sans-serif;
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
#sc{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;background:var(--bg)}
#sc::-webkit-scrollbar{display:none}
/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top);background:rgba(251,247,244,.88);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);transition:box-shadow .2s}
.top.on{box-shadow:0 1px 0 var(--line)}
.nav{position:relative;display:flex;align-items:center;height:48px;padding:0 8px}
.nav .bk{width:38px;height:38px;display:grid;place-items:center;border-radius:50%}
.nav .bk:active{background:rgba(0,0,0,.05)}
.nav .bk .ic{width:22px;height:22px}
.nav .tt{margin-left:2px;display:flex;align-items:baseline;gap:8px;min-width:0}
.nav .tt b{font-size:18px;font-weight:900;letter-spacing:.5px}
.nav .tt small{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.ver{position:absolute;right:12px;max-width:40%;white-space:nowrap;top:50%;transform:translateY(-50%);font-size:11px;color:#BBADA6;letter-spacing:.3px}
/* ---------- 区块标题(编号 + 标题,做节奏) ---------- */
.sh{display:flex;align-items:flex-end;gap:8px;margin:26px 18px 12px}
.sh .no{font-size:12px;font-weight:900;color:var(--brand);letter-spacing:1px;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif;padding-bottom:3px}
.sh h2{margin:0;font-size:20px;font-weight:900;letter-spacing:.5px;line-height:1.2}
.sh small{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;padding-bottom:2px}
/* ---------- 01 今日一问 ---------- */
.q{position:relative;margin:6px 14px 0;padding:20px 18px 18px;border-radius:26px;overflow:hidden;color:#fff;
background:radial-gradient(180px 160px at 108% -10%,rgba(255,175,120,.55),transparent 70%),radial-gradient(200px 150px at -10% 110%,rgba(244,89,60,.45),transparent 70%),linear-gradient(160deg,#3A2A25,#231B18 70%);
box-shadow:0 18px 34px -20px rgba(35,27,24,.75)}
.q .wm{position:absolute;right:-6px;bottom:-34px;font-size:150px;font-weight:900;line-height:1;color:rgba(255,255,255,.05);pointer-events:none}
.q .hd{display:flex;align-items:center;gap:8px}
.q .tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;background:var(--brand);font-size:12px;font-weight:800;letter-spacing:.5px}
.q .tag i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.q .dt{font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
.q .cat{margin-left:auto;font-size:12px;font-weight:700;color:rgba(255,255,255,.75)}
.q h3{position:relative;margin:14px 0 4px;font-size:23px;line-height:1.35;font-weight:900;letter-spacing:.3px}
.q .sub{position:relative;margin:0;font-size:13px;color:rgba(255,255,255,.66)}
.q .ops{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.op{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border-radius:16px;overflow:hidden;text-align:left;
background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.16);font-size:15px;font-weight:800;transition:transform .15s}
.op:active{transform:scale(.98)}
.op .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.12);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.op .lt{position:relative;width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.16);font-size:12px;font-weight:900}
.op .tx{position:relative;flex:1;min-width:0;line-height:1.35;padding:12px 0}
.op .pc{position:relative;font-size:16px;font-weight:900;opacity:0;transition:opacity .4s .3s;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
.q.done .op .pc{opacity:1}
.q.done .op.me{border-color:#FFB08F}
.q.done .op.me .bar{background:linear-gradient(90deg,#F4593C,#FF8A5B)}
.q.done .op.me .lt{background:#fff;color:var(--brand)}
.q .ft{position:relative;display:flex;align-items:center;gap:10px;margin-top:16px;min-height:34px}
.q .avs{display:flex}
.q .avs img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid #2E221E;margin-left:-8px}
.q .avs img:first-child{margin-left:0}
.q .ft small{font-size:12px;color:rgba(255,255,255,.7);flex:1;min-width:0}
.q .go{display:none;align-items:center;gap:3px;height:34px;padding:0 14px;border-radius:99px;background:#fff;color:var(--ink);font-size:13px;font-weight:900;white-space:nowrap}
.q.done .go{display:inline-flex;animation:pop .35s}
.q .go .ic{width:14px;height:14px;color:var(--brand)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
/* ---------- 02 故事卡堆 ---------- */
.stk-wrap{position:relative;margin:0 14px}
.stk{position:relative;height:440px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sc{position:absolute;left:0;right:0;top:0;height:410px;border-radius:26px;overflow:hidden;background:#E9DED8;
box-shadow:0 18px 30px -18px rgba(60,35,25,.55);transform-origin:50% 100%;will-change:transform;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.sc img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sc .sh2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 46%,rgba(20,10,6,.82) 100%)}
.sc .kt{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.92);font-size:12px;font-weight:800}
.sc .kt i{width:7px;height:7px;border-radius:50%}
.sc .lk{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:99px;background:rgba(0,0,0,.32);color:#fff;font-size:12px;font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sc .lk .ic{width:13px;height:13px}
.sc .bt{position:absolute;left:0;right:0;bottom:0;padding:0 18px 18px;color:#fff}
.sc .tp{font-size:12px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc h4{margin:6px 0 12px;font-size:20px;line-height:1.38;font-weight:900;letter-spacing:.2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.sc .au{display:flex;align-items:center;gap:9px}
.sc .au img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85)}
.sc .au b{font-size:14px;font-weight:800}
.sc .au span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;background:rgba(255,255,255,.2);font-size:12px;font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sc .au .rd{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:800;color:#FFD9C9}
.sc .au .rd .ic{width:13px;height:13px}
/* 最后一张:轮到你了 */
.sc.you{background:radial-gradient(220px 180px at 100% 0,rgba(255,255,255,.35),transparent 70%),radial-gradient(240px 200px at 0 100%,rgba(255,206,120,.4),transparent 70%),linear-gradient(155deg,#FF8A5B,#F4593C 55%,#E2402F);color:#fff}
.you .in{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px 22px 22px}
.you .big{font-size:40px;font-weight:900;line-height:1.1;letter-spacing:1px;margin-top:10px}
.you .lede{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.92)}
.you .rw{margin-top:auto;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.18);border:1px dashed rgba(255,255,255,.55)}
.you .rw small{display:block;font-size:12px;font-weight:700;opacity:.9}
.you .rw b{display:block;margin-top:2px;font-size:18px;font-weight:900;white-space:nowrap}
.you .rw b em{font-style:normal;font-size:24px;color:#FFF3B8;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
.you .cta{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px;height:48px;border-radius:99px;background:#fff;color:#E2402F;font-size:16px;font-weight:900}
.you .pen{position:absolute;right:18px;top:20px;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.2);display:grid;place-items:center;transform:rotate(8deg)}
.you .pen .ic{width:30px;height:30px}
.you .k{font-size:12px;font-weight:800;letter-spacing:2px;opacity:.85}
/* 卡堆下方控制条 */
.stk-ctl{display:flex;align-items:center;gap:10px;margin:2px 4px 0}
.stk-ctl .pg{font-size:13px;font-weight:800;color:var(--ink-2);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif;min-width:52px}
.stk-ctl .pg b{color:var(--brand);font-size:18px}
.stk-ctl .tr{flex:1;height:4px;border-radius:99px;background:#EDE2DC;overflow:hidden}
.stk-ctl .tr i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#FF8A5B,#F4593C);transition:width .35s}
.stk-ctl button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 4px 12px -6px rgba(90,50,30,.35);color:var(--ink)}
.stk-ctl button:active{transform:scale(.94)}
.stk-ctl button:disabled{opacity:.35}
.stk-ctl button .ic{width:18px;height:18px}
.hint{margin:8px 4px 0;font-size:12px;color:var(--muted);text-align:center}
/* ---------- 03 话题榜 ---------- */
.tabs{position:sticky;top:calc(48px + env(safe-area-inset-top));z-index:20;display:flex;gap:8px;padding:10px 14px;background:rgba(251,247,244,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow-x:auto}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:99px;background:#fff;border:1.5px solid var(--line);font-size:14px;font-weight:800;color:var(--ink-2);transition:all .2s}
.tabs button i{width:8px;height:8px;border-radius:50%;background:var(--k)}
.tabs button.on{background:var(--k);border-color:var(--k);color:#fff}
.tabs button.on i{background:#fff}
.rank{margin:4px 14px 0;padding:6px 0;border-radius:24px;background:#fff;box-shadow:0 10px 26px -20px rgba(90,50,30,.5)}
.rk{display:flex;align-items:center;gap:12px;padding:12px 16px;position:relative}
.rk + .rk:before{content:"";position:absolute;left:60px;right:16px;top:0;height:1px;background:var(--line)}
.rk:active{background:#FBF5F2}
.rk .n{width:30px;flex:none;text-align:center;font-size:22px;font-weight:900;font-style:italic;color:#CDBFB8;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif;line-height:1}
.rk.t1 .n,.rk.t2 .n,.rk.t3 .n{color:var(--brand)}
.rk.t1 .n{font-size:28px}
.rk .bd{flex:1;min-width:0}
.rk .nm{display:flex;align-items:center;gap:6px}
.rk .nm b{font-size:15px;font-weight:800;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
.rk .kc{flex:none;font-size:11px;font-weight:800;color:var(--k);line-height:1}
.rk .hot{flex:none;height:18px;padding:0 5px;border-radius:5px;background:#FFE7DF;color:var(--brand);font-size:11px;font-weight:900;line-height:18px}
.rk .mt{display:flex;align-items:center;gap:8px;margin-top:7px}
.rk .hb{flex:1;height:6px;border-radius:99px;background:#F4ECE8;overflow:hidden}
.rk .hb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--k2),var(--k));width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.rk .tk{flex:none;font-size:12px;font-weight:700;color:var(--muted);min-width:66px;text-align:right}
.rk .tk em{font-style:normal;color:var(--ink-2);font-weight:900}
.rk .th{width:52px;height:52px;flex:none;border-radius:12px;object-fit:cover;background:#EEE}
.rk-ft{display:flex;align-items:center;justify-content:center;gap:4px;margin:12px 14px 0;height:44px;border-radius:16px;border:1.5px dashed #E6D7D0;font-size:13px;font-weight:700;color:var(--ink-2)}
.foot{margin:22px 18px 0;padding-bottom:calc(30px + env(safe-area-inset-bottom));text-align:center;font-size:11px;color:#BBADA6;line-height:1.7}
/* 小弹层:投稿说明 */
.mask{position:fixed;inset:0;z-index:50;background:rgba(20,12,8,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.mask.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;padding:22px 20px calc(22px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#fff;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet.on{transform:none}
.sheet h3{margin:0;font-size:19px;font-weight:900}
.sheet p{margin:8px 0 0;font-size:14px;color:var(--ink-2);line-height:1.65}
.sheet .rb{margin-top:14px;padding:14px;border-radius:16px;background:#FFF1EB;text-align:center}
.sheet .rb small{display:block;font-size:12px;color:#B5634C;font-weight:700}
.sheet .rb b{font-size:18px;font-weight:900;color:var(--ink)}
.sheet .rb em{font-style:normal;color:var(--brand);font-size:22px}
.sheet .pk{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sheet .pk a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:99px;background:#F7F1EE;font-size:13px;font-weight:700;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .bt2{display:flex;align-items:center;justify-content:center;margin-top:16px;height:48px;border-radius:99px;background:linear-gradient(135deg,#FF8A5B,#F4593C);color:#fff;font-size:16px;font-weight:900}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="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.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-left" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" fill="currentColor"/></symbol>
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M4 20l4-1 10-10-3-3L5 16l-1 4zM14 7l3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="i-redo" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</svg>
<div id="sc">
<header class="top" id="top">
<div class="nav">
<button class="bk" id="back" type="button" aria-label="返回"><svg class="ic"><use href="#i-back"/></svg></button>
<div class="tt"><b>孕妈广场</b><small id="today"></small></div>
<span class="ver">效果稿 V5 · 今日广场</span>
</div>
</header>
<!-- 01 今日一问 -->
<section class="q" id="q"></section>
<!-- 02 故事卡堆 -->
<div class="sh"><span class="no">02</span><h2>她们的故事</h2><small>左右滑,看下一张</small></div>
<div class="stk-wrap">
<div class="stk" id="stk"></div>
<div class="stk-ctl">
<span class="pg" id="pg"></span>
<span class="tr"><i id="tr"></i></span>
<button type="button" id="prev" aria-label="上一张"><svg class="ic"><use href="#i-left"/></svg></button>
<button type="button" id="next" aria-label="下一张"><svg class="ic"><use href="#i-right"/></svg></button>
</div>
</div>
<!-- 03 话题榜 -->
<div class="sh"><span class="no">03</span><h2>话题榜</h2><small id="rkSub">按在聊人数</small></div>
<nav class="tabs" id="tabs" role="tablist"></nav>
<div class="rank" id="rank"></div>
<a class="rk-ft" id="rkMore">进入广场看全部话题<svg class="ic" style="width:13px;height:13px"><use href="#i-right"/></svg></a>
<div class="foot">篇数、在聊人数、投票比例均为示例占位<br>效果稿 V5 · 今日广场</div>
</div>
<div class="mask" id="mask"></div>
<div class="sheet" id="sheet"></div>
<script src="../../guangchang/topics.js"></script>
<script src="../../guangchang/data.js"></script>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var T = window.GC_TOPICS || [], D = window.GC_DATA || {};
var TBY = {}; T.forEach(function (t) { TBY[t.id] = t; });
var HASH = location.hash || '';
var CAT = { family: { name: '家庭婚姻', k: '#E0566F', k2: '#F7A3B2' }, work: { name: '职场', k: '#3A72B8', k2: '#9CC0EA' }, baby: { name: '经验', k: '#2E8A7C', k2: '#93D3C7' } };
var esc = function (s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); };
var hs = function (s) { var x = 7; s = String(s); for (var i = 0; i < s.length; i++) x = (x * 31 + s.charCodeAt(i)) | 0; return Math.abs(x); };
var AV = []; for (var i = 1; i <= 22; i++) AV.push('m' + (i < 10 ? '0' : '') + i); for (i = 1; i <= 14; i++) AV.push('p' + (i < 10 ? '0' : '') + i);
var avSrc = function (name) { return '../../assets/img/mom/' + AV[hs(name) % AV.length] + '.jpg'; };
var fmt = function (n) { return n >= 10000 ? (n / 10000).toFixed(1).replace(/\.0$/, '') + '万' : n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : String(n); };
var topicUrl = function (id) { return '../../guangchang/?t=' + id + HASH; };
var noteUrl = function (id, k) { return '../../guangchang/?t=' + id + '&n=' + id + '-' + k + HASH; };
/* 返回 */
$('#back').addEventListener('click', function () { history.length > 1 ? history.back() : (location.href = '../../' + location.hash); });
var now = new Date();
$('#today').textContent = (now.getMonth() + 1) + '月' + now.getDate() + '日';
$('#sc').addEventListener('scroll', function () { $('#top').classList.toggle('on', this.scrollTop > 4); }, { passive: true });
/* ================= 01 今日一问:按日期从精选题里轮一个 ================= */
var QS = [
{ t: 'f02', q: '长辈按老经验叮嘱你时,你通常会?', a: '笑着应下,转头照自己的来', b: '当场讲道理,说清楚更省心' },
{ t: 'w01', q: '怀孕的事,你是什么时候告诉领导的?', a: '过了 12 周、稳了再说', b: '一确认就说,早安排早轻松' },
{ t: 'm10', q: '他觉得你在家养胎很轻松,你会?', a: '列给他看,我一天都在忙什么', b: '算了,懒得解释' },
{ t: 'b03', q: '刷孕期内容越刷越慌,你会?', a: '卸载 / 屏蔽,眼不见心不慌', b: '继续看,只是换成靠谱来源' },
{ t: 'f09', q: '过节亲戚围着肚子问东问西,你会?', a: '笑笑带过,熬过这顿饭', b: '找个理由,早点溜回房间' },
{ t: 'w02', q: '请产检假,你会提前多久开口?', a: '提前一周,正式发邮件', b: '前一天口头说一声就行' },
{ t: 'm06', q: '孕期最打动你的,是哪一种在意?', a: '一份用心挑的礼物', b: '一盆泡好的洗脚水' }
];
var dayIdx = Math.floor((now - new Date(now.getFullYear(), 0, 0)) / 864e5);
var Q = QS[dayIdx % QS.length], QT = TBY[Q.t] || T[0];
var pa = 38 + hs(Q.t + 'v') % 27; /* 占位比例 38~64 */
var votes = 1200 + hs(Q.q) % 3800;
var VK = 'gcv5-vote-' + Q.t + '-' + dayIdx;
function renderQ() {
var cat = CAT[QT.cat];
var avs = [0, 1, 2, 3].map(function (k) { return '<img loading="lazy" src="' + avSrc(Q.t + k) + '" alt="">'; }).join('');
$('#q').innerHTML = '<span class="wm">' + esc(QT.g) + '</span>' +
'<div class="hd"><span class="tag"><i></i>今日一问</span><span class="dt">01</span><span class="cat">#' + cat.name + '</span></div>' +
'<h3>' + esc(Q.q) + '</h3><p class="sub">来自话题「' + esc(QT.name) + '」</p>' +
'<div class="ops">' +
'<button class="op" type="button" data-v="a"><span class="bar"></span><span class="lt">A</span><span class="tx">' + esc(Q.a) + '</span><span class="pc">' + pa + '%</span></button>' +
'<button class="op" type="button" data-v="b"><span class="bar"></span><span class="lt">B</span><span class="tx">' + esc(Q.b) + '</span><span class="pc">' + (100 - pa) + '%</span></button>' +
'</div>' +
'<div class="ft"><span class="avs">' + avs + '</span><small id="qn">' + fmt(votes) + ' 位妈妈已表态,你呢?</small>' +
'<a class="go" href="' + topicUrl(QT.id) + '">看看大家怎么说<svg class="ic"><use href="#i-right"/></svg></a></div>';
var saved = null; try { saved = localStorage.getItem(VK); } catch (e) {}
if (saved) vote(saved, true);
}
function vote(v, quiet) {
var q = $('#q'); if (q.classList.contains('done')) return;
q.classList.add('done');
var A = pa, B = 100 - pa;
q.querySelectorAll('.op').forEach(function (b) {
var me = b.dataset.v === v; b.classList.toggle('me', me);
setTimeout(function () { b.querySelector('.bar').style.width = (b.dataset.v === 'a' ? A : B) + '%'; }, quiet ? 0 : 30);
});
$('#qn').textContent = (v === 'a' ? A : B) + '% 的妈妈和你想的一样';
if (!quiet) try { localStorage.setItem(VK, v); } catch (e) {}
}
renderQ();
$('#q').addEventListener('click', function (e) { var b = e.target.closest('.op'); if (b) vote(b.dataset.v); });
/* ================= 02 故事卡堆:带真实照片的笔记,按分类轮流排 ================= */
var POOL = { family: [], work: [], baby: [] };
T.forEach(function (t) {
var d = D[t.id]; if (!d || !d.notes) return;
d.notes.forEach(function (n, k) { if (n.photo) POOL[t.cat].push({ t: t, n: n, k: k + 1 }); });
});
var STORIES = [], order = ['family', 'work', 'baby'], guard = 0;
while (STORIES.length < 12 && guard++ < 60) order.forEach(function (c) { var p = POOL[c]; if (p.length && STORIES.length < 12) STORIES.push(p.splice(hs(c + guard) % p.length, 1)[0]); });
var TOTAL = STORIES.length + 1; /* +1:最后一张「轮到你了」 */
var cur = 0;
function storyHTML(s) {
var c = CAT[s.t.cat];
return '<img class="ph" loading="lazy" src="../../guangchang/' + esc(s.n.photo) + '" alt="">' +
'<div class="sh2"></div>' +
'<span class="kt"><i style="background:' + c.k + '"></i>' + c.name + '</span>' +
'<span class="lk"><svg class="ic"><use href="#i-heart"/></svg>' + fmt(s.n.likes || 0) + '</span>' +
'<div class="bt"><div class="tp"># ' + esc(s.t.name) + '</div><h4>' + esc(s.n.title) + '</h4>' +
'<div class="au"><img loading="lazy" src="' + avSrc(s.n.author) + '" alt=""><b>' + esc(s.n.author) + '</b><span>' + esc(s.n.stage || '') + '</span>' +
'<em class="rd">读全文<svg class="ic"><use href="#i-right"/></svg></em></div></div>';
}
var YOU = '<div class="in"><span class="pen"><svg class="ic"><use href="#i-pen"/></svg></span>' +
'<span class="k">STORY ' + TOTAL + ' / ' + TOTAL + '</span><div class="big">轮到你了</div>' +
'<p class="lede">看完她们的故事,<br>你也有一段想说的经历吗?<br>挑一个话题,写下来就好。</p>' +
'<div class="rw"><small>投稿被选中,每篇奖励</small><b><em>¥30</em> 现金 + <em>500</em> 兜豆</b></div>' +
'<button class="cta" type="button" data-join="1"><svg class="ic"><use href="#i-pen"/></svg>写我的故事</button></div>';
var stk = $('#stk'), cards = [];
STORIES.forEach(function (s, i) {
var el = document.createElement('a'); el.className = 'sc'; el.href = noteUrl(s.t.id, s.k); el.draggable = false;
el.innerHTML = storyHTML(s); stk.appendChild(el); cards.push(el);
});
var you = document.createElement('div'); you.className = 'sc you'; you.innerHTML = YOU; stk.appendChild(you); cards.push(you);
function layout(dx) {
cards.forEach(function (el, i) {
var d = i - cur, tf, op = 1, z = 100 - Math.abs(d);
if (d < 0) { tf = 'translate3d(-130%,0,0) rotate(-14deg)'; op = 0; }
else if (d === 0) { tf = 'translate3d(' + (dx || 0) + 'px,0,0) rotate(' + ((dx || 0) / 22) + 'deg)'; }
else if (d <= 2) {
var p = dx ? Math.min(Math.abs(dx) / 160, 1) : 0, dd = d - p;
tf = 'translate3d(0,' + (dd * 14) + 'px,0) scale(' + (1 - dd * 0.05) + ')';
op = d === 2 ? 0.9 : 1;
} else { tf = 'translate3d(0,28px,0) scale(.9)'; op = 0; }
el.style.transform = tf; el.style.opacity = op; el.style.zIndex = z;
el.style.pointerEvents = d === 0 ? 'auto' : 'none';
});
$('#pg').innerHTML = '<b>' + (cur + 1) + '</b> / ' + TOTAL;
$('#tr').style.width = ((cur + 1) / TOTAL * 100) + '%';
$('#prev').disabled = cur === 0; $('#next').disabled = cur === TOTAL - 1;
}
function go(n) { cur = Math.max(0, Math.min(TOTAL - 1, n)); layout(0); }
layout(0);
$('#prev').addEventListener('click', function () { go(cur - 1); });
$('#next').addEventListener('click', function () { go(cur + 1); });
/* 拖拽滑卡(触摸 + 鼠标),水平位移大才算滑,否则当点击 */
var drag = null, moved = false;
function pt(e) { var t = e.touches ? e.touches[0] : e; return { x: t.clientX, y: t.clientY }; }
function onDown(e) { if (e.target.closest('[data-join]')) return; var p = pt(e); drag = { x: p.x, y: p.y, dx: 0, lock: '' }; moved = false; }
function onMove(e) {
if (!drag) return; var p = pt(e), dx = p.x - drag.x, dy = p.y - drag.y;
if (!drag.lock && (Math.abs(dx) > 6 || Math.abs(dy) > 6)) drag.lock = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
if (drag.lock !== 'x') return;
if (e.cancelable) e.preventDefault();
moved = true; drag.dx = dx;
cards[cur].style.transition = 'none'; layout(dx);
}
function onUp() {
if (!drag) return; var dx = drag.dx; drag = null;
cards[cur].style.transition = '';
if (dx < -70 && cur < TOTAL - 1) go(cur + 1);
else if (dx > 70 && cur > 0) go(cur - 1);
else layout(0);
}
stk.addEventListener('touchstart', onDown, { passive: true });
stk.addEventListener('touchmove', onMove, { passive: false });
stk.addEventListener('touchend', onUp); stk.addEventListener('touchcancel', onUp);
stk.addEventListener('mousedown', function (e) { e.preventDefault(); onDown(e); });
window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp);
stk.addEventListener('click', function (e) {
if (moved) { e.preventDefault(); moved = false; return; }
if (e.target.closest('[data-join]')) { e.preventDefault(); openJoin(); }
});
/* 投稿说明弹层 */
function openJoin() {
var hot = T.filter(function (t) { return t.hot; }).slice(0, 6);
$('#sheet').innerHTML = '<h3>写下你的孕期故事</h3><p>选一个你有感触的话题,真实经历就好,不用写得很长。</p>' +
'<div class="rb"><small>投稿被选中,每篇奖励</small><b><em>¥30</em> 现金 + <em>500</em> 兜豆</b></div>' +
'<div class="pk">' + hot.map(function (t) { return '<a href="' + topicUrl(t.id) + '"># ' + esc(t.name) + '</a>'; }).join('') + '</div>' +
'<a class="bt2" href="../../guangchang/' + HASH + '">去广场投稿</a>';
$('#mask').classList.add('on'); $('#sheet').classList.add('on');
}
$('#mask').addEventListener('click', function () { $('#mask').classList.remove('on'); $('#sheet').classList.remove('on'); });
/* ================= 03 话题榜 ================= */
var catF = 'all';
var TABS = [['all', '全部', '#F4593C'], ['family', '家庭婚姻', CAT.family.k], ['work', '职场', CAT.work.k], ['baby', '经验', CAT.baby.k]];
function renderTabs() {
$('#tabs').innerHTML = TABS.map(function (x) {
return '<button type="button" role="tab" data-c="' + x[0] + '" style="--k:' + x[2] + '" class="' + (catF === x[0] ? 'on' : '') + '" aria-selected="' + (catF === x[0]) + '"><i></i>' + x[1] + '</button>';
}).join('');
}
function renderRank() {
var byTalk = function (a, b) { return b.talk - a.talk; }, list;
if (catF === 'all') { /* 全部:各分类各取前几名再合排,避免整榜都是一个分类 */
var q = { family: 4, work: 3, baby: 3 }; list = [];
Object.keys(q).forEach(function (c) { list = list.concat(T.filter(function (t) { return t.cat === c; }).sort(byTalk).slice(0, q[c])); });
list.sort(byTalk);
} else list = T.filter(function (t) { return t.cat === catF; }).sort(byTalk).slice(0, 10);
var max = list.length ? list[0].talk : 1;
$('#rank').innerHTML = list.map(function (t, i) {
var c = CAT[t.cat];
return '<a class="rk t' + (i + 1) + '" href="' + topicUrl(t.id) + '" style="--k:' + c.k + ';--k2:' + c.k2 + '">' +
'<span class="n">' + (i + 1) + '</span>' +
'<span class="bd"><span class="nm"><b>' + esc(t.name) + '</b></span>' +
'<span class="mt">' + (catF === 'all' ? '<span class="kc">' + c.name + '</span>' : '') + (t.hot ? '<span class="hot">热</span>' : '') + '<span class="hb"><i data-w="' + Math.max(12, Math.round(t.talk / max * 100)) + '"></i></span><span class="tk"><em>' + fmt(t.talk) + '</em> 在聊</span></span></span>' +
(t.ph ? '<img class="th" loading="lazy" src="../../' + esc(t.ph) + '" alt="">' : '') + '</a>';
}).join('');
$('#rkSub').textContent = (catF === 'all' ? '全部话题' : CAT[catF].name) + ' · 按在聊人数';
requestAnimationFrame(function () { requestAnimationFrame(function () {
document.querySelectorAll('#rank .hb i').forEach(function (b) { b.style.width = b.dataset.w + '%'; });
}); });
}
renderTabs(); renderRank();
$('#rkMore').href = '../../guangchang/' + HASH;
$('#tabs').addEventListener('click', function (e) {
var b = e.target.closest('button[data-c]'); if (!b || b.dataset.c === catF) return;
catF = b.dataset.c; renderTabs(); renderRank();
});
/* ================= 禁止下拉回弹 ================= */
var sx = 0, sy = 0;
document.addEventListener('touchstart', function (e) { if (e.touches.length === 1) { sx = e.touches[0].clientX; sy = e.touches[0].clientY; } }, { passive: true });
document.addEventListener('touchmove', function (e) {
if (e.touches.length !== 1) { if (e.cancelable) e.preventDefault(); return; }
var dx = e.touches[0].clientX - sx, dy = e.touches[0].clientY - sy;
if (Math.abs(dy) <= Math.abs(dx)) return;
var el = e.target;
while (el && el !== document.body && el !== document.documentElement) {
if (el.nodeType === 1) {
var oy = getComputedStyle(el).overflowY;
if ((oy === 'auto' || oy === 'scroll') && el.scrollHeight > el.clientHeight + 1) {
if (dy > 0 && el.scrollTop > 0) return;
if (dy < 0 && el.scrollTop + el.clientHeight < el.scrollHeight - 1) return;
}
}
el = el.parentNode;
}
if (e.cancelable) e.preventDefault();
}, { passive: false });
})();
</script>
</body>
</html>