141 lines
13 KiB
HTML
141 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<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>
|
||
<!-- 11-03 首页「测一测 · 科普 · 计算器」模块（js/kit.js）里「孕期计算器」入口的列表页。
|
||
用户：「这几个模块不是进去测一个，而是进去之后是列表页」。测试 / 科普已有列表（广场测一测、全部问题），计算器原来没有，这页补上。
|
||
条目：专题页里带计算器的（生娃花费 topic/huafei、产假天数 topic/zhichang）+ 会算数的孕期工具（胎儿估重）+ 预产期计算器 topic/yuchanqi-js（11-04 替换孕期体重管理）。
|
||
跳转一律同源相对路径，带回 search + hash（openid）；胎儿估重孕 15 周前提示（同首页 STAGE_GATE）。自成一页，不引 app.js。 -->
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||
html,body{height:100%;overflow:hidden;background:#FFF8F3;color:#4E5969;font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);transition:background .2s}
|
||
.bar.on{background:#FFF8F3;box-shadow:0 1px 0 #F3E6DC}
|
||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#1F2329}
|
||
.bar .back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.bar .t{font-weight:700;font-size:16px;color:#1F2329;opacity:0;transition:opacity .2s}
|
||
.bar.on .t{opacity:1}
|
||
.hero{position:relative;margin-top:-48px;padding:64px 20px 22px;background:linear-gradient(165deg,#FFE6D4 0%,#FFF8F3 78%);overflow:hidden}
|
||
.hero img{position:absolute;right:6px;top:44px;width:132px;height:132px;border-radius:30px;mix-blend-mode:multiply}
|
||
.hero small{display:inline-block;padding:2px 9px;border-radius:99px;background:#F07A2E;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.5px}
|
||
.hero h1{margin-top:10px;font-size:28px;font-weight:900;color:#1F2329;line-height:1.25}
|
||
.hero p{margin-top:6px;max-width:60%;font-size:13.5px;color:#7A6A60}
|
||
.list{display:flex;flex-direction:column;gap:12px;padding:6px 16px 0}
|
||
.it{position:relative;display:flex;align-items:center;gap:13px;padding:15px 14px;border-radius:20px;background:#fff;text-decoration:none;box-shadow:0 6px 18px -10px rgba(160,90,50,.28);transition:transform .14s}
|
||
.it:active{transform:scale(.98)}
|
||
.ic{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--bg)}
|
||
.ic svg{width:28px;height:28px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.ic img{width:38px;height:38px;object-fit:contain}
|
||
.tx{flex:1;min-width:0}
|
||
.tx b{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:800;color:#1F2329}
|
||
.tx b i{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:6px;background:var(--bg);color:var(--c)}
|
||
.tx p{margin-top:2px;font-size:12.5px;color:#7A6A60;line-height:1.5}
|
||
.tx small{display:block;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--c)}
|
||
.go{flex:none;height:30px;padding:0 13px;border-radius:99px;display:inline-flex;align-items:center;background:var(--c);color:#fff;font-size:13px;font-weight:800}
|
||
.it.lk{opacity:.6}
|
||
.it.lk .go{background:#C9BDB6}
|
||
.more{margin:22px 16px 0;padding:14px;border-radius:16px;background:rgba(240,122,46,.07);text-align:center;font-size:12.5px;color:#A08878}
|
||
.toast{position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom));z-index:50;transform:translate(-50%,10px);max-width:80%;padding:10px 16px;border-radius:12px;background:rgba(31,35,41,.86);color:#fff;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
|
||
.toast.on{opacity:1;transform:translate(-50%,0)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="scroll">
|
||
<header class="bar" id="bar">
|
||
<button class="back" id="back" aria-label="返回"><svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg></button>
|
||
<span class="t">孕期计算器</span>
|
||
</header>
|
||
<section class="hero">
|
||
<img src="../../assets/img/kit/jisuan.webp" alt="">
|
||
<small>算一算</small>
|
||
<h1>孕期计算器</h1>
|
||
<p>14 个计算器：花多少钱、能领多少补贴、产检哪天去，算明白心里才有底</p>
|
||
</section>
|
||
<div class="list" id="list"></div>
|
||
<div class="more">更多计算器陆续上线中</div>
|
||
</div>
|
||
<div class="toast" id="toast"></div>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var $ = function (s) { return document.querySelector(s); };
|
||
function href(u, cm) { return u + (cm ? (location.search ? location.search + '&' : '?') + 'calc=1' : (location.search || '')) + (location.hash || ''); } /* cm：产假页进计算器模式（11-03） */
|
||
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||
/* 人数口径同首页：「此刻」总人数（默认 151 万）× 固定比例，模拟数（AGENTS.md 12b） */
|
||
var TOT = 1510000;
|
||
function wan(n) { return n >= 1e4 ? (Math.round(n / 1e3) / 10) + '万' : String(Math.round(n)); }
|
||
var week = 0;
|
||
try { var g = JSON.parse(localStorage.getItem('mmbox.gcwk.v1') || 'null'); week = g && !g.pp ? +g.w || 0 : 0; } catch (e) {}
|
||
var SV = {
|
||
money: '<svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7h7M8.5 11h1M12 11h1M15.5 11h0M8.5 14.5h1M12 14.5h1M8.5 18h1M12 18h1M15.5 14.5v3.5"/></svg>',
|
||
cal: '<svg viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M8 3v4M16 3v4M3.5 10h17M8 14h3M8 17h6"/></svg>',
|
||
due: '<svg viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M8 3v4M16 3v4M3.5 10h17"/><path d="M12 18.2s-3-1.8-3-3.7c0-1 .8-1.7 1.6-1.7.6 0 1.1.3 1.4.8.3-.5.8-.8 1.4-.8.8 0 1.6.7 1.6 1.7 0 1.9-3 3.7-3 3.7z"/></svg>',
|
||
wk: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7v5l3.5 2"/></svg>',
|
||
chk: '<svg viewBox="0 0 24 24"><rect x="5" y="3.5" width="14" height="17.5" rx="2.5"/><path d="M9 3.5h6v3H9zM8.5 12l2 2 4-4M8.5 17.5h7"/></svg>',
|
||
wt: '<svg viewBox="0 0 24 24"><rect x="3.5" y="4" width="17" height="16.5" rx="4"/><path d="M8 10a4 4 0 018 0M12 10l1.8-2.2"/></svg>',
|
||
jt: '<svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2.5"/><path d="M3 10h18M7 15h4"/></svg>',
|
||
bt: '<svg viewBox="0 0 24 24"><path d="M5 9h14v11H5zM3.5 6h17v3h-17zM12 6v14M12 6c-1.5-3.5-5.5-3-4 0M12 6c1.5-3.5 5.5-3 4 0"/></svg>',
|
||
tax: '<svg viewBox="0 0 24 24"><path d="M6 3.5h9l3.5 3.5v13.5H6z"/><path d="M9 11h6M9 15h6M14.5 3.5V7h4"/></svg>',
|
||
yz: '<svg viewBox="0 0 24 24"><path d="M3.5 10.5L12 4l8.5 6.5V20h-17z"/><path d="M12 17.5s-3-1.8-3-3.7c0-1 .8-1.7 1.6-1.7.6 0 1.1.3 1.4.8.3-.5.8-.8 1.4-.8.8 0 1.6.7 1.6 1.7 0 1.9-3 3.7-3 3.7z"/></svg>',
|
||
ht: '<svg viewBox="0 0 24 24"><path d="M6 3v18M6 5h3M6 9h2M6 13h3M6 17h2"/><circle cx="15" cy="7" r="2.5"/><path d="M15 9.5v6M12 21l3-5.5 3 5.5M12 12.5h6"/></svg>',
|
||
xx: '<svg viewBox="0 0 24 24"><path d="M12 3s-6.5 7.2-6.5 11.6a6.5 6.5 0 0013 0C18.5 10.2 12 3 12 3z"/><path d="M9.5 15.5a2.6 2.6 0 002.4 2.4"/></svg>',
|
||
sx: '<svg viewBox="0 0 24 24"><rect x="4" y="3.5" width="16" height="17" rx="2.5"/><path d="M8 8.5h8M8 12.5h8M8 16.5h5"/></svg>'
|
||
};
|
||
var L = [
|
||
{ n: '生娃花费计算器', tag: '最多人用', d: '产检、分娩、月子、宝宝第一年，一共要花多少钱', u: '../huafei/', heat: .118, c: '#F07A2E', bg: '#FFF0E4', ic: SV.money },
|
||
{ n: '产假天数计算器', d: '能休几天、哪天开始休、哪天回去上班', u: '../zhichang/', cm: 1, heat: .062, c: '#5B6CFF', bg: '#EEF0FF', ic: SV.cal },
|
||
{ n: '胎儿体重估算', d: '填 B 超上的几个数，估宝宝现在多重', u: '/taier-guzhong/', heat: .071, c: '#2E9B78', bg: '#E6F6F0', img: '/upload/picture/715333a69fb67d8812ab093f342fa00f.png', gate: 15 },
|
||
{ n: '预产期计算器', d: '填末次月经或移植日，算预产期、现在几周、产检哪天去', u: '../yuchanqi-js/', heat: .083, c: '#E25C7A', bg: '#FFECEF', ic: SV.due }, /* 11-04 换掉「孕期增重」（那是记录工具） */
|
||
/* 11-04 用户从 20 个备选里选了带星的 10 个（共用 ../_shared/calc.*），按「孕期 → 钱 → 生了以后 → 趣味」排 */
|
||
{ n: '孕周计算器', tag: '新', d: '今天孕几周几天、孕几个月、宝宝像什么', u: '../yunzhou-js/', heat: .076, c: '#E2668E', bg: '#FFEEF3', ic: SV.wk },
|
||
{ n: '产检时间表', tag: '新', d: '每次产检哪天去、查什么，做完打个勾', u: '../chanjian-js/', heat: .069, c: '#2F86C9', bg: '#EAF5FF', ic: SV.chk },
|
||
{ n: '孕期增重范围', tag: '新', d: '按孕前身高体重，算孕期胖多少合适', u: '../zengzhong-js/', heat: .058, c: '#2E9C6A', bg: '#E8F7EF', ic: SV.wt },
|
||
{ n: '生育津贴计算器', tag: '新', d: '产假期间能领多少钱，单位要不要补差额', u: '../jintie-js/', heat: .072, c: '#E0812A', bg: '#FFF3E6', ic: SV.jt },
|
||
{ n: '育儿补贴计算器', tag: '新', d: '每孩每年 3600 元领到 3 岁，你家能领多少', u: '../butie-js/', heat: .081, c: '#E25C5C', bg: '#FFEFED', ic: SV.bt },
|
||
{ n: '个税省多少', tag: '新', d: '3 岁以下宝宝每月扣 2000，一年少交多少税', u: '../geshui-js/', heat: .047, c: '#6C5BD6', bg: '#F1EEFF', ic: SV.tax },
|
||
{ n: '月子花费计算器', tag: '新', d: '月子中心、请月嫂、在家坐，各要花多少', u: '../yuezi-js/', heat: .064, c: '#C9658F', bg: '#FCEEF4', ic: SV.yz },
|
||
{ n: '出生后手续时间线', tag: '新', d: '出生证、上户口、医保、社保卡，每件截止哪天', u: '../shouxu-js/', heat: .043, c: '#4E7FD8', bg: '#EDF3FF', ic: SV.sx },
|
||
{ n: '宝宝身高预测', tag: '新', d: '按爸妈身高，推算宝宝长大后多高', u: '../shengao-js/', heat: .079, c: '#1F9BA8', bg: '#E6F7F8', ic: SV.ht },
|
||
{ n: '宝宝血型推算', tag: '新', d: '爸妈血型配一配，宝宝可能是什么型', u: '../xuexing-js/', heat: .066, c: '#D9475A', bg: '#FFEDEF', ic: SV.xx }
|
||
];
|
||
$('#list').innerHTML = L.map(function (x, i) {
|
||
var lk = x.gate && week && week < x.gate;
|
||
return '<a class="it' + (lk ? ' lk' : '') + '" data-i="' + i + '" href="' + esc(href(x.u, x.cm)) + '" style="--c:' + x.c + ';--bg:' + x.bg + '">' +
|
||
'<span class="ic">' + (x.img ? '<img src="' + esc(x.img) + '" alt="">' : x.ic) + '</span>' +
|
||
'<span class="tx"><b>' + esc(x.n) + (x.tag ? '<i>' + esc(x.tag) + '</i>' : '') + (lk ? '<i>孕' + x.gate + '周开放</i>' : '') + '</b><p>' + esc(x.d) + '</p><small>' + wan(TOT * x.heat) + '人算过</small></span>' +
|
||
'<span class="go">去算</span></a>';
|
||
}).join('');
|
||
var tt = 0;
|
||
function toast(t) { var e = $('#toast'); e.textContent = t; e.classList.add('on'); clearTimeout(tt); tt = setTimeout(function () { e.classList.remove('on'); }, 2200); }
|
||
$('#list').addEventListener('click', function (e) {
|
||
var a = e.target.closest('.it'); if (!a || !a.classList.contains('lk')) return;
|
||
e.preventDefault();
|
||
var x = L[+a.dataset.i]; toast(x.n + '孕 ' + x.gate + ' 周以后开放，你现在孕 ' + week + ' 周，还用不到哦');
|
||
});
|
||
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回首页，身份原样带回 */
|
||
$('#back').addEventListener('click', function () {
|
||
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
|
||
else location.href = '../../' + location.search + location.hash;
|
||
});
|
||
var sc = $('#scroll'), bar = $('#bar');
|
||
sc.addEventListener('scroll', function () { bar.classList.toggle('on', sc.scrollTop > 40); }, { passive: true });
|
||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||
var y0 = 0;
|
||
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
|
||
sc.addEventListener('touchmove', function (e) {
|
||
var dy = e.touches[0].clientY - y0;
|
||
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) e.preventDefault();
|
||
}, { passive: false });
|
||
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
|
||
})();
|
||
</script>
|
||
<script src="../../js/share-card.js?v=26110412"></script>
|
||
<script>window.mbShare('../../assets/share/t/jisuan.jpg', '孕期计算器：生娃花费、预产期、产假天数，一算就知道'); /* 11-04 微信转发图 */</script>
|
||
</body>
|
||
</html>
|