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

467 lines
30 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>
<!-- 孕期专题 · 孕期补剂(孕期首页「其他妈妈也在搜」第 4 条)。
2026-10-31 v3(/tmp/pl/topic-spec-v3.md):在 v2 简洁基础上加设计感——渐变 hero、结论卡、描边数字卡、
营养素卡片矩阵、按孕周横向条、食补 vs 补剂对照;推荐工具走 ../_shared/tools.js。主色 #2E7CF6。
只写营养成分,不写品牌和药品名;百分比只出现在页底来源。
自成一页:不引 app.js;返回回 ../../;工具跳转由 TopicTools 走同源路径并带 search + hash。 -->
<style>
:root{--c:#2E7CF6;--cb:#EAF2FF;--c4:rgba(46,124,246,.04);--h:#1F2329;--t:#4E5969;--s:#86909C;--bg2:#F7F8FA;--ln:#EEF0F3}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#fff;color:var(--t);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
b{color:var(--h)}
.num{font-variant-numeric:tabular-nums;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hide{position:absolute;width:0;height:0;overflow:hidden}
/* 顶栏 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:transparent;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.bar.on{background:#fff;border-bottom-color:var(--ln)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--h)}
.bar .back .ic{width:22px;height:22px}
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
/* Hero:浅渐变 + 大圆装饰 + 插画右侧出血 + 结论卡压在插画上 */
.top{position:relative;overflow:hidden;margin-top:-48px;padding-top:48px;background:linear-gradient(160deg,var(--cb) 0%,#fff 70%)}
.top::before,.top::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.top::before{width:260px;height:260px;right:-90px;top:-70px;background:rgba(46,124,246,.08)}
.top::after{width:150px;height:150px;left:-60px;top:250px;background:rgba(46,124,246,.06)}
.hero{position:relative;z-index:1;padding:8px 20px 0}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--c)}
.hero h1{margin-top:6px;font-size:28px;font-weight:800;line-height:1.32;color:var(--h);letter-spacing:-.3px}
.hl{background:linear-gradient(transparent 62%,rgba(46,124,246,.2) 0);padding:0 2px}
.hero .sub{margin-top:6px;font-size:13.5px;color:var(--s)}
.pic{position:relative;z-index:1;margin:16px -1px 0 22%;height:190px;border-radius:24px 0 0 24px;overflow:hidden;background:var(--cb)}
.pic img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.answer{position:relative;z-index:2;margin:-40px 16px 0;padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(46,124,246,.10)}
.pill{display:inline-block;font-size:12px;font-weight:600;line-height:22px;padding:0 10px;border-radius:99px;background:var(--cb);color:var(--c)}
.answer p{margin-top:8px;font-size:17px;font-weight:700;line-height:1.6;color:var(--h)}
.answer em{font-style:normal;color:var(--c)}
/* 区块通用 */
.blk{margin:40px 16px 0}
.blk.tint{padding:22px 16px;border-radius:24px;background:var(--bg2)}
.blk.blue{padding:22px 16px;border-radius:24px;background:var(--c4);border:1px solid rgba(46,124,246,.08)}
.sh{display:flex;align-items:baseline;gap:8px}
.sh .no{font-size:13px;font-weight:800;color:var(--c);letter-spacing:.5px}
.sh .en{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:1.2px;color:#C2C8D0}
.sh h2{font-size:19px;font-weight:800;line-height:1.4;color:var(--h)}
.key{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--c)}
/* 记住这 3 点:描边数字卡 */
.three{margin:36px 16px 0}
.three h2{font-size:19px;font-weight:800;color:var(--h)}
.nc{display:grid;gap:10px;margin-top:12px}
.nc li{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--ln)}
.nc .n{flex:none;width:34px;font-size:38px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c);text-align:center}
.nc b{display:block;font-size:16px;line-height:1.45}
.nc span{display:block;font-size:13px;color:var(--s);line-height:1.55}
/* 01 卡片矩阵 */
.mx{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.nu{position:relative;padding:14px 13px 13px;border-radius:18px;background:#fff;border:1px solid var(--ln);overflow:hidden}
.nu.must{border-color:rgba(46,124,246,.35);box-shadow:0 6px 18px rgba(46,124,246,.10)}
.nu-h{display:flex;align-items:center;justify-content:space-between;gap:4px}
.nu-h b{font-size:17px;font-weight:800}
.vd{font-size:11.5px;font-weight:700;line-height:20px;padding:0 8px;border-radius:99px;background:var(--bg2);color:var(--t);white-space:nowrap}
.must .vd{background:var(--c);color:#fff}
.nu .lb{display:block;margin-top:10px;font-size:11.5px;color:var(--s);line-height:1.4}
.nu .amt{display:block;font-size:22px;font-weight:800;line-height:1.25;color:var(--h);white-space:nowrap}
.nu .amt small{font-size:12px;font-weight:600;color:var(--s);margin-left:2px}
.must .amt{color:var(--c)}
.nu .when{display:flex;align-items:flex-start;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--ln);font-size:12.5px;line-height:1.5;color:var(--t)}
.nu .when .ic{width:14px;height:14px;margin-top:3px;color:var(--c)}
.why{margin-top:12px}
.why summary{list-style:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--c);cursor:pointer}
.why summary::-webkit-details-marker{display:none}
.why summary .ic{width:16px;height:16px;transition:transform .25s}
.why[open] summary .ic{transform:rotate(180deg)}
.why p{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--t)}
/* 02 按孕周横向条 */
.me{display:none;margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--c);background:var(--cb);border-radius:12px;padding:6px 12px}
.me.on{display:block}
.gt{position:relative;margin-top:14px;padding:12px 10px 10px;border-radius:20px;background:#fff;border:1px solid var(--ln)}
.gr{display:grid;grid-template-columns:40px repeat(4,1fr);align-items:center;column-gap:0}
.gr+.gr{margin-top:10px}
.gr.hd{margin-bottom:2px}
.gr.hd span{text-align:center;font-size:12px;font-weight:600;color:var(--s);line-height:1.3;white-space:nowrap}
.gr .nm{font-size:13px;font-weight:700;color:var(--h)}
.bars{grid-column:2/6;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:26px}
.bars i{display:flex;align-items:center;justify-content:center;border-radius:8px;font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:var(--c);white-space:nowrap;font-variant-numeric:tabular-nums}
.bars i.lt{background:var(--cb);color:var(--c)}
.bars i.dash{background:transparent;border:1.5px dashed rgba(46,124,246,.4);color:var(--c);font-weight:600}
.bars i.o1{background:rgba(46,124,246,.55)}.bars i.o2{background:rgba(46,124,246,.78)}
.s2{grid-column:span 2}
.col-hl{position:absolute;top:6px;bottom:6px;border-radius:14px;background:rgba(46,124,246,.07);border:1px solid rgba(46,124,246,.18);pointer-events:none;display:none}
.col-hl.on{display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--s)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:14px;height:8px;border-radius:3px;background:var(--c)}
.legend i.lt{background:var(--cb)}
.legend i.dash{background:transparent;border:1.5px dashed rgba(46,124,246,.5)}
/* 03 食补 vs 补剂 */
.vs{margin-top:14px;border-radius:20px;background:#fff;border:1px solid var(--ln);overflow:hidden}
.vs-h{display:grid;grid-template-columns:40px 1.15fr 1fr;gap:6px;align-items:center;padding:10px 10px 8px;background:var(--bg2)}
.vs-h span{display:flex;padding-left:8px;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--h)}
.vs-h .ic{width:18px;height:18px;color:var(--c)}
.vr{display:grid;grid-template-columns:40px 1.15fr 1fr;gap:6px;align-items:stretch;padding:8px 8px 8px 10px}
.vr+.vr{border-top:1px solid var(--ln)}
.vr .nm{align-self:center;font-size:13px;font-weight:800;color:var(--h)}
.vr .cl{padding:7px 8px;border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--s);background:transparent}
.vr .cl.win{background:var(--cb);color:var(--h);font-weight:600}
.vr .cl.win::before{content:"";display:inline-block;width:6px;height:6px;margin:0 5px 2px 0;border-radius:50%;background:var(--c);vertical-align:middle}
.doc{display:flex;gap:12px;align-items:center;margin-top:18px}
.doc img{flex:none;width:64px;height:64px;border-radius:16px;object-fit:cover}
.doc b{display:block;font-size:15px;line-height:1.4}
.doc span{display:block;font-size:12.5px;color:var(--s);line-height:1.55}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tags span{font-size:13px;line-height:1.4;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--ln);color:var(--h);white-space:nowrap}
/* 04 自查 */
.tool{margin-top:14px;padding:16px 14px;border-radius:20px;background:#fff;border:1px solid var(--ln)}
.q+.q{margin-top:14px}
.q-t{font-size:14.5px;font-weight:700;color:var(--h)}
.q-t .num{color:var(--c);margin-right:6px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.opt{padding:6px 13px;border-radius:99px;background:var(--bg2);border:1px solid transparent;font-size:13.5px;line-height:1.5;color:var(--t);white-space:nowrap;transition:all .15s}
.opt:active{transform:scale(.97)}
.opt.on{background:var(--cb);border-color:var(--c);color:var(--c);font-weight:600}
.hint{margin-top:14px;font-size:12.5px;color:var(--s)}
.res{display:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--ln)}
.res.on{display:block}
.res h3{font-size:15px;font-weight:700;color:var(--h)}
.res ul{list-style:none;margin-top:6px}
.res li{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.res li i{flex:none;margin-top:2px;font-style:normal;font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;white-space:nowrap;min-width:52px;text-align:center;background:var(--bg2);color:var(--s)}
.res li.a i{background:var(--c);color:#fff}
.res li.t i{background:var(--cb);color:var(--c)}
.res li b{display:block;font-size:14px;line-height:1.5}
.res li span{display:block;font-size:12.5px;color:var(--s);line-height:1.55}
.res-note{margin-top:6px;font-size:12px;color:var(--s)}
/* 推荐工具 */
#tools{margin:40px 16px 0}
#tools.tt-wrap{margin:40px 16px 0}
@media (max-width:370px){.blk.tint,.blk.blue{padding:20px 12px}.vr .cl{font-size:12px}}
/* 来源 */
.src{margin:28px 16px 0;border-radius:18px;background:var(--bg2)}
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--h);display:flex;align-items:center;gap:6px}
.src summary::-webkit-details-marker{display:none}
.src summary .ic{margin-left:auto;width:16px;height:16px;color:var(--s);transition:transform .25s}
.src[open] summary .ic{transform:rotate(180deg)}
.src ul{list-style:none;padding:0 16px 12px}
.src li{padding:8px 0;border-top:1px solid var(--ln);font-size:12.5px;line-height:1.65;color:var(--t)}
.foot{margin:14px 20px 0;font-size:12px;color:var(--s);text-align:center;line-height:1.7}
/* 进场 fade-up,子项 60ms 错开 */
.fade,.fade .fi{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.fade.in,.fade.in .fi{opacity:1;transform:none}
.fade .fi{opacity:0}
.nu:active,.nc li:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.fade,.fade .fi{opacity:1;transform:none;transition:none}}
</style>
</head>
<body>
<!-- 单色线性图标,stroke 1.8 -->
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
<symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3.5 11h17a8.5 8.5 0 0 1-17 0zM9 20h6M8 7.5c.8-1 2-1.5 3-1M13 4c1 .7 1.5 1.8 1.5 3"/></symbol>
<symbol id="i-pill" viewBox="0 0 24 24"><rect x="3" y="8.5" width="18" height="7" rx="3.5" transform="rotate(-40 12 12)"/><path d="M10.1 9.7l3.8 4.6"/></symbol>
</svg>
<div id="scroll">
<header class="bar" id="bar">
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
<span class="t">孕期专题</span>
</header>
<div class="top">
<section class="hero">
<span class="eyebrow">孕期营养 · 补剂</span>
<h1>叶酸吃到几个月停?<br><span class="hl">钙铁 DHA</span> 几周补?</h1>
<p class="sub">一张卡看懂:补不补、补多少、从几周开始</p>
</section>
<div class="pic"><img src="img/hero.webp" alt="孕妈妈坐在窗边,桌上有牛奶、补剂、绿叶菜和鱼"></div>
</div>
<div class="answer">
<span class="pill">一句话答案</span>
<p><em>叶酸</em>至少吃到孕 3 个月,很多医生建议吃满整个孕期;钙、铁从<em>孕中期</em>起重点补,DHA 先靠每周吃 2~3 次鱼。</p>
</div>
<section class="three fade">
<h2>记住这 3 点</h2>
<ol class="nc">
<li class="fi"><span class="n num">1</span><div><b>叶酸 0.4mg/天</b><span>备孕前 3 个月开始,至少吃到孕 12 周</span></div></li>
<li class="fi"><span class="n num">2</span><div><b>钙铁错开 2 小时</b><span>一起吃会抢吸收,比如铁早上、钙睡前</span></div></li>
<li class="fi"><span class="n num">3</span><div><b>补剂不是越多越好</b><span>复合维生素和单补别叠加,先算总量</span></div></li>
</ol>
</section>
<!-- 01 卡片矩阵 -->
<section class="blk tint fade" id="s1">
<div class="sh"><span class="no num">01</span><h2>四种营养,一眼看懂</h2><span class="en">AT A GLANCE</span></div>
<p class="key">只有叶酸人人要补,其余三样先吃够。</p>
<div class="mx">
<div class="nu must fi">
<div class="nu-h"><b>叶酸</b><span class="vd">要补</span></div>
<span class="lb">每天</span><span class="amt num">0.4<small>mg</small></span>
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>孕前 3 个月起 → 至少孕 12 周</span></div>
</div>
<div class="nu fi">
<div class="nu-h"><b>钙</b><span class="vd">先食补</span></div>
<span class="lb">每天(孕中晚期)</span><span class="amt num">1000<small>mg</small></span>
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>孕中期起要加量</span></div>
</div>
<div class="nu fi">
<div class="nu-h"><b>铁</b><span class="vd">先食补</span></div>
<span class="lb">每天</span><span class="amt num">20→29<small>mg</small></span>
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>越往后越多,贫血听医生</span></div>
</div>
<div class="nu fi">
<div class="nu-h"><b>DHA</b><span class="vd">吃鱼就够</span></div>
<span class="lb">每天</span><span class="amt num">200<small>mg</small></span>
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>孕中期到哺乳期</span></div>
</div>
</div>
<details class="why">
<summary>为什么叶酸要提前补?<svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
<p>宝宝神经管在怀孕 3~4 周就闭合,那时很多人还不知道怀孕;食物里的叶酸怕热、易流失,光靠吃不够,所以要提前补。</p>
</details>
</section>
<!-- 02 按孕周横向条 -->
<section class="blk fade" id="s2">
<div class="sh"><span class="no num">02</span><h2>按孕周怎么补</h2><span class="en">TIMELINE</span></div>
<p class="key">早期抓叶酸,中期起加上钙、铁、DHA。</p>
<div class="me" id="me"></div>
<div class="gt" id="gt">
<div class="col-hl" id="colHl"></div>
<div class="gr hd"><span></span><span data-c="0">备孕</span><span data-c="1">孕早期</span><span data-c="2">孕中期</span><span data-c="3">孕晚·哺乳</span></div>
<div class="gr fi"><span class="nm">叶酸</span><div class="bars"><i class="s2">0.4mg</i><i class="dash s2">按医嘱</i></div></div>
<div class="gr fi"><span class="nm">钙</span><div class="bars"><i class="lt s2">800mg</i><i class="s2">1000mg</i></div></div>
<div class="gr fi"><span class="nm">铁</span><div class="bars"><i class="lt num">18</i><i class="lt num">20</i><i class="o1 num">24</i><i class="o2 num">29mg</i></div></div>
<div class="gr fi"><span class="nm">DHA</span><div class="bars"><i class="lt s2">吃鱼即可</i><i class="s2">200mg</i></div></div>
</div>
<div class="legend"><span><i></i>重点</span><span><i class="lt"></i>日常吃够</span><span><i class="dash"></i>听医生</span></div>
</section>
<!-- 03 食补 vs 补剂 -->
<section class="blk tint fade" id="s3">
<div class="sh"><span class="no num">03</span><h2>靠吃,还是吃补剂?</h2><span class="en">FOOD VS PILL</span></div>
<p class="key">蓝底那一栏,就是更推荐的方式。</p>
<div class="vs">
<div class="vs-h"><span></span><span><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>靠吃</span><span><svg class="ic"><use href="#i-pill" xlink:href="#i-pill"/></svg>补剂</span></div>
<div class="vr fi"><span class="nm">叶酸</span><span class="cl">深绿叶菜、豆类,怕热易流失</span><span class="cl win">必须补,每天 0.4mg</span></div>
<div class="vr fi"><span class="nm">钙</span><span class="cl win">奶 300~500ml + 豆腐</span><span class="cl">不喝奶时问医生</span></div>
<div class="vr fi"><span class="nm">铁</span><span class="cl win">红肉、动物血 + 维 C 果蔬</span><span class="cl">查出贫血按医嘱</span></div>
<div class="vr fi"><span class="nm">DHA</span><span class="cl win">低汞鱼每周 2~3 次</span><span class="cl">不吃鱼时问医生</span></div>
</div>
<div class="doc">
<img src="img/doctor.webp" alt="孕妈妈和医生面对面交谈" loading="lazy">
<div><b>这些情况,补多少听医生的</b><span>上面的量只适合一般情况,产检时带着问。</span></div>
</div>
<div class="tags">
<span>贫血</span><span>甲状腺问题</span><span>素食 / 不吃鱼</span><span>双胎 / 多胎</span><span>生过神经管缺陷宝宝</span><span>糖尿病</span><span>长期用药</span><span>在吃复合维生素</span>
</div>
</section>
<!-- 04 我的补剂自查 -->
<section class="blk fade" id="s4">
<div class="sh"><span class="no num">04</span><h2>我的补剂自查</h2><span class="en">SELF CHECK</span></div>
<p class="key">选 3 个问题,看看该注意什么。</p>
<div class="tool" id="tool">
<div class="q" data-q="stage">
<div class="q-t"><span class="num">Q1</span>我现在处于</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"><span class="num">Q2</span>每天喝奶(或酸奶)吗</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"><span class="num">Q3</span>每周吃鱼虾几次</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>
<p class="hint" id="hint">3 题选完自动出结果,只在本机计算</p>
<div class="res" id="res">
<h3 id="resT">给你的 3 条建议</h3>
<ul id="resL"></ul>
<p class="res-note">仅供参考,补什么、补多少以产检医生意见为准。</p>
</div>
</div>
</section>
<!-- 推荐工具(共用组件,含原「补水补剂打卡」入口) -->
<div id="tools" class="fade"></div>
<details class="src">
<summary>参考来源<svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
<ul>
<li>《围受孕期增补叶酸预防神经管缺陷指南(2017)》:无高危因素者从孕前至少 3 个月起每天增补 0.4mg 或 0.8mg 叶酸至孕满 3 个月;高危者由医生定剂量。研究汇总显示可使神经管缺陷风险降低约 50%~70%</li>
<li>《中国居民膳食指南(2022)》备孕和孕期妇女膳食指南;《中国居民膳食营养素参考摄入量》:成年女性铁约 18mg/天,孕早、中、晚期约 20、24、29mg/天;成年女性及孕早期钙约 800mg/天、孕中晚期约 1000mg/天;孕期和哺乳期 DHA 约 200mg/天</li>
<li>中华医学会围产医学分会《妊娠期铁缺乏和缺铁性贫血诊治指南》</li>
<li>WHO《孕期保健建议:积极的妊娠体验》(2016)</li>
<li>钙会影响非血红素铁吸收,同时补充建议分开服用;孕期食鱼宜选低汞鱼,少吃鲨鱼、旗鱼等大型鱼</li>
</ul>
</details>
<p class="foot">本页为科普参考,不能代替医生诊断。</p>
</div>
<script src="../_shared/tools.js"></script>
<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;直接打开(分享 / 刷新)就回同目录的首页,身份原样带回 */
$('#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;
});
/* 顶栏:滚动后白底 + 细分割线 */
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('on', sc.scrollTop > 8); }, { passive: true });
function go(id) {
var el = document.getElementById(id); if (!el) return;
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 60;
sc.scrollTo({ top: top, behavior: 'smooth' });
}
/* ---------- 推荐工具(原补水补剂入口已并入) ---------- */
function renderTools(wk) {
if (!window.TopicTools) return;
var el = $('#tools'); el.className = 'fade in';
TopicTools.render(el, [
{ id: 'bushui', why: '每天打卡,叶酸钙铁不漏服', btn: '去打卡' },
{ id: 'yunqinengbuchi', why: '食补前先查这样东西能不能吃', btn: '去查' },
{ id: 'chanjianrili', why: '按产检查血结果调整补剂', btn: '去看' }
], { title: '补剂用得上的工具', color: '#2E7CF6', bg: '#EAF2FF', wk: wk || 0 });
}
renderTools(0);
/* ---------- 我的补剂自查:3 题,最多 3 条建议 ---------- */
var ans = { stage: '', milk: '', fish: '' };
function pick(q, v) {
$$('.opt', $('.q[data-q="' + q + '"]')).forEach(function (o) { o.classList.toggle('on', o.dataset.v === v); });
ans[q] = v;
if (ans.stage && ans.milk && ans.fish) build();
}
$$('.q').forEach(function (box) {
$$('.opt', box).forEach(function (o) {
o.addEventListener('click', function () {
var first = !$('#res').classList.contains('on');
pick(box.dataset.q, o.dataset.v);
if (first && $('#res').classList.contains('on')) setTimeout(function () { go('res'); }, 60);
});
});
});
var TAG = { a: '问医生', t: '加一点', k: '保持' };
function build() {
var s = ans.stage, milk = +ans.milk, fish = +ans.fish;
var later = s === 'm' || s === 'l' || s === 'b';
var L = [];
function add(t, b, d) { L.push({ t: t, b: b, d: d }); }
if (s === 'pre' || s === 'e') add('t', '叶酸每天 0.4mg,一天别落下', s === 'pre' ? '备孕前 3 个月开始是关键' : '孕早期是神经管发育关键期');
else if (s === 'b') add('a', '哺乳期叶酸是否继续,问医生', '有的医生会建议继续吃');
else add('k', '叶酸按医生建议继续吃', '很多医生建议吃到整个孕期');
if (milk === 0) add('a', '钙可能不够,问医生要不要补', later ? '孕中晚期和哺乳期每天约需 1000mg' : '先试试酸奶、奶酪、豆腐');
else if (milk === 1) add('t', '奶加到每天 300~500ml', later ? '偶尔喝时钙容易不足' : '孕中期起钙需要量会增加');
else add('k', '钙靠喝奶就够,继续保持', '再加点豆腐、深绿叶菜');
if (fish === 0) add('a', '问医生是否需要补 DHA', '几乎不吃鱼虾时 DHA 容易不足');
else if (fish === 1) add('t', '鱼加到每周 2~3 次', '选三文鱼、鳕鱼、鲈鱼等低汞鱼');
else add('k', 'DHA 吃鱼就够,继续保持', '记得选低汞鱼');
var order = { a: 0, t: 1, k: 2 };
L.sort(function (x, y) { return order[x.t] - order[y.t]; });
var ul = $('#resL'); ul.innerHTML = '';
L.slice(0, 3).forEach(function (it) {
var li = document.createElement('li'); li.className = it.t;
li.innerHTML = '<i></i><div><b></b><span></span></div>';
li.querySelector('i').textContent = TAG[it.t];
li.querySelector('b').textContent = it.b; li.querySelector('span').textContent = it.d;
ul.appendChild(li);
});
$('#hint').style.display = 'none';
$('#res').classList.add('on');
}
/* ---------- 按孕周点亮横向条的那一列,并预选自查阶段 ---------- */
var TIP = ['开始每天 0.4mg 叶酸', '叶酸别断,孕吐别硬吃', '奶加量,常吃鱼和红肉', '铁需要最多,奶和鱼别断'];
var hlCol = -1;
function placeCol() {
if (hlCol < 0) return;
var h = $('.gr.hd [data-c="' + hlCol + '"]'), gt = $('#gt'), box = $('#colHl');
if (!h) return;
var a = h.getBoundingClientRect(), g = gt.getBoundingClientRect();
box.style.left = (a.left - g.left - 1) + 'px';
box.style.width = (a.width + 2) + 'px';
box.classList.add('on');
$$('.gr.hd span').forEach(function (s) { s.style.color = s === h ? '#2E7CF6' : ''; });
}
window.addEventListener('resize', placeCol);
function mark(col, txt, v) {
hlCol = col; placeCol();
var me = $('#me'); me.textContent = txt + ':' + TIP[col]; me.classList.add('on');
if (v && !ans.stage) pick('stage', v);
}
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(3, '宝宝出生了 · 你在哺乳期', 'b');
else if (p.week != null && !p.empty) {
var w = p.week;
if (w >= 28) mark(3, '你在孕 ' + w + ' 周 · 孕晚期', 'l');
else if (w >= 13) mark(2, '你在孕 ' + w + ' 周 · 孕中期', 'm');
else mark(1, '你在孕 ' + w + ' 周 · 孕早期', 'e');
renderTools(w);
}
}).catch(function () {});
}
/* 进场 fade-up:区块整体淡入,内部 .fi 按顺序 60ms 错开 */
$$('.fade').forEach(function (el) { $$('.fi', el).forEach(function (c, i) { c.style.transitionDelay = (i * 60 + 80) + 'ms'; }); });
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: .08 });
$$('.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>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/last-sub.js?v=26110703"></script> <!-- 11-07 小程序刷新回到这一页(见 js/last-sub.js) -->
<script src="../../js/pv.js?v=26110651"></script> <!-- 11-07 页面访问记录(推送效果看板,见 js/pv.js) -->
</body>
</html>