首页宫格换正式应用图标;其他妈妈也在搜6问各配专题页(花费计算器/测一测/营养/补剂/职场维权)+热度设计 v26103111
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
BIN
topic/huafei/img/baby.webp
Normal file
BIN
topic/huafei/img/baby.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
topic/huafei/img/hero.webp
Normal file
BIN
topic/huafei/img/hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
topic/huafei/img/hospital.webp
Normal file
BIN
topic/huafei/img/hospital.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
topic/huafei/img/plan.webp
Normal file
BIN
topic/huafei/img/plan.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
625
topic/huafei/index.html
Normal file
625
topic/huafei/index.html
Normal file
@@ -0,0 +1,625 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user