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

孕妈广场：首页加逛广场入口、帖子返回落广场首页；参差瀑布流+图上压字；分类·话题胶囊层级；话题名与179篇帖子口语化重写

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 09:43:22 +00:00
parent 5fc072fb50
commit f2b27f9b6a
8 changed files with 744 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo/gch/v4.css
View File

@@ -11,6 +11,9 @@
#gcHome.gv4 .g4-cat button[data-cat=work].on{color:#3A72B8}
#gcHome.gv4 .g4-cat button[data-cat=baby].on{color:#2E8A7C}
#gcHome.gv4 .g4-sub{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:12px;color:#9A817C}
#gcHome.gv4 .g4-in{margin-left:auto;flex:none;height:26px;padding:0 6px 0 11px;border:0;border-radius:99px;background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:1px;box-shadow:0 4px 10px -4px rgba(242,98,126,.7)}
#gcHome.gv4 .g4-in i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px}
#gcHome.gv4 .g4-in:active{transform:scale(.95)}
#gcHome.gv4 .g4-avs{display:flex}
#gcHome.gv4 .g4-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px;background:#FFE3D3}
#gcHome.gv4 .g4-avs img:first-child{margin-left:0}

14
demo/gch/v4.js
View File

@@ -34,20 +34,21 @@
var hot = l.filter(function (t) { return t.hot; });
return (cat ? hot : hot.filter(function (_, i) { return i % 3 === 0; })).concat(l.filter(function (t) { return !t.hot; })).slice(0, 3);
}
/* 11-02 用户：「进广场首页太深，只能点详情再返回」→ 点帖子只带 ?n=（返回落在广场首页，不落在单个话题）；话题标签才带 ?t= */
function go(id, nid) {
location.href = 'guangchang/' + (id ? '?t=' + encodeURIComponent(id) + (nid ? '&n=' + encodeURIComponent(nid) : '') : '') + location.hash;
location.href = 'guangchang/' + (nid ? '?n=' + encodeURIComponent(nid) : id ? '?t=' + encodeURIComponent(id) : '') + location.hash;
}
sec.className = sec.className.replace(/\bgv\d\b/g, '') + ' gv4';
sec.innerHTML =
'<div class="g4-head"><h2 class="g4-title"><span>孕妈广场</span></h2>' +
'<span class="g4-cat" role="tablist" aria-label="话题分类"><button type="button" class="on" data-cat="">全部</button><button type="button" data-cat="family">家庭婚姻</button><button type="button" data-cat="work">职场</button><button type="button" data-cat="baby">经验</button></span></div>' +
'<div class="g4-sub"><span class="g4-avs" aria-hidden="true">' + ['p05', 'm07', 'p11', 'm16'].map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy">'; }).join('') + '</span><span>翻一翻，看看其他妈妈的故事</span></div>' +
'<div class="g4-sub"><span class="g4-avs" aria-hidden="true">' + ['p05', 'm07', 'p11', 'm16'].map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy">'; }).join('') + '</span><span>翻一翻，看看其他妈妈的故事</span><button type="button" class="g4-in">逛广场<i>›</i></button></div>' +
'<div class="g4-stage"><div class="g4-deck" aria-live="polite"></div>' +
'<div class="g4-rail"><span class="g4-pg"><b>1</b><i>/8</i></span>' +
'<button type="button" class="g4-arr prev" aria-label="上一张">‹</button><button type="button" class="g4-arr next" aria-label="下一张">›</button></div></div>' +
'<div class="g4-tags"></div>' +
'<div class="g4-foot"><button type="button" class="g4-all">去广场看全部 ' + T.length + ' 个话题 ›</button><span class="g4-mark">效果稿 V4</span></div>';
'<div class="g4-foot"><button type="button" class="g4-all">进孕妈广场，看全部 ' + (window.GC_FEED ? window.GC_FEED.length + ' 篇分享' : T.length + ' 个话题') + ' ›</button><span class="g4-mark">效果稿 V4</span></div>';
sec.classList.remove('hide');
var deck = sec.querySelector('.g4-deck'), pgB = sec.querySelector('.g4-pg b'), pgI = sec.querySelector('.g4-pg i'), tags = sec.querySelector('.g4-tags');
@@ -161,16 +162,17 @@
var c = e.target.closest('.g4-card');
if (!c) return;
if (c !== cards[idx]) { next(); return; } // 点到后面露出的卡角 → 翻到下一张
go(c.dataset.sub ? '' : c.dataset.t, c.dataset.n);
go(c.dataset.sub ? '' : c.dataset.t, c.dataset.sub ? '' : c.dataset.n);
});
deck.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') next(); else if (e.key === 'ArrowLeft') prev();
else if (e.key === 'Enter') { var c = cards[idx]; if (c) go(c.dataset.sub ? '' : c.dataset.t, c.dataset.n); }
else if (e.key === 'Enter') { var c = cards[idx]; if (c) go(c.dataset.sub ? '' : c.dataset.t, c.dataset.sub ? '' : c.dataset.n); }
});
sec.querySelector('.g4-arr.next').addEventListener('click', next);
sec.querySelector('.g4-arr.prev').addEventListener('click', prev);
tags.addEventListener('click', function (e) { var b = e.target.closest('button[data-t]'); if (b) go(b.dataset.t); });
sec.querySelector('.g4-all').addEventListener('click', function () { go(''); });
sec.querySelector('.g4-in').addEventListener('click', function () { go(''); });
sec.querySelector('.g4-cat').addEventListener('click', function (e) {
var b = e.target.closest('button[data-cat]');
if (!b || b.dataset.cat === cur) return; // 「全部」里滑块跟着卡片跳，所以按当前筛选判断，不按高亮判断
@@ -185,5 +187,5 @@
}
/* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
if (window.GC_FEED) init();
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110204'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110205'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})();