437 lines
31 KiB
HTML
437 lines
31 KiB
HTML
<!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 { '&': '&', '<': '<', '>': '>', '"': '"' }[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>
|