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

去掉列表小框改整块淡色磨砂背景；关注6条作者+孕周标签+点赞头像+点赞一行放下、去小心心、头像4～6个窄屏自动减（v26110422）

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-04 09:14:49 +00:00
parent 007bc3667f
commit 7bdcf36ca7
27 changed files with 146 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26110421';
var VER = '26110422';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

2
js/gch/v4.js
View File

@@ -244,5 +244,5 @@
}
/* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
if (window.GC_FEED) init();
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110421'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110422'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})();

41
js/gch/v6.css
View File

@@ -123,11 +123,36 @@ html.night #gcHome.gv4.gv6 .ms-h b{color:#B9A9AE}
#gcHome.gv4.gv6 .g6-au em::before{content:"·";margin-right:3px}
#gcHome.gv4.gv6 .g6-nt .ms-h{margin-top:3px}
html.night #gcHome.gv4.gv6 .g6-au b{color:#C9BBBF}
/* 11-04 用户：下半部分加一点背景色、毛玻璃 →「大家都在关注」整块做成磨砂玻璃卡（粉 → 杏），去掉原来的虚线分隔 */
#gcHome.gv4.gv6 .g6-ms{position:relative;isolation:isolate;margin:18px -2px 0;padding:14px 12px 4px;border-top:0;border-radius:18px;
background:radial-gradient(150px 110px at 0% 0%,rgba(255,170,170,.26),transparent 70%),radial-gradient(160px 120px at 100% 60%,rgba(255,206,160,.26),transparent 70%),radial-gradient(140px 110px at 20% 100%,rgba(255,196,214,.22),transparent 70%),linear-gradient(170deg,rgba(255,244,244,.74),rgba(255,248,240,.64));
-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px -14px rgba(220,110,110,.38)}
#gcHome.gv4.gv6 .g6-ms .g6-nt{border-bottom-color:rgba(232,190,186,.45)}
#gcHome.gv4.gv6 .g6-ms .g6-nt:last-child{border-bottom:0}
html.night #gcHome.gv4.gv6 .g6-ms{background:linear-gradient(170deg,rgba(64,46,52,.6),rgba(56,46,42,.55));border-color:rgba(255,255,255,.08);box-shadow:none}
/* 11-04 用户二改：去掉「大家都在关注」外面的小框，整个孕妈广场模块铺一层淡色磨砂背景（粉 → 杏，下半部分不再全白） */
#gcHome.gv4.gv6{background:
radial-gradient(240px 180px at 0% 62%,rgba(255,170,170,.26),transparent 72%),
radial-gradient(240px 200px at 100% 85%,rgba(255,206,160,.28),transparent 72%),
linear-gradient(180deg,#FFFDFB 0%,rgba(255,245,242,.9) 45%,rgba(255,240,234,.86) 100%);
-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
border:1px solid rgba(255,255,255,.7)}
#gcHome.gv4.gv6 .g6-ms{border-top-color:rgba(232,190,186,.6)}
#gcHome.gv4.gv6 .g6-nt{border-bottom-color:rgba(232,190,186,.45)}
html.night #gcHome.gv4.gv6{background:linear-gradient(180deg,rgba(58,44,50,.72),rgba(54,44,42,.68));border-color:rgba(255,255,255,.06)}
/* 11-04 用户：作者头像 + 名字 + 孕周（评论区同款灰色小标签）+ 点赞头像 + N 人点赞 全放一行，不换行；去掉小心心 */
#gcHome.gv4.gv6 .g6-mt{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden}
#gcHome.gv4.gv6 .g6-mt .g6-au{display:flex;align-items:center;gap:3px;flex:0 1 auto;min-width:0;margin:0}
#gcHome.gv4.gv6 .g6-mt .g6-au img{flex:none;width:18px;height:18px;border-radius:50%;object-fit:cover}
#gcHome.gv4.gv6 .g6-mt .g6-au b{overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#6F625F;min-width:0}
#gcHome.gv4.gv6 .g6-mt .stg{flex:none;font-style:normal;font-size:10.5px;line-height:16px;padding:0 5px;border-radius:99px;background:#F5EFEC;color:#A08C86}
#gcHome.gv4.gv6 .g6-mt .ms-h{flex:none;display:flex;align-items:center;margin:0 0 0 2px;gap:0}
#gcHome.gv4.gv6 .g6-mt .g6-avs{margin-right:3px}
#gcHome.gv4.gv6 .g6-mt .ms-h b{font-size:12px}
html.night #gcHome.gv4.gv6 .g6-mt .stg{background:rgba(255,255,255,.1);color:#C9BBBF}
/* 紧凑一点，好让一行放下（11-04） */
#gcHome.gv4.gv6 .g6-mt{gap:4px;font-size:11.5px}
#gcHome.gv4.gv6 .g6-mt .g6-au img{width:16px;height:16px}
#gcHome.gv4.gv6 .g6-mt .g6-au b{font-size:11.5px}
#gcHome.gv4.gv6 .g6-mt .stg{font-size:10px;padding:0 4px}
#gcHome.gv4.gv6 .g6-mt .g6-avs img{width:15px;height:15px;margin-left:-6px}
#gcHome.gv4.gv6 .g6-mt .g6-avs img:first-child{margin-left:0}
#gcHome.gv4.gv6 .g6-mt .ms-h b{font-size:11.5px}
/* 再省 ~30px 给点赞头像：缩略图 56→50、行内间距收紧、头像多叠 1px；「人点赞」→「点赞」 */
#gcHome.gv4.gv6 .g6-nt{gap:8px}
#gcHome.gv4.gv6 .g6-ph{width:50px;height:50px;margin-left:4px}
#gcHome.gv4.gv6 .g6-mt .g6-avs img{margin-left:-7px}
#gcHome.gv4.gv6 .g6-mt .g6-avs img:first-child{margin-left:0}

