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

百宝箱：列表底部加查看更多三入口，三张卡按钮扫光提示可点

Browse Source
This commit is contained in:
deploy
2026-11-05 23:58:25 +00:00
parent ea641585ba
commit c43ba39a32
6 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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=26110485'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110486'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})();

18
js/kit.css
View File

@@ -133,3 +133,21 @@ html.night #homeBody>section#kitHome.kit-home{background:linear-gradient(180deg,
html.night #homeBody>section#kitHome.kit-home{background:linear-gradient(180deg,rgba(52,44,54,.78),rgba(44,40,58,.74))!important}
/* 11-04 用户：三张大卡标题（孕期百问 / 孕期计算器 / 趣味小测试）大一号 14.5 → 16px */
.kit-e b{font-size:16px}
/* 11-05 用户：「不知道三个按钮能点；6 条看完以为有查看更多」→ 列表底部「查看更多」三颗胶囊（颜色同上面三张卡），三张卡的按钮轮流扫一道光 */
.kit-mo{display:flex;align-items:center;gap:6px;margin:4px 2px 6px;padding-top:10px;border-top:1px dashed #F1DDD6}
.kit-mo>span{flex:none;margin-right:auto;font-size:12px;font-weight:700;color:#A3958D;letter-spacing:.3px}
.kit-mb{flex:none;display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 9px 0 8px;border-radius:99px;border:1px solid var(--mc2);background:var(--mc1);color:var(--mc);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:transform .14s}
.kit-mb:active{transform:scale(.94)}
.kit-mb svg{width:14px;height:14px;flex:none}
.kit-mb i{font-style:normal;font-size:14px;line-height:1;margin-left:1px}
.kit-mb.m-qa{--mc:#2E9B78;--mc1:#EAF8F3;--mc2:#C6EADD}
.kit-mb.m-js{--mc:#E86F22;--mc1:#FFF3EA;--mc2:#FAD6BC}
.kit-mb.m-qz{--mc:#7C5CFC;--mc1:#F3EEFF;--mc2:#DCD1FE}
html.night .kit-mo{border-top-color:rgba(255,255,255,.1)}
html.night .kit-mb{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.kit-e em{position:relative;overflow:hidden;box-shadow:0 4px 10px -5px var(--c)}
.kit-e em::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:kitShine 7.5s ease-in-out infinite}
.kit-e.e-js em::after{animation-delay:2.5s}
.kit-e.e-qz em::after{animation-delay:5s}
@keyframes kitShine{0%,82%{left:-60%}96%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.kit-e em::after{animation:none}}

19
js/kit.js
View File

@@ -27,6 +27,11 @@
var FIRE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="currentColor"/></svg>';
/* ---------- 上：三个入口 ---------- */
var KN_IC = {
qz: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6M10 3v6l-5 9a2 2 0 001.8 3h10.4a2 2 0 001.8-3l-5-9V3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
qa: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M10 9.5a2 2 0 113 1.7c-.6.4-1 .8-1 1.5M12 14.5h.01" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>',
js: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="3" width="14" height="18" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8.5 7h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>'
};
var E = [
/* 11-04 用户：三个入口顺序改为 孕期百问 → 孕期计算器 → 趣味小测试 */
{ k: 'qa', n: '孕期百问', d: '孕妈最常问的问题，一次看明白', c: '100 个问题', img: 'kepu', u: '人看过' },
@@ -39,7 +44,12 @@
'<b>' + x.n + '</b><span>' + x.d + '</span><strong class="kit-n">' + FIRE + '<i>--</i>' + x.u + '</strong><em>' + x.c + '<i aria-hidden="true">›</i></em></button>';
}).join('') + '</div>' +
/* 11-03 用户：「『大家都在用』跟百宝箱像两块，割裂了」→ 去掉这个小标题和虚线，三个入口 + 6 条装进同一张白底面板（.kit-pn），一眼看出是百宝箱里的内容 */
'<div class="ms-list kit-list"></div></div>';
'<div class="ms-list kit-list"></div>' +
/* 11-05 用户：「大家不知道三个按钮能点，看完 6 条以为有『查看更多』，可又没有综合页」→ 列表底部加一排「查看更多」，
按类型分三颗胶囊直达三个列表页（颜色、图标和上面三张卡一一对应），上面三张卡的按钮加一道定时扫光提示可点 */
'<div class="kit-mo"><span>查看更多</span>' + E.map(function (x) {
return '<button type="button" class="kit-mb m-' + x.k + '" data-k="' + x.k + '">' + KN_IC[x.k] + x.n.replace(/^孕期|^趣味小/, '') + '<i aria-hidden="true">›</i></button>';
}).join('') + '</div></div>';
sec.classList.remove('hide');
function setCnt(k, t) { var e = box.querySelector('.e-' + k + ' em'); if (e) e.firstChild.nodeValue = t; }
function setNum(k, n) { var e = box.querySelector('.e-' + k + ' .kit-n i'); if (e && n) e.textContent = wanX(n); }
@@ -122,11 +132,6 @@
var KR_GO = { qz: '去测', qa: '去看', js: '去算' };
/* 11-04 用户：「前面的小图标换成字：测试用『测』、百问用『问』、计算器用『算』」（KN_IC 线稿图标留着备用） */
var KR_CH = { qz: '测', qa: '问', js: '算' };
var KN_IC = {
qz: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6M10 3v6l-5 9a2 2 0 001.8 3h10.4a2 2 0 001.8-3l-5-9V3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
qa: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v11H9l-5 4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M10 9.5a2 2 0 113 1.7c-.6.4-1 .8-1 1.5M12 14.5h.01" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>',
js: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="3" width="14" height="18" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8.5 7h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>'
};
function paint() {
nums();
var d = rows(), L = box.querySelector('.kit-list');
@@ -245,7 +250,7 @@
paint();
box.addEventListener('click', function (e) {
var b = e.target.closest('.kit-e'); if (!b) return;
var b = e.target.closest('.kit-e,.kit-mb'); if (!b) return;
try { navigator.vibrate && navigator.vibrate(8); } catch (x) {}
var k = b.dataset.k;
if (k === 'qz') location.href = 'guangchang/' + cleanQ({ c: 'ceshi' });