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

727 lines
58 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>叶酸、DHA、铁、钙要不要补?</title>
<!-- 孕期专题 · 孕期补剂(2026-10-31:孕期首页「其他妈妈也在搜」第 4 条的落地页)。
沿用 topic/wen 妊娠纹专题的设计:3 个核心重点 + 每段一句重点结论 + 数字徽标 + 时间轴 + 「为什么这样做」常显 + 红绿灯速查 + 底部来源。
只写营养成分,不写品牌、不写具体药品名;百分比只出现在页底「循证来源」。
插画 img/*.webp 由 AI 生成(画面不含文字、不含药瓶),文案全部在本页排版。
自成一页:不引 app.js;回首页走相对路径 ../../;跳补水补剂记录走同源 /yunqi-bushui/yindao/(App 表 bushui 的地址),带 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;--blue:#3B7DD8}
*{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{font:inherit;border:0;background:none;color:inherit;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:26px;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:66px;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:19px;font-weight:800;white-space:nowrap}
.core .num em small{display:inline;margin-top:0;font-size:12px;color:inherit;margin-left:1px}
.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}
/* 个性化:按孕周提示 */
.me{margin:14px 16px 0;display:none;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1.5px dashed #FFC2B0}
.me.on{display:flex}
.me .dot{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#FFE9E2;color:var(--c);font-size:24px}
.me .mt{flex:1;min-width:0}
.me b{display:block;font-size:15px;line-height:1.4}
.me span{display:block;font-size:12.5px;color:var(--sub);line-height:1.45}
.me .go{flex:none;font-size:13px;color:#fff;background:var(--c);border-radius:99px;padding:6px 12px;white-space:nowrap}
/* 目录 */
.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:12.5px;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)}
/* ① 四种营养大卡 */
.nut{position:relative;margin-top:16px;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;--k:var(--c);--kb:#FFEDE6}
.nut .pic{position:relative;background:#FFF6F2}
.nut .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.nut .badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;padding:4px 14px 4px 4px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px;box-shadow:0 2px 8px rgba(0,0,0,.08);white-space:nowrap}
.nut .badge b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;background:var(--k)}
.nut .ans{position:absolute;right:12px;top:12px;font-size:12.5px;font-weight:700;color:#fff;background:var(--k);border-radius:99px;padding:4px 12px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.nut .bd{padding:14px 14px 15px}
.nut .concl{font-size:17px;font-weight:800;line-height:1.45}
.nut .concl i{font-style:normal;color:var(--k)}
.nut .nums div{background:var(--kb)}
.nut .nums em{color:var(--k)}
.nut .row .k .ic{color:var(--k)}
.nut .pill{background:var(--kb);color:var(--k)}
.nut.fa{--k:#2F8A5E;--kb:#E7F5EC}
.nut.dh{--k:#3B7DD8;--kb:#E8F2FD}
.nut.fe{--k:#C2185B;--kb:#FDE7EE}
.nut.ca{--k:#D9822B;--kb:#FFF1DE}
.nums{display:flex;gap:8px;margin-top:10px}
.nums div{flex:1;min-width:0;padding:8px 4px 7px;border-radius:14px;background:var(--soft);text-align:center;line-height:1.1}
.nums em{display:block;font-style:normal;font-size:21px;font-weight:800;color:var(--deep);white-space:nowrap}
.nums em small{font-size:12px;font-weight:700;margin-left:1px}
.nums span{display:block;margin-top:4px;font-size:11.5px;color:var(--sub);white-space:nowrap}
.rows{margin-top:10px}
.row{display:flex;gap:10px;padding:7px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.55}
.row:first-child{border-top:0}
.row .k{flex:none;width:62px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);white-space:nowrap;height:20px}
.row .k .ic{font-size:15px;color:var(--c)}
.row .v{flex:1;min-width:0}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:12.5px;padding:2px 9px;border-radius:99px;background:#FFF0EB;color:#B23A1F;white-space:nowrap;font-weight:600}
.pill small{opacity:.75;font-size:11px;margin-left:3px;font-weight:400}
.why{margin-top:10px;display:flex;gap:10px;padding:11px 12px;border-radius:16px;background:#FFF8E9;border:1px solid #F7E5BE}
.why .wi{flex:none;width:30px;height:30px;border-radius:10px;background:#FFE7A8;color:#B7791F;display:grid;place-items:center;font-size:18px}
.why b{display:block;font-size:13px;color:#8A5A12}
.why p{font-size:12.5px;color:#7A6343;line-height:1.6;margin-top:1px}
.extra{margin-top:10px;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#FFF1EC;font-size:13px;font-weight:600;color:var(--deep);line-height:1.5}
.extra .ic{font-size:18px;margin-top:1px}
/* ② 按孕周时间轴 */
.tl{position:relative;margin-top:18px;padding-left:34px}
.tl::before{content:"";position:absolute;left:14px;top:18px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(180deg,#F7A08C,var(--c2) 40%,var(--deep) 70%,var(--purple))}
.phase{position:relative;display:flex;align-items:center;gap:8px;margin:22px 0 10px}
.phase:first-child{margin-top:0}
.phase .node{position:absolute;left:-34px;top:50%;margin-top:-16px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:0 0 0 4px var(--bg)}
.phase b{margin-left:4px;font-size:16px;white-space:nowrap}
.phase span{font-size:12px;color:var(--mute);white-space:nowrap}
.stage{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .3s,border-color .3s;scroll-margin-top:60px}
.stage.hl{border-color:var(--c);box-shadow:0 0 0 3px rgba(244,89,60,.15)}
.stage.hl::after{content:"你现在看这里";position:absolute;right:12px;top:12px;background:var(--c);color:#fff;font-size:12px;border-radius:99px;padding:2px 10px}
.stage .bd{padding:13px 14px 14px}
.stage .concl{font-size:16px;font-weight:800;line-height:1.45}
.stage.hl .concl{padding-right:104px}
.stage .concl i{font-style:normal;color:var(--deep)}
.chips{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.chip{display:flex;align-items:center;gap:8px;font-size:13px;color:#6A5452;line-height:1.45}
.chip .nm{flex:none;width:44px;text-align:center;font-size:12px;font-weight:700;border-radius:8px;padding:1px 0;white-space:nowrap}
.n-fa{background:#E7F5EC;color:#2F8A5E}.n-dh{background:#E8F2FD;color:#3B7DD8}.n-fe{background:#FDE7EE;color:#C2185B}.n-ca{background:#FFF1DE;color:#D9822B}.n-ot{background:#F1ECF7;color:#8E6BB8}
/* ③ 先问医生 */
.doc{margin-top:16px;border-radius:24px;overflow:hidden;background:#FFF5F7;border:1.5px solid #F8CDD9}
.doc img{width:100%;aspect-ratio:16/9;object-fit:cover}
.doc .tx{padding:14px 14px 16px}
.doc .pre{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff;background:var(--deep);border-radius:99px;padding:3px 10px 3px 8px}
.doc h3{font-size:18px;line-height:1.35;margin-top:8px;color:#8E1446}
.asks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ask{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:16px;background:#fff}
.ask .ai{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:19px;background:#FDE7EE;color:var(--deep)}
.ask b{display:block;font-size:13.5px;line-height:1.35}
.ask span{display:block;margin-top:2px;font-size:11.5px;color:var(--sub);line-height:1.45}
/* ④ 红绿灯速查 */
.legend{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 10px;border-radius:99px;white-space:nowrap;font-weight:600}
.legend i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ok{background:var(--gbg);color:var(--green)}
.warn{background:var(--abg);color:var(--amber)}
.nog{background:var(--rbg);color:var(--red)}
.light{margin-top:12px;border-radius:20px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);padding:12px 14px}
.light.am{border-left-color:var(--amber)}
.light.rd{border-left-color:var(--red);background:var(--rbg);border-color:#F2A9A9}
.light h4{display:flex;align-items:center;gap:6px;font-size:15px}
.light h4 .ic{font-size:19px}
.light ul{list-style:none;margin-top:6px}
.light li{display:flex;gap:8px;padding:6px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.5}
.light li:first-child{border-top:0}
.light li b{flex:none;color:var(--ink);font-weight:700}
.light.rd li{border-top-color:#F4C9C9;color:#8A4A4A}
/* 误区 */
.myth{margin-top:12px;display:flex;gap:12px;align-items:center;padding:12px;border-radius:22px;background:#FFFBF2;border:1px solid #F5E6C8}
.myth .mi{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:30px;background:#FCEFD2;color:#B7791F}
.myth .mk{display:inline-block;font-size:11.5px;font-weight:700;color:#A0731E;background:#FCEFD2;border-radius:99px;padding:1px 8px}
.myth b{display:block;margin-top:4px;font-size:15px;line-height:1.4}
.myth p{font-size:12.5px;color:#7E6C50;margin-top:3px;line-height:1.55}
/* ⑤ 我的补剂自查 */
.tool{margin-top:16px;padding:16px 14px;border-radius:24px;background:#fff;border:1px solid #FBE0D8;box-shadow:0 6px 24px rgba(194,24,91,.06)}
.q{margin-top:14px}
.q:first-child{margin-top:0}
.q-t{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700}
.q-t .ic{font-size:18px;color:var(--c)}
.q-t small{font-weight:400;font-size:12px;color:var(--mute)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.opt{padding:7px 13px;border-radius:99px;background:#FAF3F1;border:1.5px solid transparent;font-size:13.5px;color:#6A5452;white-space:nowrap;transition:all .2s}
.opt.on{background:#FFEDE6;border-color:var(--c);color:var(--c);font-weight:700}
.run{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;background:linear-gradient(90deg,var(--c),var(--c2));color:#fff;font-size:15.5px;font-weight:700;box-shadow:0 6px 16px rgba(232,71,111,.25)}
.run .ic{font-size:19px}
.run:disabled{opacity:.45;box-shadow:none}
.hint{margin-top:8px;text-align:center;font-size:12px;color:var(--mute)}
.res{display:none;margin-top:16px;padding-top:14px;border-top:1.5px dashed #F6D5CB}
.res.on{display:block}
.res-h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--deep)}
.res-h .ic{font-size:21px}
.res-sum{display:flex;gap:8px;margin-top:10px}
.res-sum div{flex:1;padding:8px 4px;border-radius:14px;text-align:center;line-height:1.1}
.res-sum em{display:block;font-style:normal;font-size:22px;font-weight:800}
.res-sum span{display:block;margin-top:4px;font-size:11.5px;white-space:nowrap}
.res ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.res li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:16px;background:#FAF7F6}
.res li .li{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:18px}
.res li b{display:block;font-size:14px;line-height:1.4}
.res li span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.5}
.res li.a{background:#FFF3F0}.res li.a .li{background:#FFE1D8;color:var(--c)}
.res li.k{background:#F3FAF5}.res li.k .li{background:var(--gbg);color:var(--green)}
.res li.t{background:#FFF9EC}.res li.t .li{background:#FFEBC2;color:#B7791F}
.res-note{margin-top:10px;font-size:12px;color:var(--mute);line-height:1.55}
.link{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:99px;background:var(--green);color:#fff;font-size:15px;font-weight:600;width:100%}
.link .ic{font-size:18px}
.link.ghost{background:#E7F5EC;color:var(--green)}
/* 来源 */
.src{margin:32px 16px 0;border-radius:18px;background:#fff;border:1px solid var(--line)}
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.src summary .ic{font-size:18px;color:var(--c)}
.src summary::-webkit-details-marker{display:none}
.src summary::after{content:"展开";margin-left:auto;font-size:12px;font-weight:400;color:var(--sub)}
.src[open] summary::after{content:"收起"}
.src ul{list-style:none;padding:0 16px 12px}
.src li{padding:8px 0;border-top:1px dashed #F1E2DD;font-size:12.5px;color:#6A5452}
.src li b{color:var(--ink);font-weight:600}
.foot{margin:16px 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 圆角线条,用 <use href="#i-xxx"> 复用 -->
<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-leaf" viewBox="0 0 24 24"><path class="f" d="M5 19C5 10 10 4.5 20 4.5 20 14 14.5 19 5 19z"/><path d="M5 19C5 10 10 4.5 20 4.5 20 14 14.5 19 5 19zM4 20l9-9"/></symbol>
<symbol id="i-fish" viewBox="0 0 24 24"><path class="f" d="M3 12c3-4.5 7-6 11-5 2.5.6 4.5 2.6 5.5 5-1 2.4-3 4.4-5.5 5-4 1-8-.5-11-5z"/><path d="M3 12c3-4.5 7-6 11-5 2.5.6 4.5 2.6 5.5 5-1 2.4-3 4.4-5.5 5-4 1-8-.5-11-5zM19.5 12L22 9.5v5zM9.5 9.5c1 1.5 1 3.5 0 5"/><circle class="s" cx="15.5" cy="11" r="1"/></symbol>
<symbol id="i-drop" viewBox="0 0 24 24"><path class="f" d="M12 3c4 5 6.5 8 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 11 8 8 12 3z"/><path d="M12 3c4 5 6.5 8 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 11 8 8 12 3zM9 15a3 3 0 0 0 3 3"/></symbol>
<symbol id="i-milk" viewBox="0 0 24 24"><path class="f" d="M7 10.5h10V20a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"/><path d="M8.5 3h7M9 3v3l-2 3.5V20a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5L15 6V3M7 10.5h10"/></symbol>
<symbol id="i-bone" viewBox="0 0 24 24"><path class="f" d="M8 8l8 8"/><path d="M7.5 9.5L14.5 16.5a2.5 2.5 0 1 0 3.5 2 2.5 2.5 0 1 0 2-3.5L13 8a2.5 2.5 0 1 0-3.5-2 2.5 2.5 0 1 0-2 3.5z"/></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-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="M8 3v4M16 3v4M3.5 10h17M8 14h2M14 14h2M8 17h2"/></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-bowl" viewBox="0 0 24 24"><path class="f" d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M3 11h18a9 9 0 0 1-18 0zM8 7.5c0-1.2 1.2-1.2 1.2-2.5M12 7.5c0-1.2 1.2-1.2 1.2-2.5M16 7.5c0-1.2 1.2-1.2 1.2-2.5"/></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-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-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-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-ask" viewBox="0 0 24 24"><path class="f" d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z"/><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5zM10 7.6a2 2 0 1 1 2.6 1.9c-.4.2-.6.5-.6 1v.5M12 12.8v.2"/></symbol>
<symbol id="i-swap" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><path d="M5 8.5h12.5M14.5 5.5l3 3-3 3M19 15.5H6.5M9.5 12.5l-3 3 3 3"/></symbol>
<symbol id="i-layers" viewBox="0 0 24 24"><path class="f" d="M12 3l9 4.5-9 4.5-9-4.5z"/><path d="M12 3l9 4.5-9 4.5-9-4.5zM3 12l9 4.5 9-4.5M3 16.5L12 21l9-4.5"/></symbol>
<symbol id="i-plus" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></symbol>
<symbol id="i-twin" viewBox="0 0 24 24"><circle class="f" cx="8" cy="13" r="5"/><circle class="f" cx="16" cy="13" r="5"/><circle cx="8" cy="13" r="5"/><circle cx="16" cy="13" r="5"/><path d="M8 5.5v2M16 5.5v2"/></symbol>
<symbol id="i-butterfly" viewBox="0 0 24 24"><path class="f" d="M12 9C10 4.5 3.5 4 3.5 8.5c0 3 3 4 5.5 4-2.5.5-4.5 2-3.5 4.5 1.3 2.8 5 1.5 6.5-3 1.5 4.5 5.2 5.8 6.5 3 1-2.5-1-4-3.5-4.5 2.5 0 5.5-1 5.5-4C20.5 4 14 4.5 12 9z"/><path d="M12 9C10 4.5 3.5 4 3.5 8.5c0 3 3 4 5.5 4-2.5.5-4.5 2-3.5 4.5 1.3 2.8 5 1.5 6.5-3 1.5 4.5 5.2 5.8 6.5 3 1-2.5-1-4-3.5-4.5 2.5 0 5.5-1 5.5-4C20.5 4 14 4.5 12 9zM12 9v9"/></symbol>
<symbol id="i-sprout" viewBox="0 0 24 24"><path class="f" d="M12 13C12 8.5 9 6 4.5 6c0 4.5 3 7 7.5 7zM12 11c0-3.5 2.5-6 7-6 0 3.5-2.5 6-7 6z"/><path d="M12 21v-8M12 13C12 8.5 9 6 4.5 6c0 4.5 3 7 7.5 7zM12 11c0-3.5 2.5-6 7-6 0 3.5-2.5 6-7 6z"/></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.3 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.3 4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z"/></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-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-moon" viewBox="0 0 24 24"><path class="f" d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></symbol>
<symbol id="i-meat" viewBox="0 0 24 24"><path class="f" d="M6 15c-3-3-1.5-9 4-10.5S20 6 19.5 11 13 19 9.5 17.5z"/><path d="M6 15c-3-3-1.5-9 4-10.5S20 6 19.5 11 13 19 9.5 17.5zM6 15l-2.5 3.5a1.5 1.5 0 1 0 2 2L9.5 17.5"/><circle cx="12.5" cy="10.5" r="2"/></symbol>
<symbol id="i-clip" viewBox="0 0 24 24"><rect class="f" x="5" y="4.5" width="14" height="16.5" rx="2.5"/><rect x="5" y="4.5" width="14" height="16.5" rx="2.5"/><path d="M9 4.5V3h6v1.5M8.5 10.5l1.5 1.5 2.5-2.5M14 11h2M8.5 16l1.5 1.5 2.5-2.5M14 16.5h2"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path class="f" d="M5 4.5A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5z"/><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
<symbol id="i-cup" viewBox="0 0 24 24"><path class="f" d="M5 8h11v7a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z"/><path d="M5 8h11v7a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1.5 1 1.5 1 3M12 3.5c0 1.5 1 1.5 1 3"/></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>叶酸、DHA、铁、钙<br>要不要补?</h1>
<p>要不要补 · 什么时候补 · 每天多少,3 分钟看懂</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>备孕前 3 个月开始,至少吃到孕早期结束</span></div><div class="num"><em>0.4<small>mg</small></em><small>每天</small></div></li>
<li><span class="no">2</span><div class="tx"><b>钙、铁、DHA 先靠吃</b><span>喝奶、吃鱼、吃红肉,吃不够再问医生</span></div><div class="num"><em>2~3<small>次</small></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-swap" xlink:href="#i-swap"/></svg><b>钙和铁别一起吃<span>两者会「抢吸收」,建议错开 2 小时以上</span></b></div>
</section>
<!-- 按孕周点亮对应阶段(拿不到身份就不显示) -->
<div class="me" id="me">
<div class="dot"><svg class="ic"><use id="meIc" href="#i-mom" xlink:href="#i-mom"/></svg></div>
<div class="mt"><b id="meT"></b><span id="meD"></span></div>
<button class="go" id="meGo">去看看</button>
</div>
<nav class="toc">
<button data-go="s1"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span>四种营养</button>
<button data-go="s2"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg></span>按孕周补</button>
<button data-go="s3"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-ask" xlink:href="#i-ask"/></svg></span>先问医生</button>
<button data-go="s5"><span class="ib" style="background:#FFF1DE;color:#D9822B"><svg class="ic"><use href="#i-clip" xlink:href="#i-clip"/></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>钙、铁、DHA 先从饮食里吃够</mark>,不够再按医生建议补。</div>
<p class="sec-sub">每张卡都回答:要不要补、什么时候、每天多少、从哪吃、什么情况要多补</p>
<article class="nut fa fade" id="nFa">
<div class="pic"><img src="img/greens.webp" alt="绿叶蔬菜、豆类和橙子" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></b>叶酸</span><span class="ans">要补</span></div>
<div class="bd">
<div class="concl">每天 0.4mg,<i>备孕前 3 个月就开始</i></div>
<div class="nums">
<div><em>0.4<small>mg</small></em><span>每天</span></div>
<div><em>前 3<small>个月</small></em><span>备孕时开始</span></div>
<div><em>全孕期</em><span>很多医生建议</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>什么时候</span><span class="v">备孕前 3 个月 → 至少到孕 12 周;很多医生建议一直吃到整个孕期</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>食物来源</span><span class="v pills"><span class="pill">深绿叶菜</span><span class="pill">西兰花</span><span class="pill">豆类</span><span class="pill">柑橘</span><span class="pill">鸡蛋</span></span></div>
</div>
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>生过神经管缺陷宝宝、有糖尿病或长期吃某些药:剂量要医生定,可能需要加量</span></div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>宝宝的神经管在怀孕后 3~4 周就闭合了,那时很多人还不知道怀孕。食物里的叶酸怕热、易流失,光靠吃很难稳定吃够,所以要提前额外补。</p></div></div>
</div>
</article>
<article class="nut dh fade" id="nDh">
<div class="pic"><img src="img/fish.webp" alt="清蒸三文鱼和鸡蛋" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></b>DHA</span><span class="ans">吃鱼够就不用</span></div>
<div class="bd">
<div class="concl">每周吃 2~3 次低汞鱼,<i>通常就够了</i></div>
<div class="nums">
<div><em>2~3<small>次</small></em><span>每周吃鱼</span></div>
<div><em>200<small>mg</small></em><span>DHA 每天</span></div>
<div><em>孕中晚期</em><span>需要最多</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg>低汞鱼</span><span class="v pills"><span class="pill">三文鱼</span><span class="pill">鳕鱼</span><span class="pill">鲈鱼</span><span class="pill">沙丁鱼</span><span class="pill">虾</span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>少吃</span><span class="v">鲨鱼、旗鱼、方头鱼、大眼金枪鱼等大型掠食鱼(汞高)</span></div>
</div>
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>不吃鱼、素食:问医生是否需要补 DHA(有藻油来源的可选)</span></div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>DHA 是宝宝大脑和视网膜的「建筑材料」,孕晚期积累最快。鱼肉同时还给蛋白质、碘和维 D,比单吃补剂更全面。</p></div></div>
</div>
</article>
<article class="nut fe fade" id="nFe">
<div class="pic"><img src="img/iron.webp" alt="瘦牛肉、动物肝脏、绿叶菜和橙子" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></b>铁</span><span class="ans">先食补</span></div>
<div class="bd">
<div class="concl">孕中晚期需要量变大,<i>查出贫血按医生开</i></div>
<div class="nums">
<div><em>20<small>mg</small></em><span>孕早期每天</span></div>
<div><em>24<small>mg</small></em><span>孕中期每天</span></div>
<div><em>29<small>mg</small></em><span>孕晚期每天</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-meat" xlink:href="#i-meat"/></svg>食物来源</span><span class="v pills"><span class="pill">牛羊瘦肉</span><span class="pill">动物血</span><span class="pill">肝脏<small>每周 1~2 次少量</small></span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg>搭配</span><span class="v">同餐吃点橙子、猕猴桃、番茄等维 C 果蔬,铁吸收更好;饭后别马上喝浓茶、咖啡</span></div>
</div>
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>产检血常规显示贫血、或铁储备低:按医生开的铁剂和剂量吃,别自己加量</span></div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>孕期血容量增加近一半,宝宝和胎盘也要储存铁。红肉里的铁最好吸收;植物里的铁(菠菜、红枣)吸收率低,别指望靠它补。</p></div></div>
</div>
</article>
<article class="nut ca fade" id="nCa">
<div class="pic"><img src="img/milk.webp" alt="牛奶、豆腐、酸奶和奶酪" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-bone" xlink:href="#i-bone"/></svg></b>钙</span><span class="ans">先食补</span></div>
<div class="bd">
<div class="concl">孕中晚期每天约 1000mg,<i>奶喝够是关键</i></div>
<div class="nums">
<div><em>约1000<small>mg</small></em><span>孕中晚期每天</span></div>
<div><em>300~500<small>ml</small></em><span>奶 / 酸奶每天</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-milk" xlink:href="#i-milk"/></svg>食物来源</span><span class="v pills"><span class="pill">牛奶</span><span class="pill">酸奶</span><span class="pill">奶酪</span><span class="pill">豆腐</span><span class="pill">带骨小鱼虾</span><span class="pill">深绿叶菜</span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>什么时候</span><span class="v">孕中期起需要量增加,一直持续到哺乳期</span></div>
</div>
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>不喝奶、乳糖不耐受、饮食钙明显不够:问医生是否需要补钙</span></div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>宝宝骨骼在孕中晚期快速钙化,钙不够时会「借」妈妈骨头里的钙。每天 500ml 奶大约就有 500mg 钙,再加豆制品和蔬菜,多数人能吃够。</p></div></div>
</div>
</article>
<div class="link-wrap fade"><button class="link" id="goBushui1"><svg class="ic"><use href="#i-cup" xlink:href="#i-cup"/></svg>每天吃了没?去记录补剂<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></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>,中晚期加上<mark>钙、铁、DHA</mark>,哺乳期继续吃好。</div>
<p class="sec-sub">从上往下就是孕产全程,找到你现在的那一段</p>
<div class="tl">
<div class="phase"><span class="node" style="background:#F4593C"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg></span><b>备孕</b><span>怀孕前 3 个月起</span></div>
<article class="stage fade" id="stPre"><div class="bd">
<div class="concl">开始吃叶酸,<i>先查个血</i></div>
<div class="chips">
<div class="chip"><span class="nm n-fa">叶酸</span>每天 0.4mg,现在就开始</div>
<div class="chip"><span class="nm n-ot">体检</span>查血常规、甲状腺功能,有问题先调好</div>
<div class="chip"><span class="nm n-ot">碘</span>日常用加碘盐</div>
</div>
</div></article>
<div class="phase"><span class="node" style="background:#E8476F"><svg class="ic"><use href="#i-sprout" xlink:href="#i-sprout"/></svg></span><b>孕早期</b><span>1~12 周</span></div>
<article class="stage fade" id="stE"><div class="bd">
<div class="concl">叶酸一天不落,<i>吐得厉害别硬吃</i></div>
<div class="chips">
<div class="chip"><span class="nm n-fa">叶酸</span>继续每天 0.4mg,关键窗口</div>
<div class="chip"><span class="nm n-ca">钙</span>需要量还没增加,正常喝奶即可</div>
<div class="chip"><span class="nm n-ot">孕吐</span>补剂吃了就吐,换个时间或问医生</div>
</div>
</div></article>
<div class="phase"><span class="node" style="background:#C2185B"><svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg></span><b>孕中期</b><span>13~27 周</span></div>
<article class="stage fade" id="stM"><div class="bd">
<div class="concl">钙、铁需要量上来,<i>饭桌先跟上</i></div>
<div class="chips">
<div class="chip"><span class="nm n-ca">钙</span>约 1000mg/天,奶加到 300~500ml</div>
<div class="chip"><span class="nm n-fe">铁</span>约 24mg/天,每周有红肉</div>
<div class="chip"><span class="nm n-dh">DHA</span>每周 2~3 次低汞鱼</div>
<div class="chip"><span class="nm n-fa">叶酸</span>多数医生建议继续吃</div>
</div>
</div></article>
<div class="phase"><span class="node" style="background:#A23B8E"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><b>孕晚期</b><span>28 周~分娩</span></div>
<article class="stage fade" id="stL"><div class="bd">
<div class="concl">铁需要最多,<i>留意产检贫血指标</i></div>
<div class="chips">
<div class="chip"><span class="nm n-fe">铁</span>约 29mg/天,贫血按医生开</div>
<div class="chip"><span class="nm n-ca">钙</span>约 1000mg/天,奶和豆制品不能断</div>
<div class="chip"><span class="nm n-dh">DHA</span>宝宝大脑积累最快,鱼继续吃</div>
</div>
</div></article>
<div class="phase"><span class="node" style="background:#8E6BB8"><svg class="ic"><use href="#i-moon" xlink:href="#i-moon"/></svg></span><b>哺乳期</b><span>产后</span></div>
<article class="stage fade" id="stB"><div class="bd">
<div class="concl">妈妈吃好,<i>营养跟着进奶水</i></div>
<div class="chips">
<div class="chip"><span class="nm n-ca">钙</span>继续每天喝奶,需要量和孕晚期相近</div>
<div class="chip"><span class="nm n-dh">DHA</span>继续每周吃鱼,奶水里的 DHA 跟着妈妈饮食走</div>
<div class="chip"><span class="nm n-fe">铁</span>产后失血多的,复查血常规</div>
<div class="chip"><span class="nm n-fa">叶酸</span>是否继续吃,问医生</div>
</div>
</div></article>
</div>
</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="doc fade">
<img src="img/doctor.webp" alt="孕妈妈和医生面对面交谈" loading="lazy">
<div class="tx">
<span class="pre"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>产检时带着问</span>
<h3>通用推荐量只适合「一般情况」</h3>
<div class="asks">
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span><div><b>贫血</b><span>铁剂和剂量按医生开</span></div></div>
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-butterfly" xlink:href="#i-butterfly"/></svg></span><div><b>甲状腺问题</b><span>碘怎么吃、药和钙铁怎么错开</span></div></div>
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><div><b>素食 / 不吃鱼</b><span>铁、DHA、维生素 B12 易缺</span></div></div>
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-twin" xlink:href="#i-twin"/></svg></span><div><b>双胎或多胎</b><span>需要量更高</span></div></div>
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><div><b>生过神经管缺陷宝宝</b><span>叶酸剂量要医生定</span></div></div>
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg></span><div><b>糖尿病、癫痫等</b><span>长期用药者先问</span></div></div>
</div>
</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>
<div class="legend"><span class="ok"><i></i>放心做</span><span class="warn"><i></i>先问医生</span><span class="nog"><i></i>别这样</span></div>
<div class="light fade">
<h4 style="color:var(--green)"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg>放心做</h4>
<ul>
<li><b>叶酸</b>每天 0.4mg,从备孕吃起</li>
<li><b>喝奶</b>每天 300~500ml 奶或酸奶</li>
<li><b>吃鱼</b>每周 2~3 次低汞鱼</li>
<li><b>红肉</b>每天适量瘦肉,配维 C 果蔬</li>
</ul>
</div>
<div class="light am fade">
<h4 style="color:var(--amber)"><svg class="ic"><use href="#i-ask" xlink:href="#i-ask"/></svg>先问医生</h4>
<ul>
<li><b>铁剂</b>查过血常规再决定吃不吃、吃多少</li>
<li><b>钙片</b>奶喝不够才考虑,问清剂量</li>
<li><b>DHA 补剂</b>不吃鱼时再考虑</li>
<li><b>复合维生素</b>和单补同时吃前,先算总量</li>
</ul>
</div>
<div class="light rd fade">
<h4 style="color:var(--red)"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>别这样</h4>
<ul>
<li><b>自己加倍</b>觉得「多吃点更保险」擅自加量</li>
<li><b>高汞鱼</b>鲨鱼、旗鱼、方头鱼、大眼金枪鱼</li>
<li><b>大剂量维 A</b>额外补维 A、天天大量吃动物肝脏</li>
</ul>
</div>
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-layers" xlink:href="#i-layers"/></svg></span><div><span class="mk">误区 1</span><b>补剂越多越好</b><p>多数营养够了就够了,超量反而有风险(如维 A、碘、铁过量)。缺什么补什么。</p></div></div>
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg></span><div><span class="mk">误区 2</span><b>钙片和铁剂一起吃省事</b><p>钙会妨碍铁吸收。建议错开 2 小时以上,比如铁随早餐、钙放晚饭后或睡前。</p></div></div>
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg></span><div><span class="mk">误区 3</span><b>复合维生素 + 单补,双保险</b><p>复合维生素里常已含叶酸、铁、钙,再单补容易叠加超量。看标签算总量,拿给医生看。</p></div></div>
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><div><span class="mk">误区 4</span><b>吃了叶酸,就不用吃绿叶菜</b><p>绿叶菜还提供膳食纤维、维 C、钾、镁,补剂替代不了。每天蔬菜里一半是深色的更好。</p></div></div>
</section>
<!-- ⑤ 我的补剂自查 -->
<section class="sec" id="s5">
<div class="sec-h"><span class="n">5</span><h2>我的补剂自查</h2></div>
<div class="sec-key">选 4 个问题,<mark>生成一份带去产检问医生的清单</mark>。</div>
<p class="sec-sub">只在本机计算,不上传;结果是提问参考,不是处方</p>
<div class="tool fade" id="tool">
<div class="q" data-q="stage">
<div class="q-t"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>我现在处于</div>
<div class="opts">
<button class="opt" data-v="pre">备孕</button><button class="opt" data-v="e">孕早期</button><button class="opt" data-v="m">孕中期</button><button class="opt" data-v="l">孕晚期</button><button class="opt" data-v="b">哺乳期</button>
</div>
</div>
<div class="q" data-q="milk">
<div class="q-t"><svg class="ic"><use href="#i-milk" xlink:href="#i-milk"/></svg>每天喝奶(或酸奶)吗</div>
<div class="opts"><button class="opt" data-v="2">每天 1~2 杯</button><button class="opt" data-v="1">偶尔喝</button><button class="opt" data-v="0">基本不喝</button></div>
</div>
<div class="q" data-q="fish">
<div class="q-t"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg>每周吃鱼虾几次</div>
<div class="opts"><button class="opt" data-v="2">2 次以上</button><button class="opt" data-v="1">1 次左右</button><button class="opt" data-v="0">几乎不吃</button></div>
</div>
<div class="q" data-q="meat">
<div class="q-t"><svg class="ic"><use href="#i-meat" xlink:href="#i-meat"/></svg>吃红肉(猪牛羊瘦肉)吗</div>
<div class="opts"><button class="opt" data-v="2">经常吃</button><button class="opt" data-v="1">偶尔吃</button><button class="opt" data-v="0">不吃 / 素食</button></div>
</div>
<div class="q" data-q="sp" data-multi="1">
<div class="q-t"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>有这些情况吗<small>可多选,可不选</small></div>
<div class="opts"><button class="opt" data-v="anemia">贫血</button><button class="opt" data-v="thy">甲状腺问题</button><button class="opt" data-v="twin">双胎 / 多胎</button><button class="opt" data-v="ntd">生过神经管缺陷宝宝</button><button class="opt" data-v="multi">在吃复合维生素</button></div>
</div>
<button class="run" id="run" disabled><svg class="ic"><use href="#i-clip" xlink:href="#i-clip"/></svg>生成我的建议清单</button>
<p class="hint" id="hint">前 4 题选完就能生成</p>
<div class="res" id="res">
<div class="res-h"><svg class="ic"><use href="#i-clip" xlink:href="#i-clip"/></svg><span id="resT">我的补剂清单</span></div>
<div class="res-sum">
<div style="background:#FFF3F0;color:var(--c)"><em id="cA">0</em><span>建议问医生</span></div>
<div style="background:#F3FAF5;color:var(--green)"><em id="cK">0</em><span>继续保持</span></div>
<div style="background:#FFF9EC;color:#B7791F"><em id="cT">0</em><span>小提醒</span></div>
</div>
<ul id="resL"></ul>
<p class="res-note">清单按通用推荐量给出,个人情况不同,补什么、补多少请以产检医生意见为准。</p>
<button class="link" id="goBushui2"><svg class="ic"><use href="#i-cup" xlink:href="#i-cup"/></svg>去「补水补剂」每天打卡<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
</div>
</div>
</section>
<details class="src">
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>循证来源与说明</summary>
<ul>
<li><b>叶酸:</b>《围受孕期增补叶酸预防神经管缺陷指南(2017)》:无高危因素的妇女从可能怀孕或孕前至少 3 个月开始,每天增补 0.4mg 或 0.8mg 叶酸至孕满 3 个月;有神经管缺陷生育史等高危因素者由医生确定剂量。多项研究汇总显示,围孕期增补叶酸可使神经管缺陷风险降低约 50%~70%</li>
<li><b>钙、铁、DHA、膳食搭配:</b>《中国居民膳食指南(2022)》备孕和孕期妇女膳食指南;《中国居民膳食营养素参考摄入量》(孕期铁推荐量孕早、中、晚期分别约 20、24、29mg/天)。中国营养学会建议孕期和哺乳期 DHA 摄入约 200mg/天</li>
<li><b>孕期贫血:</b>中华医学会围产医学分会《妊娠期铁缺乏和缺铁性贫血诊治指南》:诊断缺铁或贫血后按医生方案补铁</li>
<li><b>国际建议:</b>WHO《孕期保健建议:积极的妊娠体验》(2016):推荐孕期每日补充铁和叶酸,低钙摄入人群补钙;具体方案因地区和个人情况而异</li>
<li><b>钙与铁:</b>钙会影响非血红素铁的吸收,同时补充时建议分开服用</li>
<li><b>鱼与汞:</b>各国孕期食鱼建议均提示选择低汞鱼、避开大型掠食性鱼类</li>
</ul>
</details>
<p class="foot">本页为科普参考,不能代替医生诊断。<br>孕期补充任何营养素前,请咨询产检医生或营养科医生。</p>
</div>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var $$ = function (s, r) { return [].slice.call((r || document).querySelectorAll(s)); };
function hp(n) { var h = (location.hash.slice(1) || '') + '&' + (location.search.slice(1) || ''); var m = h.match(new RegExp('(?:^|&)' + n + '=([^&]*)')); return m ? decodeURIComponent(m[1]) : ''; }
var openid = hp('openid');
var sc = $('#scroll');
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份 hash 原样带回 */
$('#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' });
}
$$('[data-go]').forEach(function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
/* 补水补剂记录:同源相对路径,带身份 */
function goBushui() { location.href = '/yunqi-bushui/yindao/' + location.search + location.hash; }
$('#goBushui1').addEventListener('click', goBushui);
$('#goBushui2').addEventListener('click', goBushui);
/* ---------- 我的补剂自查 ---------- */
var ans = { stage: '', milk: '', fish: '', meat: '', sp: {} };
function pick(q, v) {
var box = $('.q[data-q="' + q + '"]');
$$('.opt', box).forEach(function (o) { o.classList.toggle('on', o.dataset.v === v); });
ans[q] = v; check();
}
function check() {
var ok = ans.stage && ans.milk && ans.fish && ans.meat;
$('#run').disabled = !ok;
$('#hint').style.display = ok ? 'none' : '';
}
$$('.q').forEach(function (box) {
var q = box.dataset.q, multi = box.dataset.multi;
$$('.opt', box).forEach(function (o) {
o.addEventListener('click', function () {
if (multi) { var on = !o.classList.contains('on'); o.classList.toggle('on', on); if (on) ans.sp[o.dataset.v] = 1; else delete ans.sp[o.dataset.v]; }
else pick(q, o.dataset.v);
if ($('#res').classList.contains('on')) build();
});
});
});
var IC = { a: 'ask', k: 'check', t: 'bulb' };
function build() {
var s = ans.stage, milk = +ans.milk, fish = +ans.fish, meat = +ans.meat, sp = ans.sp;
var preg = s === 'e' || s === 'm' || s === 'l', later = s === 'm' || s === 'l' || s === 'b';
var L = [];
function add(t, b, d) { L.push({ t: t, b: b, d: d }); }
/* 叶酸 */
if (sp.ntd) add('a', '建议问医生:叶酸该吃多大剂量', '生过神经管缺陷宝宝属于高危,剂量通常要医生另定,别只按 0.4mg 吃');
else if (s === 'pre' || s === 'e') add('a', '建议问医生:每天 0.4mg 叶酸是否已经吃上', s === 'pre' ? '备孕前 3 个月开始是关键窗口' : '孕早期是神经管发育关键期,一天别落下');
else if (preg) add('k', '叶酸:如果在吃,按医生建议继续', '很多医生建议吃到整个孕期');
else add('a', '建议问医生:哺乳期是否还需要继续补叶酸', '有的医生会建议继续或换成哺乳期配方');
/* 钙 */
if (milk === 0) add('a', '建议问医生:是否需要补钙', later ? '你基本不喝奶,孕中晚期和哺乳期每天约需 1000mg 钙,饮食可能不够' : '你基本不喝奶,先试试酸奶、奶酪、豆腐;孕中期起需要量会增加');
else if (milk === 1 && later) add('a', '建议问医生:饮食钙是否够,要不要补钙', '偶尔喝奶时钙容易不足,先试着每天 300~500ml 奶或酸奶');
else if (milk === 1) add('t', '钙:试着每天喝 1 杯奶', '孕中期起需要量会增加,现在养成习惯正好');
else add('k', '钙:奶喝得够,一般食补即可', '再加点豆腐、深绿叶菜就更稳');
/* DHA */
if (fish === 0) add('a', '建议问医生:是否需要额外补 DHA', '几乎不吃鱼虾时 DHA 容易不足,可问问藻油来源的补充');
else if (fish === 1) add('t', 'DHA:试着加到每周 2~3 次低汞鱼', '做不到再问医生是否需要补 DHA');
else add('k', 'DHA:每周 2 次以上吃鱼,通常就够了', '记得选三文鱼、鳕鱼、鲈鱼等低汞鱼');
/* 铁 */
if (sp.anemia) add('a', '建议问医生:铁剂怎么吃、吃多久', '已经贫血要按医生方案吃,定期复查血常规,别自己加量');
else if (meat === 0) add('a', '建议问医生:是否需要查血常规、补铁', '不吃红肉时铁很容易不够,植物里的铁吸收率低');
else if (meat === 1 && later) add('a', '建议问医生:产检时看看铁够不够', '孕中晚期铁需要量明显增加,偶尔吃红肉可能不够');
else if (meat === 1) add('t', '铁:每周多安排几次瘦肉', '同餐配维 C 果蔬,吸收更好');
else add('k', '铁:常吃红肉,先食补就好', '按时做产检血常规就行');
/* 素食额外 */
if (meat === 0 && fish === 0) add('a', '建议问医生:是否需要补维生素 B12', '不吃肉和鱼时 B12 几乎吃不到,它关系到宝宝神经发育');
/* 特殊情况 */
if (sp.thy) add('a', '建议问医生:碘怎么吃,药和钙铁怎么错开', '甲状腺药物通常要和钙、铁错开几个小时吃');
if (sp.twin) add('a', '建议问医生:双胎是否需要增加叶酸、铁、钙', '双胎多胎需要量更高,常需要个体化方案');
if (sp.multi) add('t', '复合维生素:先看标签算总量', '已含叶酸、铁、钙的,别再叠加同样的单补;把标签拿给医生看');
/* 通用提醒 */
add('t', '钙和铁错开 2 小时以上吃', '比如铁随早餐、钙放晚饭后或睡前');
var order = { a: 0, t: 1, k: 2 };
L.sort(function (x, y) { return order[x.t] - order[y.t]; });
var c = { a: 0, k: 0, t: 0 };
var ul = $('#resL'); ul.innerHTML = '';
L.forEach(function (it) {
c[it.t]++;
var li = document.createElement('li'); li.className = it.t;
li.innerHTML = '<span class="li"><svg class="ic"><use href="#i-' + IC[it.t] + '" xlink:href="#i-' + IC[it.t] + '"/></svg></span><div><b></b><span></span></div>';
li.querySelector('b').textContent = it.b; li.querySelector('div span').textContent = it.d;
ul.appendChild(li);
});
$('#cA').textContent = c.a; $('#cK').textContent = c.k; $('#cT').textContent = c.t;
var nm = { pre: '备孕', e: '孕早期', m: '孕中期', l: '孕晚期', b: '哺乳期' }[s];
$('#resT').textContent = nm + ' · 我的补剂清单';
$('#res').classList.add('on');
}
$('#run').addEventListener('click', function () {
build();
setTimeout(function () { go('res'); }, 60);
});
/* 按孕周点亮时间轴,并预选自查的阶段 */
function mark(stage, ic, t, d, pickV) {
var el = document.getElementById(stage); if (el) el.classList.add('hl');
var u = $('#meIc'), ref = '#i-' + ic;
u.setAttribute('href', ref); u.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', ref);
$('#meT').textContent = t; $('#meD').textContent = d;
$('#meGo').onclick = function () { go(stage); };
$('#me').classList.add('on');
if (pickV && !ans.stage) pick('stage', pickV);
}
if (openid) {
fetch('/api/mp/public/mama-box/pregnancy?openid=' + encodeURIComponent(openid))
.then(function (r) { return r.ok ? r.json() : null; })
.then(function (j) {
var p = j && j.code === 200 && j.result; if (!p) return;
if (p.postpartum) mark('stB', 'moon', '宝宝出生了,看看哺乳期怎么吃', '钙和 DHA 继续靠喝奶、吃鱼', 'b');
else if (p.week != null && !p.empty) {
var w = p.week;
if (w >= 28) mark('stL', 'baby', '孕 ' + w + ' 周 · 铁需要量最大', '留意产检贫血指标,钙和鱼别断', 'l');
else if (w >= 13) mark('stM', 'mom', '孕 ' + w + ' 周 · 钙铁需要量上来了', '奶加到 300~500ml,每周吃鱼 2~3 次', 'm');
else mark('stE', 'sprout', '孕 ' + w + ' 周 · 叶酸关键期', '每天 0.4mg,一天别落下', 'e');
}
}).catch(function () {});
}
/* 进场动画 */
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 });
$$('.fade').forEach(function (el) { io.observe(el); });
} else $$('.fade').forEach(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>