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

6个专题页重设计：清新简洁一句话答案；测一测扩到16题；生娃计算器改7步选择+生下来/1/2/3岁分阶段花费

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 13:49:24 +00:00
parent a3cccb109b
commit 1761067777
6 changed files with 1429 additions and 2956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

928
topic/huafei/index.html
View File

@@ -5,481 +5,425 @@
<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>
<!-- 孕期专题 · 生娃花费（2026-10-31：孕期首页「其他妈妈也在搜」第 1 条入口）。
沿用 topic/wen 妊娠纹专题的视觉与结构：hero + 「先记住这 3 件事」+ 每节一句高亮结论 + 扁平双色 SVG 图标（页内 symbol 复用，不用 emoji）。
核心是可交互计算器：城市 / 分娩方式 / 医院 / 月子 / 喂养 → 四块费用区间 + 总计，环形图看占比。
价格表为常见区间的保守粗估（元，未扣医保），只写品类不点名品牌、不放百分比统计；改数字只改脚本里的 COST 表。
插画 img/*.webp 由 AI 生成（画面不含文字）。自成一页：不引 app.js；回首页走相对路径 ../../ 并带回 search + hash。 -->
<!-- 孕期专题 · 生娃计算器（孕期首页「其他妈妈也在搜」第 1 条入口）。
2026-10-31 v2 重做：按 topic-spec v2（主色 #18A058），改成「一屏一题 → 出结果」的分步计算器。
开始屏 → 7 个问题（城市 / 医院 / 分娩 / 月子 / 喂养 / 1～3 岁谁带 / 花钱风格）→ 结果屏（生下来 / 养到 1、2、3 岁切换）。
选择存 localStorage「mmbox.huafei.v2」，再进来直接看上次结果。改价格只改脚本顶部 COST 表。
自成一页：不引 app.js；返回走 history.back 或相对路径 ../../ 并带回 search + hash。 -->
<style>
:root{--c:#F4593C;--c2:#E8476F;--deep:#C2185B;--ink:#3B2A2A;--sub:#8A7471;--mute:#A8928E;--bg:#FFF8F5;--card:#fff;--line:#F6E3DD;--soft:#FFF0EA;
--green:#2F8A5E;--gbg:#E7F5EC;--amber:#D9822B;--abg:#FFF1DE;--red:#D93B3B;--rbg:#FDE8E8;--purple:#8E6BB8;
--k1:#F4593C;--k2:#E8476F;--k3:#C2185B;--k4:#8E6BB8}
:root{--c:#18A058;--cbg:#EAF7F0;--h:#1F2329;--t:#4E5969;--s:#86909C;--line:#EEF0F3;--gray:#F7F8FA}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
html,body{height:100%;overflow:hidden;background:#fff;color:var(--t);font:15px/1.75 -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))}
img{display:block;max-width:100%}
button,input{font:inherit;border:0;background:none;color:inherit}
button{cursor:pointer}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hide{position:absolute;width:0;height:0;overflow:hidden}
mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;padding:0 1px}
/* 顶栏 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,248,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink)}
.bar .t{font-weight:600;font-size:16px}
.bar .tag{margin-left:auto;margin-right:6px;font-size:12px;color:var(--c);background:#FFE9E2;border-radius:99px;padding:2px 10px}
.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);background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.bar.on{background:#fff;border-bottom-color:var(--line)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--h)}
.bar .back .ic{width:22px;height:22px}
.bar .t{font-size:16px;font-weight:600;color:var(--h)}
/* 头图 */
.hero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.96) 46%)}
.hero h1{font-size:27px;line-height:1.25;color:var(--deep);letter-spacing:.5px}
.hero p{margin-top:4px;font-size:13px;color:var(--sub)}
.screen{display:none;padding:0 20px}
.screen.on{display:block;animation:fd .35s ease both}
@keyframes fd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}
/* 3 个核心重点 */
.core{margin:16px 16px 0;padding:18px 16px 16px;border-radius:24px;background:#fff;box-shadow:0 6px 24px rgba(194,24,91,.08);border:1px solid #FBE0D8}
.core-h{display:flex;align-items:center;gap:8px}
.core-h .ic{font-size:22px;color:var(--c)}
.core-h h2{font-size:19px;line-height:1.3}
.core-h small{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap}
.core ol{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.core li{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 10px;border-radius:18px;background:linear-gradient(120deg,#FFF1EB,#FFF9F6)}
.core .no{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;font-family:Georgia,"Times New Roman",serif}
.core li:nth-child(1) .no{background:var(--c)}
.core li:nth-child(2) .no{background:var(--c2)}
.core li:nth-child(3) .no{background:var(--deep)}
.core .tx{flex:1;min-width:0}
.core .tx b{display:block;font-size:16.5px;line-height:1.35}
.core .tx span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.45}
.core .num{flex:none;min-width:64px;text-align:center;padding:6px 6px 5px;border-radius:14px;background:#fff;color:var(--deep);line-height:1.05;box-shadow:0 2px 8px rgba(194,24,91,.08)}
.core .num em{display:block;font-style:normal;font-size:18px;font-weight:800;white-space:nowrap}
.core .num small{display:block;margin-top:3px;font-size:11px;color:var(--sub);white-space:nowrap}
.core-ban{margin-top:10px;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;background:var(--red);color:#fff}
.core-ban .ic{font-size:24px}
.core-ban b{font-size:14.5px;line-height:1.35}
.core-ban span{display:block;font-size:12px;font-weight:400;opacity:.9}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border-radius:99px;background:var(--c);color:#fff;font-size:16px;font-weight:600}
.btn.ghost{background:#fff;color:var(--c);border:1px solid var(--c)}
/* 目录 */
.toc{display:flex;gap:8px;margin:14px 16px 0}
.toc button{flex:1;min-width:0;padding:11px 2px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
.toc .ib{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px}
/* 开始屏 */
.hero{margin-top:8px;height:200px;border-radius:20px;overflow:hidden;background:var(--gray)}
.hero img{width:100%;height:100%;object-fit:cover}
h1{margin-top:22px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
.lead{margin-top:8px;color:var(--t)}
.start-list{margin:20px 0 26px;padding:14px 16px;border-radius:18px;background:var(--gray);display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13.5px;color:var(--t);line-height:1.6}
.start-list span{display:flex;align-items:center;gap:6px}
.start-list i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--c)}
.tiny{margin-top:12px;font-size:12.5px;color:var(--s);text-align:center;line-height:1.6}
/* 段标题 + 段落重点结论 */
.sec{margin:36px 16px 0;scroll-margin-top:56px}
.sec-h{display:flex;align-items:center;gap:10px}
.sec-h .n{flex:none;width:32px;height:32px;border-radius:11px;background:var(--c);color:#fff;font-weight:800;display:grid;place-items:center;font-size:16px}
.sec-h h2{font-size:20px;line-height:1.3}
.sec-key{margin-top:10px;padding:11px 14px;border-radius:16px;background:var(--soft);border-left:4px solid var(--c);font-size:15.5px;font-weight:700;line-height:1.5;color:var(--deep)}
.sec-sub{margin-top:6px;padding:0 4px;font-size:12.5px;color:var(--mute)}
.pic-card{margin-top:14px;border-radius:22px;overflow:hidden;background:#FFF6F2}
.pic-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* 问题屏 */
.prog{display:flex;align-items:center;gap:12px;margin-top:6px}
.prog .pb{flex:1;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.prog .pb i{display:block;height:100%;border-radius:9px;background:var(--c);transition:width .3s}
.prog span{font-size:13px;color:var(--s);font-variant-numeric:tabular-nums}
.qh{margin-top:26px;font-size:22px;font-weight:800;line-height:1.35;color:var(--h)}
.qs{margin-top:4px;font-size:13.5px;color:var(--s)}
.opts{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;border-radius:18px;border:1.5px solid var(--line);background:#fff;text-align:left;transition:border-color .15s,background .15s}
.opt .ox{flex:1;min-width:0}
.opt b{display:block;font-size:16.5px;font-weight:700;color:var(--h);line-height:1.4}
.opt small{display:block;margin-top:2px;font-size:13px;color:var(--s);line-height:1.45}
.opt .rd{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #D5D9DE;display:grid;place-items:center}
.opt.on{border-color:var(--c);background:var(--cbg)}
.opt.on .rd{border-color:var(--c);background:var(--c)}
.opt.on .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.prev{display:inline-flex;align-items:center;gap:2px;margin-top:22px;padding:6px 4px;font-size:14px;color:var(--s)}
.prev .ic{width:18px;height:18px}
/* ① 计算器 */
.calc{margin-top:14px;padding:16px 14px 14px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 24px rgba(194,24,91,.06)}
.q{margin-top:14px}
.q:first-child{margin-top:0}
.q-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.q-h .ic{font-size:17px;color:var(--c)}
.q-h small{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--mute)}
.seg{display:flex;gap:6px;margin-top:8px}
.seg button{flex:1;min-width:0;padding:9px 2px;border-radius:14px;background:#FAF3F1;border:1.5px solid transparent;font-size:13px;line-height:1.3;color:#6A5452;text-align:center;transition:background .2s,border-color .2s,color .2s}
.seg button small{display:block;font-size:10.5px;color:var(--mute);margin-top:1px}
.seg button.on{background:#FFEDE6;border-color:var(--c);color:var(--deep);font-weight:700}
.seg button.on small{color:#D9765F}
.sw{margin-top:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#FAF3F1;width:100%;text-align:left}
.sw .tx{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35}
.sw .tx small{display:block;font-size:11.5px;color:var(--mute);font-weight:400}
.sw .tg{flex:none;width:44px;height:26px;border-radius:99px;background:#E5D6D2;position:relative;transition:background .2s}
.sw .tg::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .2s}
.sw.on .tg{background:var(--c)}
.sw.on .tg::after{transform:translateX(18px)}
/* 结果屏 */
.r-t{margin-top:6px;font-size:20px;font-weight:800;color:var(--h)}
.chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:2px 10px;border-radius:99px;background:var(--gray);font-size:12.5px;color:var(--t);line-height:1.8}
.hint{margin-top:6px;font-size:12.5px;color:var(--s)}
.tabs{margin-top:16px;display:flex;padding:3px;border-radius:99px;background:var(--gray)}
.tabs button{flex:1;min-width:0;height:36px;border-radius:99px;font-size:14px;color:var(--t);white-space:nowrap;transition:background .2s,color .2s}
.tabs button.on{background:#fff;color:var(--c);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.total{margin-top:14px;padding:20px 16px 18px;border-radius:18px;background:var(--cbg);text-align:center}
.total .l{font-size:13px;color:var(--t)}
.total .v{margin-top:2px;font-size:30px;font-weight:800;color:var(--c);line-height:1.3;font-variant-numeric:tabular-nums}
.total .v span{white-space:nowrap}
.total .m{margin-top:4px;font-size:13.5px;color:var(--t)}
.total .m b{color:var(--h)}
.stack{margin-top:18px;display:flex;gap:2px;height:12px;border-radius:9px;overflow:hidden}
.stack i{display:block;height:100%;transition:flex-grow .4s,background .3s}
.list{margin-top:10px;border-top:1px solid var(--line)}
.list details{border-bottom:1px solid var(--line)}
.list summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer}
.list summary::-webkit-details-marker{display:none}
.list .dot{flex:none;width:10px;height:10px;border-radius:3px}
.list .nm{flex:1;min-width:0;font-size:15px;color:var(--h)}
.list .rg{font-size:15px;font-weight:700;color:var(--h);white-space:nowrap;font-variant-numeric:tabular-nums}
.list .ar{flex:none;width:16px;height:16px;color:#C0C5CC;transition:transform .2s}
.list details[open] .ar{transform:rotate(180deg)}
.list .ds{padding:0 2px 12px 20px;font-size:13px;color:var(--s);line-height:1.6}
.list details.off .nm,.list details.off .rg{color:#C0C5CC;font-weight:400}
.list details.off .rg{font-size:13px}
.res{margin-top:16px;padding:16px 14px 14px;border-radius:24px;background:linear-gradient(160deg,#FFEDE6,#FFF8F4);border:1px solid #FBDCD2}
.res-top{display:flex;align-items:center;gap:14px}
.donut{flex:none;position:relative;width:min(128px,32vw);height:min(128px,32vw)}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:16;transition:stroke-dasharray .5s,stroke-dashoffset .5s}
.donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;text-align:center}
.donut .mid small{font-size:11px;color:var(--sub)}
.donut .mid b{font-size:19px;color:var(--deep);white-space:nowrap}
.donut .mid span{font-size:10.5px;color:var(--mute)}
.tot{flex:1;min-width:0}
.tot .l{font-size:12.5px;color:var(--sub)}
.tot .v{margin-top:2px;font-size:22px;font-weight:800;color:var(--deep);line-height:1.2}
.tot .v span{white-space:nowrap}
.tot .v small{font-size:13px;font-weight:700;margin-left:2px}
.tot .d{margin-top:6px;font-size:12px;color:#8A6A64;line-height:1.5}
.tot .d b{white-space:nowrap}
.blk{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.bk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fff}
.bk .bi{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:19px;color:#fff}
.bk .bx{flex:1;min-width:0}
.bk .r1{display:flex;align-items:baseline;gap:6px}
.bk .r1 b{font-size:14px;white-space:nowrap}
.bk .r1 em{margin-left:auto;font-style:normal;font-size:14px;font-weight:800;white-space:nowrap}
.bk .bar2{margin-top:6px;height:7px;border-radius:9px;background:#F6ECE9;overflow:hidden}
.bk .bar2 i{display:block;height:100%;border-radius:9px;transition:width .5s}
.bk .r2{margin-top:4px;font-size:11.5px;color:var(--mute);line-height:1.4}
.note{margin-top:12px;display:flex;gap:8px;padding:10px 12px;border-radius:14px;background:#FFF8E9;border:1px solid #F7E5BE;font-size:12px;color:#7A6343;line-height:1.55}
.note .ic{flex:none;font-size:16px;color:#B7791F;margin-top:1px}
/* ② 花在哪：清单卡 */
.item{margin-top:14px;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden}
.item .hd{display:flex;align-items:center;gap:10px;padding:13px 14px 0}
.item .hi{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:#fff}
.item h3{font-size:16.5px;line-height:1.35}
.item .hd small{margin-left:auto;font-size:11.5px;color:var(--mute);white-space:nowrap}
.item .concl{margin:8px 14px 0;font-size:15px;font-weight:800;line-height:1.45}
.item .concl i{font-style:normal;color:var(--deep)}
.item ul{list-style:none;padding:6px 14px 12px}
.item li{display:flex;gap:10px;padding:7px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.5}
.item li:first-child{border-top:0}
.item li .k{flex:none;width:76px;font-size:12.5px;font-weight:600;color:var(--ink)}
.item li .v{flex:1;min-width:0}
.item .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* ③ 能省 / 不能省 */
.two{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.col{border-radius:22px;padding:14px;border:1.5px solid}
.col.ok{background:#F3FAF4;border-color:#CFEAD7}
.col.no{background:var(--rbg);border-color:#F2B9B9}
.col .ch{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.col.ok .ch{color:var(--green)}
.col.no .ch{color:var(--red)}
.col .ch .ic{font-size:22px}
.col ul{list-style:none;margin-top:8px}
.col li{display:flex;gap:8px;padding:7px 0;border-top:1px dashed rgba(0,0,0,.07);font-size:13px;line-height:1.5;color:#5A4A48}
.col li:first-child{border-top:0}
.col li .ic{flex:none;font-size:16px;margin-top:2px}
.col.ok li .ic{color:var(--green)}
.col.no li .ic{color:var(--red)}
.col li b{color:var(--ink)}
/* ④ 生育保险 */
.ins{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ins div{padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c)}
.ins div:nth-child(2){border-top-color:var(--deep)}
.ins .ii{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.ins h4{margin-top:6px;font-size:14.5px;line-height:1.35}
.ins p{margin-top:3px;font-size:12px;color:var(--sub);line-height:1.5}
.formula{margin-top:14px;padding:14px 12px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
.formula .ft{font-size:14px;font-weight:700;text-align:center;color:var(--deep)}
.eq{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:10px}
.eq .it{flex:1;min-width:0;max-width:96px;padding:9px 2px 8px;border-radius:16px;background:#fff;box-shadow:0 3px 10px rgba(240,112,79,.08);font-size:11.5px;line-height:1.3;text-align:center}
.eq .it .ic{display:block;margin:0 auto 4px;font-size:24px;color:var(--c)}
.eq .op{flex:none;font-size:18px;color:var(--c);font-weight:700}
.eq .rs{background:var(--deep);color:#fff}
.eq .rs .ic{color:#fff}
.est{margin-top:12px;padding:12px;border-radius:16px;background:#fff}
.est .fl{display:flex;gap:8px}
.est label{flex:1;min-width:0;font-size:12px;color:var(--sub)}
.est input{display:block;width:100%;margin-top:4px;height:40px;padding:0 10px;border-radius:12px;background:#FAF3F1;border:1.5px solid #F1E2DD;font-size:16px;font-weight:700;color:var(--ink)}
.est input:focus{outline:none;border-color:var(--c)}
.est .out{margin-top:10px;display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--sub)}
.est .out b{margin-left:auto;font-size:22px;color:var(--deep);white-space:nowrap}
.est .out b small{font-size:12px;margin-left:2px}
.steps{margin-top:14px;list-style:none;counter-reset:s}
.steps li{position:relative;padding:10px 12px 10px 46px;margin-top:8px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.55;color:#6A5452}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:11px;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.steps li b{display:block;color:var(--ink);font-size:14px}
/* ⑤ 问医院 */
.ask{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.ak{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ak .ai{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px}
.ak b{display:block;font-size:14.5px;line-height:1.4}
.ak p{margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.55}
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px}
.foot{margin:28px 20px 0;font-size:11.5px;color:#B09C98;text-align:center;line-height:1.7}
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
.card{margin-top:16px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff}
.row{display:flex;gap:10px;align-items:flex-start}
.row+.row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.row .ic{margin-top:3px;color:var(--c)}
.row b{display:block;font-size:15px;color:var(--h);line-height:1.5}
.row b em{font-style:normal;color:var(--c)}
.row p{font-size:13.5px;color:var(--t);line-height:1.6}
.ins p{margin-top:2px}
.ins .f span{white-space:nowrap}
.ins .f{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:10px;background:var(--gray);font-size:12.5px;color:var(--h)}
.acts{margin-top:22px}
.note{margin-top:14px;font-size:12px;color:var(--s);line-height:1.6;text-align:center}
</style>
</head>
<body>
<!-- 图标库：扁平双色（线条 + 同色浅面），统一 24 栅格 / 2px 圆角线条 -->
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs><style>.f{fill:currentColor;fill-opacity:.2;stroke:none}.s{fill:currentColor;stroke:none}</style></defs>
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24"><path class="f" d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/></symbol>
<symbol id="i-calc" viewBox="0 0 24 24"><rect class="f" x="5" y="3" width="14" height="18" rx="3"/><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7h7M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01M8.5 15h.01M12 15h.01M15.5 15v2.5M8.5 17.5h.01M12 17.5h.01"/></symbol>
<symbol id="i-coin" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M9 7.5l3 4 3-4M12 11.5V17M9 12.5h6M9 15h6"/></symbol>
<symbol id="i-piggy" viewBox="0 0 24 24"><path class="f" d="M4 12a7 6 0 0 1 12.5-3.6H19l-.6 2.6 1.6 1.2v3l-2 .6-1.5 2.2V20h-3v-1.5h-3V20h-3v-2.2A6 6 0 0 1 4 12z"/><path d="M4 12a7 6 0 0 1 12.5-3.6H19l-.6 2.6 1.6 1.2v3l-2 .6-1.5 2.2V20h-3v-1.5h-3V20h-3v-2.2A6 6 0 0 1 4 12zM10 6.5h3M4 12c-1 0-1.5-.8-1.5-1.5"/><circle class="s" cx="15.5" cy="11" r=".9"/></symbol>
<symbol id="i-city" viewBox="0 0 24 24"><path class="f" d="M4 21V9l5-3v15zM13 21V4h7v17z"/><path d="M3 21h18M4 21V9l5-3v15M13 21V4h7v17M9 11h4M16 8h1M16 11.5h1M16 15h1M6.5 12h.01M6.5 15.5h.01"/></symbol>
<symbol id="i-clinic" viewBox="0 0 24 24"><rect class="f" x="4" y="4" width="16" height="17" rx="3"/><rect x="4" y="4" width="16" height="17" rx="3"/><path d="M12 8.5v7M8.5 12h7"/></symbol>
<symbol id="i-steth" viewBox="0 0 24 24"><path class="f" d="M18 13.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/><path d="M6 3v5a4 4 0 0 0 8 0V3M10 12v2.5a4.5 4.5 0 0 0 9 0V13.5"/><circle cx="18" cy="16" r="2.5"/></symbol>
<symbol id="i-bed" viewBox="0 0 24 24"><path class="f" d="M3 11h18v6H3z"/><path d="M3 6v13M21 12v7M3 17h18M3 11h18"/><circle cx="7.5" cy="8.5" r="1.8"/></symbol>
<symbol id="i-mom" viewBox="0 0 24 24"><circle class="f" cx="15" cy="14" r="5"/><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M12 9c4 .5 8 2.5 8 5.5s-2.5 4.5-6 4.5h-2M12 21v-2"/></symbol>
<symbol id="i-home" viewBox="0 0 24 24"><path class="f" d="M5 10l7-6 7 6v10H5z"/><path d="M3 11.5L12 4l9 7.5M5 10v10h14V10M10 20v-5.5h4V20"/></symbol>
<symbol id="i-heart" viewBox="0 0 24 24"><path class="f" d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z"/><path d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z"/></symbol>
<symbol id="i-baby" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12.5" r="8.5"/><circle cx="12" cy="12.5" r="8.5"/><circle class="s" cx="9.2" cy="11.5" r="1"/><circle class="s" cx="14.8" cy="11.5" r="1"/><path d="M9.5 15.2c1.4 1.2 3.6 1.2 5 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
<symbol id="i-bottle" viewBox="0 0 24 24"><path class="f" d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2z"/><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V8h6v2M10.5 8V5.5a1.5 1.5 0 0 1 3 0V8M8 14h3M8 17h3"/></symbol>
<symbol id="i-syringe" viewBox="0 0 24 24"><path class="f" d="M14.5 5.5l4 4-8 8H6.5v-4z"/><path d="M14.5 5.5l4 4-8 8H6.5v-4zM17 3l4 4M19 5l-2.5 2.5M6.5 17.5L3 21M10.5 9.5l2 2M8.5 11.5l2 2"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
<symbol id="i-doc" viewBox="0 0 24 24"><path class="f" d="M6 3h8l4 4v14H6z"/><path d="M6 3h8l4 4v14H6zM14 3v4h4M9 11h6M9 14.5h6M9 18h3"/></symbol>
<symbol id="i-receipt" viewBox="0 0 24 24"><path class="f" d="M5 3h14v18l-2.3-1.5L14.3 21 12 19.5 9.7 21l-2.4-1.5L5 21z"/><path d="M5 3h14v18l-2.3-1.5L14.3 21 12 19.5 9.7 21l-2.4-1.5L5 21zM9 8h6M9 11.5h6M9 15h4"/></symbol>
<symbol id="i-cal" viewBox="0 0 24 24"><rect class="f" x="3.5" y="5" width="17" height="15.5" rx="3"/><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></symbol>
<symbol id="i-wallet" viewBox="0 0 24 24"><rect class="f" x="3" y="6" width="18" height="14" rx="3"/><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M16 13h2.5M6 6l9-3 1.5 3"/></symbol>
<symbol id="i-chat" viewBox="0 0 24 24"><path class="f" d="M4 5h16v11H9l-5 4z"/><path d="M4 5h16v11H9l-5 4zM8.5 9.5h7M8.5 12.5h4"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.8 2.8L16 9.5"/></symbol>
<symbol id="i-ban" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M5.7 5.7l12.6 12.6"/></symbol>
<symbol id="i-warn" viewBox="0 0 24 24"><path class="f" d="M12 3.5l9.5 16.5h-19z"/><path d="M12 3.5l9.5 16.5h-19zM12 10v4.5M12 17.3v.2"/></symbol>
<symbol id="i-bulb" viewBox="0 0 24 24"><path class="f" d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/><path d="M9 18.5h6M10.2 21.5h3.6M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/></symbol>
<symbol id="i-bag" viewBox="0 0 24 24"><path class="f" d="M5 8h14l-1 13H6z"/><path d="M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2"/></symbol>
<symbol id="i-cart" viewBox="0 0 24 24"><path class="f" d="M6 6h15l-2 8H7.5z"/><path d="M3 3h2.5l2.5 11h11l2-8H6M9.5 19.5h.01M17 19.5h.01"/></symbol>
<symbol id="i-team" viewBox="0 0 24 24"><circle class="f" cx="9" cy="8" r="3.5"/><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14a6.5 6.5 0 0 1 3.5 6"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
<symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 7.5l3 4 3-4M12 11.5V17M9 12.5h6M9 15h6"/></symbol>
<symbol id="i-bulb" viewBox="0 0 24 24"><path d="M9 18.5h6M10.2 21.5h3.6M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
</svg>
<div id="scroll">
<header class="bar">
<header class="bar" id="bar">
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
<span class="t">孕期专题</span>
<span class="tag">生娃花费</span>
</header>
<section class="hero">
<img src="img/hero.webp" alt="孕妈在桌前用计算器记账">
<div class="cap">
<h1>生娃计算器<br>到底要花多少钱？</h1>
<p>选 5 个条件，算出产检、分娩、月子、宝宝第一年的大概花费</p>
<!-- 开始屏 -->
<section class="screen" id="sStart">
<div class="hero"><img src="img/hero.webp" alt="孕妈在桌前记账"></div>
<h1>生娃计算器<br>到底要花多少钱？</h1>
<p class="lead">回答 7 个小问题，算出从怀孕到宝宝 3 岁大概要花多少。</p>
<div class="start-list">
<span><i></i>孕期产检</span><span><i></i>分娩住院</span>
<span><i></i>坐月子</span><span><i></i>养到 1～3 岁</span>
</div>
<button class="btn" id="go">开始计算</button>
<p class="tiny">约 1 分钟 · 不用填个人信息</p>
</section>
<section class="core">
<div class="core-h"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg><h2>先记住这 3 件事</h2><small>只看这里也够用</small></div>
<ol>
<li><span class="no">1</span><div class="tx"><b>差距最大的是坐月子</b><span>家人照顾、请月嫂、月子中心能差出好几倍</span></div><div class="num"><em>先定</em><small>月子方式</small></div></li>
<li><span class="no">2</span><div class="tx"><b>宝宝第一年按月花</b><span>奶粉、纸尿裤每月都要买，别一次囤太多</span></div><div class="num"><em>12 个月</em><small>持续开销</small></div></li>
<li><span class="no">3</span><div class="tx"><b>生育保险先问清</b><span>产检、分娩能报一部分，还可能有生育津贴</span></div><div class="num"><em>建档前</em><small>就去问</small></div></li>
</ol>
<div class="core-ban"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg><b>医生建议的产检一项都别省<span>要省钱从用品、月子方式上省，不从安全上省</span></b></div>
<!-- 问题屏 -->
<section class="screen" id="sQ">
<div class="prog"><div class="pb"><i id="pbar"></i></div><span id="pnum">1 / 7</span></div>
<h2 class="qh" id="qh"></h2>
<p class="qs" id="qs"></p>
<div class="opts" id="opts"></div>
<button class="prev" id="prev"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一步</button>
</section>
<nav class="toc">
<button data-go="s1"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-calc" xlink:href="#i-calc"/></svg></span>算一算</button>
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-receipt" xlink:href="#i-receipt"/></svg></span>花在哪</button>
<button data-go="s3"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-piggy" xlink:href="#i-piggy"/></svg></span>怎么省</button>
<button data-go="s4"><span class="ib" style="background:#F1EAF8;color:#8E6BB8"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span>能报销</button>
</nav>
<!-- ① 计算器 -->
<section class="sec" id="s1">
<div class="sec-h"><span class="n">1</span><h2>算算你家大概要花多少</h2></div>
<div class="sec-key">点一点下面的选项，<mark>结果马上跟着变</mark>。</div>
<p class="sec-sub">按常见价格区间粗略估算，各地各医院差别很大，以建档医院实际报价为准</p>
<div class="calc fade">
<div class="q">
<div class="q-h"><svg class="ic"><use href="#i-city" xlink:href="#i-city"/></svg>在哪个城市生</div>
<div class="seg" data-k="city">
<button data-v="0">一线城市</button>
<button data-v="1" class="on">新一线<small>及二线</small></button>
<button data-v="2">三四线<small>及县城</small></button>
</div>
</div>
<div class="q">
<div class="q-h"><svg class="ic"><use href="#i-bed" xlink:href="#i-bed"/></svg>分娩方式<small>最终听医生评估</small></div>
<div class="seg" data-k="way">
<button data-v="0" class="on">顺产</button>
<button data-v="1">剖宫产</button>
</div>
</div>
<div class="q">
<div class="q-h"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>医院类型</div>
<div class="seg" data-k="hosp">
<button data-v="0" class="on">公立普通</button>
<button data-v="1">公立特需<small>或私立</small></button>
</div>
</div>
<div class="q">
<div class="q-h"><svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg>怎么坐月子</div>
<div class="seg" data-k="yz">
<button data-v="0" class="on">家人照顾</button>
<button data-v="1">请月嫂</button>
<button data-v="2">月子中心</button>
</div>
</div>
<div class="q">
<div class="q-h"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg>宝宝怎么喂</div>
<div class="seg" data-k="feed">
<button data-v="0" class="on">母乳为主</button>
<button data-v="1">混合喂养</button>
<button data-v="2">奶粉为主</button>
</div>
</div>
<button class="sw" id="vac" aria-pressed="false">
<span class="tx">算上自费疫苗<small>免费疫苗之外，自愿选打的那部分</small></span>
<span class="tg"></span>
</button>
<div class="res" id="res" aria-live="polite">
<div class="res-top">
<div class="donut">
<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" stroke="#F6E6E1"/><g id="ring"></g></svg>
<div class="mid"><small>大约</small><b id="midV">--</b><span>中间值</span></div>
</div>
<div class="tot">
<div class="l">从怀孕到宝宝 1 岁，合计</div>
<div class="v" id="totV">--</div>
<div class="d" id="totD"></div>
</div>
</div>
<div class="blk" id="blk"></div>
</div>
<div class="note"><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span>以上是医保报销前的粗略区间，不含孕期并发症、早产、新生儿住院等意外情况。各地各医院差别很大，以建档医院实际报价为准。</span></div>
<!-- 结果屏 -->
<section class="screen" id="sRes">
<h2 class="r-t">你家大概要花</h2>
<div class="chips" id="chips"></div>
<p class="hint">点任一项可单独修改</p>
<div class="tabs" id="tabs">
<button data-s="0">生下来</button><button data-s="1">养到1岁</button><button data-s="2">养到2岁</button><button data-s="3">养到3岁</button>
</div>
</section>
<!-- ② 每块钱花在哪 -->
<section class="sec" id="s2">
<div class="sec-h"><span class="n">2</span><h2>每块钱花在哪</h2></div>
<div class="sec-key">产检、分娩的钱<mark>能走生育保险报一部分</mark>；月子和宝宝用品基本全靠自己。</div>
<p class="sec-sub">按时间顺序，一块一块看清楚</p>
<article class="item fade">
<div class="pic"><img src="img/hospital.webp" alt="护士给孕妈递资料" loading="lazy"></div>
<div class="hd"><span class="hi" style="background:var(--k1)"><svg class="ic"><use href="#i-steth" xlink:href="#i-steth"/></svg></span><h3>孕期产检</h3><small>约 10~13 次</small></div>
<div class="concl">跟着医生的产检表走，<i>大部分是常规项目</i></div>
<ul>
<li><span class="k">建档</span><span class="v">首次检查：血常规、尿常规、肝肾功能、传染病筛查、B 超等</span></li>
<li><span class="k">常规复查</span><span class="v">每次量血压体重、听胎心、查宫高腹围</span></li>
<li><span class="k">筛查项目</span><span class="v">唐氏筛查或无创 DNA、排畸 B 超、糖耐量检查</span></li>
<li><span class="k">孕晚期</span><span class="v">胎心监护、B 超评估胎位和羊水，可能每周一次</span></li>
<li><span class="k">额外项目</span><span class="v">医生建议才做的检查，如羊水穿刺</span></li>
</ul>
</article>
<article class="item fade">
<div class="hd"><span class="hi" style="background:var(--k2)"><svg class="ic"><use href="#i-bed" xlink:href="#i-bed"/></svg></span><h3>分娩住院</h3><small>顺产约 2~3 天 · 剖宫产约 4~6 天</small></div>
<div class="concl">剖宫产比顺产贵，<i>主要贵在手术和住院天数</i></div>
<ul>
<li><span class="k">分娩费用</span><span class="v">接生费、手术费（剖宫产）、麻醉费</span></li>
<li><span class="k">无痛分娩</span><span class="v">顺产可选的镇痛，单独计费，先问医院</span></li>
<li><span class="k">住院</span><span class="v">床位、护理、药品、检查化验</span></li>
<li><span class="k">新生儿</span><span class="v">新生儿护理、听力和疾病筛查</span></li>
<li><span class="k">升级项目</span><span class="v">单人间、家庭化产房、特需门诊，大多自费</span></li>
</ul>
</article>
<article class="item fade">
<div class="hd"><span class="hi" style="background:var(--k3)"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg></span><h3>坐月子</h3><small>约 4~6 周</small></div>
<div class="concl">选哪种方式，<i>决定这块是几千还是几万</i></div>
<ul>
<li><span class="k">家人照顾</span><span class="v">月子餐食材、产妇用品（卫生巾、哺乳内衣、防溢乳垫等）</span></li>
<li><span class="k">请月嫂</span><span class="v">月嫂工资按 26 天一个周期算，城市和经验不同差得多</span></li>
<li><span class="k">月子中心</span><span class="v">通常按 28 天套餐收费，含住宿、餐食、母婴护理</span></li>
<li><span class="k">产后复查</span><span class="v">产后 42 天复查，母婴一起</span></li>
</ul>
</article>
<article class="item fade">
<div class="pic"><img src="img/baby.webp" alt="婴儿床旁的小衣服、纸尿裤和奶瓶" loading="lazy"></div>
<div class="hd"><span class="hi" style="background:var(--k4)"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><h3>宝宝第一年</h3><small>按月花</small></div>
<div class="concl">奶粉和纸尿裤是<i>每个月都要花</i>的钱</div>
<ul>
<li><span class="k">吃</span><span class="v">奶粉（看喂养方式）、吸奶和储奶用品、6 个月后辅食</span></li>
<li><span class="k">纸尿裤</span><span class="v">新生儿一天用得多，长大后慢慢减少</span></li>
<li><span class="k">衣物</span><span class="v">长得快，各尺码备几套够换洗就行</span></li>
<li><span class="k">大件用品</span><span class="v">婴儿床、推车、汽车安全座椅、洗澡盆</span></li>
<li><span class="k">洗护</span><span class="v">洗护用品、湿巾、指甲剪、体温计</span></li>
<li><span class="k">疫苗</span><span class="v">国家免疫规划内的免费；自费疫苗按需选择，听接种医生建议</span></li>
</ul>
</article>
</section>
<!-- ③ 能省 / 不能省 -->
<section class="sec" id="s3">
<div class="sec-h"><span class="n">3</span><h2>哪些能省，哪些不能省</h2></div>
<div class="sec-key">关系到妈妈和宝宝<mark>安全的不省</mark>，看起来好看的、用不久的可以省。</div>
<div class="pic-card fade"><img src="img/plan.webp" alt="夫妻依偎在沙发上一起商量" loading="lazy"></div>
<div class="two">
<div class="col ok fade">
<div class="ch"><svg class="ic"><use href="#i-piggy" xlink:href="#i-piggy"/></svg>可以省</div>
<ul>
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>新生儿衣服</b>：长得快，几套换洗就够，亲友送的也能用</span></li>
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>囤货</b>：奶粉、纸尿裤先少买，确认宝宝适合再补</span></li>
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>用得短的大件</b>：婴儿床、摇椅等可以借用或买二手</span></li>
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>非必要的套餐</b>：写真、纪念品、月子中心的附加项目</span></li>
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>宣传很神的东西</b>：号称「防纹」「催奶」「提高免疫」的高价产品</span></li>
</ul>
</div>
<div class="col no fade">
<div class="ch"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg>不能省</div>
<ul>
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>医生建议的产检</b>：筛查、排畸、糖耐量按时做</span></li>
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>分娩安全</b>：选有产科和新生儿抢救能力的医院</span></li>
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>汽车安全座椅</b>：开车接宝宝就要用，不建议买来历不明的二手</span></li>
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>免费疫苗</b>：按时接种，别拖</span></li>
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>应急备用金</b>：留一笔钱应对住院延长、新生儿看病等意外</span></li>
</ul>
</div>
<div class="total" aria-live="polite">
<div class="l" id="totL"></div>
<div class="v" id="totV"></div>
<div class="m" id="totM"></div>
</div>
</section>
<div class="stack" id="stack"></div>
<div class="list" id="list"></div>
<!-- ④ 生育保险 -->
<section class="sec" id="s4">
<div class="sec-h"><span class="n">4</span><h2>生育保险能报什么</h2></div>
<div class="sec-key">能报两样：<mark>看病的钱 + 休产假的钱</mark>。条件和流程以当地医保为准。</div>
<p class="sec-sub">现在生育保险和职工医保合并缴纳，单位交了职工医保一般就有</p>
<div class="ins">
<div class="fade"><span class="ii" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-receipt" xlink:href="#i-receipt"/></svg></span><h4>生育医疗费</h4><p>产检、分娩住院里医保目录内的费用，按当地标准报销或定额补助</p></div>
<div class="fade"><span class="ii" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-wallet" xlink:href="#i-wallet"/></svg></span><h4>生育津贴</h4><p>休产假期间的工资补偿，按单位上年度职工月平均工资算</p></div>
<div class="card">
<div class="row"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg><div><b id="bigT"></b><p id="bigD"></p></div></div>
<div class="row"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg><div><b>能省的地方</b><p id="save"></p></div></div>
</div>
<div class="formula fade">
<div class="ft">生育津贴怎么算</div>
<div class="eq">
<div class="it"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>单位上年度<br>职工月平均工资</div>
<span class="op">÷</span>
<div class="it"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>30<br>天</div>
<span class="op">×</span>
<div class="it"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>产假<br>天数</div>
</div>
<div class="est">
<div class="fl">
<label>单位上年度职工月平均工资（元）<input id="wage" type="number" inputmode="numeric" min="0" placeholder="如 8000"></label>
<label style="flex:none;width:96px">产假天数<input id="days" type="number" inputmode="numeric" min="0" value="98"></label>
</div>
<div class="out">估算生育津贴<b id="allow">--</b></div>
</div>
<p class="tip">国家规定产假 98 天，难产、多胞胎另有增加，各地还有延长的天数，按当地规定填。</p>
<div class="card ins">
<div class="row"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg><div>
<b>生育保险能报一部分</b>
<p>产检和分娩费用可按规定报销；产假期间还能领生育津贴。以当地医保为准。</p>
<span class="f"><span>生育津贴 = 单位上年度职工月平均工资</span> <span>÷ 30 × 产假天数</span></span>
</div></div>
</div>
<ol class="steps">
<li class="fade"><b>先确认能不能报</b>一般要求生育时在参保、缴费满一定时间，各地要求不同，打电话问当地医保或单位人事</li>
<li class="fade"><b>在定点医院建档、生产</b>就医时出示医保电子凭证或社保卡，很多地方出院直接结算</li>
<li class="fade"><b>票据都留好</b>没能直接结算的，发票、费用清单、出院小结、出生医学证明都要保存</li>
<li class="fade"><b>产后按时申领津贴</b>通常由单位或本人在当地医保办理，有办理期限，别错过</li>
</ol>
<div class="acts"><button class="btn ghost" id="redo">重新选择</button></div>
<p class="note">按常见价格区间粗略估算，各地各医院差别很大，以实际为准；不含孕期并发症、早产、住院等意外支出。</p>
</section>
<!-- ⑤ 问医院 -->
<section class="sec" id="s5">
<div class="sec-h"><span class="n">5</span><h2>提前要问医院的几件事</h2></div>
<div class="sec-key">建档时把这几件事问清，<mark>心里的账就有底了</mark>。</div>
<div class="ask">
<div class="ak fade"><span class="ai" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-doc" xlink:href="#i-doc"/></svg></span><div><b>整个孕期要做哪些检查，大概多少钱？</b><p>要一份产检时间表，看看哪些是必做、哪些是可选</p></div></div>
<div class="ak fade"><span class="ai" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-bed" xlink:href="#i-bed"/></svg></span><div><b>顺产、剖宫产一般住几天，费用大概多少？</b><p>顺便问无痛分娩能不能做、怎么收费</p></div></div>
<div class="ak fade"><span class="ai" style="background:#F1EAF8;color:#8E6BB8"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span><div><b>能不能直接用医保结算？</b><p>哪些项目在医保范围外、需要自费</p></div></div>
<div class="ak fade"><span class="ai" style="background:#FFF1DE;color:#D9822B"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg></span><div><b>病房有哪几种，价格差多少？</b><p>多人间、单人间、家庭化产房，床位紧不紧张</p></div></div>
<div class="ak fade"><span class="ai" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><div><b>有没有新生儿科，宝宝需要观察怎么办？</b><p>出现意外要不要转院，费用怎么算</p></div></div>
<div class="ak fade"><span class="ai" style="background:#E8F2FD;color:#3B7DD8"><svg class="ic"><use href="#i-bag" xlink:href="#i-bag"/></svg></span><div><b>住院要自己带什么？</b><p>问清医院会提供哪些，待产包就不会重复买</p></div></div>
</div>
</section>
<p class="foot">本页费用为常见价格区间的粗略估算，仅供做预算参考，不代表任何医院或机构的实际收费。<br>各地各医院差别很大，请以建档医院实际报价、当地医保政策为准。</p>
</div>
<script>
(function () {
'use strict';
/* ================= 费用表（单位：元，[低, 高]，医保报销前的常见区间，偏保守取整） =================
城市下标 c：0 一线 / 1 新一线及省会 / 2 普通地级市 / 3 县城及乡镇
×STYLE 的项是「可选消费」，按第 7 题花钱风格乘系数；其余是刚性支出，不乘。 */
var COST = {
// —— 生下来 ——
// 孕期产检全程（约 10~13 次 + 筛查）[c][医院]，医院 0 公立普通 / 1 公立特需或单间 / 2 私立
check: [
[[6000, 10000], [15000, 30000], [20000, 50000]],
[[4000, 8000], [10000, 20000], [15000, 35000]],
[[3000, 6000], [6000, 12000], [8000, 20000]],
[[2000, 4000], [4000, 8000], [5000, 12000]]
],
// 孕妇装、待产包等孕期用品 [c]，×STYLE
pregGoods: [[2000, 5000], [1500, 4000], [1200, 3000], [1000, 2500]],
// 分娩住院 [c][医院][方式]，方式 0 顺产 / 1 剖宫产；「还不确定」取两者合并区间（顺产低值 ~ 剖宫产高值）
birth: [
[[[6000, 12000], [12000, 20000]], [[15000, 30000], [25000, 45000]], [[30000, 60000], [45000, 90000]]],
[[[4000, 8000], [8000, 15000]], [[10000, 20000], [15000, 30000]], [[18000, 40000], [28000, 60000]]],
[[[3000, 6000], [6000, 11000]], [[6000, 12000], [10000, 18000]], [[10000, 25000], [15000, 35000]]],
[[[2000, 4000], [4000, 8000]], [[4000, 8000], [6000, 12000]], [[6000, 15000], [10000, 22000]]]
],
// 坐月子（含月子餐、产妇用品）[c][方式]，0 家人照顾 / 1 月嫂约 26 天 / 2 月子中心约 28 天
yuezi: [
[[3000, 8000], [15000, 30000], [40000, 100000]],
[[2500, 6000], [10000, 20000], [25000, 60000]],
[[2000, 5000], [7000, 14000], [15000, 35000]],
[[1500, 4000], [5000, 10000], [10000, 25000]]
],
// —— 0～1 岁 ——
eat01: [[1000, 3000], [5000, 9000], [8000, 14000]], // 奶粉/辅食 [喂养]：0 母乳为主 / 1 混合 / 2 奶粉为主（不分城市）
diaper01: [3000, 5000], // 纸尿裤湿巾（不分城市）
goods01: [[5000, 10000], [4000, 8000], [3000, 6000], [2500, 5000]], // 衣物、婴儿床推车安全座椅、洗护玩具 [c]，×STYLE
med01: [[1500, 6000], [1200, 5000], [1000, 4000], [800, 3000]], // 看病 + 自费疫苗 [c]
// 0～1 岁按产假 + 家人带计，不算带娃费用（第 6 题只管 1～3 岁）
// —— 1～2 岁 ——
eat12: [[3000, 6000], [5000, 9000], [6000, 11000]], // 奶粉/辅食/日常饮食 [喂养]
diaper12: [2500, 4000],
goods12: [[4000, 8000], [3000, 6000], [2500, 5000], [2000, 4000]], // 衣物用品玩具 [c]，×STYLE
edu12: [[2000, 8000], [1500, 6000], [1000, 4000], [500, 3000]], // 早教、绘本、游乐 [c]，×STYLE
med12: [[1200, 4000], [1000, 3500], [800, 3000], [600, 2500]],
// —— 2～3 岁 ——
eat23: [[6000, 10000], [5000, 8000], [4000, 7000], [3000, 6000]], // 日常饮食 + 牛奶 [c]
diaper23: [800, 2000], // 逐步戒纸尿裤
goods23: [[4000, 8000], [3000, 6000], [2500, 5000], [2000, 4000]], // ×STYLE
edu23: [[3000, 10000], [2000, 8000], [1500, 5000], [800, 3500]], // ×STYLE
med23: [[1000, 3500], [800, 3000], [600, 2500], [500, 2000]],
// —— 1～3 岁谁来带（按年计）[带法][c] ——
// 0 老人或自己带：少量补贴（约 100~1000 元/月）
// 1 育儿嫂或保姆：月薪 × 12；2 托育园全日托：月费 × 12
care: [
[[4800, 12000], [3600, 9600], [2400, 7200], [1200, 6000]],
[[7000 * 12, 10000 * 12], [5000 * 12, 7500 * 12], [4000 * 12, 6000 * 12], [3000 * 12, 4500 * 12]],
[[4000 * 12, 8000 * 12], [2500 * 12, 5000 * 12], [1800 * 12, 3500 * 12], [1200 * 12, 2500 * 12]]
],
STYLE: [0.6, 1, 1.8] // 花钱风格系数：精打细算 / 适中 / 想给最好的
};
/* ================= 问题 ================= */
var QS = [
{ k: 'city', h: '你在哪类城市？', s: '各地价格差别最大的一项', o: [
['一线城市', '北京、上海、广州、深圳'], ['新一线及省会', '如成都、杭州、武汉、各省会'], ['普通地级市', '三四线城市'], ['县城及乡镇', '县城、镇上']] },
{ k: 'hosp', h: '打算在哪生？', s: '产检一般也在同一家', o: [
['公立医院普通病房', '多人间，大多数人的选择'], ['公立医院特需或单间', '单人间、特需门诊，部分自费'], ['私立医院', '环境服务好，基本全自费']] },
{ k: 'way', h: '分娩方式？', s: '最终听医生评估', o: [
['顺产', '住院约 2～3 天'], ['剖宫产', '住院约 4～6 天，费用更高'], ['还不确定', '两种都算进去，区间宽一些']] },
{ k: 'yz', h: '月子怎么坐？', s: '这项差距最大', o: [
['家人照顾', '主要花在月子餐和产妇用品'], ['请月嫂', '上门照顾，一般 26 天'], ['月子中心', '一般 28 天套餐']] },
{ k: 'feed', h: '宝宝怎么喂？', s: '大概的打算就行', o: [
['母乳为主', '奶粉钱很少'], ['混合喂养', '母乳加一部分奶粉'], ['奶粉为主', '奶粉是每月固定开销']] },
{ k: 'care', h: '1～3 岁谁来带？', s: '产假结束后的安排', o: [
['老人或自己带', '给老人一点补贴'], ['请育儿嫂或保姆', '按月薪算'], ['上托育园（全日托）', '按月费算']] },
{ k: 'style', h: '平时花钱风格？', s: '影响用品、衣物、玩具、早教', o: [
['精打细算', '够用就行，能借能用二手'], ['适中', '买点好的，不追高'], ['想给最好的', '用品玩具早教都挑好的']] }
];
var SHORT = { // 结果页的选择标签
city: ['一线', '新一线/省会', '地级市', '县城乡镇'], hosp: ['公立普通', '公立特需', '私立'], way: ['顺产', '剖宫产', '方式未定'],
yz: ['家人坐月子', '请月嫂', '月子中心'], feed: ['母乳', '混合喂养', '奶粉'], care: ['老人带', '育儿嫂', '托育园'], style: ['精打细算', '适中', '给最好的']
};
var STAGES = ['孕期产检', '分娩住院', '坐月子', '0～1岁', '1～2岁', '2～3岁'];
var SHADES = ['#0B6E3A', '#18A058', '#45B779', '#79CC9E', '#A8DFC0', '#D2F0DF'];
var TAB_L = ['怀孕到坐完月子', '怀孕到宝宝 1 岁', '怀孕到宝宝 2 岁', '怀孕到宝宝 3 岁'];
var UPTO = [3, 4, 5, 6]; // 每个标签包含前几段
var MONTHS = [10, 21, 33, 45]; // 平均每月的分母：怀孕约 9 个月 + 月子 1 个月；之后每岁 12 个月
var KEY = 'mmbox.huafei.v2';
var $ = function (s) { return document.querySelector(s); };
var sc = $('#scroll');
var st = { city: 1, hosp: 0, way: 2, yz: 0, feed: 1, care: 0, style: 1 };
var stage = 1, qi = 0, editing = false;
function add(a, b) { return [a[0] + b[0], a[1] + b[1]]; }
function mul(a, k) { return [a[0] * k, a[1] * k]; }
function sum() { return [].slice.call(arguments).reduce(add, [0, 0]); }
/* 六段费用，返回 [[低, 高] × 6] */
function calc(s) {
var c = s.city, k = COST.STYLE[s.style];
var b = COST.birth[c][s.hosp];
var birth = s.way === 2 ? [Math.min(b[0][0], b[1][0]), Math.max(b[0][1], b[1][1])] : b[s.way];
var care = COST.care[s.care][c];
return [
sum(COST.check[c][s.hosp], mul(COST.pregGoods[c], k)),
birth,
COST.yuezi[c][s.yz],
sum(COST.eat01[s.feed], COST.diaper01, mul(COST.goods01[c], k), COST.med01[c]),
sum(COST.eat12[s.feed], COST.diaper12, mul(COST.goods12[c], k), mul(COST.edu12[c], k), COST.med12[c], care),
sum(COST.eat23[c], COST.diaper23, mul(COST.goods23[c], k), mul(COST.edu23[c], k), COST.med23[c], care)
];
}
function wan(n) { return (Math.round(n / 1000) / 10) + '万'; }
function yuan(n) { return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
function rng(a) { return wan(a[0]) + '～' + wan(a[1]); } // 统一用「万」，一位小数
function detail(i) {
var s = st;
var careTxt = ['老人带的少量补贴', '育儿嫂 12 个月工资', '托育园 12 个月费用'][s.care];
return [
'约 10～13 次产检和筛查（' + QS[1].o[s.hosp][0] + '），加孕妇装、待产包',
(s.way === 2 ? '按顺产到剖宫产的范围算' : QS[2].o[s.way][0] + '，' + QS[2].o[s.way][1].replace('，费用更高', '')) + '；含接生或手术、麻醉、床位、新生儿筛查',
['月子餐食材、产妇用品、产后复查', '月嫂约 26 天工资，加月子餐和产妇用品', '月子中心约 28 天套餐，含住宿餐食和母婴护理'][s.yz],
QS[4].o[s.feed][0] + '的奶粉辅食、纸尿裤、衣物和婴儿床推车等用品、看病和自费疫苗',
'奶粉辅食、纸尿裤、衣物玩具早教、看病疫苗，加' + careTxt,
'日常饮食、纸尿裤（逐步戒掉）、衣物玩具早教、看病，加' + careTxt
][i];
}
/* 能省的地方（≤30 字），按最花钱的那段给 */
function saveTip(i) {
var s = st;
if (i === 0) return s.hosp ? '常规产检在公立医院做，只把分娩放在想去的医院。' : '跟着医生的产检表走，不额外加做没必要的项目。';
if (i === 1) return s.hosp ? '公立医院普通病房也安全，单间按需再升级。' : '提前问清医保能不能直接结算，出院少垫钱。';
if (i === 2) return s.yz === 2 ? '月子中心可只住 2 周，后面换月嫂或家人接手。' : s.yz === 1 ? '月嫂可只请前 2 周，之后家人接手。' : '月子餐自己做，产妇用品按需买不囤货。';
if (i === 3) return s.feed ? '奶粉先买小罐试，宝宝适合再按需补，别囤货。' : '大件用品能借就借，衣服各尺码几套够换洗就行。';
if (s.care === 1) return '老人能搭把手的话，育儿嫂可只请白天或半天。';
if (s.care === 2) return '托育园可先上半日托，或等 2 岁后再上全日托。';
return s.style === 2 ? '早教班不用早报，玩具绘本可以轮换或借阅。' : '衣物玩具亲友送、买二手都行，省下的留作备用金。';
}
/* ================= 屏幕切换 ================= */
function show(id) {
[].forEach.call(document.querySelectorAll('.screen'), function (el) { el.classList.toggle('on', el.id === id); });
sc.scrollTop = 0;
}
function renderQ() {
var q = QS[qi];
$('#pbar').style.width = ((qi + 1) / QS.length * 100) + '%';
$('#pnum').textContent = (qi + 1) + ' / ' + QS.length;
$('#qh').textContent = q.h;
$('#qs').textContent = q.s;
$('#opts').innerHTML = q.o.map(function (o, v) {
return '<button class="opt' + (st[q.k] === v && st._done ? ' on' : '') + '" data-v="' + v + '"><span class="ox"><b>' + o[0] + '</b><small>' + o[1] + '</small></span><span class="rd"></span></button>';
}).join('');
$('#prev').style.visibility = editing ? 'hidden' : 'visible';
show('sQ');
}
$('#opts').addEventListener('click', function (e) {
var b = e.target.closest('.opt'); if (!b || $('#opts').dataset.lock) return;
[].forEach.call(this.children, function (x) { x.classList.toggle('on', x === b); });
st[QS[qi].k] = +b.dataset.v;
$('#opts').dataset.lock = '1';
setTimeout(function () {
delete $('#opts').dataset.lock;
if (editing || qi === QS.length - 1) { st._done = true; editing = false; save(); renderRes(); show('sRes'); }
else { qi++; renderQ(); }
}, 220);
});
$('#prev').addEventListener('click', function () { if (qi > 0) { qi--; renderQ(); } else show('sStart'); });
$('#go').addEventListener('click', function () { qi = 0; editing = false; renderQ(); });
$('#redo').addEventListener('click', function () { qi = 0; editing = false; renderQ(); });
function renderRes() {
var parts = calc(st), n = UPTO[stage];
var mids = parts.map(function (p) { return (p[0] + p[1]) / 2; });
var all = mids.reduce(function (a, b) { return a + b; }, 0);
var tot = parts.slice(0, n).reduce(add, [0, 0]);
[].forEach.call($('#tabs').children, function (b, i) { b.classList.toggle('on', i === stage); });
$('#chips').innerHTML = QS.map(function (q, i) { return '<button data-q="' + i + '">' + SHORT[q.k][st[q.k]] + '</button>'; }).join('');
$('#totL').textContent = TAB_L[stage] + '，合计约';
var w = tot[1] >= 10000;
$('#totV').innerHTML = '<span>' + (w ? wan(tot[0]) : yuan(tot[0])) + '～</span><wbr><span>' + (w ? wan(tot[1]) : yuan(tot[1]) + '元') + '</span>';
$('#totM').innerHTML = '平均每月约 <b>' + yuan((tot[0] + tot[1]) / 2 / MONTHS[stage]) + '</b> 元';
$('#stack').innerHTML = mids.map(function (m, i) {
return '<i style="flex-grow:' + (m / all * 1000).toFixed(0) + ';background:' + (i < n ? SHADES[i] : '#E5E8EC') + '"></i>';
}).join('');
var open = {};
[].forEach.call(document.querySelectorAll('#list details'), function (d, i) { if (d.open) open[i] = 1; });
$('#list').innerHTML = parts.map(function (p, i) {
var on = i < n;
return '<details' + (on ? '' : ' class="off"') + (open[i] ? ' open' : '') + '><summary><span class="dot" style="background:' + (on ? SHADES[i] : '#E5E8EC') + '"></span>' +
'<span class="nm">' + STAGES[i] + '</span><span class="rg">' + (on ? rng(p) : '未计入') + '</span>' +
'<svg class="ic ar"><use href="#i-down" xlink:href="#i-down"/></svg></summary><div class="ds">' + detail(i) + '</div></details>';
}).join('');
var big = 0;
for (var i = 1; i < n; i++) if (mids[i] > mids[big]) big = i;
$('#bigT').innerHTML = '最花钱的是<em>' + STAGES[big] + '</em>';
var why = [
st.hosp ? '特需和私立的产检套餐偏贵' : '主要是产检和筛查',
st.hosp ? '贵在病房和服务升级' : '主要是接生、手术和住院',
['主要是月子餐和产妇用品', '主要是月嫂工资', '主要是月子中心套餐'][st.yz],
st.feed ? '奶粉和纸尿裤每月都要买' : '主要是用品、纸尿裤和看病',
['主要是日常吃用和老人补贴', '主要是育儿嫂工资', '主要是托育园月费'][st.care]
][Math.min(big, 4)];
$('#bigD').textContent = '约 ' + rng(parts[big]) + '，' + why + '。';
$('#save').textContent = saveTip(big);
}
$('#tabs').addEventListener('click', function (e) {
var b = e.target.closest('button'); if (!b) return;
stage = +b.dataset.s; save(); renderRes();
});
$('#chips').addEventListener('click', function (e) {
var b = e.target.closest('button'); if (!b) return;
qi = +b.dataset.q; editing = true; renderQ();
});
function save() {
try { var o = {}; QS.forEach(function (q) { o[q.k] = st[q.k]; }); o.stage = stage; localStorage.setItem(KEY, JSON.stringify(o)); } catch (e) {}
}
function load() {
try {
var o = JSON.parse(localStorage.getItem(KEY) || 'null'); if (!o) return false;
var ok = QS.every(function (q) { return o[q.k] >= 0 && o[q.k] < q.o.length; });
if (!ok) return false;
QS.forEach(function (q) { st[q.k] = o[q.k]; });
if (o.stage >= 0 && o.stage < 4) stage = o.stage;
st._done = true; return true;
} catch (e) { return false; }
}
if (load()) { renderRes(); show('sRes'); } else show('sStart');
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回同目录的首页，身份原样带回 */
$('#back').addEventListener('click', function () {
@@ -487,129 +431,7 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
else location.href = '../../' + location.search + location.hash;
});
function go(id) {
var el = document.getElementById(id); if (!el) return;
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 56;
sc.scrollTo({ top: top, behavior: 'smooth' });
}
[].forEach.call(document.querySelectorAll('[data-go]'), function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
/* ===== 费用表（元，医保报销前，常见区间的保守粗估） =====
城市下标：0 一线 / 1 新一线及二线 / 2 三四线及县城；医院：0 公立普通 / 1 公立特需或私立 */
var COST = {
// 孕期产检全程 [city][hosp] = [低, 高]
check: [
[[5000, 9000], [15000, 40000]],
[[3500, 7000], [10000, 25000]],
[[2500, 5000], [6000, 15000]]
],
// 分娩住院 [city][hosp][way]，way 0 顺产 / 1 剖宫产
birth: [
[[[5000, 10000], [10000, 18000]], [[20000, 50000], [30000, 80000]]],
[[[3000, 7000], [7000, 13000]], [[12000, 30000], [18000, 45000]]],
[[[2000, 5000], [5000, 10000]], [[8000, 18000], [12000, 28000]]]
],
// 坐月子 [city][yz]，yz 0 家人照顾 / 1 请月嫂（约 26 天） / 2 月子中心（约 28 天）；含月子餐和产妇用品
yuezi: [
[[3000, 8000], [15000, 30000], [40000, 100000]],
[[2000, 6000], [9000, 18000], [25000, 60000]],
[[1500, 4000], [6000, 12000], [15000, 35000]]
],
// 宝宝第一年：吃 [feed]（含奶粉、吸奶储奶用品、辅食）
milk: [[1500, 3500], [5000, 9000], [9000, 15000]],
// 纸尿裤湿巾 + 衣物 + 大件用品 + 洗护 [city]
goods: [[9000, 18000], [7000, 14000], [5000, 10000]],
// 自费疫苗（可选，看选哪几种）
vac: [2000, 8000]
};
var NAMES = [
{ k: '孕期产检', ic: 'steth', c: 'var(--k1)', d: '约 10~13 次常规产检 + 筛查' },
{ k: '分娩住院', ic: 'bed', c: 'var(--k2)', d: '' },
{ k: '坐月子', ic: 'home', c: 'var(--k3)', d: '' },
{ k: '宝宝第一年', ic: 'baby', c: 'var(--k4)', d: '' }
];
var COLORS = ['#F4593C', '#E8476F', '#C2185B', '#8E6BB8'];
var WAY = ['顺产约 2~3 天', '剖宫产约 4~6 天'], HOSP = ['公立普通', '特需或私立'];
var YZ = ['月子餐 + 产妇用品', '月嫂一个周期 + 月子餐用品', '月子中心约 28 天套餐'];
var FEED = ['母乳为主', '混合喂养', '奶粉为主'];
var st = { city: 1, way: 0, hosp: 0, yz: 0, feed: 0, vac: false };
function fmt(n, wan) {
if (n >= 10000 || wan) { var w = Math.round(n / 1000) / 10; return w + '万'; }
return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
function rng(a) { var w = a[1] >= 10000; return fmt(a[0], w) + '~' + fmt(a[1], w); } // 上限过万则两端都用「万」
function add(a, b) { return [a[0] + b[0], a[1] + b[1]]; }
function calc() {
var c = st.city;
var baby = add(COST.milk[st.feed], COST.goods[c]);
if (st.vac) baby = add(baby, COST.vac);
var parts = [COST.check[c][st.hosp], COST.birth[c][st.hosp][st.way], COST.yuezi[c][st.yz], baby];
var total = parts.reduce(add, [0, 0]);
var mids = parts.map(function (p) { return (p[0] + p[1]) / 2; });
var midTotal = mids.reduce(function (a, b) { return a + b; }, 0);
var maxMid = Math.max.apply(null, mids);
NAMES[1].d = WAY[st.way] + ' · ' + HOSP[st.hosp];
NAMES[2].d = YZ[st.yz];
NAMES[3].d = FEED[st.feed] + ' · 纸尿裤衣物用品' + (st.vac ? ' · 含自费疫苗' : '');
var tw = total[1] >= 10000; // 总计两端各自不换行，窄屏在「~」处折行
$('#totV').innerHTML = '<span>' + fmt(total[0], tw) + '~</span><wbr><span>' + fmt(total[1], tw) + '<small>元</small></span>';
$('#midV').textContent = fmt(midTotal);
var big = mids.indexOf(maxMid);
$('#totD').innerHTML = '花得最多的一块是<b style="color:' + COLORS[big] + '">' + NAMES[big].k + '</b>。实际以建档医院报价为准。';
// 环形图：按各块中间值的占比画弧
var C = 2 * Math.PI * 50, off = 0, gap = 2, html = '';
mids.forEach(function (m, i) {
var len = Math.max(C * m / midTotal - gap, 1);
html += '<circle cx="60" cy="60" r="50" stroke="' + COLORS[i] + '" stroke-dasharray="' + len.toFixed(2) + ' ' + C.toFixed(2) + '" stroke-dashoffset="' + (-off).toFixed(2) + '"/>';
off += C * m / midTotal;
});
$('#ring').innerHTML = html;
// 四块明细：条长 = 中间值相对最大块
$('#blk').innerHTML = parts.map(function (p, i) {
var n = NAMES[i];
return '<div class="bk"><span class="bi" style="background:' + n.c + '"><svg class="ic"><use href="#i-' + n.ic + '" xlink:href="#i-' + n.ic + '"/></svg></span>' +
'<div class="bx"><div class="r1"><b>' + n.k + '</b><em style="color:' + COLORS[i] + '">' + rng(p) + ' 元</em></div>' +
'<div class="bar2"><i style="width:' + Math.max(mids[i] / maxMid * 100, 4).toFixed(1) + '%;background:' + COLORS[i] + '"></i></div>' +
'<div class="r2">' + n.d + '</div></div></div>';
}).join('');
}
[].forEach.call(document.querySelectorAll('.seg'), function (seg) {
seg.addEventListener('click', function (e) {
var b = e.target.closest('button'); if (!b) return;
[].forEach.call(seg.children, function (x) { x.classList.toggle('on', x === b); });
st[seg.dataset.k] = +b.dataset.v;
calc();
});
});
$('#vac').addEventListener('click', function () {
st.vac = !st.vac;
this.classList.toggle('on', st.vac);
this.setAttribute('aria-pressed', st.vac);
calc();
});
calc();
/* 生育津贴估算 = 单位上年度职工月平均工资 ÷ 30 × 产假天数 */
function allow() {
var w = parseFloat($('#wage').value), d = parseFloat($('#days').value);
$('#allow').innerHTML = (w > 0 && d > 0) ? Math.round(w / 30 * d).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '<small>元</small>' : '--';
}
$('#wage').addEventListener('input', allow);
$('#days').addEventListener('input', allow);
/* 进场动画 */
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { root: sc, threshold: .12 });
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('on', sc.scrollTop > 4); }, { passive: true });
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
var y0 = 0;