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

首页广场合并版 V6：测一测改素色白卡、两块小标题统一、热搜列表去掉与测试重复的一条

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 02:14:53 +00:00
parent b627ed76fc
commit 7198dc769e
4 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demo/gch/index.html
View File

@@ -30,13 +30,13 @@ var V = [
['话题弹幕', '「此刻最热」小卡 + 三行慢慢飘过的话题弹幕，按住暂停、点了进话题'],
['故事卡堆', '一叠真实照片故事卡，左右滑翻页，最后一张「轮到你了」投稿'],
['今日一问', '每天一道投票题，点完看比例；下面一排横滑的话题照片卡'],
['合并版（推荐）', '孕妈广场 + 其他妈妈也在搜合成一块：上面 V4 故事卡堆（压矮、字更清楚，左右手滑或点箭头翻），中间两个测一测，下面 6 个热搜问题']
['合并版（推荐）', '孕妈广场 + 其他妈妈也在搜合成一块：上面 V4 故事卡堆（压矮、字更清楚，左右手滑或点箭头翻），中间两个测一测（素色卡），下面 6 个热搜问题']
];
var h = location.hash;
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?2" alt="' + v[0] + '" loading="lazy"></a>' +
'<a class="pic" href="' + u + '"><img src="v' + (i + 1) + '.jpg?3" alt="' + v[0] + '" loading="lazy"></a>' +
'<a class="go" href="' + u + '">在首页打开 V' + (i + 1) + ' ' + v[0] + '</a></div>';
}).join('');
</script>

28
demo/gch/v6.css
View File

@@ -24,15 +24,21 @@ html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
#gcHome.gv4.gv6 .g4-by i{background:rgba(255,255,255,.28);font-size:11.5px}
#gcHome.gv4.gv6 .g4-k{font-size:12px;height:24px}
/* 11-02 用户：孕妈广场里放两个测试 —— 两张并排卡，在卡堆和「其他妈妈也在搜」之间 */
#gcHome.gv4.gv6 .g6-qz{margin-top:18px}
#gcHome.gv4.gv6 .g6-qh{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:15px;font-weight:900;color:#2A1E1E}
#gcHome.gv4.gv6 .g6-qh small{font-size:11.5px;font-weight:500;color:#A8928C}
/* 11-02 用户：孕妈广场里放两个测试 —— 两张并排卡，在卡堆和「其他妈妈也在搜」之间
11-02 用户：「颜色有点太多、和下面雷同、显得乱」→ 去掉紫/橙底和彩色标签：白卡 + 细边，上半是插画横幅，
下半深色标题 + 灰色信息，只留一个品牌粉「开始测 ›」；两块小标题统一成同一种样式，不再用黄色荧光笔 */
#gcHome.gv4.gv6 .g6-qz{margin-top:20px}
#gcHome.gv4.gv6 .g6-qh,#gcHome.gv4.gv6 .g6-mt{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;font-size:16px;font-weight:900;letter-spacing:.3px;color:#2A1E1E}
#gcHome.gv4.gv6 .g6-mt{margin:0}
#gcHome.gv4.gv6 .g6-mt span{background:none;padding:0}
#gcHome.gv4.gv6 .g6-qh small{font-size:12px;font-weight:500;color:#A8928C}
#gcHome.gv4.gv6 .g6-qr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#gcHome.gv4.gv6 .g6-q{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:150px;padding:12px 12px 11px;border-radius:18px;text-decoration:none;color:#2A1E1E;background:linear-gradient(160deg,var(--q1),var(--q2));box-shadow:0 8px 18px -12px var(--qs)}
#gcHome.gv4.gv6 .g6-q img{position:absolute;right:-12px;bottom:-14px;width:78px;height:78px;border-radius:50%;object-fit:cover;opacity:.95;border:3px solid rgba(255,255,255,.75)}
#gcHome.gv4.gv6 .g6-qk{align-self:flex-start;height:20px;padding:0 8px;border-radius:99px;display:flex;align-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--qc)}
#gcHome.gv4.gv6 .g6-qt{position:relative;margin-top:8px;font-size:15px;font-weight:900;line-height:1.35;max-width:9.5em}
#gcHome.gv4.gv6 .g6-qn{position:relative;margin-top:5px;font-size:11.5px;color:var(--qc);font-weight:700}
#gcHome.gv4.gv6 .g6-qg{position:relative;margin-top:auto;align-self:flex-start;height:26px;padding:0 11px;border-radius:99px;display:flex;align-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--qc)}
html.night #gcHome.gv4.gv6 .g6-qh{color:#F3E8F0}
#gcHome.gv4.gv6 .g6-q{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #F3E6E0;text-decoration:none;color:#2A1E1E;box-shadow:0 6px 16px -14px rgba(150,90,80,.5)}
#gcHome.gv4.gv6 .g6-q img{display:block;width:100%;height:84px;object-fit:cover;object-position:60% 45%;background:#FBF3EF}
#gcHome.gv4.gv6 .g6-qb{display:flex;flex-direction:column;gap:4px;padding:9px 11px 11px}
#gcHome.gv4.gv6 .g6-qt{font-size:14.5px;font-weight:800;line-height:1.38}
#gcHome.gv4.gv6 .g6-qf{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11.5px;color:#A8928C}
#gcHome.gv4.gv6 .g6-qg{flex:none;font-weight:800;color:#E0566F}
html.night #gcHome.gv4.gv6 .g6-qh,html.night #gcHome.gv4.gv6 .g6-mt{color:#F3E8F0}
html.night #gcHome.gv4.gv6 .g6-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#F3E8F0}
#gcHome.gv4.gv6 .g6-qt{text-wrap:balance}

