Files
mama-box/topic/huafei/index.html

626 lines
45 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
<!-- 孕期专题 · 生娃花费(2026-10-31:孕期首页「其他妈妈也在搜」第 1 条入口)。
沿用 topic/wen 妊娠纹专题的视觉与结构:hero + 「先记住这 3 件事」+ 每节一句高亮结论 + 扁平双色 SVG 图标(页内 symbol 复用,不用 emoji)。
核心是可交互计算器:城市 / 分娩方式 / 医院 / 月子 / 喂养 → 四块费用区间 + 总计,环形图看占比。
价格表为常见区间的保守粗估(元,未扣医保),只写品类不点名品牌、不放百分比统计;改数字只改脚本里的 COST 表。
插画 img/*.webp 由 AI 生成(画面不含文字)。自成一页:不引 app.js;回首页走相对路径 ../../ 并带回 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}
*{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}
#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}
.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}
/* 头图 */
.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)}
/* 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}
/* 目录 */
.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}
/* 段标题 + 段落重点结论 */
.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}
/* ① 计算器 */
.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)}
.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}}
</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>
</svg>
<div id="scroll">
<header class="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>
</div>
</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>
<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>
</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>
</section>
<!-- ④ 生育保险 -->
<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>
<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>
<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>
</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';
var $ = function (s) { return document.querySelector(s); };
var sc = $('#scroll');
/* 返回:从首页点进来就 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;
});
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'); });
/* 禁止下拉回弹:固定外壳 + 容器滚动 + 到顶/到底时拦 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>
</body>
</html>