计算器改分步模式(wizard.js,12 个含产假计算器模式)、测试卡图文分开、百宝箱火苗去圈、关注前3条头像各自2~6秒换(v26110419)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-04 08:44:16 +00:00
parent e57bc9f4a5
commit a6e4a73d21
28 changed files with 342 additions and 90 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<!-- 11-04 UGC 总开关关着时本页不展示,直接回首页(js/ugc.js) -->
<script src="../../js/ugc.js?v=26110418" data-guard></script>
<script src="../../js/ugc.js?v=26110419" data-guard></script>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测 · 孕妈广场</title>
@@ -322,9 +322,9 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
</div>
<div class="toast" id="toast"></div>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="meta.js?v=26110418"></script>
<script src="tests.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script src="meta.js?v=26110419"></script>
<script src="tests.js?v=26110419"></script>
<script>
(function () {
'use strict';

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<!-- 11-04 UGC 总开关关着时本页不展示,直接回首页(js/ugc.js) -->
<script src="../js/ugc.js?v=26110418" data-guard></script>
<script src="../js/ugc.js?v=26110419" data-guard></script>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>孕妈广场</title>
@@ -294,6 +294,15 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
.ck.gs .ck-wash{background:linear-gradient(180deg,rgba(240,246,255,.86),rgba(230,240,254,.74) 62%,rgba(223,235,253,.35))}
.ck .cv .ck-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.csr-i.has-bg{background-size:cover!important;background-position:70% 85%!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
/* 11-04 二改(用户:照片压在字后面抢字)→ 图文分开:照片只占卡片上方一条、往下渐隐成本组纯色,标题/题数/按钮全在纯色区,不再叠在照片上 */
.ck.has-bg .cv{justify-content:flex-start;background:linear-gradient(180deg,var(--c1),var(--c2))}
.ck.has-bg .cv .ck-wash{display:none}
.ck.has-bg .cv .ck-bg{inset:0 0 auto 0;height:var(--ph,62px);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.ck.has-bg .cv>b{margin-top:calc(var(--ph,62px) - 8px)}
#more .ck.has-bg .cv{--ph:64px;height:auto;min-height:168px;padding:0 6px 12px}
#more .c2 .ck.has-bg .cv{--ph:84px;min-height:212px}
#more .c2 .ck.has-bg .cv:has(.ck-hl){padding-bottom:36px}
.ck.has-bg .cv .ck-top,.ck.has-bg .cv .dn{z-index:2}
.ck .cv .ck-wm{position:absolute;right:-8px;bottom:-6px;width:62px;height:62px;opacity:.22;transform:rotate(-12deg);pointer-events:none}
.ck .cv .ck-wm svg{width:100%;height:100%}
.ck .cv .ck-wm svg,.ck .cv .ck-wm svg [fill="#fff"]{fill:var(--cb)}.ck .cv .ck-wm svg [stroke="#fff"]{stroke:var(--cb)}
@@ -869,11 +878,11 @@ 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 class="toast" id="toast"></div>
<script src="topics.js?v=26110418"></script>
<script src="data.js?v=26110418"></script>
<script src="feed.js?v=26110418"></script>
<script src="ceshi/meta.js?v=26110418"></script>
<script src="../js/share-card.js?v=26110418"></script>
<script src="topics.js?v=26110419"></script>
<script src="data.js?v=26110419"></script>
<script src="feed.js?v=26110419"></script>
<script src="ceshi/meta.js?v=26110419"></script>
<script src="../js/share-card.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -939,7 +948,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
var CMD = null, CMERR = false;
/* 头像编码:数字 = 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'; };
fetch('cm.json?v=26110418').then(function (r) { return r.json(); }).then(function (j) {
fetch('cm.json?v=26110419').then(function (r) { return r.json(); }).then(function (j) {
CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
}).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
function commentsOf(n) {
@@ -1207,7 +1216,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
var CS_SEC = { quiz: ['', '查漏补缺,温和掌握孕产育儿知识', 2], psy: ['', '看见情绪,也看见关系', 2], game: ['', '挑战一下,看能拿什么称号', 2], shop: ['', '看看你是哪一类育儿采购玩家', 2] };
/* 11-04 用户:「每个测试的背景图要做匹配的图片,不要同样的背景色;按组区分色块、组内统一」→ 每个测试一张插画(ceshi/cv/tNN.webp),
色调跟组走:常识小测暖桃 / 趣味心理薰衣草紫 / 趣味闯关薄荷绿 / 好物配置天蓝;画面上半留白放标题。列表行的小方块也换成同一张图。 */
var CS_CV_V = 2; /* 同日二改:用户嫌插画乱 → 换真实风景照(按组选色调)+ 同色柔光遮罩 */
var CS_CV_V = 3; /* 同日二改:用户嫌插画乱 → 换真实风景照(按组选色调)+ 同色柔光遮罩 */
function csRowHTML(x, done, i) {
var d = done[x.id], who = (x.sub || '').split('·')[0].trim();
return '<button type="button" class="csr ' + CS_GPAL[x.group] + '" data-test="' + x.id + '"><span class="csr-i s' + (i % 3) + ' has-bg" style="background-image:url(ceshi/cv/' + x.id + '.webp?v=' + CS_CV_V + ')"></span>' +

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<!-- 11-04 UGC 总开关关着时本页不展示,直接回首页(js/ugc.js) -->
<script src="../../js/ugc.js?v=26110418" data-guard></script>
<script src="../../js/ugc.js?v=26110419" data-guard></script>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>我的投稿</title>
@@ -107,7 +107,7 @@ main{padding:6px 16px 0}
</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=26110418"></script>
<script src="../topics.js?v=26110419"></script>
<script>
(function () {
'use strict';

View File

@@ -8,8 +8,8 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- 11-04 UGC 总开关(孕妈广场 + 测一测,后台 /box_bm/plaza 顶部切换),见 js/ugc.js -->
<script src="js/ugc.js?v=26110418"></script>
<!-- V:26110418 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<script src="js/ugc.js?v=26110419"></script>
<!-- V:26110419 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 11-04 用户:「顶部图片上的倒计时先删除掉」→ 不加载 hero-cd.css / hero-cd.js(文件留着,加回这两行即恢复),头图回到原样式 -->
@@ -2593,9 +2593,9 @@
<script src="/_bridge/avatar-picker.js?v=26101105"></script>
<script src="/_bridge/hand-icons.js?v=26101202"></script>
<script src="js/zodiac-art.js"></script>
<script src="guangchang/topics.js?v=26110418"></script>
<script src="guangchang/topics.js?v=26110419"></script>
<script src="js/app.js"></script>
<script src="js/kit.js?v=26110418"></script>
<script src="js/kit.js?v=26110419"></script>
<script>
/* 11-02 首页「孕妈广场」效果稿:地址带 ?gcv=1~6 时,把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
11-02 用户:「用第一版,放到预览页面上」;后改定彩色卡 → 不带参数也默认用 V6 合并版(广场卡堆 + 其他妈妈也在搜 + 测一测第 4 版彩色卡),不滚动、不显示效果稿角标 */
@@ -2606,7 +2606,7 @@
if (gchDone || !window.__mbUgc) return; gchDone = true;
var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
if (!m) window.__gcDefault = 1;
var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110418';
var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110419';
var dir = n === '4' || n === '6' ? 'js/gch/' : 'demo/gch/'; /* 11-03 上正式:定稿 V6(含它套的 V4)并进 js/gch/,其余效果稿仍在 demo/ */
l.rel = 'stylesheet'; l.href = dir + 'v' + n + '.css?' + q;
s.src = dir + 'v' + n + '.js?' + q;
@@ -2621,7 +2621,7 @@
/* 11-02 品牌露出(用户定 4 处都要):默认加载,?brand=0 可关掉对比;11-03 已并进 js/gch/ */
if (!/[?&]brand=0/.test(location.search)) {
var bl = document.createElement('link'), bs = document.createElement('script');
bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110418'; bs.src = 'js/gch/brand.js?v=26110418';
bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110419'; bs.src = 'js/gch/brand.js?v=26110419';
document.head.appendChild(bl); document.body.appendChild(bs);
}
})();
@@ -2632,7 +2632,7 @@
<script src="js/hero-fx.js"></script>
<!-- 2026-10-05 首页头图:宝宝时不时动一动小手小脚(独立文件,删掉这一行即下线) -->
<script src="js/baby-limbs.js?v=26101201"></script>
<script src="js/coach.js?v=26110418"></script>
<script src="js/coach.js?v=26110419"></script>
<script src="js/birth-flow.js?v=26110201"></script>
<!-- 禁止下拉回弹(2026-10-11 统一规则,与孕期体重同一段):竖向拖动时从手指下往上找还能朝该方向滚的容器,找不到才拦;横滑、双指、可滚列表不受影响 -->

View File

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

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

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=26110418';
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110419';
document.head.appendChild(l);
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110418';
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110419';
s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
document.body.appendChild(s);
@@ -121,24 +121,28 @@
for (var k = 0; k < c; k++) h += avaEl(LIKE_AVA[avaAt++ % LIKE_AVA.length]);
return '<span class="g6-avs" aria-hidden="true">' + h + '</span>';
}
var likeT = 0;
/* 11-04 用户:前 3 条的小头像各自 2~6 秒随机换一个(每条独立计时);原地换(缩小→换图→弹回),个数、点赞数都不动 */
var likeT = [];
function swapOne(r) {
var ims = r.querySelectorAll('.g6-avs img');
if (!ims.length) return;
var im = ims[Math.floor(Math.random() * ims.length)], on = {}, nx, t = 0;
list.querySelectorAll('.g6-avs img').forEach(function (m) { on[m.getAttribute('src')] = 1; });
do { nx = LIKE_AVA[avaAt++ % LIKE_AVA.length]; } while (on['assets/img/mom/' + nx + '.jpg'] && ++t < LIKE_AVA.length);
im.className = 'sw-o';
setTimeout(function () { im.src = 'assets/img/mom/' + nx + '.jpg'; im.className = 'sw-i'; }, 220);
}
function likeTick() {
clearTimeout(likeT);
likeT = setTimeout(function () {
var rows = list.querySelectorAll('.g6-nt');
if (!document.hidden && rows.length && list.offsetParent) {
/* 11-03 用户:「头像在变,比如 3 个里突然有一个变了;后面点赞数不变」→ 原地换掉其中一个(缩小→换图→弹回),个数、点赞数都不动 */
var r = rows[Math.floor(Math.random() * rows.length)], ims = r.querySelectorAll('.g6-avs img');
if (ims.length) {
var im = ims[Math.floor(Math.random() * ims.length)], on = {}, nx, t = 0;
list.querySelectorAll('.g6-avs img').forEach(function (m) { on[m.getAttribute('src')] = 1; });
do { nx = LIKE_AVA[avaAt++ % LIKE_AVA.length]; } while (on['assets/img/mom/' + nx + '.jpg'] && ++t < LIKE_AVA.length);
im.className = 'sw-o';
setTimeout(function () { im.src = 'assets/img/mom/' + nx + '.jpg'; im.className = 'sw-i'; }, 220);
}
}
likeTick();
}, 4000 + Math.random() * 3000);
likeT.forEach(clearTimeout); likeT = [];
[0, 1, 2].forEach(function (i) {
(function loop() {
likeT[i] = setTimeout(function () {
var r = list.querySelectorAll('.g6-nt')[i];
if (r && !document.hidden && list.offsetParent) swapOne(r);
loop();
}, 2000 + Math.random() * 4000);
})();
});
}
all.addEventListener('click', function () { location.href = 'guangchang/' + location.search + location.hash; });
paintList();

View File

@@ -102,8 +102,9 @@ html.night .lv-i em{color:#F1E6EE}
.kr.t-qa .lv-i{color:#2E9B78}
/* 生娃计算器固定第一条,图标块左上角小火苗 */
.kr-ic{position:relative}
.kr-hot{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#F0453A,#FF8A3D);border:1.5px solid #fff;box-sizing:content-box}
.kr-hot svg{width:11px;height:11px;color:#fff}
/* 11-04 用户:不要外面的圈,直接一个红色火苗 */
.kr-hot{position:absolute;right:-7px;top:-9px;display:block;width:16px;height:16px;line-height:0;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff)}
.kr-hot svg{width:16px;height:16px;color:#F0352A}
/* 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}

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 = '26110418';
var V = '26110419';
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');

View File

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

View File

@@ -57,7 +57,7 @@
'.tc-more{display:block;width:100%;margin-top:6px;height:40px;border:0;border-radius:99px;background:#F7F8FA;color:#4E5969;font-size:13px;font-weight:600}';
var SLUG = (location.pathname.match(/\/topic\/([^\/]+)\//) || [])[1] || '';
/* 11-04 微信转发图:每个专题一张 assets/share/t/<slug>.jpg(核心词大字 + logo),见 js/share-card.js */
if (SLUG) (function () { var s = document.createElement('script'); s.src = '../../js/share-card.js?v=26110418'; s.onload = function () { window.mbShare('../../assets/share/t/' + SLUG + '.jpg'); }; document.head.appendChild(s); })();
if (SLUG) (function () { var s = document.createElement('script'); s.src = '../../js/share-card.js?v=26110419'; s.onload = function () { window.mbShare('../../assets/share/t/' + SLUG + '.jpg'); }; document.head.appendChild(s); })();
var SK = 'mmbox.tp.v1', UK = (function () { var m = ((location.hash || '') + '&' + (location.search || '')).match(/[#?&]openid=([^&]*)/); return m ? decodeURIComponent(m[1]) : '_guest'; })();
function loadMe() { try { var a = JSON.parse(localStorage.getItem(SK) || '{}') || {}; var m = a[UK] || {}; m.cm = m.cm || {}; m.lk = m.lk || {}; return { a: a, m: m }; } catch (e) { return { a: {}, m: { cm: {}, lk: {} } }; } }
function saveMe(st) { try { st.a[UK] = st.m; localStorage.setItem(SK, JSON.stringify(st.a)); } catch (e) {} }
@@ -70,7 +70,7 @@
function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }
function related(box) {
getJSON('../_shared/idx.json?v=26110418').then(function (idx) {
getJSON('../_shared/idx.json?v=26110419').then(function (idx) {
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 rest = idx.filter(function (x) { return x[0] !== SLUG && (window.__mbUgc || ['ceshi', 'duiyou'].indexOf(x[0]) < 0); }); /* UGC 关着不推两个测试 */
@@ -177,13 +177,13 @@
}
fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
.then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {});
getJSON('../_shared/cm/' + SLUG + '.json?v=26110418').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
getJSON('../_shared/cm/' + SLUG + '.json?v=26110419').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
}
function ugcReady() {
if (window.__mbUgcReady) return window.__mbUgcReady;
return new Promise(function (res) {
var u = document.createElement('script'); u.src = '../../js/ugc.js?v=26110418';
var u = document.createElement('script'); u.src = '../../js/ugc.js?v=26110419';
u.onload = function () { (window.__mbUgcReady || Promise.resolve(false)).then(res); };
u.onerror = function () { res(false); };
document.head.appendChild(u);

46
topic/_shared/wizard.css Normal file
View File

@@ -0,0 +1,46 @@
/* 计算器分步模式(配合 wizard.js,11-04)。用页面的 --c 主题色;--h 标题色、--m 弱文字色。 */
.wz .wz-off,.wz-hold,html.wz-q #tx-rel,html.wz-q #tx-cm,html.wz-q .tc-in{display:none!important}
.wz:not(.wz-res) .res,.wz:not(.wz-res) .wz-again,.wz.wz-res .wz-top,.wz.wz-res .wz-bot{display:none!important}
.wz{min-height:300px}
.wz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.wz-n{font-size:12.5px;font-weight:800;color:var(--c);letter-spacing:.5px}
.wz-dots{display:flex;gap:5px}
.wz-dots i{width:7px;height:7px;border-radius:99px;background:#ECE6E8;transition:width .25s,background .25s}
.wz-dots i.d{background:var(--c);opacity:.45}
.wz-dots i.c{width:20px;background:var(--c)}
/* 题目:标签放大成问题 */
.wz .wz-in{animation:wzIn .32s ease both}
.wz .fld.wz-in{margin-top:10px}
.wz .fld.wz-in>.lb,.wz .fld.wz-in>label.lb,.wz .fld.wz-in>span.lb{display:block;margin-bottom:12px;font-size:20px;font-weight:900;line-height:1.4;color:var(--h)}
.wz .fld.wz-in>.lb small,.wz .fld.wz-in>.lb small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--m)}
.wz .fld.two.wz-in .lb{font-size:16px;font-weight:800;color:var(--h)}
.wz .tabs.wz-in{margin-top:10px}
.wz .tabs.wz-in::before{content:attr(data-wzq);display:block;margin-bottom:12px;font-size:20px;font-weight:900;line-height:1.4;color:var(--h)}
.calc.wz .tabs.wz-in{display:flex;flex-direction:column;gap:10px;padding:0;border-radius:0;background:none}
.calc.wz .tabs.wz-in button{flex:none;height:54px;border-radius:14px;border:1.5px solid #EDE7EA;background:#fff;box-shadow:none;font-size:16px;font-weight:700;color:var(--h)}
.calc.wz .tabs.wz-in button.on{border-color:var(--c);background:var(--cbg);color:var(--c)}
.wz .fld.wz-in .seg button{min-height:46px;font-size:15px}
.wz .fld.wz-in .in,.wz .fld.wz-in .inp{min-height:50px;font-size:17px}
/* 底部按钮 */
.wz-bot{margin-top:22px}
.wz-err{min-height:18px;margin-bottom:6px;font-size:13px;font-weight:700;color:#E5484D;text-align:center}
.wz-err:empty{min-height:0;margin:0}
.wz-act{display:flex;gap:10px}
.wz-prev{flex:0 0 auto;height:48px;padding:0 16px;border-radius:99px;background:#F5F2F3;color:var(--m);font-size:14.5px;font-weight:700}
.wz-next{flex:1;height:48px;border-radius:99px;background:var(--c);color:#fff;font-size:16px;font-weight:800;box-shadow:0 8px 18px -8px var(--c)}
.wz-next.go{background:linear-gradient(135deg,var(--c2,var(--c)),var(--c))}
.wz-prev[hidden]{display:none}
.wz-tip{margin-top:8px;font-size:12px;color:var(--m);text-align:center}
.wz-tip:empty{display:none}
.wz-shake .wz-in{animation:wzShake .35s}
/* 结果屏 */
.wz.wz-res{min-height:0}
.wz-pop{animation:wzPop .5s cubic-bezier(.3,1.4,.5,1) both}
.wz-again{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:14px}
.wz-re{height:42px;padding:0 22px;border-radius:99px;border:1.5px solid var(--c);color:var(--c);font-size:14.5px;font-weight:800;background:#fff}
.wz-re{display:inline-flex;align-items:center;gap:5px}.wz-re svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wz-again small{font-size:12px;color:var(--m)}
@keyframes wzIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes wzPop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
@keyframes wzShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.wz .wz-in,.wz-pop,.wz-shake .wz-in{animation:none}}

144
topic/_shared/wizard.js Normal file
View File

@@ -0,0 +1,144 @@
/* 计算器分步模式(11-04 用户:「其他计算器都按生娃计算器那种模式:点进去一步一步填,最后出答案」)
用法:页面原来的计算逻辑不动(照样实时往结果框里写),本脚本只管「显示哪一块」:
CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' })
· root 里每个 .fld 是一题;.tabs(算法切换)单独一题,题目取 data-q;包在 div 里的 .fld 会被拆开,带 .hide 的跳过;
.calc 直属的 .hint 跟着上一题。
· 必填:有 input/select/.seg 的题要先填;标签里写了「选填」或 .fld 带 data-opt 的不拦。
· 只有一组 .seg / .tabs 的题,点完自动下一题(同生娃计算器)。
· 最后一题按钮是「看结果」:结果框里还是 .empty(没填全 / 数不对)就不放行,把那句提示显示出来。
· 结果屏:只出结果框 + after 选中的内容(详细说明等)+「重新算」(回第 1 题,填过的都留着)。
· 记住停在哪一屏(AGENTS 规则:测试 / 计算器再进来回到最后停的屏),键 mmbox.wz.v1,按页面路径分。 */
(function (g) {
'use strict';
var KEY = 'mmbox.wz.v1';
function load() { try { return JSON.parse(localStorage.getItem(KEY) || '{}') || {}; } catch (e) { return {}; } }
function save(v) { try { var m = load(); m[location.pathname] = v; localStorage.setItem(KEY, JSON.stringify(m)); } catch (e) {} }
function hidden(el) { return el.classList.contains('hide') || el.hidden; }
function txt(el) { return el ? el.textContent.replace(/\s+/g, ' ').trim() : ''; }
function init(o) {
var root = typeof o.root === 'string' ? document.querySelector(o.root) : o.root;
var res = typeof o.res === 'string' ? document.querySelector(o.res) : o.res;
if (!root || !res || root.__wz) return;
root.__wz = 1;
var after = o.after ? [].slice.call(document.querySelectorAll(o.after)).filter(function (e) { return !/toast|mask/.test(e.className + ' ' + e.id); }) : [];
var sc = document.getElementById('scroll') || document.scrollingElement;
root.classList.add('wz');
/* 顶部进度 + 底部按钮 */
var top = document.createElement('div'); top.className = 'wz-top';
top.innerHTML = '<span class="wz-n"></span><span class="wz-dots"></span>';
var bot = document.createElement('div'); bot.className = 'wz-bot';
bot.innerHTML = '<p class="wz-err" role="alert"></p><div class="wz-act"><button type="button" class="wz-prev">‹ 上一步</button><button type="button" class="wz-next"></button></div><p class="wz-tip"></p>';
var again = document.createElement('div'); again.className = 'wz-again';
again.innerHTML = '<button type="button" class="wz-re"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4M4 13a8 8 0 0 0 14.3 4.9L20 16M20 20v-4h-4"/></svg>重新算</button><small>填过的都还在,改哪项点哪项</small>';
root.insertBefore(top, root.firstChild);
root.appendChild(bot);
res.parentNode.insertBefore(again, res.nextSibling);
var nEl = top.querySelector('.wz-n'), dEl = top.querySelector('.wz-dots'), err = bot.querySelector('.wz-err'),
prev = bot.querySelector('.wz-prev'), next = bot.querySelector('.wz-next'), tip = bot.querySelector('.wz-tip');
/* 题目单元:每次现算(页面切 tabs 会显示 / 隐藏不同的 .fld) */
function units() {
var out = [];
[].forEach.call(root.children, function (c) {
if (c === top || c === bot || c === res || c === again || hidden(c)) return;
if (c.classList.contains('fld') || c.classList.contains('tabs')) out.push([c]);
else if (c.querySelector('.fld')) [].forEach.call(c.querySelectorAll('.fld'), function (f) { if (!hidden(f)) out.push([f]); });
else if (out.length) out[out.length - 1].push(c); /* 跟在题后的 .hint / 「再加一个孩子」等 */
else out.push([c]);
});
return out;
}
/* 能被藏的块:root 的直属子元素(除进度 / 按钮 / 结果框)+ 壳里的 .fld;题里面的东西不碰 */
function all() {
var out = [];
[].forEach.call(root.children, function (c) {
if (c === top || c === bot || c === res || c === again) return;
out.push(c);
if (!c.classList.contains('fld') && !c.classList.contains('tabs')) [].push.apply(out, c.querySelectorAll('.fld'));
});
return out;
}
function single(u) { /* 只有一组按钮可选 → 选完自动下一题 */
var el = u[0];
if (el.classList.contains('tabs')) return true;
return el.querySelectorAll('.seg').length === 1 && !el.querySelector('input,select,.stp');
}
function missing(u) {
var el = u[0];
if (el.hasAttribute('data-opt') || /选填/.test(txt(el.querySelector('.lb')))) return '';
var bad = '';
[].forEach.call(el.querySelectorAll('input,select'), function (i) {
if (bad || i.type === 'hidden' || i.disabled) return;
var lb = i.closest('div') && i.closest('div').querySelector('.lb');
if (lb && /选填/.test(txt(lb))) return;
if (!String(i.value).trim()) bad = '先填一下「' + (txt(lb || el.querySelector('.lb')).replace(/选填.*$/, '') || '这一项') + '」';
});
if (!bad) [].forEach.call(el.querySelectorAll('.seg'), function (s) { if (!bad && !s.querySelector('.on')) bad = '先选一下' + (txt(el.querySelector('.lb')) ? '「' + txt(el.querySelector('.lb')).replace(/\s.*$/, '') + '」' : ''); });
return bad;
}
var i = 0, mode = 'q';
function show() {
var us = units();
if (i >= us.length) i = us.length - 1;
if (i < 0) i = 0;
all().forEach(function (e) { e.classList.add('wz-off'); });
[].forEach.call(root.querySelectorAll('.wz-in'), function (e) { e.classList.remove('wz-in'); });
root.classList.toggle('wz-res', mode === 'r');
document.documentElement.classList.toggle('wz-q', mode !== 'r'); /* 答题时页面底部后加的相关推荐 / 评论区也先不出 */
after.forEach(function (e) { e.classList.toggle('wz-hold', mode !== 'r'); });
err.textContent = '';
if (mode === 'r') {
res.classList.remove('wz-pop'); void res.offsetWidth; res.classList.add('wz-pop');
save('r'); sc.scrollTop = 0; return;
}
var u = us[i];
u.forEach(function (e) {
e.classList.remove('wz-off'); e.classList.add('wz-in');
if (e.parentNode !== root) e.parentNode.classList.remove('wz-off'); /* 包在 #fLmp 这类壳里的题 */
});
var q = u[0].classList.contains('tabs') ? (u[0].getAttribute('data-q') || '先选一种算法') : '';
u[0].setAttribute('data-wzq', q);
nEl.textContent = '第 ' + (i + 1) + ' / ' + us.length + ' 步';
dEl.innerHTML = us.map(function (_, k) { return '<i' + (k < i ? ' class="d"' : k === i ? ' class="c"' : '') + '></i>'; }).join('');
prev.hidden = !i;
var last = i === us.length - 1;
next.textContent = last ? '看结果 ›' : '下一步 ›';
next.classList.toggle('go', last);
tip.textContent = single(u) && !last ? '选完自动下一步' : '';
save(i); sc.scrollTop = 0;
}
function go(d) {
var us = units();
if (d > 0) {
var m = missing(us[i]);
if (m) { err.textContent = m; root.classList.remove('wz-shake'); void root.offsetWidth; root.classList.add('wz-shake'); return; }
if (i === us.length - 1) {
var e = res.querySelector('.empty');
if (e) { err.textContent = txt(e); return; }
mode = 'r'; return show();
}
}
i += d; show();
}
prev.addEventListener('click', function () { go(-1); });
next.addEventListener('click', function () { go(1); });
again.querySelector('.wz-re').addEventListener('click', function () { mode = 'q'; i = 0; show(); });
/* 单选题点完自动下一步(等页面自己的点击处理先跑完) */
root.addEventListener('click', function (e) {
if (mode !== 'q') return;
var b = e.target.closest('.seg button,.tabs button'); if (!b) return;
var us = units(), u = us[i];
if (!u || u.indexOf(b.closest('.fld,.tabs')) < 0 || !single(u) || i === us.length - 1) return;
setTimeout(function () { if (mode === 'q' && units()[i] && units()[i][0] === u[0]) go(1); }, 320);
});
var sv = load()[location.pathname];
if (sv === 'r' && !res.querySelector('.empty')) mode = 'r';
else if (typeof sv === 'number') i = sv;
show();
}
g.CKW = { init: init };
})(window);

View File

@@ -11,7 +11,8 @@
月数按「自然月」数:从 max(出生月, 2025-01) 起,到满 3 周岁那个月之前为止(结果标「约」,以当地核定为准)。
最多填 3 个孩子;还没出生的填预产期先算。地方另有加码的(如部分城市每孩另发)不在这里算。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#E25C5C;--c2:#FF9A8A;--cbg:#FFEFED}.kid{position:relative;margin-top:12px;padding:12px;border-radius:14px;background:#FAF7F8}.kid .lb{display:flex;justify-content:space-between}.kid .rm{font-size:12.5px;font-weight:700;color:var(--m)}.add{display:block;width:100%;height:42px;margin-top:12px;border-radius:12px;border:1.5px dashed var(--c);color:var(--c);font-size:14px;font-weight:800}.kid .seg{margin-top:8px}</style>
</head>
<body>
@@ -45,7 +46,7 @@
<div class="tip"><b>地方可能另有补贴:</b>部分城市在国家 3600 元之外还另发生育补贴、育儿补贴,问一下当地卫健部门或看政务平台。</div>
<p class="foot">依据《育儿补贴制度实施方案》(2025)估算,月数折算以当地核定为准。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -106,7 +107,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/butie-js.jpg', '育儿补贴:每孩每年 3600 元,你家能领多少'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<!-- 11-04 UGC 总开关关着时本页不展示,直接回首页(js/ugc.js) -->
<script src="../../js/ugc.js?v=26110418" data-guard></script>
<script src="../../js/ugc.js?v=26110419" data-guard></script>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测你是什么样的妈妈?</title>

View File

@@ -10,7 +10,8 @@
每次「查什么」只列常规项目,具体以产检医院安排为准。做完可以打勾(记在本机 mmbox.calc.chanjian)。
预产期优先用预产期计算器填过的值。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#2F86C9;--c2:#6CB6F0;--cbg:#EAF5FF}.tl .ck{flex:none;align-self:flex-start;height:28px;padding:0 10px;margin-top:1px;border-radius:99px;background:#F4F6F8;color:var(--m);font-size:12px;font-weight:800}.tl li.ok .ck{background:var(--c);color:#fff}.tl li.ok .m{opacity:.55}.tl li.ok .d{border-color:var(--c);background:var(--c);box-shadow:none}.tl .m span.it{margin-top:3px;color:var(--t)}</style>
</head>
<body>
@@ -22,7 +23,7 @@
<section class="hd"><p>孕期计算器</p><h1>产检时间表</h1><span>按预产期排好每一次产检:哪天去、查什么,做完打个勾</span></section>
<section class="calc">
<div class="res" id="res"><div class="empty">填好预产期,马上排出时间表</div></div>
<div class="tabs" id="tabs"><button type="button" data-v="due">按预产期</button><button type="button" data-v="lmp">按末次月经</button></div>
<div class="tabs" id="tabs" data-q="你想按哪个排?"><button type="button" data-v="due">按预产期</button><button type="button" data-v="lmp">按末次月经</button></div>
<div class="fld" id="fDue"><label class="lb" for="cDue">预产期</label><input class="in num" type="date" id="cDue"></div>
<div class="fld hide" id="fLmp"><label class="lb" for="cLmp">末次月经第一天<small>按 28 天周期算</small></label><input class="in num" type="date" id="cLmp"></div>
</section>
@@ -36,7 +37,7 @@
<div class="tip"><b>要空腹的几次:</b>第一次建档抽血、糖耐(OGTT)一般要空腹,前一晚 10 点后别吃东西;具体看医院通知。<br><b>错过不能补的:</b>NT(11~13+6 周)、大排畸(20~24 周)、糖耐(24~28 周)都有时间窗口,提前预约。</div>
<p class="foot">按《孕前和孕期保健指南(2018)》常规时间排,具体项目和时间以产检医院安排为准。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -93,7 +94,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/chanjian-js.jpg', '产检时间表:每次产检哪天去、查什么'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<!-- 11-04 UGC 总开关关着时本页不展示,直接回首页(js/ugc.js) -->
<script src="../../js/ugc.js?v=26110418" data-guard></script>
<script src="../../js/ugc.js?v=26110419" data-guard></script>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测:你家准爸爸是哪种队友?</title>

View File

@@ -11,7 +11,8 @@
计算:综合所得年度税表(3%~45%,年减除 6 万);应纳税所得 = 12 ×(月薪 − 个人五险一金 − 其他专项附加)− 60000,
省的税 = 不扣宝宝那项的税 − 扣了之后的税。不含年终奖单独计税、劳务报酬等,结果为估算。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#6C5BD6;--c2:#A595F2;--cbg:#F1EEFF}</style>
</head>
<body>
@@ -24,8 +25,8 @@
<section class="calc">
<div class="res" id="res"><div class="empty">填好月薪,马上算出一年省多少</div></div>
<div class="fld"><label class="lb" for="cSal">税前月薪</label><div class="inw"><input class="in num" type="number" inputmode="decimal" id="cSal" placeholder="比如 15000"><em>元/月</em></div></div>
<div class="fld"><label class="lb" for="cSi">每月个人交的五险一金<small>工资条上「个人社保 + 公积金」</small></label><div class="inw"><input class="in num" type="number" inputmode="decimal" id="cSi" placeholder="不填按月薪 × 22.5% 估"><em>元/月</em></div></div>
<div class="fld"><label class="lb" for="cOt">已经在扣的其他专项附加<small>房贷、房租、赡养老人、继续教育等</small></label><div class="inw"><input class="in num" type="number" inputmode="decimal" id="cOt" placeholder="0"><em>元/月</em></div></div>
<div class="fld" data-opt><label class="lb" for="cSi">每月个人交的五险一金<small>工资条上「个人社保 + 公积金」</small></label><div class="inw"><input class="in num" type="number" inputmode="decimal" id="cSi" placeholder="不填按月薪 × 22.5% 估"><em>元/月</em></div></div>
<div class="fld" data-opt><label class="lb" for="cOt">已经在扣的其他专项附加<small>房贷、房租、赡养老人、继续教育等</small></label><div class="inw"><input class="in num" type="number" inputmode="decimal" id="cOt" placeholder="0"><em>元/月</em></div></div>
<div class="fld"><span class="lb">3 岁以下的宝宝</span><div class="seg" id="cN"><button type="button" data-v="1">1 个</button><button type="button" data-v="2">2 个</button><button type="button" data-v="3">3 个</button></div></div>
<div class="fld"><span class="lb">这一项你扣多少</span><div class="seg s2" id="cR"><button type="button" data-v="100">我一个人扣 100%</button><button type="button" data-v="50">夫妻各扣 50%</button></div>
<span class="hint">一般谁工资高、税率高,谁扣 100% 更省;一个纳税年度内不能改</span></div>
@@ -48,7 +49,7 @@
<p class="foot">按现行个税政策估算,未含年终奖单独计税等情况,以个税 App 实际计算为准。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -81,7 +82,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/geshui-js.jpg', '个税省多少:有宝宝一年能少交多少税'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -11,7 +11,8 @@
本省延长的天数是否由生育保险基金支付各地不一样,结果同时给出「按国家 98 天起」和「按本省合计」两个数。
津贴低于本人工资的,多数省份规定由单位补足差额 —— 填了本人月工资就算出差额。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#E0812A;--c2:#FFB067;--cbg:#FFF3E6}select.in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}</style>
</head>
<body>
@@ -46,7 +47,7 @@
<div class="tip"><b>生育津贴 ≠ 生育医疗费:</b>产检、住院分娩的费用另外按生育保险报销,不在这个数里。</div>
<p class="foot">按《社会保险法》《女职工劳动保护特别规定》常用算法估算,实际以当地医保部门核定为准。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -85,7 +86,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/jintie-js.jpg', '生育津贴计算器:产假期间能领多少钱'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -134,7 +134,7 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
})();
</script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/jisuan.jpg', '孕期计算器:生娃花费、预产期、产假天数,一算就知道'); /* 11-04 微信转发图 */</script>
</body>
</html>

View File

@@ -10,7 +10,8 @@
对比用国家卫健委《中国居民营养与慢性病状况报告(2020 年)》18~44 岁平均身高:男 169.7 cm、女 158.0 cm。
身高约 70% 看遗传,营养、睡眠、运动影响剩下的部分 —— 结果只是参考范围。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#1F9BA8;--c2:#5FCBD3;--cbg:#E6F7F8}.sx{display:flex;gap:10px;margin-top:12px}.sx div{flex:1;padding:10px;border-radius:12px;background:rgba(255,255,255,.18)}.sx b{display:block;font-size:22px;font-weight:900;line-height:1.3}</style>
</head>
<body>
@@ -41,7 +42,7 @@
<p class="foot">按遗传靶身高公式估算,实际身高受营养、睡眠、运动和疾病等影响,仅供参考。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -75,7 +76,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/shengao-js.jpg', '宝宝身高预测:长大后大概多高'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -11,7 +11,8 @@
各地规定不一,页面写「以当地为准」。很多地方已开通「新生儿出生一件事」联办(出生证 + 户口 + 医保 + 社保卡一次办)。
做完可以打勾(记在本机 mmbox.calc.shouxu);还没生的按预产期先排。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#4E7FD8;--c2:#86AEF2;--cbg:#EDF3FF}.tl .ck{flex:none;align-self:flex-start;height:28px;padding:0 10px;margin-top:1px;border-radius:99px;background:#F4F6F8;color:var(--m);font-size:12px;font-weight:800}.tl li.ok .ck{background:var(--c);color:#fff}.tl li.ok .m{opacity:.55}.tl li.ok .d{border-color:var(--c);background:var(--c);box-shadow:none}.tl li.late .m b em{background:#FFE8E6;color:#E0453A}.tl .m span.w{color:var(--t)}</style>
</head>
<body>
@@ -23,7 +24,7 @@
<section class="hd"><p>孕期计算器</p><h1>出生后手续时间线</h1><span>出生证、上户口、医保、社保卡……每件事截止哪天</span></section>
<section class="calc">
<div class="res" id="res"><div class="empty">填宝宝出生日期,马上排出时间线</div></div>
<div class="tabs" id="tabs"><button type="button" data-v="1">已经生了</button><button type="button" data-v="0">还没生,按预产期</button></div>
<div class="tabs" id="tabs" data-q="宝宝生了吗?"><button type="button" data-v="1">已经生了</button><button type="button" data-v="0">还没生,按预产期</button></div>
<div class="fld"><label class="lb" for="cD" id="cDl">宝宝出生日期</label><input class="in num" type="date" id="cD"></div>
</section>
@@ -36,7 +37,7 @@
<div class="tip"><b>先查有没有「出生一件事」:</b>很多城市在支付宝、微信或当地政务 App 上能把出生医学证明、上户口、医保参保、社保卡一次办完,不用一趟趟跑。<br><b>要准备的:</b>爸妈身份证、户口本、结婚证、出生医学证明(宝宝名字定好再办)。</div>
<p class="foot">各地规定和截止时间不完全一样,以当地公安、医保、卫健部门要求为准。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -87,7 +88,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/shouxu-js.jpg', '出生后手续时间线:每件事截止哪天'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -11,7 +11,8 @@
顺带提示两种溶血风险:妈妈 Rh 阴性 + 爸爸 Rh 阳性(Rh 溶血,要查抗 D 抗体);妈妈 O 型 + 爸爸非 O 型(ABO 溶血,多数轻)。
顺式 AB(cis-AB)、孟买型等罕见情况不算,页面写明。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#D9475A;--c2:#FF8A96;--cbg:#FFEDEF}.bars{margin-top:12px}.bars div{display:flex;align-items:center;gap:8px;margin-top:6px}.bars b{flex:none;width:44px;font-size:16px}.bars i{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}.bars i u{display:block;height:100%;border-radius:99px;background:#fff}.bars span{flex:none;width:52px;text-align:right;font-size:14px;font-weight:800}.bars .no{opacity:.45}</style>
</head>
<body>
@@ -43,7 +44,7 @@
<p class="foot">按常规遗传规律估算,不能用来做亲子鉴定;顺式 AB、孟买型等罕见血型不在计算范围。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -97,7 +98,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/xuexing-js.jpg', '宝宝血型推算:爸妈血型配宝宝会是什么型'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -71,6 +71,7 @@ button{cursor:pointer}
.tip b{color:var(--h)}
.foot{margin:14px 20px 0;font-size:12px;color:var(--m);text-align:center;line-height:1.6}
</style>
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
</head>
<body>
<svg style="position:absolute;width:0;height:0" aria-hidden="true"><symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol></svg>
@@ -83,7 +84,7 @@ button{cursor:pointer}
<section class="calc">
<div class="res" id="res"><div class="empty">填好下面的日期,马上出结果</div></div>
<div class="tabs" id="tabs"><button type="button" data-m="lmp" class="on">按末次月经</button><button type="button" data-m="ivf">按试管移植</button></div>
<div class="tabs" id="tabs" data-q="你想按哪个算?"><button type="button" data-m="lmp" class="on">按末次月经</button><button type="button" data-m="ivf">按试管移植</button></div>
<div id="fLmp">
<div class="fld"><label class="lb" for="cLmp">末次月经第一天</label><input class="in num" type="date" id="cLmp"></div>
<div class="fld"><span class="lb">月经周期<small>两次月经第一天间隔几天</small></span>
@@ -187,7 +188,10 @@ button{cursor:pointer}
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/yuchanqi-js.jpg', '预产期计算器:宝宝哪天到?还有几天见面'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -9,7 +9,8 @@
价格是 2026 年市场行情的估算区间(月子中心 28 天套餐、金牌 / 普通月嫂 26 天、在家坐月子的食材营养 + 用品),按城市 × 档次取值,按天数折算;
不是报价,只帮用户比较三种方式的量级。改价格只改下面 P 表。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#C9658F;--c2:#F0A0C0;--cbg:#FCEEF4}</style>
</head>
<body>
@@ -36,7 +37,7 @@
<div class="tip"><b>看月子中心记得问清:</b>价格含不含宝宝护理、产后修复、家属餐和陪护床;护士是否 24 小时、一对几;有没有医护资质和儿科医生定期巡房。<br><b>请月嫂:</b>看健康证、育婴师证,最好先面试、试工,合同写清休息和换人规则。</div>
<p class="foot">价格为 2026 年市场行情估算,各地差别很大,以实际报价为准。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -70,7 +71,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/yuezi-js.jpg', '月子花费:月子中心、月嫂、在家坐各花多少'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -10,7 +10,8 @@
孕月按 4 周一个月(孕 1~10 月);孕早期 < 14 周、孕中期 14~27+6 周、孕晚期 ≥ 28 周;37 周足月、42 周过期。
宝宝像什么用全生态统一表 /common/baby-size.js(别自己维护)。预产期计算器填过的值直接拿来用。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#E2668E;--c2:#FF9DB8;--cbg:#FFEEF3}.bs{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.18)}.bs i{font-style:normal;font-size:30px;line-height:1}.bs b{display:block;font-size:15px}.chk{display:flex;align-items:center;gap:10px;margin-top:10px}.chk .in{flex:1;margin:0}.chk b{flex:none;min-width:120px;text-align:right;font-size:15px;color:var(--c)}</style>
</head>
<body>
@@ -22,7 +23,7 @@
<section class="hd"><p>孕期计算器</p><h1>孕周计算器</h1><span>今天孕几周几天、孕几个月、宝宝像什么,填一个日期就知道</span></section>
<section class="calc">
<div class="res" id="res"><div class="empty">填好下面的日期,马上出结果</div></div>
<div class="tabs" id="tabs"><button type="button" data-v="lmp">按末次月经</button><button type="button" data-v="due">按预产期</button></div>
<div class="tabs" id="tabs" data-q="你想按哪个算?"><button type="button" data-v="lmp">按末次月经</button><button type="button" data-v="due">按预产期</button></div>
<div id="fLmp">
<div class="fld"><label class="lb" for="cLmp">末次月经第一天</label><input class="in num" type="date" id="cLmp"></div>
<div class="fld"><span class="lb">月经周期<small>两次月经第一天间隔几天</small></span>
@@ -48,7 +49,7 @@
<div class="tip"><b>孕周以早孕 B 超为准:</b>月经不规律或记不清末次月经时,医生会按孕早期 B 超(头臀长)定孕周。这里算的是常规算法,仅供参考。</div>
<p class="foot">计算结果仅供参考,不能代替医生诊断。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script src="/common/baby-size.js?v=26101001"></script>
<script>
(function () {
@@ -108,7 +109,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/yunzhou-js.jpg', '孕周计算器:今天孕几周几天,宝宝像什么'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -12,7 +12,8 @@
某一孕周的推荐范围 = 孕早期 0~2 kg + (孕周 − 13) × 每周范围,封顶到总范围。双胎按 IOM 2009(标准没覆盖双胎)。
只算范围不做记录(11-04 用户:记体重是另一个记录工具)。
共用 ../_shared/calc.css + calc.js(返回 / 禁回弹 / 日期按北京时间 / 记住上次填的值);自成一页,不引 app.js。 -->
<link rel="stylesheet" href="../_shared/calc.css?v=26110418">
<link rel="stylesheet" href="../_shared/calc.css?v=26110419">
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<style>:root{--c:#2E9C6A;--c2:#6CCB9A;--cbg:#E8F7EF}.gauge{position:relative;height:10px;margin-top:14px;border-radius:99px;background:rgba(255,255,255,.28)}.gauge .ok{position:absolute;top:0;bottom:0;border-radius:99px;background:rgba(255,255,255,.65)}.gauge .me{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.15)}.glab{display:flex;justify-content:space-between;margin-top:4px;font-size:11.5px;opacity:.85}</style>
</head>
<body>
@@ -45,7 +46,7 @@
<div class="tip"><b>胖得太快或太慢都要留意:</b>增重过多容易妊娠糖尿病、巨大儿,过少可能影响宝宝发育。一周涨超过 1 公斤,或者突然腿脚、脸都肿,要尽快告诉医生。</div>
<p class="foot">依据 WS/T 801—2022《妊娠期妇女体重增长推荐值标准》;双胎参考美国医学研究所 IOM 2009。仅供参考。</p>
</div>
<script src="../_shared/calc.js?v=26110418"></script>
<script src="../_shared/calc.js?v=26110419"></script>
<script>
(function () {
'use strict';
@@ -94,7 +95,10 @@
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/share-card.js?v=26110418"></script>
<script src="../../js/share-card.js?v=26110419"></script>
<script>window.mbShare('../../assets/share/t/zengzhong-js.jpg', '孕期增重范围:孕期胖多少才合适'); /* 11-04 微信转发图 */</script>
<!-- 11-04 分步模式:一步一题、最后出结果(同生娃计算器),见 ../_shared/wizard.js -->
<script src="../_shared/wizard.js?v=26110419"></script>
<script>CKW.init({ root: '.calc', res: '#res', after: '#scroll > section.calc ~ *' });</script>
</body>
</html>

View File

@@ -202,6 +202,9 @@ html.cm .calc .res{order:-1;margin:0 0 16px}
html.cm .key{margin-top:26px}
html.cm:not(.cm-all) .cm-more{display:flex;align-items:center;justify-content:center;gap:4px;margin:22px 20px 0;height:46px;border-radius:99px;background:var(--cbg);color:var(--c);font-size:14.5px;font-weight:700;width:calc(100% - 40px)}
</style>
<!-- 11-04 计算器模式(calc=1)走分步:一步一题、最后出结果,见 ../_shared/wizard.js -->
<link rel="stylesheet" href="../_shared/wizard.css?v=26110419">
<script src="../_shared/wizard.js?v=26110419"></script>
</head>
<body>
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
@@ -400,6 +403,7 @@ html.cm:not(.cm-all) .cm-more{display:flex;align-items:center;justify-content:ce
hd.parentNode.insertBefore(document.getElementById('s2'), hd.nextSibling);
document.getElementById('s2').parentNode.insertBefore(document.querySelector('.key'), document.getElementById('s2').nextSibling);
document.getElementById('cmMore').addEventListener('click', function () { document.documentElement.classList.add('cm-all'); setTimeout(function () { go('s1'); }, 30); });
window.addEventListener('DOMContentLoaded', function () { CKW.init({ root: '#s2 .calc', res: '#cRes', after: '#s2 ~ *' }); });
}
var sc = $('#scroll');