BIN
demo/gch/v6.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 70 KiB

16
demo/gch/v6.js
View File

@@ -31,15 +31,15 @@
var foot = sec.querySelector('.g4-foot');
/* 两个测试：你是什么样的妈妈（已有 topic/ceshi）+ 你家准爸爸是哪种队友（新做 topic/duiyou） */
var QZ = [
{ href: 'topic/ceshi/', k: '妈妈类型', t: '测一测你是什么样的妈妈', n: '15.6万', img: 'topic/ceshi/img/hero.webp', c: '#7C5CFC', q1: '#F1ECFF', q2: '#E4DBFF', qs: 'rgba(124,92,252,.6)' },
{ href: 'topic/duiyou/', k: '队友类型', t: '你家准爸爸是哪种队友', n: '8.3万', img: 'topic/duiyou/img/hero.webp', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' }
{ href: 'topic/ceshi/', k: '妈妈类型', t: '你是什么样的妈妈？', n: '15.6万', img: 'topic/ceshi/img/hero.webp', c: '#7C5CFC', q1: '#F1ECFF', q2: '#E4DBFF', qs: 'rgba(124,92,252,.6)' },
{ href: 'topic/duiyou/', k: '队友类型', t: '准爸爸是哪种队友？', n: '8.3万', img: 'topic/duiyou/img/hero.webp', c: '#F07A2E', q1: '#FFF3E6', q2: '#FFE2C8', qs: 'rgba(240,122,46,.6)' }
];
var qz = document.createElement('div');
qz.className = 'g6-qz';
qz.innerHTML = '<div class="g6-qh">测一测<small>· 1 分钟，看看你和他</small></div><div class="g6-qr">' + QZ.map(function (q) {
return '<a class="g6-q ripple" href="' + esc(q.href + location.search + location.hash) + '" style="--qc:' + q.c + ';--q1:' + q.q1 + ';--q2:' + q.q2 + ';--qs:' + q.qs + '">' +
'<img src="' + esc(q.img) + '" alt="" loading="lazy" onerror="this.remove()">' +
'<span class="g6-qk">' + esc(q.k) + '</span><b class="g6-qt">' + esc(q.t) + '</b><span class="g6-qn">' + q.n + ' 人测过</span><span class="g6-qg">去测试 ›</span></a>';
qz.innerHTML = '<div class="g6-qh">测一测<small>1 分钟，看看你和他</small></div><div class="g6-qr">' + QZ.map(function (q) {
return '<a class="g6-q ripple" href="' + esc(q.href + location.search + location.hash) + '">' +
'<img src="' + esc(q.img) + '" alt="" loading="lazy">' +
'<span class="g6-qb"><b class="g6-qt">' + esc(q.t) + '</b><span class="g6-qf"><span>' + q.n + ' 人测过</span><span class="g6-qg">开始测 ›</span></span></span></a>';
}).join('') + '</div>';
sec.insertBefore(qz, foot);
sec.insertBefore(box, foot);
@@ -47,7 +47,9 @@
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 QH = QZ.map(function (q) { return q.href; });
list.innerHTML = bank.filter(function (x) { return QH.indexOf(x.href) < 0; }).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>' +