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

v26110236 首页孕妈广场：「逛广场」并进副标题行，整行做成可点的入口条

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 14:17:21 +00:00
parent 2c136c2cf2
commit 2cdea16f2e
8 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demo/gch/v4.css
View File

@@ -10,10 +10,13 @@
#gcHome.gv4 .g4-cat button[data-cat=family].on{color:#E0566F} #gcHome.gv4 .g4-cat button[data-cat=family].on{color:#E0566F}
#gcHome.gv4 .g4-cat button[data-cat=work].on{color:#3A72B8} #gcHome.gv4 .g4-cat button[data-cat=work].on{color:#3A72B8}
#gcHome.gv4 .g4-cat button[data-cat=baby].on{color:#2E8A7C} #gcHome.gv4 .g4-cat button[data-cat=baby].on{color:#2E8A7C}
#gcHome.gv4 .g4-sub{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:12px;color:#9A817C} #gcHome.gv4 .g4-sub{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:6px 6px 6px 8px;border-radius:99px;background:linear-gradient(90deg,#FFEFF2,#FFE3EA);border:1px solid #FFD6E0;font-size:12px;color:#9A817C;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
#gcHome.gv4 .g4-in{margin-left:auto;flex:none;height:26px;padding:0 6px 0 11px;border:0;border-radius:99px;background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:1px;box-shadow:0 4px 10px -4px rgba(242,98,126,.7)} #gcHome.gv4 .g4-sub:active{transform:scale(.98)}
#gcHome.gv4 .g4-st{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gcHome.gv4 .g4-st b{font-weight:900;color:#E0566F}
#gcHome.gv4 .g4-in{flex:none;height:26px;padding:0 7px 0 11px;border-radius:99px;background:linear-gradient(135deg,#FF8A9E,#F2627E);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:1px;box-shadow:0 4px 10px -4px rgba(242,98,126,.7)}
#gcHome.gv4 .g4-in i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px} #gcHome.gv4 .g4-in i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px}
#gcHome.gv4 .g4-in:active{transform:scale(.95)}
#gcHome.gv4 .g4-avs{display:flex} #gcHome.gv4 .g4-avs{display:flex}
#gcHome.gv4 .g4-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px;background:#FFE3D3} #gcHome.gv4 .g4-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;margin-left:-5px;background:#FFE3D3}
#gcHome.gv4 .g4-avs img:first-child{margin-left:0} #gcHome.gv4 .g4-avs img:first-child{margin-left:0}

7
demo/gch/v4.js
View File

