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

测试列表滚动小条+每测一张配图、首页广场入口条/关注列表去红去头像、卡堆5秒自动轮播、百宝箱三入口顶栏标题、返回首页（v26110410）

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-04 07:14:03 +00:00
parent c460b8337a
commit 4aa7a01ecd
54 changed files with 150 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
js/gch/v4.css
View File

@@ -102,3 +102,18 @@
#gcHome.gv4 .g4-slg{margin-left:8px;align-self:center;margin-top:3px;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#C08A86;letter-spacing:.5px;white-space:nowrap}
#gcHome.gv4 .g4-slg i{width:9px;height:9px;flex:none;background:#F2879C;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 018-2.8A4.5 4.5 0 0120 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 018-2.8A4.5 4.5 0 0120 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat}
html.night #gcHome.gv4 .g4-slg{color:#B79A9E}
/* 11-04 入口条改版：去掉头像串 → 图标块 + 两行字 + 「进广场」（箭头隔几秒往右推一下，提示可点） */
#gcHome.gv4 .g4-sub{gap:10px;padding:9px 9px 9px 10px;border-radius:18px;background:linear-gradient(100deg,#FFF3F5,#FFE6EC);border:1px solid #FFDCE4;box-shadow:0 6px 14px -12px rgba(224,86,111,.6)}
#gcHome.gv4 .g4-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#fff;color:#F2627E;box-shadow:0 3px 8px -5px rgba(242,98,126,.55)}
#gcHome.gv4 .g4-ic svg{width:21px;height:21px}
#gcHome.gv4 .g4-st{display:flex;flex-direction:column;gap:2px}
#gcHome.gv4 .g4-st b{font-size:14px;font-weight:800;color:#3A2A2E;overflow:hidden;text-overflow:ellipsis}
#gcHome.gv4 .g4-st small{font-size:11px;color:#A8908F;overflow:hidden;text-overflow:ellipsis}
#gcHome.gv4 .g4-in{height:30px;padding:0 9px 0 13px;font-size:13px}
#gcHome.gv4 .g4-in i{font-size:16px;animation:g4Nudge 2.8s ease-in-out infinite}
@keyframes g4Nudge{0%,70%,100%{transform:none}78%{transform:translateX(3px)}86%{transform:none}92%{transform:translateX(2px)}}
html.night #gcHome.gv4 .g4-sub{background:#3A2F3E;border-color:transparent}
html.night #gcHome.gv4 .g4-ic{background:#2F2737}
html.night #gcHome.gv4 .g4-st b{color:#F1E6EE}
@media (prefers-reduced-motion:reduce){#gcHome.gv4 .g4-in i{animation:none}}

17
js/gch/v4.js
View File

@@ -45,7 +45,9 @@
/* 11-03 用户：首页孕妈广场右上角的分类（全部 / 家庭婚姻 / 职场 / 经验）取消，换一句小 slogan */
'<span class="g4-slg"><i></i>孕期路上，有人陪你</span></div>' +
/* 11-02 用户：「逛广场」单独挂在右边突兀 → 整行做成入口条（浅粉底，整条可点），右侧实心「进广场」 */
'<div class="g4-sub" role="button" tabindex="0"><span class="g4-avs" aria-hidden="true">' + ['p05', 'm07', 'p11', 'm16', 'p02', 'm03', 'p09', 'm12', 'p13', 'm19'].map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy">'; }).join('') + '</span><span class="g4-st">看看<b>其他妈妈</b>的故事</span><span class="g4-in">进广场<i>›</i></span></div>' +
/* 11-04 用户：「那一排头像去掉，重新设计得更协调，引导用户点进广场」→ 左边图标块 + 两行字（主句 + 小字说有什么），右边「进广场」箭头轻推；不写篇数（11-03 规则） */
'<div class="g4-sub" role="button" tabindex="0"><i class="g4-ic" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h8A2.5 2.5 0 0 1 17 6.5v5a2.5 2.5 0 0 1-2.5 2.5H10l-3.6 2.8c-.5.4-1.2 0-1.2-.6V14H6.5A2.5 2.5 0 0 1 4 11.5z" fill="currentColor"/><path d="M19 9.5c.6.4 1 1.1 1 1.9v4.1a2 2 0 0 1-2 2h-.6v1.7c0 .5-.6.8-1 .5L13.6 17.5H12" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" opacity=".55"/></svg></i>' +
'<span class="g4-st"><b>看看其他孕妈的真实故事</b><small>孕期、家庭、职场，天天有新笔记</small></span><span class="g4-in">进广场<i>›</i></span></div>' +
'<div class="g4-stage"><div class="g4-deck" aria-live="polite"></div>' +
/* 11-03 用户：左右翻的按钮去掉，「1/8」挪到原来按钮的位置（卡堆右下） —— 翻页靠左右滑 / 点后面露出的卡角 */
'<div class="g4-rail"><span class="g4-pg"><b>1</b><i>/8</i></span></div></div>' +
@@ -227,9 +229,20 @@
var io = new IntersectionObserver(function (es) { seen = es[0].isIntersecting; if (seen) tryPlay(); }, { threshold: .6, rootMargin: '0px 0px -110px 0px' });
io.observe(deck);
}
/* 11-04 用户：「8 张卡自己也轮播，5 秒左右一次；手滑照样能翻」→ 卡堆在屏幕里、页面在前台、没在拖、首次滑动提示演完才自动翻；
手碰过卡堆后停 8 秒再接着轮。系统开了「减少动态效果」不自动翻。 */
if (!reduce && 'IntersectionObserver' in window) {
var apOn = false, apHold = 0;
new IntersectionObserver(function (es) { apOn = es[0].isIntersecting; }, { threshold: .5 }).observe(deck);
['touchstart', 'mousedown'].forEach(function (ev) { deck.addEventListener(ev, function () { apHold = Date.now() + 8000; }, { passive: true }); });
setInterval(function () {
if (!apOn || document.hidden || drag || Date.now() < apHold || document.querySelector('.mb-coach') || sec.querySelector('.g4-hint:not(.off)') || cards.length < 2) return;
next();
}, 5000);
}
sec.dispatchEvent(new Event('gc4-ready')); /* V6 合并版等这个再往里插「其他妈妈也在搜」 */
}
/* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
if (window.GC_FEED) init();
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110409'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110410'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})();

6
js/gch/v6.css
View File

@@ -105,3 +105,9 @@ html.night #gcHome.gv4.gv6 .g6-avs img{border-color:#2F2737}
#gcHome.gv4.gv6 .g6-nt .ms-h{flex-wrap:nowrap;white-space:nowrap}
/* 11-04 用户：模块左下角粉色「进孕妈广场 ›」删掉（上面已有「去广场看更多 ›」） */
#gcHome.gv4.gv6 .g4-all{display:none}
/* 11-04 用户：「点赞用红色字体扎眼」「前面头像弱化标题」→ 去头像，小心形 + 灰字，标题更突出 */
#gcHome.gv4.gv6 .g6-nt .ms-h{gap:3px;color:#B19C96}
#gcHome.gv4.gv6 .g6-hz{flex:none;width:12px;height:12px;color:#E8BFC0}
#gcHome.gv4.gv6 .ms-h b{font-weight:600;color:#A08A85}
html.night #gcHome.gv4.gv6 .ms-h b{color:#B9A9AE}