25
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=26110421';
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110422';
document.head.appendChild(l);
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110421';
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110422';
s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
document.body.appendChild(s);
@@ -92,18 +92,29 @@
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">' + (i < 3 ? avs(i) : '<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></span>';
/* 11-04 用户：「这 6 篇要把作者和头像调出来」→ 标题下加一行 作者头像 + 名字 · 孕周（孕周从点赞行挪过来）；头像算法和广场页 avOf 一致，同一作者两边同一张 */
var au = x.author ? '<span class="g6-au"><img src="' + esc(x.avatar || auAv(x.author)) + '" alt="" loading="lazy" decoding="async" width="36" height="36"><b>' + esc(x.author) + '</b>' + (x.stage ? '<em>' + esc(x.stage.replace(/\s+/g, '')) + '</em>' : '') + '</span>' : '';
/* 11-04 用户：一行放下 作者头像 + 名字 + 孕周（评论区同款小标签）+ 点赞头像（仅前 3 条）+ N 人点赞；不要小心心、不换行 */
var n = x.likes || 0,
au = x.author ? '<span class="g6-au"><img src="' + esc(x.avatar || auAv(x.author)) + '" alt="" loading="lazy" decoding="async" width="36" height="36"><b>' + esc(x.author) + '</b></span>' : '',
st = x.stage ? '<i class="stg">' + esc(x.stage.replace(/\s+/g, '')) + '</i>' : '',
heat = '<span class="g6-mt">' + au + st + '<span class="ms-h">' + (i < 3 ? avs(i) : '') + '<b>' + (n >= 1e4 ? Math.round(n / 1e3) / 10 + '万' : n) + ' 点赞</b></span></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>' + au + heat + '</span>' +
'<span class="ms-m"><span class="ms-q">' + esc(x.title) + '</span>' + heat + '</span>' +
(x.photo ? '<img class="g6-ph" src="' + esc(x.photo) + '" alt="" loading="lazy">' : '<i class="ms-go">›</i>') + '</a>';
}).join('');
all.textContent = '去广场看更多 ›';
all.classList.remove('hide');
/* 11-04 用户：点赞数别用红字 → 浅灰小心形 + 灰字；同日二改：前 3 条点赞前加回小头像（每条 6～8 个、更小），后 3 条不带 */
likeTick();
fitMeta(); setTimeout(fitMeta, 600);
}
/* 一行放不下（窄屏）就从点赞头像里一个个减，最少留 2 个；作者名不截断 */
function fitMeta() {
[].forEach.call(list.querySelectorAll('.g6-mt'), function (m) {
var ims = m.querySelectorAll('.g6-avs img'), k = ims.length, nm = m.querySelector('.g6-au b');
function tight() { return m.scrollWidth > m.clientWidth + 1 || (nm && nm.scrollWidth > nm.clientWidth + 1); }
while (k > 2 && tight()) ims[--k].remove();
});
}
/* 11-03 用户：「点赞数前面放几个小头像，偶尔换一个，相当于有人新点赞进来」
→ 火苗换成 3～6 个叠放小头像；每 4～7 秒随机挑一行：其中一个头像原地换成别人（点赞数不动）。
@@ -121,7 +132,7 @@
var avaAt = 0;
function avaEl(n) { return '<img src="assets/img/mom/' + n + '.jpg" alt="" loading="lazy" decoding="async" width="40" height="40">'; }
/* 11-03 用户：「头像错落一下，不一定都是 3 个，3、4、5、6 个都有」→ 每行个数打乱（固定表，刷新不跳），头像按顺序不重复取 */
var AV_N = [7, 6, 8]; /* 11-04 二改：只前 3 条带头像，每条 6～8 个、头像缩小 */
var AV_N = [5, 4, 6]; /* 11-04 三改：作者 + 孕周 + 点赞头像要挤一行，6～8 个放不下 → 4～6 个 */ /* 11-04 二改：只前 3 条带头像，每条 6～8 个、头像缩小 */
function avs(i) {
var h = '', c = AV_N[i] || 3;
if (!i) avaAt = 0;

17
js/kit.css
View File

@@ -108,11 +108,12 @@ html.night .lv-i em{color:#F1E6EE}
/* 11-04 用户：「我的孕期工具」标题和下面「孕期百宝箱」一样大、字下半截一样垫一条小色块（写在这里而不是 mama-box.css：本文件在首页一定加载，且晚于 mama-box.css） */
.dock-head .dock-title{flex:none;padding:0 3px;font-size:21px;font-weight:900;letter-spacing:.5px;color:#2A1E1E;background:linear-gradient(transparent 58%,#FFD6A0 58%,#FFD6A0 92%,transparent 92%)}
html.night .dock-head .dock-title{color:#F1E6EE}
/* 11-04 用户：「模块下半部分全白，加一点点背景色，毛玻璃风格」→ 下方 4 条做成磨砂玻璃卡：半透明暖色 + 模糊 + 白色高光描边，底下垫两团很淡的色块透出来 */
.kit-rows{position:relative;isolation:isolate;margin:12px -2px 0;padding:6px 12px 2px;border-radius:18px;
background:radial-gradient(120px 90px at 8% 0%,rgba(255,190,160,.30),transparent 70%),radial-gradient(140px 100px at 100% 100%,rgba(196,176,255,.26),transparent 70%),linear-gradient(160deg,rgba(255,246,241,.72),rgba(250,245,255,.62));
-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px -14px rgba(200,120,100,.4)}
.kit-rows .kr{border-bottom-color:rgba(226,196,186,.45)}
.kit-rows .kr:last-child{border-bottom:0}
html.night .kit-rows{background:linear-gradient(160deg,rgba(60,48,58,.6),rgba(46,42,62,.55));border-color:rgba(255,255,255,.08);box-shadow:none}
/* 11-04 用户二改：「主题不要框起来的小框，直接一个大的背景」→ 去掉 4 条外面的磨砂卡，改成整个百宝箱模块铺一层淡色磨砂背景（上浅下稍深，下半部分不再全白） */
#homeBody>section#kitHome.kit-home{background:
radial-gradient(220px 160px at 0% 100%,rgba(255,190,160,.30),transparent 72%),
radial-gradient(240px 170px at 100% 75%,rgba(196,176,255,.28),transparent 72%),
linear-gradient(180deg,rgba(255,252,250,.78) 0%,rgba(255,244,238,.74) 55%,rgba(248,241,255,.72) 100%);
-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px -18px rgba(200,120,100,.4)}
#kitHome .kit-rows .kr{border-bottom-color:rgba(226,196,186,.5)}
html.night #homeBody>section#kitHome.kit-home{background:linear-gradient(180deg,rgba(52,44,54,.7),rgba(44,40,58,.66));border-color:rgba(255,255,255,.06);box-shadow:none}

2
js/kit.js
View File

@@ -9,7 +9,7 @@
if (/[?&]kit=0(?:&|$)/.test(location.search)) return;
var box = document.getElementById('kit'), sec = document.getElementById('kitHome');
if (!box || !sec) return;
var V = '26110421';
var V = '26110422';
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/kit.css?v=' + V; document.head.appendChild(l);
document.documentElement.classList.add('has-kit');

2
js/share-card.js
View File

@@ -8,7 +8,7 @@
postMessage 不是实时投递，微信在分享那一刻才派发，所以每次换内容都要再报一次；子页面没引 jweixin，这里按需加载。 */
(function (g) {
'use strict';
var V = '26110421';
var V = '26110422';
var isWx = /MicroMessenger/i.test(navigator.userAgent || '');
var waiting = [], loading = false;
function ready(cb) {