去掉列表小框改整块淡色磨砂背景;关注6条作者+孕周标签+点赞头像+点赞一行放下、去小心心、头像4~6个窄屏自动减(v26110422)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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); }
|
||||
})();
|
||||
|
||||
@@ -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
25
js/gch/v6.js
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user