8
js/gch/v6.js
View File

@@ -6,9 +6,9 @@
(function () {
var sec = document.getElementById('gcHome');
if (!sec) return;
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110409';
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110410';
document.head.appendChild(l);
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110409';
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110410';
s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
document.body.appendChild(s);
@@ -87,7 +87,7 @@
var l6 = pick6();
if (!l6.length) { box.style.display = 'none'; return; }
list.innerHTML = l6.map(function (x, i) {
var n = x.likes || 0, heat = '<span class="ms-h">' + avs(i) + '<b>' + (n >= 1e4 ? Math.round(n / 1e3) / 10 + '万' : n) + ' 人点赞</b><em class="g6-st">' + esc(x.stage || '') + '</em></span>';
var n = x.likes || 0, heat = '<span class="ms-h"><svg class="g6-hz" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.6a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10.2-7.5 10.2z" fill="currentColor"/></svg><b>' + (n >= 1e4 ? Math.round(n / 1e3) / 10 + '万' : n) + ' 人点赞</b><em class="g6-st">' + esc(x.stage || '') + '</em></span>';
var q = new URLSearchParams(location.search); q.set('n', x.id);
return '<a class="ms-it ripple g6-nt" href="' + esc('guangchang/?' + q.toString() + location.hash) + '"><i class="ms-no">' + (i + 1) + '</i>' +
'<span class="ms-m"><span class="ms-q">' + esc(x.title) + '</span>' + heat + '</span>' +
@@ -95,7 +95,7 @@
}).join('');
all.textContent = '去广场看更多 ›';
all.classList.remove('hide');
likeTick();
/* 11-04 用户：点赞前的小头像去掉（抢标题）、点赞数别用红字 → 换成浅灰小心形 + 灰字，likeTick 不再跑 */
}
/* 11-03 用户：「点赞数前面放几个小头像，偶尔换一个，相当于有人新点赞进来」
→ 火苗换成 3～6 个叠放小头像；每 4～7 秒随机挑一行：其中一个头像原地换成别人（点赞数不动）。