@@ -43,7 +43,8 @@
sec.innerHTML = sec.innerHTML =
'<div class="g4-head"><h2 class="g4-title"><span>孕妈广场</span></h2>' + '<div class="g4-head"><h2 class="g4-title"><span>孕妈广场</span></h2>' +
'<span class="g4-cat" role="tablist" aria-label="话题分类"><button type="button" class="on" data-cat="">全部</button><button type="button" data-cat="family">家庭婚姻</button><button type="button" data-cat="work">职场</button><button type="button" data-cat="baby">经验</button></span></div>' + '<span class="g4-cat" role="tablist" aria-label="话题分类"><button type="button" class="on" data-cat="">全部</button><button type="button" data-cat="family">家庭婚姻</button><button type="button" data-cat="work">职场</button><button type="button" data-cat="baby">经验</button></span></div>' +
'<div class="g4-sub"><span class="g4-avs" aria-hidden="true">' + ['p05', 'm07', 'p11', 'm16'].map(function (n) { return '<img src="' + ava(n) + '" alt="" loading="lazy">'; }).join('') + '</span><span>翻一翻，看看其他妈妈的故事</span><button type="button" class="g4-in">逛广场<i>›</i></button></div>' + /* 11-02 用户：「逛广场」单独挂在右边突兀 → 整行做成入口条（浅粉底，整条可点），右侧实心「进广场」 */
'<div class="g4-sub" role="button" tabindex="0"><span class="g4-avs" aria-hidden="true">' + ['p05', 'm07', 'p11', 'm16'].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>' +
'<div class="g4-stage"><div class="g4-deck" aria-live="polite"></div>' + '<div class="g4-stage"><div class="g4-deck" aria-live="polite"></div>' +
'<div class="g4-rail"><span class="g4-pg"><b>1</b><i>/8</i></span>' + '<div class="g4-rail"><span class="g4-pg"><b>1</b><i>/8</i></span>' +
'<button type="button" class="g4-arr prev" aria-label="上一张">‹</button><button type="button" class="g4-arr next" aria-label="下一张">›</button></div></div>' + '<button type="button" class="g4-arr prev" aria-label="上一张">‹</button><button type="button" class="g4-arr next" aria-label="下一张">›</button></div></div>' +
@@ -172,7 +173,7 @@
sec.querySelector('.g4-arr.prev').addEventListener('click', prev); sec.querySelector('.g4-arr.prev').addEventListener('click', prev);
tags.addEventListener('click', function (e) { var b = e.target.closest('button[data-t]'); if (b) go(b.dataset.t); }); tags.addEventListener('click', function (e) { var b = e.target.closest('button[data-t]'); if (b) go(b.dataset.t); });
sec.querySelector('.g4-all').addEventListener('click', function () { go(''); }); sec.querySelector('.g4-all').addEventListener('click', function () { go(''); });
sec.querySelector('.g4-in').addEventListener('click', function () { go(''); }); sec.querySelector('.g4-sub').addEventListener('click', function () { go(''); });
sec.querySelector('.g4-cat').addEventListener('click', function (e) { sec.querySelector('.g4-cat').addEventListener('click', function (e) {
var b = e.target.closest('button[data-cat]'); var b = e.target.closest('button[data-cat]');
if (!b || b.dataset.cat === cur) return; // 「全部」里滑块跟着卡片跳，所以按当前筛选判断，不按高亮判断 if (!b || b.dataset.cat === cur) return; // 「全部」里滑块跟着卡片跳，所以按当前筛选判断，不按高亮判断
@@ -187,5 +188,5 @@
} }
/* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */ /* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
if (window.GC_FEED) init(); if (window.GC_FEED) init();
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110235'; fs.onload = fs.onerror = init; document.body.appendChild(fs); } else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110236'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})(); })();

4
guangchang/ceshi/index.html
View File

@@ -325,8 +325,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
</div> </div>
<div class="toast" id="toast"></div> <div class="toast" id="toast"></div>
<script src="meta.js?v=26110235"></script> <script src="meta.js?v=26110236"></script>
<script src="tests.js?v=26110235"></script> <script src="tests.js?v=26110236"></script>
<script> <script>
(function () { (function () {
'use strict'; 'use strict';

10
guangchang/index.html
View File

@@ -570,10 +570,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
<div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div> <div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
<div class="toast" id="toast"></div> <div class="toast" id="toast"></div>
<script src="topics.js?v=26110235"></script> <script src="topics.js?v=26110236"></script>
<script src="data.js?v=26110235"></script> <script src="data.js?v=26110236"></script>
<script src="feed.js?v=26110235"></script> <script src="feed.js?v=26110236"></script>
<script src="ceshi/meta.js?v=26110235"></script> <script src="ceshi/meta.js?v=26110236"></script>
<script> <script>
(function () { (function () {
'use strict'; 'use strict';
@@ -639,7 +639,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
var CMD = null, CMERR = false; var CMD = null, CMERR = false;
/* 头像编码：数字 = av/NNNN.webp（旧代码头像）；'av:c012' = av/c012.webp（卡通/可爱卡通）；'/…' = 站内绝对路径（内置头像库 /_bridge/avatars/）；其余 = assets/img/mom/xxx.jpg */ /* 头像编码：数字 = av/NNNN.webp（旧代码头像）；'av:c012' = av/c012.webp（卡通/可爱卡通）；'/…' = 站内绝对路径（内置头像库 /_bridge/avatars/）；其余 = assets/img/mom/xxx.jpg */
var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; }; var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; };
fetch('cm.json?v=26110235').then(function (r) { return r.json(); }).then(function (j) { fetch('cm.json?v=26110236').then(function (r) { return r.json(); }).then(function (j) {
CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); } CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
}).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); }); }).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
function commentsOf(n) { function commentsOf(n) {

2
guangchang/mine/index.html
View File

@@ -105,7 +105,7 @@ main{padding:6px 16px 0}
</div> </div>
<div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div> <div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div>
<script src="../topics.js?v=26110235"></script> <script src="../topics.js?v=26110236"></script>
<script> <script>
(function () { (function () {
'use strict'; 'use strict';

8
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title> <title>兜爸心选 · 孕育陪伴</title>
<!-- V:26110235 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 --> <!-- V:26110236 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css"> <link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css"> <link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） --> <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -2519,7 +2519,7 @@
<script src="/_bridge/avatar-picker.js?v=26101105"></script> <script src="/_bridge/avatar-picker.js?v=26101105"></script>
<script src="/_bridge/hand-icons.js?v=26101202"></script> <script src="/_bridge/hand-icons.js?v=26101202"></script>
<script src="js/zodiac-art.js"></script> <script src="js/zodiac-art.js"></script>
<script src="guangchang/topics.js?v=26110235"></script> <script src="guangchang/topics.js?v=26110236"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script> <script>
/* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。 /* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
@@ -2527,7 +2527,7 @@
(function () { (function () {
var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/); var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
if (!m) window.__gcDefault = 1; if (!m) window.__gcDefault = 1;
var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110235'; var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110236';
l.rel = 'stylesheet'; l.href = 'demo/gch/v' + n + '.css?' + q; l.rel = 'stylesheet'; l.href = 'demo/gch/v' + n + '.css?' + q;
s.src = 'demo/gch/v' + n + '.js?' + q; s.src = 'demo/gch/v' + n + '.js?' + q;
if (m) s.onload = function () { setTimeout(function () { var el = document.getElementById('gcHome'); if (el) el.scrollIntoView({ block: 'center' }); }, 900); }; if (m) s.onload = function () { setTimeout(function () { var el = document.getElementById('gcHome'); if (el) el.scrollIntoView({ block: 'center' }); }, 900); };
@@ -2535,7 +2535,7 @@
/* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；⚠️ 上正式前和 V6 一起并进正式代码，别依赖 demo/ */ /* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；⚠️ 上正式前和 V6 一起并进正式代码，别依赖 demo/ */
if (!/[?&]brand=0/.test(location.search)) { if (!/[?&]brand=0/.test(location.search)) {
var bl = document.createElement('link'), bs = document.createElement('script'); var bl = document.createElement('link'), bs = document.createElement('script');
bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110235'; bs.src = 'demo/brand/brand.js?v=26110235'; bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110236'; bs.src = 'demo/brand/brand.js?v=26110236';
document.head.appendChild(bl); document.body.appendChild(bs); document.head.appendChild(bl); document.body.appendChild(bs);
} }
})(); })();

2
js/app.js
View File

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

4
topic/_shared/tools.js
View File

@@ -59,7 +59,7 @@
function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); } function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }
function related(box) { function related(box) {
getJSON('../_shared/idx.json?v=26110235').then(function (idx) { getJSON('../_shared/idx.json?v=26110236').then(function (idx) {
var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; }); var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; });
var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0; var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0;
var rest = idx.filter(function (x) { return x[0] !== SLUG; }); var rest = idx.filter(function (x) { return x[0] !== SLUG; });
@@ -104,7 +104,7 @@
b.addEventListener('click', function () { var k = b.dataset.k; if (st.m.lk[k]) delete st.m.lk[k]; else st.m.lk[k] = 1; saveMe(st); paint(); }); b.addEventListener('click', function () { var k = b.dataset.k; if (st.m.lk[k]) delete st.m.lk[k]; else st.m.lk[k] = 1; saveMe(st); paint(); });
}); });
} }
getJSON('../_shared/cm/' + SLUG + '.json?v=26110235').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); }); getJSON('../_shared/cm/' + SLUG + '.json?v=26110236').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
} }
function extras(el) { function extras(el) {