v26110282 百宝箱6条图标换成测/问/算单字；底部加「谁刚测了/算了/看了」轮播
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26110281';
|
||||
var VER = '26110282';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
|
||||
@@ -231,5 +231,5 @@
|
||||
}
|
||||
/* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
|
||||
if (window.GC_FEED) init();
|
||||
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110281'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
|
||||
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110282'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
|
||||
})();
|
||||
|
||||
@@ -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=26110281';
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110282';
|
||||
document.head.appendChild(l);
|
||||
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110281';
|
||||
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110282';
|
||||
s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
|
||||
document.body.appendChild(s);
|
||||
|
||||
|
||||
23
js/kit.css
23
js/kit.css
@@ -77,3 +77,26 @@ html.night .kit-pn .kit-rows .kr:first-child{border-top-color:#3C3345}
|
||||
.kit-pn .kit-rows .kr:first-child{border-top:0;margin-top:0}
|
||||
.kit-pn .kit-rows .kr:last-child{border-bottom:0}
|
||||
html.night .kit-pn .kit-rows .kr{border-bottom-color:rgba(255,255,255,.1)}
|
||||
/* 11-04 6 条前面的图标换成单字「测 / 问 / 算」 */
|
||||
.kr-ic.kr-ch{font-size:16px;font-weight:900;line-height:1;font-family:inherit}
|
||||
/* 11-04 6 条下面「大家刚刚在用」轮播：一行一条往上翻（kit.js ticker） */
|
||||
.kit-tk{display:flex;align-items:center;gap:8px;margin:6px 2px 4px;padding:0 12px;height:40px;border-radius:99px;background:rgba(255,236,226,.7)}
|
||||
.tk-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#FF6A3D;box-shadow:0 0 0 0 rgba(255,106,61,.5);animation:tkDot 1.6s ease-out infinite}
|
||||
@keyframes tkDot{70%{box-shadow:0 0 0 6px rgba(255,106,61,0)}100%{box-shadow:0 0 0 0 rgba(255,106,61,0)}}
|
||||
.tk-w{position:relative;flex:1;min-width:0;height:40px;overflow:hidden}
|
||||
.tk-i{position:absolute;inset:0;display:flex;align-items:center;gap:7px;text-decoration:none;color:#6E5A55;font-size:12.5px;opacity:0;transform:translateY(100%);transition:transform .45s ease,opacity .45s ease}
|
||||
.tk-i.on{opacity:1;transform:none}
|
||||
.tk-i.up{opacity:0;transform:translateY(-100%)}
|
||||
.tk-i img{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;border:1.5px solid #fff;background:#FFE3D3}
|
||||
.tk-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.tk-t em{font-style:normal;font-weight:700;color:#3A2A26;margin-right:4px}
|
||||
.tk-t b{font-weight:800;color:#F04A2E}
|
||||
.tk-c{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;font-style:normal;font-size:11px;font-weight:900}
|
||||
.tk-i.t-qz .tk-c{background:#F1ECFF;color:#7C5CFC}
|
||||
.tk-i.t-qa .tk-c{background:#E3F5EE;color:#2E9B78}
|
||||
.tk-i.t-js .tk-c{background:#FFEEDF;color:#E86F22}
|
||||
.tk-i small{flex:none;font-size:11px;color:#B5A39C}
|
||||
html.night .kit-tk{background:rgba(255,255,255,.06)}
|
||||
html.night .tk-i{color:#CDBFC7}
|
||||
html.night .tk-t em{color:#F1E6EE}
|
||||
@media (prefers-reduced-motion:reduce){.tk-i{transition:none}.tk-dot{animation:none}}
|
||||
|
||||
54
js/kit.js
54
js/kit.js
@@ -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 = '26110281';
|
||||
var V = '26110282';
|
||||
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');
|
||||
|
||||
@@ -95,6 +95,8 @@
|
||||
}
|
||||
var TAG = { qz: '测试', qa: '百问', js: '计算器' };
|
||||
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>',
|
||||
@@ -107,13 +109,59 @@
|
||||
一行一条，但不用名次数字和配图：左边按类型的彩色图标块（测试紫 / 百问绿 / 计算器橙），中间问题 + 类型·人数，右边 ›（11-03 用户嫌乱，样式收成一张白卡，见 kit.css）。 */
|
||||
L.className = 'kit-list kit-rows';
|
||||
L.innerHTML = d.r.map(function (x) {
|
||||
return '<a class="kr ripple t-' + x.c + '" href="' + esc(x.href) + '"><span class="kr-ic">' + KN_IC[x.c] + '</span>' +
|
||||
return '<a class="kr ripple t-' + x.c + '" href="' + esc(x.href) + '"><span class="kr-ic kr-ch">' + KR_CH[x.c] + '</span>' +
|
||||
'<span class="kr-m"><span class="kr-q">' + esc(x.q) + '</span><span class="kr-n"><em>' + TAG[x.c] + '</em>' + FIRE + '<b>' + wan(x.n) + '</b>' + x.u + '</span></span>' +
|
||||
'<span class="kr-go">' + KR_GO[x.c] + '</span></a>';
|
||||
}).join('');
|
||||
}
|
||||
/* ---------- 6 条下面：「大家刚刚在用」轮播 ----------
|
||||
11-04 用户：「6 个问题底部放个轮播：谁谁谁测出自己是什么类型、谁谁谁算出养娃要花几十万……」
|
||||
→ 一行一条，每 3.2 秒往上翻一条；测试结果取 tests.js 里真实的类型名，花费 / 产假 / 体重是计算器按常见输入能算出的数，百问取当前热门题。
|
||||
昵称、头像、时间都是模拟（同「N 人测过」口径，AGENTS.md 12b，12-31 复核），点一下进对应那一项。 */
|
||||
var TK_NM = ['小满妈妈', '糯米团子', '橙子不酸', '鹿鹿呀', '安安的妈', '豆包本包', '一只小葵', '阿圆', '栗子酱', '桃桃乌龙', '芝麻汤圆', '晴天娃娃',
|
||||
'果冻布丁', '岁岁平安', '叮当妈', '饭团子', '奶糖不甜', '小鱼干', '朵朵妈咪', '暖暖', '布丁要长大', '花卷儿', '柚子茶', '星星的妈'];
|
||||
var TK_AV = ['p02', 'm05', 'p05', 'm12', 'k04', 'p09', 'm16', 'p11', 'm07', 'k10', 'p03', 'm19', 'p13', 'm02', 'k06', 'p06', 'm10', 'p12', 'm21', 'p07', 'm04', 'k12', 'p14', 'm15'];
|
||||
var TK_FIX = [
|
||||
['qz', '测出自己是「松弛感满分型」妈妈', 't11'], ['js', '算了算，养到 18 岁大约要 <b>62.8 万</b>', 'topic/huafei/'],
|
||||
['qz', '测出宝宝会是「好奇探险家」小性格', 't24'], ['js', '算出产假能休 <b>178 天</b>（广东）', 'topic/zhichang/'],
|
||||
['qz', '测出自己是「性价比务实玩家」', 't29'], ['js', '算出孕期该长 <b>16～28 斤</b>', '/yunqi-tizhong/'],
|
||||
['qz', '测出自己是「计划表女王型」', 't11'], ['js', '算出生娃头一年大概花 <b>9.6 万</b>', 'topic/huafei/'],
|
||||
['qz', '测出宝宝会是「温柔小暖阳」', 't24'], ['js', '算了算，养到 18 岁大约要 <b>48.5 万</b>', 'topic/huafei/'],
|
||||
['qz', '测出自己是「细节控守护型」', 't18'], ['js', '算出产假能休 <b>158 天</b>（浙江）', 'topic/zhichang/']
|
||||
];
|
||||
var TK_AGO = ['刚刚', '刚刚', '1 分钟前', '2 分钟前', '刚刚', '3 分钟前'];
|
||||
var tk = null, tkI = 0, tkT = 0;
|
||||
function tkItems() {
|
||||
var qa = (QA || []).filter(function (x) { return x.href && !/^topic\/(huafei|ceshi|duiyou|zhichang)\/$/.test(x.href); }).slice(0, 6), out = [];
|
||||
TK_FIX.forEach(function (f, i) {
|
||||
out.push(f);
|
||||
if (i % 2 && qa[(i - 1) / 2]) out.push(['qa', '看了「' + esc(qa[(i - 1) / 2].q) + '」', qa[(i - 1) / 2].href]);
|
||||
});
|
||||
return out.map(function (f, i) {
|
||||
var j = (i + day) % TK_NM.length, h = f[0] === 'qz' ? 'guangchang/ceshi/' + cleanQ({ id: f[2] })
|
||||
: f[0] === 'qa' ? f[2] + location.search + location.hash
|
||||
: f[2] + (f[2] === 'topic/zhichang/' ? (location.search ? location.search + '&' : '?') + 'calc=1' : location.search) + location.hash;
|
||||
return '<a class="tk-i t-' + f[0] + '" href="' + esc(h) + '"><img src="assets/img/mom/' + TK_AV[j] + '.jpg" alt="" loading="lazy" width="22" height="22">' +
|
||||
'<span class="tk-t"><em>' + esc(TK_NM[j]) + '</em>' + (f[0] === 'qa' ? f[1] : f[1]) + '</span><i class="tk-c">' + KR_CH[f[0]] + '</i><small>' + TK_AGO[i % TK_AGO.length] + '</small></a>';
|
||||
});
|
||||
}
|
||||
function ticker() {
|
||||
var pn = box.querySelector('.kit-pn'); if (!pn) return;
|
||||
var it = tkItems();
|
||||
if (!tk) { tk = document.createElement('div'); tk.className = 'kit-tk'; tk.setAttribute('aria-live', 'off'); pn.appendChild(tk); }
|
||||
tk.innerHTML = '<span class="tk-dot" aria-hidden="true"></span><div class="tk-w">' + it.join('') + '</div>';
|
||||
var els = tk.querySelectorAll('.tk-i'); tkI = 0; if (els[0]) els[0].classList.add('on');
|
||||
clearInterval(tkT);
|
||||
tkT = setInterval(function () {
|
||||
if (document.hidden || !tk.offsetParent) return;
|
||||
var a = els[tkI]; tkI = (tkI + 1) % els.length; var b = els[tkI];
|
||||
a.classList.remove('on'); a.classList.add('up');
|
||||
setTimeout(function () { a.classList.remove('up'); }, 450);
|
||||
b.classList.add('on');
|
||||
}, 3200);
|
||||
}
|
||||
fetch('assets/data/qa/hot.json?v=' + V).then(function (r) { return r.ok ? r.json() : []; }).catch(function () { return []; })
|
||||
.then(function (a) { QA = Array.isArray(a) ? a : []; paint(); });
|
||||
.then(function (a) { QA = Array.isArray(a) ? a : []; paint(); ticker(); });
|
||||
if (!window.gcTested) { var ms = document.createElement('script'); ms.src = 'guangchang/ceshi/meta.js?v=' + V; ms.onload = paint; document.body.appendChild(ms); }
|
||||
window.addEventListener('mb-preg', paint);
|
||||
setTimeout(paint, 3000); /* 「此刻」总人数接口晚到时按后台配置的人数重算一次 */
|
||||
|
||||
Reference in New Issue
Block a user