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

347 lines
24 KiB
HTML
Raw 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">
<title>孕妈广场 · 留言墙</title>
<!-- 效果稿 V3 · 留言墙(软木板便签):仅演示列表页视觉,点话题/笔记跳现版广场详情。数据读 guangchang/topics.js + data.js -->
<style>
:root{
--brand:#F4593C;--ink:#3A2A1E;--ink2:#6E5846;
--fam:#E0566F;--work:#3A72B8;--baby:#2E8A7C;
--hand:"Kaiti SC","STKaiti","KaiTi","BiauKai","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;background:#C99D70}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
/* ---------- 软木板:唯一滚动容器 ---------- */
.cork{background-color:#CFA273;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .08 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
radial-gradient(rgba(255,236,200,.35) 1px,transparent 1.6px),
radial-gradient(rgba(110,60,25,.28) 1.2px,transparent 1.8px);
background-size:180px 180px,13px 11px,9px 12px;
background-position:0 0,3px 5px,0 0}
#sc{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none}
#sc::-webkit-scrollbar{display:none}
#sc::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(120% 70% at 50% 30%,rgba(255,230,190,.18),rgba(70,35,10,.22) 100%)}
/* ---------- 顶部:木框横梁 + 标签夹 ---------- */
.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top)}
.rail{position:relative;height:50px;display:flex;align-items:center;padding:0 8px;
background:linear-gradient(180deg,#9A6A43,#80542F 70%,#6E4627);
box-shadow:inset 0 1px 0 rgba(255,220,180,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 3px 6px rgba(60,30,10,.35)}
.rail::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
background:repeating-linear-gradient(178deg,rgba(255,220,170,.0) 0 5px,rgba(255,220,170,.18) 6px,rgba(60,30,10,.0) 7px 11px,rgba(60,30,10,.25) 12px 13px)}
.bk{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#FFF3E2}
.bk:active{background:rgba(0,0,0,.15)}
.bk svg{width:22px;height:22px}
.ttl{position:relative;flex:1;display:flex;justify-content:center}
.ttl b{display:inline-block;padding:4px 14px 3px;background:#F7EEDC;color:#5A3A22;font-size:17px;font-weight:900;letter-spacing:2px;
transform:rotate(-1.2deg);box-shadow:0 2px 3px rgba(0,0,0,.3);border-radius:1px}
.ttl b::after{content:"";position:absolute}
.vtag{position:relative;width:60px;text-align:right;font-size:11px;line-height:1.2;color:rgba(255,240,220,.7);white-space:nowrap}
.bk{margin-right:24px}
.tabs{position:relative;display:flex;gap:8px;padding:12px 12px 6px;justify-content:space-between}
.tabs::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(rgba(50,25,8,.35),transparent)}
.tab{position:relative;flex:1;min-width:0;height:44px;margin-top:6px;border-radius:2px 2px 4px 4px;background:#F6EEDD;color:#6A5240;
font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:4px;
box-shadow:0 1px 1px rgba(0,0,0,.15),0 6px 8px -4px rgba(60,30,10,.45);transition:transform .18s,background .18s,color .18s}
.tab:nth-child(1){transform:rotate(-1.5deg)}
.tab:nth-child(2){transform:rotate(1deg)}
.tab:nth-child(3){transform:rotate(-.8deg)}
.tab:nth-child(4){transform:rotate(1.4deg)}
.tab i{font-style:normal;width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none}
.tab.on{background:var(--tc);color:#fff;transform:translateY(3px) rotate(0) scale(1.04)}
.tab.on i{background:#fff}
/* 黑色长尾夹 */
.tab .clip{position:absolute;top:-10px;left:50%;width:26px;height:12px;margin-left:-13px;border-radius:3px 3px 1px 1px;
background:linear-gradient(#4A4A4E,#1F1F22);box-shadow:0 2px 2px rgba(0,0,0,.35)}
.tab .clip::before{content:"";position:absolute;left:5px;right:5px;top:-7px;height:10px;border:2px solid #A9ABB0;border-bottom:0;border-radius:6px 6px 0 0}
.tab.on .clip{background:linear-gradient(#F27A5A,#C9452B)}
/* ---------- 墙面 ---------- */
main{position:relative;z-index:1;padding:8px 12px calc(30px + env(safe-area-inset-bottom))}
.hint{display:flex;justify-content:center;margin:6px 0 16px}
.hint span{display:inline-block;padding:5px 12px;background:rgba(255,248,235,.85);font-family:var(--hand);font-size:14px;color:#6A4A30;
transform:rotate(-.8deg);box-shadow:0 2px 4px rgba(60,30,10,.25)}
.hint em{font-style:normal;color:var(--brand);font-weight:800}
.wall{display:flex;gap:14px;align-items:flex-start}
.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px}
.col:nth-child(2){padding-top:18px}
.it{position:relative;display:block;width:100%;text-align:left;color:var(--ink);transform:rotate(var(--r,0deg));transition:transform .15s}
.it:active{transform:rotate(0) scale(.97)}
/* 便签纸:话题 */
.note{padding:20px 13px 12px;min-height:150px;background:linear-gradient(170deg,var(--n1),var(--n2));border-radius:1px 1px 2px 14px/1px 1px 2px 10px;
box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 14px -8px rgba(55,25,5,.55),inset 0 -14px 18px -14px rgba(120,70,20,.18);overflow:hidden}
.note::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:22px;
background:linear-gradient(135deg,rgba(0,0,0,0) 48%,rgba(90,50,20,.18) 50%,rgba(255,255,255,.55) 60%,var(--n2) 100%)}
.note .wm{position:absolute;right:6px;bottom:4px;font-size:64px;line-height:1;font-weight:900;color:var(--k);opacity:.08;font-family:var(--hand)}
.note .lb{position:relative;display:inline-block;font-size:11px;font-weight:800;color:var(--k);padding:0 6px;border:1.5px solid var(--k);border-radius:3px;line-height:17px;opacity:.9}
.note h3{position:relative;margin:8px 0 12px;font-size:15px;line-height:1.45;font-weight:900;color:#3A2618;letter-spacing:.2px}
.note h3::before{content:"# ";color:var(--k)}
.note .mt{position:relative;font-size:11px;color:#7A6250;display:flex;align-items:center;gap:6px}
.note .mt b{color:var(--k);font-weight:800}
.note .join{position:relative;display:inline-block;margin-top:8px;font-family:var(--hand);font-size:14px;color:var(--k);border-bottom:1.5px dashed var(--k);line-height:1.3}
.hot{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:2px solid rgba(214,58,40,.75);color:rgba(214,58,40,.85);
font-size:12px;font-weight:900;display:grid;place-items:center;transform:rotate(14deg);font-family:var(--hand)}
.hot::before{content:"";position:absolute;inset:2px;border:1px dashed rgba(214,58,40,.55);border-radius:50%}
/* 胶带(半透明 + 锯齿边) */
.tape{position:absolute;z-index:2;top:-9px;left:50%;width:62px;height:20px;margin-left:-31px;transform:rotate(var(--tr,-4deg));
background:var(--tp,rgba(255,252,240,.55));box-shadow:0 1px 2px rgba(0,0,0,.12);
-webkit-clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,16% 8%,20% 0,80% 0,84% 9%,88% 0,92% 8%,96% 0,100% 10%,100% 92%,96% 100%,92% 90%,88% 100%,84% 92%,80% 100%,20% 100%,16% 90%,12% 100%,8% 92%,4% 100%,0 90%);
clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,16% 8%,20% 0,80% 0,84% 9%,88% 0,92% 8%,96% 0,100% 10%,100% 92%,96% 100%,92% 90%,88% 100%,84% 92%,80% 100%,20% 100%,16% 90%,12% 100%,8% 92%,4% 100%,0 90%)}
.tape.w1{--tp:repeating-linear-gradient(45deg,rgba(255,180,190,.6) 0 6px,rgba(255,255,255,.45) 6px 12px)}
.tape.w2{--tp:repeating-linear-gradient(90deg,rgba(150,200,240,.55) 0 4px,rgba(255,255,255,.4) 4px 8px)}
.tape.w3{--tp:rgba(170,225,205,.6)}
.tape.cn{top:-6px;left:-10px;margin:0;width:46px;height:16px;--tr:-38deg}
/* 图钉 */
.pin{position:absolute;z-index:3;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;
background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9) 0 2px,var(--pc,#E2483A) 3.5px,var(--pd,#9B2418) 100%);
box-shadow:3px 4px 3px -1px rgba(40,15,0,.45)}
.pin.b{--pc:#3F7FD0;--pd:#1D4A86}.pin.g{--pc:#36A08F;--pd:#17594E}.pin.y{--pc:#F2B632;--pd:#A8740C}
/* 拍立得 */
.pola{background:#FCFAF5;padding:8px 8px 10px;border-radius:2px;
box-shadow:0 1px 1px rgba(0,0,0,.14),0 12px 16px -8px rgba(55,25,5,.55)}
.pola .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#E8DFD2}
.pola .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.02)}
.pola .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 0 0 18px rgba(80,50,20,.18)}
.pola .cap{margin:8px 2px 0;font-family:var(--hand);font-size:15px;line-height:1.4;color:#2E2118;font-weight:700;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.by{display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:11px;color:#8A7564;min-width:0}
.by img{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none}
.by .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.by .lk{flex:none;display:flex;align-items:center;gap:2px}
.by .lk svg{width:12px;height:12px}
.ctag{position:absolute;z-index:2;left:14px;top:14px;font-size:11px;font-weight:800;color:#fff;padding:0 6px;line-height:18px;border-radius:2px;background:var(--k);box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* 横格卡片:无图笔记 */
.card{background:#FFFDF7;padding:18px 12px 12px 22px;border-radius:2px;
background-image:linear-gradient(90deg,transparent 14px,rgba(224,86,111,.45) 14px,rgba(224,86,111,.45) 15px,transparent 15px),
repeating-linear-gradient(180deg,transparent 0 23px,rgba(70,120,190,.18) 23px 24px);
background-position:0 0,0 10px;
box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 14px -8px rgba(55,25,5,.5)}
.card .big{font-family:var(--hand);font-size:19px;font-weight:800;line-height:24px;color:var(--k)}
.card .sub{font-family:var(--hand);font-size:14px;line-height:24px;color:#5E4A3A}
.card .tt{margin-top:6px;font-size:13px;line-height:1.5;color:#3A2A1E;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 投稿:一叠空白便签 */
.stack{position:relative;margin:8px 4px 6px 2px;text-align:left}
.stack .sh{position:absolute;inset:0;background:#FFE58A;border-radius:1px;box-shadow:0 8px 10px -6px rgba(55,25,5,.5)}
.stack .sh.a{transform:rotate(5deg) translate(5px,4px);background:#FFD7A8}
.stack .sh.b{transform:rotate(-3.5deg) translate(-3px,3px);background:#FFF0B0}
.stack .tp{position:relative;padding:22px 12px 12px;background:linear-gradient(170deg,#FFF6C4,#FFE98E);transform:rotate(-1deg);
box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 14px -8px rgba(55,25,5,.55);
background-image:linear-gradient(170deg,#FFF6C4,#FFE98E)}
.stack .ln{height:22px;border-bottom:1.5px dashed rgba(150,100,30,.35)}
.stack .wr{font-family:var(--hand);font-size:19px;font-weight:800;color:#5A3A1A;line-height:26px;display:flex;align-items:center;gap:6px}
.stack .wr svg{width:20px;height:20px;color:var(--brand);flex:none}
.stack .rw{margin-top:8px;font-size:12px;color:#7A5A3A;line-height:1.5}
.stack .rw b{display:block;font-size:17px;color:var(--brand);font-weight:900;letter-spacing:.3px;line-height:1.35}
.stack .go{display:inline-flex;align-items:center;margin-top:8px;padding:0 10px;height:26px;border-radius:13px;background:var(--brand);color:#fff;font-size:12px;font-weight:800;box-shadow:0 2px 4px rgba(200,60,30,.35)}
.more{display:block;margin:26px auto 4px;padding:9px 18px;background:#F7EEDC;color:#5A3A22;font-size:14px;font-weight:800;transform:rotate(-1deg);box-shadow:0 6px 10px -5px rgba(55,25,5,.55)}
.foot{margin-top:18px;text-align:center;font-size:11px;color:rgba(60,30,10,.65)}
/* 投稿规则便签弹层 */
.mask{position:fixed;inset:0;z-index:50;background:rgba(40,20,5,.45);display:none;align-items:center;justify-content:center;padding:24px}
.mask.show{display:flex}
.rule{position:relative;width:100%;max-width:320px;padding:28px 20px 20px;background:linear-gradient(170deg,#FFF8D6,#FFEDA6);transform:rotate(-1deg);box-shadow:0 18px 30px -10px rgba(0,0,0,.5)}
.rule h3{margin:0 0 6px;font-family:var(--hand);font-size:22px;color:#4A2E14}
.rule .rb{font-size:13px;color:#7A5A3A}.rule .rb b{color:var(--brand);font-size:20px;font-weight:900}
.rule ol{margin:12px 0 16px;padding-left:20px;font-size:14px;line-height:1.7;color:#4A3828}
.rule .ok{display:block;width:100%;height:42px;border-radius:21px;background:var(--brand);color:#fff;font-size:15px;font-weight:800}
.rule .x{position:absolute;right:8px;top:8px;width:32px;height:32px;font-size:20px;color:#8A6A4A}
</style>
</head>
<body>
<div id="sc" class="cork">
<header class="top cork">
<div class="rail">
<button class="bk" id="back" type="button" aria-label="返回"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></button>
<div class="ttl"><b>孕妈广场</b></div>
<div class="vtag">效果稿<br>V3·留言墙</div>
</div>
<nav class="tabs" id="tabs"></nav>
</header>
<main>
<div class="hint"><span id="hint"></span></div>
<div class="wall" id="wall"><div class="col"></div><div class="col"></div></div>
<button class="more hide" id="more" type="button">再往下翻一面墙</button>
<div class="foot">墙上内容为示例占位 · 篇数、在聊、点赞均为演示数字</div>
</main>
</div>
<div class="mask" id="mask">
<div class="rule">
<span class="tape" style="--tr:3deg"></span>
<button class="x" id="rx" type="button" aria-label="关闭">×</button>
<h3>写一张贴上来</h3>
<div class="rb">投稿被选中,每篇奖励 <b>¥30</b> 现金 + <b>500</b> 兜豆</div>
<ol><li>挑一张你有话说的话题便签</li><li>写下你的真实经历,配图更好</li><li>编辑挑中后贴上墙,奖励发给你</li></ol>
<button class="ok" id="rgo" type="button">去写我的故事</button>
</div>
</div>
<script src="../../guangchang/topics.js"></script>
<script src="../../guangchang/data.js"></script>
<script>
(function () {
var $ = function (s) { return document.querySelector(s); };
var T = window.GC_TOPICS || [], D = window.GC_DATA || {};
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 (n) { return '../../assets/img/mom/' + AV[hs(n) % AV.length] + '.jpg'; };
var fmt = function (n) { return n >= 10000 ? (n / 10000).toFixed(1) + '万' : String(n); };
var CATS = [['', '全部', '#F4593C'], ['family', '家庭婚姻', '#E0566F'], ['work', '职场', '#3A72B8'], ['baby', '经验', '#2E8A7C']];
var CN = { family: '家庭婚姻', work: '职场', baby: '经验' };
var K = { family: '#C23A55', work: '#2F64A8', baby: '#21705F' };
var PAPER = {
family: [['#FFE3E8', '#FFC9D4'], ['#FFF1C2', '#FFE08A'], ['#FFE6D6', '#FFCDB0']],
work: [['#E2EEFC', '#C3D9F4'], ['#FFF4C6', '#FFE495'], ['#E8E6FA', '#D1CDF2']],
baby: [['#DDF4EC', '#BDE6D8'], ['#F4F7C8', '#E5EC9C'], ['#FFF1C2', '#FFE08A']]
};
var PINS = ['', 'b', 'g', 'y'], TAPES = ['', 'w1', 'w2', 'w3'];
var heart = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 20s-7-4.4-9.2-9A5 5 0 0 1 12 6.2 5 5 0 0 1 21.2 11C19 15.6 12 20 12 20z"/></svg>';
var cat = new URLSearchParams(location.search).get('c') || '';
if (!CN[cat]) cat = '';
var LIMIT = 28, shown = LIMIT, ITEMS = [];
function go(t, n) {
location.href = '../../guangchang/?t=' + encodeURIComponent(t) + (n ? '&n=' + encodeURIComponent(n) : '') + location.hash;
}
$('#back').onclick = function () { if (history.length > 1) history.back(); else location.href = '../../' + location.hash; };
function renderTabs() {
$('#tabs').innerHTML = CATS.map(function (c) {
return '<button type="button" class="tab' + (c[0] === cat ? ' on' : '') + '" data-c="' + c[0] + '" style="--tc:' + c[2] + '"><span class="clip"></span>' + (c[0] ? '<i></i>' : '') + c[1] + '</button>';
}).join('');
}
/* 墙上元素顺序:热门话题先贴;每个话题后面钉 1 张它的笔记(有照片→拍立得,无照片→横格卡),第二轮再补剩下的笔记 */
function build() {
var list = T.filter(function (t) { return !cat || t.cat === cat; });
if (!cat) { /* 全部:三类轮流排,热门在前 */
var by = ['family', 'work', 'baby'].map(function (c) { return list.filter(function (t) { return t.cat === c; }).sort(function (a, b) { return b.hot - a.hot; }); });
list = []; for (var r = 0; r < 20; r++) by.forEach(function (a) { if (a[r]) list.push(a[r]); });
} else list = list.slice().sort(function (a, b) { return b.hot - a.hot; });
var out = [{ k: 'stack' }], rest = [];
list.forEach(function (t) {
var ns = ((D[t.id] || {}).notes || []).map(function (n, i) { return { k: 'n', t: t, n: n, i: i }; });
ns.sort(function (a, b) { return (b.n.photo ? 1 : 0) - (a.n.photo ? 1 : 0); });
out.push({ k: 't', t: t });
if (ns[0]) out.push(ns[0]);
rest = rest.concat(ns.slice(1));
});
/* 剩下的笔记:拍立得和横格卡交替钉,墙面不单调 */
var byL = function (a, b) { return b.n.likes - a.n.likes; };
var ph = rest.filter(function (o) { return o.n.photo; }).sort(byL), tx = rest.filter(function (o) { return !o.n.photo; }).sort(byL), mix = [];
while (ph.length || tx.length) { if (tx.length) mix.push(tx.shift()); if (ph.length) mix.push(ph.shift()); }
/* 话题便签 + 首篇 为主线,每 3 张插一张补充笔记,横格卡不会全挤到墙底 */
var res = [out.shift()], j = 0;
while (out.length) { res.push(out.shift()); if (++j % 3 === 0 && mix.length) res.push(mix.shift()); }
return res.concat(mix);
}
function rot(seed, amp) { return ((hs(seed) % 1000) / 1000 * 2 - 1) * amp; }
function html(o, idx) {
if (o.k === 'stack') {
return '<button type="button" class="it stack" data-w="1"><span class="sh a"></span><span class="sh b"></span><div class="tp">' +
'<span class="pin"></span><div class="wr"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l4-1 11-11-3-3L5 16z"/><path d="M14 6l3 3"/></svg>写一张贴上来</div>' +
'<div class="ln"></div><div class="rw">被选中奖励<b>¥30 + 500 兜豆</b></div><span class="go">怎么参与 ›</span></div></button>';
}
var t = o.t, k = K[t.cat];
if (o.k === 't') {
var p = PAPER[t.cat][hs(t.id) % 3];
var tp = TAPES[hs(t.id + 'tp') % 4];
return '<button type="button" class="it note" data-t="' + t.id + '" style="--r:' + rot(t.id, 2.6).toFixed(2) + 'deg;--n1:' + p[0] + ';--n2:' + p[1] + ';--k:' + k + '">' +
'<span class="tape ' + tp + '" style="--tr:' + rot(t.id + 'r', 6).toFixed(1) + 'deg"></span>' +
'<span class="wm">' + esc(t.g) + '</span>' + (t.hot ? '<span class="hot">热</span>' : '') +
'<span class="lb">' + CN[t.cat] + '</span><h3>' + esc(t.name) + '</h3>' +
'<div class="mt"><span><b>' + t.n + '</b> 篇</span><span>·</span><span><b>' + fmt(t.talk) + '</b> 人在聊</span></div>' +
'<span class="join">+ 我也说两句</span></button>';
}
var n = o.n, nid = t.id + '-' + (o.i + 1), pin = PINS[hs(nid) % 4];
var by = '<div class="by"><img loading="lazy" src="' + avSrc(n.author) + '" alt=""><span class="nm">' + esc(n.author) + '</span><span class="lk">' + heart + fmt(n.likes) + '</span></div>';
if (n.photo) {
return '<button type="button" class="it pola" data-t="' + t.id + '" data-n="' + nid + '" style="--r:' + rot(nid, 3).toFixed(2) + 'deg;--k:' + k + '">' +
'<span class="pin ' + pin + '"></span><div class="ph"><img loading="lazy" src="../../guangchang/' + esc(n.photo) + '" alt=""></div>' +
'<span class="ctag">' + CN[t.cat] + '</span><div class="cap">' + esc(n.title) + '</div>' + by + '</button>';
}
return '<button type="button" class="it card" data-t="' + t.id + '" data-n="' + nid + '" style="--r:' + rot(nid, 2.4).toFixed(2) + 'deg;--k:' + k + '">' +
'<span class="tape cn ' + TAPES[hs(nid) % 4] + '"></span>' +
'<div class="big">' + esc(n.cover || '') + '</div>' + (n.coverSub ? '<div class="sub">' + esc(n.coverSub) + '</div>' : '') +
'<div class="tt">' + esc(n.title) + '</div>' + by + '</button>';
}
function renderWall(reset) {
var cols = document.querySelectorAll('#wall .col');
if (reset) { cols[0].innerHTML = cols[1].innerHTML = ''; ITEMS = build(); shown = Math.min(LIMIT, ITEMS.length); }
var start = reset ? 0 : +($('#wall').dataset.n || 0);
for (var i = start; i < shown; i++) {
var c = i === 0 ? cols[0] : (cols[0].offsetHeight <= cols[1].offsetHeight + 18 ? cols[0] : cols[1]);
c.insertAdjacentHTML('beforeend', html(ITEMS[i], i));
}
$('#wall').dataset.n = shown;
$('#more').classList.toggle('hide', shown >= ITEMS.length);
$('#more').style.display = shown >= ITEMS.length ? 'none' : '';
var nt = T.filter(function (t) { return !cat || t.cat === cat; }).length;
$('#hint').innerHTML = (cat ? '「' + CN[cat] + '」' : '墙上') + '贴着 <em>' + nt + '</em> 个话题 · 挑一张聊聊';
}
$('#tabs').addEventListener('click', function (e) {
var b = e.target.closest('[data-c]'); if (!b || b.dataset.c === cat) return;
cat = b.dataset.c; renderTabs(); renderWall(true); $('#sc').scrollTop = 0;
var q = new URLSearchParams(location.search); if (cat) q.set('c', cat); else q.delete('c');
var s = q.toString(); history.replaceState(history.state, '', location.pathname + (s ? '?' + s : '') + location.hash);
});
$('#wall').addEventListener('click', function (e) {
var b = e.target.closest('.it'); if (!b) return;
if (b.dataset.w) { $('#mask').classList.add('show'); return; }
go(b.dataset.t, b.dataset.n || '');
});
$('#more').onclick = function () { shown = Math.min(ITEMS.length, shown + LIMIT); renderWall(false); };
$('#rx').onclick = function () { $('#mask').classList.remove('show'); };
$('#mask').addEventListener('click', function (e) { if (e.target === this) this.classList.remove('show'); });
$('#rgo').onclick = function () { location.href = '../../guangchang/' + location.search.replace(/[?&]c=[^&]*/, '').replace(/^&/, '?') + location.hash; };
renderTabs(); renderWall(true);
/* 禁止下拉回弹:往上找能朝该方向滚的容器,找不到才拦 */
var sx = 0, sy = 0;
document.addEventListener('touchstart', function (e) { 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>