首页孕妈广场效果稿 V6：广场卡堆 + 其他妈妈也在搜合并成一块（?gcv=6），汇总页置顶
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -21,7 +21,7 @@ header p{margin:6px 0 0;font-size:13px;color:#8A7570;line-height:1.55}
|
||||
.pic img{width:100%;display:block}
|
||||
.go{display:flex;align-items:center;justify-content:center;height:46px;margin:12px 16px 16px;border-radius:14px;background:#2B2320;color:#fff;font-size:14.5px;font-weight:800;text-decoration:none}
|
||||
</style></head><body>
|
||||
<header><h1>首页「孕妈广场」· 五版效果稿</h1><p>点图片或按钮会打开真实首页，并自动滚到孕妈广场这一块，可以直接点、切分类、左右滑。</p></header>
|
||||
<header><h1>首页「孕妈广场」· 效果稿</h1><p>点图片或按钮会打开真实首页，并自动滚到孕妈广场这一块，可以直接点、切分类、左右滑。</p></header>
|
||||
<div class="list" id="list"></div>
|
||||
<script>
|
||||
var V = [
|
||||
@@ -29,10 +29,11 @@ var V = [
|
||||
['广场人群', '一块空地上站着十几位妈妈，头上轮流冒出话题气泡；「你」的空位就是投稿'],
|
||||
['话题弹幕', '「此刻最热」小卡 + 三行慢慢飘过的话题弹幕，按住暂停、点了进话题'],
|
||||
['故事卡堆', '一叠真实照片故事卡，左右滑翻页，最后一张「轮到你了」投稿'],
|
||||
['今日一问', '每天一道投票题，点完看比例；下面一排横滑的话题照片卡']
|
||||
['今日一问', '每天一道投票题，点完看比例；下面一排横滑的话题照片卡'],
|
||||
['合并版（推荐）', '孕妈广场 + 其他妈妈也在搜合成一块：上面 V4 故事卡堆（压矮，左右手滑或点箭头翻），下面 6 个热搜问题']
|
||||
];
|
||||
var h = location.hash;
|
||||
document.getElementById('list').innerHTML = V.map(function (v, i) {
|
||||
document.getElementById('list').innerHTML = V.slice().reverse().map(function (v, j) { var i = V.length - 1 - j;
|
||||
var u = '../../?gcv=' + (i + 1) + h;
|
||||
return '<div class="it"><div class="hd"><b>V' + (i + 1) + '</b><div><h2>' + v[0] + '</h2><small>' + v[1] + '</small></div></div>' +
|
||||
'<a class="pic" href="' + u + '"><img src="v' + (i + 1) + '.jpg?1" alt="' + v[0] + '" loading="lazy"></a>' +
|
||||
|
||||
18
demo/gch/v6.css
Normal file
18
demo/gch/v6.css
Normal file
@@ -0,0 +1,18 @@
|
||||
/* 11-02 效果稿 V6 · 合并版：在 V4 基础上压矮卡堆、去掉「大家在聊」标签行，下面接「其他妈妈也在搜」 */
|
||||
#gcHome.gv4.gv6 .g4-stage{height:248px}
|
||||
#gcHome.gv4.gv6 .g4-tt{font-size:15px}
|
||||
#gcHome.gv4.gv6 .g4-s-t{margin-top:8px;font-size:22px}
|
||||
#gcHome.gv4.gv6 .g4-s-d{margin-top:4px;font-size:12px}
|
||||
#gcHome.gv4.gv6 .g4-s-n{margin-top:2px}
|
||||
#gcHome.gv4.gv6 .g4-s-avs{display:none}
|
||||
#gcHome.gv4.gv6 .g4-tags{display:none}
|
||||
#gcHome.gv4.gv6 .g6-ms{margin-top:20px;padding-top:16px;border-top:1px dashed #F1DED6}
|
||||
#gcHome.gv4.gv6 .g6-mh{display:flex;align-items:center;gap:8px;margin-bottom:2px}
|
||||
#gcHome.gv4.gv6 .g6-mt{margin:0;font-size:17px;font-weight:900;letter-spacing:.3px;color:#2A1E1E}
|
||||
#gcHome.gv4.gv6 .g6-mt span{background:linear-gradient(transparent 58%,#FFE066 58%,#FFE066 92%,transparent 92%);padding:0 3px}
|
||||
#gcHome.gv4.gv6 .g6-wk{margin-left:auto;padding:2px 9px;border-radius:99px;background:#FFEDE6;color:#E0573A;font-size:11.5px;font-weight:700}
|
||||
#gcHome.gv4.gv6 .ms-it{padding:10px 2px}
|
||||
#gcHome.gv4.gv6 .ms-q{font-size:15px}
|
||||
#gcHome.gv4.gv6 .g4-foot{margin-top:8px}
|
||||
html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
|
||||
#gcHome.gv4.gv6 .g4-s-r{margin-top:10px}
|
||||
BIN
demo/gch/v6.jpg
Normal file
BIN
demo/gch/v6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
51
demo/gch/v6.js
Normal file
51
demo/gch/v6.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/* 11-02 首页「孕妈广场」效果稿 V6 · 合并版：孕妈广场（V4 故事卡堆，压矮）+ 其他妈妈也在搜（6 个问题）合成一个模块
|
||||
用户定：小标题仍叫「其他妈妈也在搜」；卡堆左右手滑、点箭头都能翻。
|
||||
做法：先套 V4（v4.css + v4.js），再在卡堆下面接「其他妈妈也在搜」，原来那块 #pregTips 藏起来。
|
||||
列表沿用首页 .ms-* 样式（写在 #pregTips 里的 <style>，块藏了样式照样生效），数据同 assets/data/qa/hot.json 前 6 条。 */
|
||||
(function () {
|
||||
var sec = document.getElementById('gcHome');
|
||||
if (!sec) return;
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'demo/gch/v4.css?' + Date.now();
|
||||
document.head.appendChild(l);
|
||||
var s = document.createElement('script'); s.src = 'demo/gch/v4.js?' + Date.now();
|
||||
s.onload = merge;
|
||||
document.body.appendChild(s);
|
||||
|
||||
var FIRE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="currentColor"/><path d="M12 19.5a2.6 2.6 0 01-2.6-2.6c0-1.6 1.3-2.5 2-3.6.3 1 .9 1.6 1.6 1.9.9.4 1.6 1.2 1.6 2.1A2.6 2.6 0 0112 19.5z" fill="#FFD36B"/></svg>';
|
||||
var FIRE_W = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="#FFE07A"/></svg>';
|
||||
function esc(t) { return String(t == null ? '' : t).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||||
|
||||
function merge() {
|
||||
sec.classList.add('gv6');
|
||||
var mk = sec.querySelector('.g4-mark'); if (mk) mk.textContent = '效果稿 V6';
|
||||
var old = document.getElementById('pregTips'); if (old) old.style.display = 'none';
|
||||
var wk = document.getElementById('msWk'), wkT = wk && wk.textContent.trim();
|
||||
var box = document.createElement('div');
|
||||
box.className = 'g6-ms';
|
||||
box.innerHTML =
|
||||
'<div class="g6-mh"><h3 class="g6-mt"><span>其他妈妈也在搜</span></h3>' +
|
||||
'<span class="ms-live" aria-hidden="true">' + FIRE.replace('currentColor', 'currentColor') + '实时热搜</span>' +
|
||||
(wkT ? '<span class="g6-wk">' + esc(wkT) + '</span>' : '') + '</div>' +
|
||||
'<div class="ms-list g6-list"></div>' +
|
||||
'<button type="button" class="ms-all g6-all hide"></button>';
|
||||
var foot = sec.querySelector('.g4-foot');
|
||||
sec.insertBefore(box, foot);
|
||||
var list = box.querySelector('.g6-list'), all = box.querySelector('.g6-all');
|
||||
var tot = (window.__mbPulse && window.__mbPulse.total && +window.__mbPulse.total.value) || 1510000;
|
||||
fetch('assets/data/qa/hot.json?' + Date.now()).then(function (r) { return r.ok ? r.json() : []; }).catch(function () { return []; }).then(function (bank) {
|
||||
if (!bank || !bank.length) { box.style.display = 'none'; return; }
|
||||
list.innerHTML = bank.slice(0, 6).map(function (x, i) {
|
||||
var n = tot * (+x.heat || 0), heat = x.heat ? '<span class="ms-h">' + FIRE + '<b>' + (n >= 1e4 ? Math.round(n / 1e3) / 10 + '万' : Math.round(n)) + ' 人看过</b></span>' : '';
|
||||
var bd = x.badge ? '<span class="ms-bd' + (x.badge === '爆' ? ' bao' : x.badge === '新' ? ' new' : '') + '">' + (x.badge === '爆' ? FIRE_W : '') + esc(x.badge) + '</span>' : '';
|
||||
return '<a class="ms-it ripple" href="' + esc((x.href || '') + location.search + location.hash) + '"><i class="ms-no">' + (i + 1) + '</i>' +
|
||||
'<span class="ms-m"><span class="ms-q">' + esc(x.q) + '</span>' + heat + '</span>' + bd + '<i class="ms-go">›</i></a>';
|
||||
}).join('');
|
||||
if (bank.length > 6) {
|
||||
all.textContent = '查看全部 ' + bank.length + ' 个问题 ›';
|
||||
all.classList.remove('hide');
|
||||
/* 全部问题页在 app.js 里（openQA），借原来那块的「查看全部」按钮触发 */
|
||||
all.addEventListener('click', function () { var o = document.getElementById('msAll'); if (o) o.click(); });
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -2495,9 +2495,9 @@
|
||||
<script src="guangchang/topics.js?v=26110127"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script>
|
||||
/* 11-02 首页「孕妈广场」五版效果稿：地址带 ?gcv=1~5 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块；不带参数完全不影响 */
|
||||
/* 11-02 首页「孕妈广场」五版效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块；不带参数完全不影响 */
|
||||
(function () {
|
||||
var m = location.search.match(/[?&]gcv=([1-5])(?:&|$)/);
|
||||
var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
|
||||
if (!m) return;
|
||||
var n = m[1], l = document.createElement('link'), s = document.createElement('script');
|
||||
l.rel = 'stylesheet'; l.href = 'demo/gch/v' + n + '.css?' + Date.now();
|
||||
|
||||
Reference in New Issue
Block a user