339 lines
22 KiB
HTML
339 lines
22 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">
|
|
<title>孕妈周刊 · 效果稿 V1</title>
|
|
<!-- 效果稿 V1 · 孕妈周刊(杂志封面):广场列表页演示,独立页面,不接后端;数据读 guangchang/topics.js + data.js -->
|
|
<style>
|
|
:root{
|
|
--paper:#F7F2EA;--paper-2:#EFE7DB;--ink:#221C18;--ink-2:#5E554E;--muted:#9B8F85;--rule:#D9CEC0;
|
|
--brand:#F4593C;--fam:#E0566F;--work:#3A72B8;--baby:#2E8A7C;
|
|
--serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC","SimSun",serif;
|
|
--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
|
|
--st:env(safe-area-inset-top);
|
|
}
|
|
*{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(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-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}
|
|
img{display:block}
|
|
#sc{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;background:var(--paper)}
|
|
#sc::-webkit-scrollbar{display:none}
|
|
|
|
/* ---------- 顶栏(盖在封面上,滚动后变纸色) ---------- */
|
|
.bar{position:sticky;top:0;z-index:30;height:calc(46px + var(--st));padding-top:var(--st);margin-bottom:calc(-46px - var(--st));
|
|
display:flex;align-items:center;padding-left:6px;padding-right:12px;color:#fff;transition:background .25s,color .25s,box-shadow .25s}
|
|
.bar.on{background:rgba(247,242,234,.94);color:var(--ink);box-shadow:0 1px 0 var(--rule);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
|
|
.bar .bk{width:38px;height:38px;display:grid;place-items:center;border-radius:50%}
|
|
.bar .bk svg{width:22px;height:22px}
|
|
.bar .tt{flex:1;text-align:center;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:4px;opacity:0;transition:opacity .25s;margin-right:-26px}
|
|
.bar.on .tt{opacity:1}
|
|
.bar .ver{font-size:11px;opacity:.75;letter-spacing:.5px;white-space:nowrap}
|
|
|
|
/* ---------- 封面 ---------- */
|
|
.cover{position:relative;height:620px;overflow:hidden;background:#3a302a;color:#fff}
|
|
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
|
|
.cover::after{content:"";position:absolute;inset:0;background:
|
|
linear-gradient(90deg,rgba(20,14,10,.5) 0,rgba(20,14,10,.18) 55%,rgba(20,14,10,0) 80%),
|
|
linear-gradient(180deg,rgba(20,14,10,.55) 0,rgba(20,14,10,.12) 26%,rgba(20,14,10,.12) 40%,rgba(20,14,10,.42) 60%,rgba(20,14,10,.88) 100%)}
|
|
.cv{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:calc(50px + var(--st)) 20px 22px}
|
|
.mast{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:8px}
|
|
.mast h1{margin:0;font-family:var(--serif);font-weight:900;font-size:50px;line-height:1;letter-spacing:6px;text-shadow:0 2px 14px rgba(0,0,0,.25)}
|
|
.mast .iss{text-align:right;font-size:11px;line-height:1.5;letter-spacing:1px;opacity:.95}
|
|
.mast .iss b{display:block;font-family:var(--serif);font-size:15px;letter-spacing:2px}
|
|
.mast-sub{display:flex;justify-content:space-between;font-size:11px;letter-spacing:3px;margin-top:6px;opacity:.85}
|
|
.cv .sp{flex:1}
|
|
.lines{list-style:none;margin:0 0 18px;padding:0;width:58%}
|
|
.lines li{margin-bottom:12px;padding-left:10px;border-left:2px solid var(--brand)}
|
|
.lines li small{display:block;font-size:11px;letter-spacing:2px;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.6)}
|
|
.lines li span{display:block;font-family:var(--serif);font-weight:700;font-size:14px;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35)}
|
|
.story .kick{display:inline-block;font-size:11px;letter-spacing:3px;padding:2px 8px;background:var(--brand);color:#fff;margin-bottom:10px}
|
|
.story h2{margin:0;font-family:var(--serif);font-weight:900;font-size:29px;line-height:1.28;letter-spacing:1px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
|
|
.story p{margin:10px 0 0;font-size:13px;line-height:1.6;opacity:.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
|
.story .by{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12px;opacity:.95}
|
|
.story .by img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.7)}
|
|
.story .by .rd{margin-left:auto;font-size:12px;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.7)}
|
|
|
|
/* ---------- 栏目导航 ---------- */
|
|
.secnav{position:sticky;top:calc(46px + var(--st));z-index:25;background:var(--paper);border-bottom:1px solid var(--ink);display:flex;padding:0 16px}
|
|
.secnav button{flex:1;height:44px;font-size:14px;color:var(--muted);position:relative;letter-spacing:1px}
|
|
.secnav button.on{color:var(--ink);font-weight:700}
|
|
.secnav button.on::after{content:"";position:absolute;left:28%;right:28%;bottom:-1px;height:3px;background:var(--c,var(--brand))}
|
|
|
|
/* ---------- 通用版块标题 ---------- */
|
|
.sec{padding:26px 20px 0}
|
|
.hd{display:flex;align-items:baseline;gap:10px;border-top:3px double var(--ink);padding-top:12px;margin-bottom:6px}
|
|
.hd h3{margin:0;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:3px}
|
|
.hd em{font-style:normal;font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
|
|
.hd .r{margin-left:auto;font-size:12px;color:var(--ink-2)}
|
|
.lede{font-size:13px;color:var(--ink-2);margin:0 0 6px}
|
|
|
|
/* ---------- 目录 ---------- */
|
|
.toc{list-style:none;margin:0;padding:0}
|
|
.toc li{border-bottom:1px solid var(--rule)}
|
|
.toc a{display:flex;gap:14px;padding:13px 0 12px;align-items:flex-start}
|
|
.toc .no{font-family:Georgia,"Times New Roman",var(--serif);font-size:26px;line-height:1;font-style:italic;color:var(--c);width:34px;flex:none;padding-top:2px}
|
|
.toc .bd{flex:1;min-width:0}
|
|
.toc .col{font-size:11px;letter-spacing:2px;color:var(--c);font-weight:700}
|
|
.toc .col i{font-style:normal;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:6px}
|
|
.toc .nm{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.4;margin-top:2px}
|
|
.toc .mt{font-size:12px;color:var(--muted);margin-top:3px}
|
|
.toc .hot{font-size:11px;color:var(--brand);border:1px solid var(--brand);padding:0 4px;margin-left:6px;letter-spacing:1px}
|
|
.more{display:block;width:100%;margin-top:12px;height:40px;border:1px solid var(--ink);font-size:13px;letter-spacing:2px;color:var(--ink)}
|
|
|
|
/* ---------- 征稿启事 ---------- */
|
|
.call{margin:26px 20px 0;border:1px solid var(--ink);padding:4px}
|
|
.call .in{border:1px solid var(--ink);padding:16px 16px 14px;position:relative;background:#FBF8F2}
|
|
.call .ti{text-align:center;font-family:var(--serif);font-weight:900;font-size:18px;letter-spacing:8px}
|
|
.call .ti small{display:block;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:3px;color:var(--muted);margin-top:2px}
|
|
.call p{margin:10px 0 0;font-size:13px;color:var(--ink-2);line-height:1.7;text-align:justify}
|
|
.call .pay{display:flex;justify-content:center;gap:0;margin:12px 0 2px;border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule)}
|
|
.call .pay div{flex:1;text-align:center;padding:8px 0}
|
|
.call .pay div+div{border-left:1px dashed var(--rule)}
|
|
.call .pay b{display:block;font-family:Georgia,var(--serif);font-size:22px;color:var(--brand);line-height:1.2}
|
|
.call .pay span{font-size:11px;color:var(--muted);letter-spacing:1px}
|
|
.call .act{display:flex;gap:10px;margin-top:12px}
|
|
.call .act a{flex:1;height:36px;display:grid;place-items:center;font-size:13px;letter-spacing:1px;border:1px solid var(--ink)}
|
|
.call .act a.p{background:var(--ink);color:var(--paper)}
|
|
.call .stamp{position:absolute;right:10px;top:10px;width:46px;height:46px;border:1.5px solid var(--brand);border-radius:50%;color:var(--brand);
|
|
display:grid;place-items:center;font-size:11px;line-height:1.15;text-align:center;transform:rotate(-14deg);font-weight:700;opacity:.85}
|
|
|
|
/* ---------- 专栏 ---------- */
|
|
.feat{display:block;margin-top:14px}
|
|
.feat .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
|
|
.feat .ph img{width:100%;height:100%;object-fit:cover}
|
|
.feat .ph .tag{position:absolute;left:0;bottom:0;background:var(--paper);color:var(--c);font-size:11px;letter-spacing:2px;font-weight:700;padding:5px 10px 3px 0}
|
|
.feat h4{margin:6px 0 0;font-family:var(--serif);font-weight:900;font-size:21px;line-height:1.38}
|
|
.feat p{margin:8px 0 0;font-size:14px;color:var(--ink-2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
|
.feat p::first-letter{font-family:var(--serif);font-size:30px;float:left;line-height:1;margin:3px 6px 0 0;color:var(--c);font-weight:900}
|
|
.by{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:10px}
|
|
.by img{width:20px;height:20px;border-radius:50%;object-fit:cover}
|
|
.by .nm{color:var(--ink-2)}
|
|
.by .lk{margin-left:auto;display:flex;align-items:center;gap:3px}
|
|
.by .lk svg{width:13px;height:13px}
|
|
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
|
|
.pair a{display:block;min-width:0}
|
|
.pair .ph{aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
|
|
.pair img.cvr{width:100%;height:100%;object-fit:cover}
|
|
.pair .col{font-size:11px;letter-spacing:2px;color:var(--c);font-weight:700;margin-top:8px}
|
|
.pair h5{margin:3px 0 0;font-family:var(--serif);font-weight:700;font-size:15px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
|
|
.pair .by{margin-top:6px}
|
|
.pair .by .lk{display:none}
|
|
.quote{display:block;margin:22px 0 0;padding:22px 20px 18px;background:var(--paper-2);position:relative;border-top:3px solid var(--c)}
|
|
.quote .mk{position:absolute;left:14px;top:-4px;font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--c);opacity:.35}
|
|
.quote q{display:block;quotes:none;font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.65;letter-spacing:.5px;padding-left:8px}
|
|
.quote .src{margin-top:12px;font-size:12px;color:var(--muted);text-align:right}
|
|
.quote .src b{color:var(--ink-2);font-weight:400}
|
|
.grp{margin-top:6px}
|
|
.grp+.grp{margin-top:26px;padding-top:4px;border-top:1px solid var(--ink)}
|
|
|
|
.colo{margin:34px 20px 0;padding:16px 0 calc(28px + env(safe-area-inset-bottom));border-top:3px double var(--ink);text-align:center;font-size:11px;color:var(--muted);letter-spacing:1px;line-height:1.9}
|
|
.colo b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);letter-spacing:6px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sc">
|
|
<header class="bar" id="bar">
|
|
<button class="bk" id="back" aria-label="返回"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></button>
|
|
<div class="tt">孕妈周刊</div>
|
|
<span class="ver">效果稿 V1 · 孕妈周刊</span>
|
|
</header>
|
|
<section class="cover" id="cover"></section>
|
|
<nav class="secnav" id="nav"></nav>
|
|
<main id="main"></main>
|
|
<footer class="colo">
|
|
<b>孕妈周刊</b>
|
|
第 44 期 · 2026 年 11 月刊 · 由妈妈们共同撰写<br>
|
|
本期文章与数字均为示例占位,正式版替换为真实分享
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="../../guangchang/topics.js"></script>
|
|
<script src="../../guangchang/data.js"></script>
|
|
<script>
|
|
(function () {
|
|
var T = window.GC_TOPICS || [], D = window.GC_DATA || {};
|
|
var $ = function (s) { return document.querySelector(s); };
|
|
var H = location.hash || '';
|
|
var COL = { /* 分类 → 杂志栏目名 */
|
|
family: { tab: '家庭婚姻', col: '家事 · 围炉', c: '#E0566F' },
|
|
work: { tab: '职场', col: '职场 · 手记', c: '#3A72B8' },
|
|
baby: { tab: '经验', col: '过来人 · 说', c: '#2E8A7C' }
|
|
};
|
|
var TABS = ['', 'family', 'work', 'baby'];
|
|
var cat = '', tocOpen = false;
|
|
|
|
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
|
function hash(s) { var x = 7; for (var i = 0; i < s.length; i++) x = (x * 31 + s.charCodeAt(i)) | 0; return Math.abs(x); }
|
|
var POOL = []; for (var i = 1; i <= 22; i++) POOL.push('m' + (i < 10 ? '0' : '') + i); for (i = 1; i <= 14; i++) POOL.push('p' + (i < 10 ? '0' : '') + i);
|
|
function av(name) { return '../../assets/img/mom/' + POOL[hash(name || '妈妈') % POOL.length] + '.jpg'; }
|
|
function fmt(n) { return n >= 10000 ? (n / 10000).toFixed(1) + '万' : String(n); }
|
|
function tUrl(id) { return '../../guangchang/?t=' + encodeURIComponent(id) + H; }
|
|
function nUrl(id, idx) { return '../../guangchang/?t=' + encodeURIComponent(id) + '&n=' + encodeURIComponent(id + '-' + idx) + H; }
|
|
var TBY = {}; T.forEach(function (t) { TBY[t.id] = t; });
|
|
|
|
/* 所有笔记扁平化 */
|
|
var NOTES = [];
|
|
T.forEach(function (t) {
|
|
var d = D[t.id]; if (!d || !d.notes) return;
|
|
d.notes.forEach(function (n, k) { NOTES.push({ t: t, n: n, idx: k + 1 }); });
|
|
});
|
|
function inCat(x) { return !cat || x.t.cat === cat; }
|
|
/* 「全部」时三栏轮流排,看起来像一本综合刊 */
|
|
function mix(list) {
|
|
if (cat) return list;
|
|
var b = { family: [], work: [], baby: [] }, out = [];
|
|
list.forEach(function (x) { (b[(x.t || x).cat] || b.family).push(x); });
|
|
for (var i = 0; out.length < list.length; i++) ['family', 'work', 'baby'].forEach(function (k) { if (b[k][i]) out.push(b[k][i]); });
|
|
return out;
|
|
}
|
|
function excerpt(body, n) { var s = String(body || '').replace(/\s+/g, ''); return s.length > n ? s.slice(0, n) + '…' : s; }
|
|
function pickQuote(body) {
|
|
var parts = String(body || '').split(/[。!?\n]/).map(function (p) { return p.trim(); });
|
|
var ok = function (p) { return p.length >= 12 && p.length <= 32 && !/[“”"「」::]|分享|办法|姐妹|参考|大家|评论/.test(p); };
|
|
for (var i = parts.length - 1; i > parts.length / 2; i--) if (ok(parts[i])) return parts[i];
|
|
for (i = 1; i < parts.length; i++) if (ok(parts[i])) return parts[i];
|
|
return parts[0].slice(0, 30);
|
|
}
|
|
var heart = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z"/></svg>';
|
|
function by(n, likes) {
|
|
return '<div class="by"><img loading="lazy" src="' + av(n.author) + '" alt=""><span class="nm">' + esc(n.author) + '</span><span>' + esc(n.stage || '') + '</span>' +
|
|
(likes ? '<span class="lk">' + heart + fmt(n.likes || 0) + '</span>' : '') + '</div>';
|
|
}
|
|
|
|
/* ---------- 封面 ---------- */
|
|
var COVER_PICK = { '': 'b07', family: 'm07', work: 'w02', baby: 'b08' };
|
|
function renderCover() {
|
|
var photo = NOTES.filter(function (x) { return x.n.photo && inCat(x); });
|
|
var pref = COVER_PICK[cat];
|
|
var main = photo.filter(function (x) { return x.t.id === pref; })[0] || photo[0];
|
|
if (!main) { $('#cover').innerHTML = ''; return; }
|
|
var pool = T.filter(function (t) { return (!cat || t.cat === cat) && t.id !== main.t.id; });
|
|
var lines = mix(pool.filter(function (t) { return t.hot; })).concat(pool.filter(function (t) { return !t.hot; })).slice(0, 3);
|
|
var m = COL[main.t.cat];
|
|
$('#cover').innerHTML =
|
|
'<img src="../../guangchang/' + esc(main.n.photo) + '" alt="">' +
|
|
'<div class="cv">' +
|
|
'<div class="mast"><h1>孕妈周刊</h1><div class="iss"><b>第 44 期</b>11 月刊 · 2026</div></div>' +
|
|
'<div class="mast-sub"><span>MAMA WEEKLY</span><span>' + (cat ? COL[cat].tab + '特辑' : '妈妈们自己写的杂志') + '</span></div>' +
|
|
'<div class="sp"></div>' +
|
|
'<ul class="lines">' + lines.map(function (t) {
|
|
return '<li><a href="' + tUrl(t.id) + '"><small>' + esc(COL[t.cat].col) + '</small><span>' + esc(t.name) + '</span></a></li>';
|
|
}).join('') + '</ul>' +
|
|
'<a class="story" href="' + nUrl(main.t.id, main.idx) + '">' +
|
|
'<span class="kick">本期封面故事 · ' + esc(m.tab) + '</span>' +
|
|
'<h2>' + esc(main.n.title) + '</h2>' +
|
|
'<p>' + esc(excerpt(main.n.body, 60)) + '</p>' +
|
|
'<div class="by"><img src="' + av(main.n.author) + '" alt=""><span>文 / ' + esc(main.n.author) + ' · ' + esc(main.n.stage || '') + '</span><span class="rd">阅读全文 →</span></div>' +
|
|
'</a>' +
|
|
'</div>';
|
|
}
|
|
|
|
/* ---------- 栏目导航 ---------- */
|
|
function renderNav() {
|
|
$('#nav').innerHTML = TABS.map(function (k) {
|
|
return '<button data-c="' + k + '" class="' + (k === cat ? 'on' : '') + '" style="--c:' + (k ? COL[k].c : 'var(--ink)') + '">' + (k ? COL[k].tab : '全部') + '</button>';
|
|
}).join('');
|
|
}
|
|
|
|
/* ---------- 正文 ---------- */
|
|
function renderMain() {
|
|
var topics = mix(T.filter(function (t) { return !cat || t.cat === cat; }));
|
|
var shown = tocOpen ? topics : topics.slice(0, 8);
|
|
var toc =
|
|
'<section class="sec"><div class="hd"><h3>本期目录</h3><em>Contents</em><span class="r">共 ' + topics.length + ' 个话题</span></div>' +
|
|
'<ol class="toc">' + shown.map(function (t, i) {
|
|
var c = COL[t.cat];
|
|
return '<li style="--c:' + c.c + '"><a href="' + tUrl(t.id) + '"><span class="no">' + (i < 9 ? '0' : '') + (i + 1) + '</span><div class="bd">' +
|
|
'<div class="col">' + esc(c.col) + (t.hot ? '<span class="hot">热议</span>' : '') + '</div>' +
|
|
'<div class="nm">' + esc(t.name) + '</div>' +
|
|
'<div class="mt">' + t.n + ' 篇来稿 · ' + fmt(t.talk) + ' 人在聊</div></div></a></li>';
|
|
}).join('') + '</ol>' +
|
|
(topics.length > 8 ? '<button class="more" id="more">' + (tocOpen ? '收起目录 ↑' : '展开完整目录(' + topics.length + ')↓') + '</button>' : '') +
|
|
'</section>';
|
|
|
|
var call =
|
|
'<section class="call"><div class="in"><div class="stamp">入选<br>有奖</div>' +
|
|
'<div class="ti">本刊征稿启事<small>CALL FOR STORIES</small></div>' +
|
|
'<p>孕期里那些说不出口的委屈、哭笑不得的小事、熬过来的经验,都值得被写下来。挑一个本期话题,写写你的故事,编辑部每期从来稿中选登。</p>' +
|
|
'<div class="pay"><div><b>¥30</b><span>现金稿酬</span></div><div><b>500</b><span>兜豆</span></div></div>' +
|
|
'<div class="act"><a class="p" href="' + tUrl(topics[0] ? topics[0].id : 'f01') + '">我要投稿</a><a href="../../guangchang/' + H + '">我的投稿</a></div>' +
|
|
'</div></section>';
|
|
|
|
/* 专栏:大图一篇 → 两篇小图并排 → 金句卡,循环 */
|
|
var pics = mix(NOTES.filter(function (x) { return x.n.photo && inCat(x); }));
|
|
var plain = mix(NOTES.filter(function (x) { return !x.n.photo && inCat(x); }));
|
|
var used = {}; var cvId = ($('#cover .story') || {}).getAttribute ? $('#cover .story').getAttribute('href') : '';
|
|
pics = pics.filter(function (x) { return cvId.indexOf('n=' + encodeURIComponent(x.t.id + '-' + x.idx)) < 0; });
|
|
var groups = [], pi = 0, qi = 0;
|
|
while (pi < pics.length && groups.length < 6) {
|
|
var g = '', f = pics[pi++], c = COL[f.t.cat];
|
|
g += '<a class="feat" style="--c:' + c.c + '" href="' + nUrl(f.t.id, f.idx) + '"><div class="ph"><img loading="lazy" src="../../guangchang/' + esc(f.n.photo) + '" alt=""><span class="tag">' + esc(c.col) + '</span></div>' +
|
|
'<h4>' + esc(f.n.title) + '</h4><p>' + esc(excerpt(f.n.body, 90)) + '</p>' + by(f.n, true) + '</a>';
|
|
var a = pics[pi], b = pics[pi + 1];
|
|
if (a && b) {
|
|
pi += 2;
|
|
g += '<div class="pair">' + [a, b].map(function (x) {
|
|
var cc = COL[x.t.cat];
|
|
return '<a style="--c:' + cc.c + '" href="' + nUrl(x.t.id, x.idx) + '"><div class="ph"><img class="cvr" loading="lazy" src="../../guangchang/' + esc(x.n.photo) + '" alt=""></div>' +
|
|
'<div class="col">' + esc(cc.col) + '</div><h5>' + esc(x.n.title) + '</h5>' + by(x.n, false) + '</a>';
|
|
}).join('') + '</div>';
|
|
}
|
|
var q = plain[qi++] || pics[pi++];
|
|
if (q) {
|
|
var qc = COL[q.t.cat];
|
|
g += '<a class="quote" style="--c:' + qc.c + '" href="' + nUrl(q.t.id, q.idx) + '"><span class="mk">“</span><q>' + esc(pickQuote(q.n.body)) + '</q>' +
|
|
'<div class="src">—— <b>' + esc(q.n.author) + '</b>,《' + esc(q.n.title) + '》</div></a>';
|
|
}
|
|
groups.push('<div class="grp">' + g + '</div>');
|
|
}
|
|
var cols =
|
|
'<section class="sec"><div class="hd"><h3>' + (cat ? COL[cat].col : '专栏') + '</h3><em>Features</em><span class="r">妈妈们的来稿</span></div>' +
|
|
groups.join('') + '</section>';
|
|
|
|
$('#main').innerHTML = toc + call + cols;
|
|
var mb = $('#more'); if (mb) mb.onclick = function () { tocOpen = !tocOpen; renderMain(); };
|
|
}
|
|
|
|
function render() { renderCover(); renderNav(); renderMain(); }
|
|
|
|
$('#nav').addEventListener('click', function (e) {
|
|
var b = e.target.closest('button'); if (!b) return;
|
|
var k = b.getAttribute('data-c'); if (k === cat) return;
|
|
cat = k; tocOpen = false; render();
|
|
var sc = $('#sc'); if (sc.scrollTop > 0) sc.scrollTop = 0;
|
|
});
|
|
$('#back').onclick = function () { history.length > 1 ? history.back() : (location.href = '../../' + location.hash); };
|
|
|
|
var bar = $('#bar'), sc = $('#sc');
|
|
sc.addEventListener('scroll', function () { bar.classList.toggle('on', sc.scrollTop > 420); }, { passive: true });
|
|
|
|
/* 禁止下拉回弹:往上找能朝该方向滚的容器,找不到才拦 */
|
|
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 });
|
|
|
|
render();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|