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

633 lines
53 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>孕期营养影响孩子智商吗?</title>
<!-- 孕期专题 · 营养与智力(2026-10-31:孕期首页「其他妈妈也在搜」第 3 条进入)。
沿用妊娠纹专题(topic/wen/)的设计:3 件事总览、每段一句高亮结论、关键数字徽标、时间轴、「为什么这样做」常显、
内联 SVG 扁平双色图标(不用 emoji)。只写营养成分和食物,不点名品牌;百分比只出现在页底「循证来源」。
插画 img/*.webp 由 AI 生成(画面不含文字)。自成一页:不引 app.js;回首页走相对路径 ../../。 -->
<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}
*{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;-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: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:20px;font-weight:800}
.core .num em small{font-size:12px;font-weight:700;margin-left:1px}
.core .num small{display:block;margin-top:3px;font-size:11px;color:var(--sub);white-space:nowrap}
.core .num em small{display:inline;margin:0 0 0 1px;color:inherit}
.core-ban{margin-top:10px;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;background:var(--deep);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)}
/* 一句话公式 */
.formula{margin-top:14px;padding:14px 10px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
.eq{display:flex;align-items:center;justify-content:center;gap:4px}
.eq .it{width:70px;padding:10px 0 8px;border-radius:16px;background:#fff;box-shadow:0 3px 10px rgba(240,112,79,.08);font-size:12.5px;line-height:1.3;text-align:center;white-space:nowrap}
.eq .it .ic{display:block;margin:0 auto 4px;font-size:26px;color:var(--c)}
.eq .op{font-size:18px;color:var(--c);font-weight:700}
.eq .res{background:var(--deep);color:#fff}
.eq .res .ic{color:#fff}
.eq-note{margin-top:10px;text-align:center;font-size:12.5px;color:var(--sub)}
/* ① 分步卡 */
.step{margin-top:14px;border-radius:22px;background:var(--card);overflow:hidden;border:1px solid var(--line)}
.step .pic{position:relative;background:#FFF6F2}
.step .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.step .badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;padding:3px 12px 3px 4px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.06);white-space:nowrap}
.step .badge b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px}
.step .tx{padding:13px 16px 15px}
.step.np .tx{padding-top:14px}
.step.np .badge{position:static;display:inline-flex;box-shadow:none;background:#FFF1EC;margin-bottom:8px}
.step h3{font-size:17px;line-height:1.4}
.step p{margin-top:4px;font-size:13px;color:var(--sub);line-height:1.6}
.vs{margin-top:10px;display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:#FFF1EC;font-size:14px;font-weight:700;color:var(--deep);line-height:1.45}
.vs .ic{font-size:20px}
.flow{display:flex;justify-content:center;margin:6px 0 -6px;color:#F2B3A3;font-size:20px}
/* 关键前提:体重 */
.key{margin-top:18px;border-radius:24px;overflow:hidden;background:#F3FAF4;border:1.5px solid #CFEAD7}
.key .tx{padding:14px 16px 16px}
.key .pre{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff;background:var(--green);border-radius:99px;padding:3px 10px 3px 8px}
.key h3{font-size:19px;line-height:1.35;margin-top:8px;color:#1F5E3F}
.key .big{display:flex;gap:10px;margin-top:12px}
.key .big div{flex:1;padding:10px 8px;border-radius:16px;background:#fff;text-align:center;line-height:1.15}
.key .big em{display:block;font-style:normal;font-size:22px;font-weight:800;color:var(--green)}
.key .big em small{font-size:13px;font-weight:700;margin-left:1px}
.key .big span{display:block;margin-top:5px;font-size:12px;color:#5E7466;white-space:nowrap}
.key p{font-size:12.5px;color:#6A7E70;margin-top:10px;line-height:1.6}
.key .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%}
.key .link .ic{font-size:18px}
/* ② 关键营养卡 */
.nu-pic{margin-top:14px;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.nu-pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.grp{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:14px;font-weight:700}
.grp i{width:12px;height:12px;border-radius:50%}
.grp small{font-weight:400;font-size:12px;color:var(--mute)}
.nu{margin-top:10px;padding:13px 14px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c)}
.nu.top{border-top-color:var(--deep)}
.nu.ok{border-top-color:var(--green)}
.nu-hd{display:flex;align-items:center;gap:10px}
.nu .ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:23px}
.nu .nm{flex:1;min-width:0}
.nu h4{font-size:16px;line-height:1.3}
.nu .nm span{display:block;font-size:12px;color:var(--sub);line-height:1.4}
.nu .dose{flex:none;text-align:center;padding:5px 9px 4px;border-radius:12px;background:var(--soft);color:var(--deep);line-height:1.1}
.nu .dose em{display:block;font-style:normal;font-size:17px;font-weight:800;white-space:nowrap}
.nu .dose em small{font-size:11.5px;font-weight:700;margin-left:1px}
.nu .dose span{display:block;margin-top:3px;font-size:11px;color:var(--sub);white-space:nowrap}
.nu.ok .dose{background:var(--gbg);color:var(--green)}
.nu .rows{margin-top:8px}
.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{color:#C9826F;font-size:11px;margin-left:3px;font-weight:400}
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px}
/* ③ 分阶段:时间轴 */
.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) 45%,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;margin-top:12px;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 .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.stage .bd{padding:13px 14px 14px}
.stage .hd{display:flex;align-items:center;gap:8px}
.stage .when{flex:none;font-size:12px;color:#fff;border-radius:99px;padding:2px 10px;white-space:nowrap}
.stage h3{font-size:16px;line-height:1.35;color:var(--sub);font-weight:600}
.concl{margin-top:8px;font-size:17px;font-weight:800;line-height:1.45;color:var(--ink)}
.concl i{font-style:normal;color:var(--deep)}
.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:20px;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}
.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}
/* 提醒条 */
.ban{margin-top:18px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:var(--rbg);border:1.5px solid #F2A9A9}
.ban .bi{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-size:28px}
.ban b{color:var(--red);font-size:15.5px;line-height:1.4}
.ban p{font-size:12.5px;color:#8A4A4A;margin-top:3px;line-height:1.55}
/* ④ 误区 */
.myth-hero{margin-top:14px;border-radius:22px;overflow:hidden;border:1px solid #F5E6C8}
.myth-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.myth{margin-top:12px;display:flex;gap:12px;align-items:flex-start;padding:13px 12px;border-radius:20px;background:#FFFBF2;border:1px solid #F5E6C8}
.myth .mi{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:25px;background:#FCEFD2;color:#A0731E}
.myth .mk{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#A0731E;background:#FCEFD2;border-radius:99px;padding:1px 8px}
.myth .mk .ic{font-size:12px}
.myth .q{display:block;margin-top:4px;font-size:13px;color:#9A8A70;text-decoration:line-through;text-decoration-color:rgba(160,115,30,.5)}
.myth b{display:block;margin-top:2px;font-size:15px;line-height:1.4}
.myth p{font-size:12.5px;color:#7E6C50;margin-top:3px;line-height:1.55}
/* 来源 */
.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-brain" viewBox="0 0 24 24"><path class="f" d="M12 5.5C11 3.5 7.5 3.5 6.5 6 4 6.3 3 9 4.2 10.8 2.8 12.6 3.6 15.5 6 16c.3 2.5 3.5 3.8 6 2 2.5 1.8 5.7.5 6-2 2.4-.5 3.2-3.4 1.8-5.2C21 9 20 6.3 17.5 6c-1-2.5-4.5-2.5-5.5-.5z"/><path d="M12 5.5C11 3.5 7.5 3.5 6.5 6 4 6.3 3 9 4.2 10.8 2.8 12.6 3.6 15.5 6 16c.3 2.5 3.5 3.8 6 2 2.5 1.8 5.7.5 6-2 2.4-.5 3.2-3.4 1.8-5.2C21 9 20 6.3 17.5 6c-1-2.5-4.5-2.5-5.5-.5zM12 5.5V18M8.5 9.5c1.2 0 2 .8 2 2M15.5 9.5c-1.2 0-2 .8-2 2"/></symbol>
<symbol id="i-dna" viewBox="0 0 24 24"><path class="f" d="M8 3c0 4 8 5 8 9s-8 5-8 9h8c0-4-8-5-8-9s8-5 8-9z"/><path d="M8 3c0 4 8 5 8 9s-8 5-8 9M16 3c0 4-8 5-8 9s8 5 8 9M9.5 7h5M9.5 17h5"/></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-heart" viewBox="0 0 24 24"><path class="f" d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
<symbol id="i-fish" viewBox="0 0 24 24"><path class="f" d="M3 12c3-4.5 9-6 13-2.5L20 6.5v11l-4-3c-4 3.5-10 2-13-2.5z"/><path d="M3 12c3-4.5 9-6 13-2.5L20 6.5v11l-4-3c-4 3.5-10 2-13-2.5z"/><circle class="s" cx="8" cy="11" r="1"/></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-salt" viewBox="0 0 24 24"><path class="f" d="M7.5 10h9l1 10.5h-11z"/><path d="M7.5 10h9l1 10.5h-11zM8 10c0-3.5 1.8-6 4-6s4 2.5 4 6M10.5 6.5v.2M13.5 6.5v.2M12 5v.2"/></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-meat" viewBox="0 0 24 24"><path class="f" d="M14.5 3.5a6 6 0 0 1 6 6c0 4-4 6.5-7.5 6.5l-3 3-1-1-2.5 1.5-1-1L7 16l-1-1 3-3c0-3.5 2.5-8.5 5.5-8.5z"/><path d="M14.5 3.5a6 6 0 0 1 6 6c0 4-4 6.5-7.5 6.5l-3 3M9 12c0-3.5 2.5-8.5 5.5-8.5M9 12l-3 3M6 15l-2.5 2.5a1.5 1.5 0 0 0 2 2.2L8 17.5"/></symbol>
<symbol id="i-egg" viewBox="0 0 24 24"><path class="f" d="M12 3c3.5 0 6.5 5.5 6.5 10.5a6.5 6.5 0 0 1-13 0C5.5 8.5 8.5 3 12 3z"/><path d="M12 3c3.5 0 6.5 5.5 6.5 10.5a6.5 6.5 0 0 1-13 0C5.5 8.5 8.5 3 12 3z"/></symbol>
<symbol id="i-sun" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></symbol>
<symbol id="i-milk" viewBox="0 0 24 24"><path class="f" d="M7 9.5l2-3h6l2 3V21H7z"/><path d="M9 3h6v3.5l2 3V21H7V9.5l2-3zM7 13h10"/></symbol>
<symbol id="i-scale" viewBox="0 0 24 24"><rect class="f" x="3" y="4" width="18" height="16" rx="4"/><rect x="3" y="4" width="18" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></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-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-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-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-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-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-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-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-down" viewBox="0 0 24 24"><path d="M12 4v15M6.5 13.5L12 19l5.5-5.5"/></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-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-nut" viewBox="0 0 24 24"><path class="f" d="M12 4c4.5 0 7.5 3.5 7.5 8S16.5 20 12 20s-7.5-3.5-7.5-8S7.5 4 12 4z"/><path d="M12 4c4.5 0 7.5 3.5 7.5 8S16.5 20 12 20s-7.5-3.5-7.5-8S7.5 4 12 4zM12 4v16M8 8.5c1 .8 1 2 0 3s-1 2.2 0 3M16 8.5c-1 .8-1 2 0 3s1 2.2 0 3"/></symbol>
<symbol id="i-pill" viewBox="0 0 24 24"><rect class="f" x="3" y="8.5" width="18" height="7" rx="3.5" transform="rotate(-45 12 12)"/><rect x="3" y="8.5" width="18" height="7" rx="3.5" transform="rotate(-45 12 12)"/><path d="M9.5 9.5l5 5"/></symbol>
<symbol id="i-tag" viewBox="0 0 24 24"><path class="f" d="M3.5 12.5V4.5a1 1 0 0 1 1-1h8l8 8-9 9z"/><path d="M3.5 12.5V4.5a1 1 0 0 1 1-1h8l8 8-9 9z"/><circle cx="8.5" cy="8.5" r="1.5"/></symbol>
<symbol id="i-two" viewBox="0 0 24 24"><circle class="f" cx="8" cy="8" r="3.5"/><circle cx="8" cy="8" r="3.5"/><circle cx="16.5" cy="10" r="2.5"/><path d="M2.5 20c0-3.5 2.5-6 5.5-6s5.5 2.5 5.5 6M13.5 20c.3-2.5 1.5-4.5 3-4.5s2.8 1.5 3 4.5"/></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>影响多大 · 吃什么 · 哪些是误区,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>均衡吃,大脑原料就够</span></div><div class="num"><em>7<small>种</small></em><small>关键营养</small></div></li>
<li><span class="no">2</span><div class="tx"><b>叶酸天天补,用碘盐</b><span>这两样最不能缺</span></div><div class="num"><em>0.4<small>mg</small></em><small>叶酸每天</small></div></li>
<li><span class="no">3</span><div class="tx"><b>每周吃 2~3 次鱼</b><span>挑低汞鱼,DHA 靠它</span></div><div class="num"><em>2~3<small>次</small></em><small>每周</small></div></li>
</ol>
<div class="core-ban"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg><b>没有哪种食物能让宝宝「变聪明」<span>聪明还取决于遗传,以及出生后的陪伴和教育</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:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-brain" xlink:href="#i-brain"/></svg></span>影响多大</button>
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg></span>关键营养</button>
<button data-go="s3"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg></span>分期吃法</button>
<button data-go="s4"><span class="ib" style="background:#FCEFD2;color:#A0731E"><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></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">营养决定大脑的「地基」打得牢不牢。<br><mark>别缺就够,多补不会更聪明</mark>。</div>
<p class="sec-sub">孩子聪不聪明,是好几件事一起决定的</p>
<div class="formula fade">
<div class="eq">
<div class="it"><svg class="ic"><use href="#i-dna" xlink:href="#i-dna"/></svg>遗传</div>
<span class="op">+</span>
<div class="it"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>孕期营养</div>
<span class="op">+</span>
<div class="it"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg>陪伴教育</div>
<span class="op">=</span>
<div class="it res"><svg class="ic"><use href="#i-brain" xlink:href="#i-brain"/></svg>聪明宝宝</div>
</div>
<p class="eq-note">孕期营养是其中一块,做到「不缺」就是满分</p>
</div>
<article class="step fade">
<div class="pic"><img src="img/nutri.webp" alt="餐桌上的鱼、蛋、奶、蔬菜、海带紫菜" loading="lazy"><span class="badge"><b style="background:#F4593C">1</b>孕期:打地基</span></div>
<div class="tx">
<h3>缺了会留下缺口</h3>
<p>宝宝的大脑在孕期快速搭建,原料不够就容易出问题:比如孕早期缺叶酸,神经管畸形风险升高;严重缺碘,会影响宝宝智力发育。</p>
<div class="vs"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span>做到:均衡饮食 + 补够叶酸和碘</span></div>
</div>
</article>
<div class="flow"><svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></div>
<article class="step np fade">
<div class="tx">
<span class="badge"><b style="background:#E39A2D">2</b>够了以后:多补不加分</span>
<h3>吃够之后,再多也不会更聪明</h3>
<p>营养素是「够用就好」:吃够之后多补没有额外好处,有的过量反而有害,比如维生素 A 过量可能影响胎儿发育。</p>
<div class="vs"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg><span>做到:按推荐量吃,补剂别叠加乱吃</span></div>
</div>
</article>
<div class="flow"><svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></div>
<article class="step fade">
<div class="pic"><img src="img/love.webp" alt="爸爸妈妈抱着宝宝读绘本" loading="lazy"><span class="badge"><b style="background:#C2185B">3</b>出生后:陪伴更重要</span></div>
<div class="tx">
<h3>大脑在出生后还要长好几年</h3>
<p>出生后头几年大脑仍在飞速发育,喂养、睡眠、和爸妈的互动,对孩子的影响一点不比孕期小。</p>
<div class="vs"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg><span>做到:多说话、多读绘本、多抱抱</span></div>
</div>
</article>
</section>
<!-- ② 关键营养 -->
<section class="sec" id="s2">
<div class="sec-h"><span class="n">2</span><h2>大脑发育的 7 种关键营养</h2></div>
<div class="sec-key"><mark>叶酸、碘最不能缺</mark>;DHA、铁、蛋白质、胆碱、维生素 D 吃够就行。</div>
<p class="sec-sub">每种都写了:为什么重要、吃什么、吃多少</p>
<div class="nu-pic fade"><img src="img/foods.webp" alt="一排小碗里的鸡蛋、鱼、菠菜、海带、红肉、牛奶、豆腐" loading="lazy"></div>
<div class="grp"><i style="background:var(--deep)"></i>最不能缺<small>食物不够时按医生建议补</small></div>
<div class="nu top fade">
<div class="nu-hd">
<span class="ico" style="background:#E9F6E6;color:#3E9A4A"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span>
<div class="nm"><h4>叶酸</h4><span>神经管 · 孕早期最关键</span></div>
<div class="dose"><em>0.4<small>mg</small></em><span>每天补充</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">宝宝的神经管(以后的大脑和脊髓)在怀孕最初几周就闭合,那时很多人还不知道自己怀孕了</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">叶酸片<small>补充剂</small></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">从怀孕前 3 个月起,每天补 0.4mg,持续整个孕期;有特殊情况的听医生的</span></div>
</div>
</div>
<div class="nu top fade">
<div class="nu-hd">
<span class="ico" style="background:#E8F2FD;color:#3B7DD8"><svg class="ic"><use href="#i-salt" xlink:href="#i-salt"/></svg></span>
<div class="nm"><h4>碘</h4><span>甲状腺激素 · 大脑发育必需</span></div>
<div class="dose"><em>230<small>μg</small></em><span>每天需要</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">碘是合成甲状腺激素的原料,宝宝大脑发育离不开它;孕早期宝宝的甲状腺还没工作,全靠妈妈供给</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></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>吃多少</span><span class="v">做饭用加碘盐(每天不超过 5g 盐),再每周吃 1~2 次海带、紫菜等含碘海产品</span></div>
</div>
</div>
<div class="grp"><i style="background:var(--c)"></i>吃够就行<small>大多能从日常饮食里得到</small></div>
<div class="nu fade">
<div class="nu-hd">
<span class="ico" style="background:#EEF0FF;color:#5B63C9"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></span>
<div class="nm"><h4>DHA</h4><span>大脑和视网膜的「建筑材料」</span></div>
<div class="dose"><em>200<small>mg</small></em><span>每天需要</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">DHA 是脑细胞膜的重要成分,孕晚期宝宝大脑长得最快,需要得最多</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 class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>吃多少</span><span class="v">每周 2~3 次鱼,挑低汞的;鲨鱼、旗鱼、方头鱼、大眼金枪鱼这类大型鱼少吃。不爱吃鱼可问医生要不要补鱼油</span></div>
</div>
</div>
<div class="nu fade">
<div class="nu-hd">
<span class="ico" style="background:#FDE8E8;color:#D93B3B"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span>
<div class="nm"><h4>铁</h4><span>给宝宝大脑运送氧气</span></div>
<div class="dose"><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-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">孕期血容量大增,容易贫血;妈妈贫血会影响给宝宝供氧,铁也直接参与大脑发育</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">动物肝脏<small>少量</small></span><span class="pill">配维 C 水果</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">孕中晚期每天多吃 20~50g 红肉,每周 1~2 次动物血或肝脏;查出贫血按医生开的铁剂吃</span></div>
</div>
</div>
<div class="nu fade">
<div class="nu-hd">
<span class="ico" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-meat" xlink:href="#i-meat"/></svg></span>
<div class="nm"><h4>蛋白质</h4><span>搭建大脑和身体的基础原料</span></div>
<div class="dose"><em>+15<small>g</small></em><span>孕中期每天</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">宝宝每一个细胞都要用蛋白质来搭,孕中晚期长得快,需要量跟着增加</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 class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>吃多少</span><span class="v">比孕前每天多:孕中期 15g、孕晚期 30g,约等于多一杯奶加一两份鱼肉蛋</span></div>
</div>
</div>
<div class="nu fade">
<div class="nu-hd">
<span class="ico" style="background:#FFF2E0;color:#D9822B"><svg class="ic"><use href="#i-egg" xlink:href="#i-egg"/></svg></span>
<div class="nm"><h4>胆碱</h4><span>参与大脑记忆区发育</span></div>
<div class="dose"><em>1<small>个</small></em><span>鸡蛋每天</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">胆碱帮助神经管发育,也参与大脑负责记忆区域的形成,常被忽略</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></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>吃多少</span><span class="v">每天约需 420mg,每天 1 个鸡蛋(别扔蛋黄)加日常肉、豆就差不多</span></div>
</div>
</div>
<div class="nu fade">
<div class="nu-hd">
<span class="ico" style="background:#FFF6D6;color:#C99A10"><svg class="ic"><use href="#i-sun" xlink:href="#i-sun"/></svg></span>
<div class="nm"><h4>维生素 D</h4><span>帮钙吸收,也参与神经发育</span></div>
<div class="dose"><em>10<small>μg</small></em><span>每天需要</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>为什么</span><span class="v">帮助钙吸收、骨骼发育,也参与神经系统发育;室内久坐、少晒太阳的孕妈容易缺</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></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>吃多少</span><span class="v">每天约 10μg(400IU);天气好时露出手臂晒 15~30 分钟,查出缺乏按医生建议补</span></div>
</div>
</div>
<p class="tip">推荐量参考中国营养学会孕期膳食指南和营养素参考摄入量;吃补充剂前先和产检医生确认。</p>
</section>
<!-- ③ 分阶段(时间轴) -->
<section class="sec" id="s3">
<div class="sec-h"><span class="n">3</span><h2>孕早、中、晚期,各吃什么</h2></div>
<div class="sec-key">孕早期<mark>不用多吃</mark>;孕中期起每天加一点;孕晚期重点补铁和 DHA。</div>
<p class="sec-sub">从上往下就是孕期全程,找到你现在的那一段</p>
<div class="tl">
<div class="phase"><span class="node" style="background:#F4593C"><svg class="ic"><use href="#i-sprout" xlink:href="#i-sprout"/></svg></span><b>孕早期</b><span>1~13 周 · 器官形成</span></div>
<article class="stage fade" id="stE">
<div class="pic"><img src="img/early.webp" alt="孕早期孕妈清晨在厨房喝水" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#F4593C">打基础</span><h3>叶酸不断 · 吃得下就好</h3></div>
<div class="concl">叶酸天天吃,<i>饭量和孕前一样就行</i></div>
<div class="nums">
<div><em>0.4<small>mg</small></em><span>叶酸每天</span></div>
<div><em>不加量</em><span>热量同孕前</span></div>
<div><em>少量<small>多餐</small></em><span>孕吐时</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>重点</span><span class="v pills"><span class="pill">叶酸</span><span class="pill">碘</span><span class="pill">维生素 B6<small>缓解孕吐</small></span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>吃什么</span><span class="v">深绿叶菜、全谷物、鸡蛋;孕吐时选粥、面条、苏打饼干这类清淡好消化的</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg>注意</span><span class="v">吐得厉害也要保证每天吃点主食(米面、土豆等),完全吃不下去找医生</span></div>
</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>
<div class="phase"><span class="node" style="background:#E8476F"><svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg></span><b>孕中期</b><span>14~27 周 · 快速生长</span></div>
<article class="stage fade" id="stM">
<div class="pic"><img src="img/mid.webp" alt="孕中期孕妈吃鱼、米饭、青菜" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#E8476F">开始加量</span><h3>每天多一杯奶 · 多一份肉蛋</h3></div>
<div class="concl">每天多一点点,<i>不是多一倍</i></div>
<div class="nums">
<div><em>+200<small>g</small></em><span>奶每天</span></div>
<div><em>+50<small>g</small></em><span>鱼禽蛋肉</span></div>
<div><em>2~3<small>次</small></em><span>鱼每周</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>重点</span><span class="v pills"><span class="pill">蛋白质</span><span class="pill">钙</span><span class="pill">铁</span><span class="pill">DHA</span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>吃什么</span><span class="v">牛奶酸奶、鱼虾、瘦肉、鸡蛋、豆制品,主食加点粗粮</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg>查一查</span><span class="v">产检血常规留意血红蛋白,偏低就按医生建议补铁</span></div>
</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>
<div class="phase"><span class="node" style="background:#C2185B"><svg class="ic"><use href="#i-brain" xlink:href="#i-brain"/></svg></span><b>孕晚期</b><span>28 周起 · 大脑长得最快</span></div>
<article class="stage fade" id="stL">
<div class="pic"><img src="img/late.webp" alt="孕晚期孕妈在家吃瘦肉汤和水果" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#C2185B">重点补</span><h3>补铁、吃鱼 · 同时管住体重</h3></div>
<div class="concl">铁和 DHA 吃够,<i>体重别冲太快</i></div>
<div class="nums">
<div><em>29<small>mg</small></em><span>铁每天</span></div>
<div><em>+30<small>g</small></em><span>蛋白质每天</span></div>
<div><em>1<small>次</small></em><span>每周称体重</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>重点</span><span class="v pills"><span class="pill">铁</span><span class="pill">DHA</span><span class="pill">钙</span><span class="pill">蛋白质</span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>吃什么</span><span class="v">红肉、动物血、鱼虾再多一点,配新鲜蔬果;甜食、油炸少吃</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="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>孕晚期是宝宝大脑长得最快的时候,对 DHA 和铁的需求最高;这也是妈妈体重最容易猛涨的阶段,吃够而不吃撑最重要。</p></div></div>
</div>
</article>
</div>
<div class="key fade">
<div class="tx">
<span class="pre"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>同样重要</span>
<h3>体重长得合理,宝宝才长得好</h3>
<div class="big">
<div><em>看孕前<small>体重</small></em><span>该长多少因人而异</span></div>
<div><em>1<small>次/周</small></em><span>固定时间称一称</span></div>
</div>
<p>长太少,宝宝可能营养不够;长太多,妊娠糖尿病、巨大儿的风险会升高。偏瘦、正常、偏胖的人该长的总量不一样,以产检医生建议为准。</p>
<button class="link" id="goWeight"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg>算算我的增重范围<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
</div>
</div>
</section>
<!-- ④ 误区 -->
<section class="sec" id="s4">
<div class="sec-h"><span class="n">4</span><h2>这些说法,别再信了</h2></div>
<div class="sec-key">「补脑」食物、贵价补剂,<br>都<mark>替代不了均衡饮食</mark>。</div>
<p class="sec-sub">长辈常说、网上常见的 4 个误区</p>
<div class="myth-hero fade"><img src="img/myth.webp" alt="核桃、鱼肝油和营养品盒子" loading="lazy"></div>
<div class="myth fade">
<span class="mi"><svg class="ic"><use href="#i-nut" xlink:href="#i-nut"/></svg></span>
<div><span class="mk"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>误区 1</span><span class="q">多吃核桃,宝宝更聪明</span><b>核桃是好零食,但不「补脑」</b><p>长得像大脑不代表补脑。坚果每天一小把(约 10g)就够,吃多了热量高、容易长胖。</p></div>
</div>
<div class="myth fade">
<span class="mi"><svg class="ic"><use href="#i-pill" xlink:href="#i-pill"/></svg></span>
<div><span class="mk"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>误区 2</span><span class="q">多吃鱼肝油,补 DHA</span><b>鱼肝油不是鱼油,别自己加量</b><p>鱼肝油主要含维生素 A 和 D,维生素 A 过量可能影响胎儿发育。想补 DHA 应该吃鱼或问医生选鱼油、藻油。</p></div>
</div>
<div class="myth fade">
<span class="mi"><svg class="ic"><use href="#i-tag" xlink:href="#i-tag"/></svg></span>
<div><span class="mk"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>误区 3</span><span class="q">进口补剂越贵越好</span><b>看成分和含量,不看价格产地</b><p>同一种营养素,含量相同时贵的便宜作用没区别。几种补剂一起吃反而容易超量,买前把成分表给医生看看。</p></div>
</div>
<div class="myth fade">
<span class="mi"><svg class="ic"><use href="#i-two" xlink:href="#i-two"/></svg></span>
<div><span class="mk"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>误区 4</span><span class="q">一人吃,两人补</span><b>孕早期不用多吃,之后也只多一点</b><p>孕中晚期每天大约只多一杯奶、一个蛋、一小块肉的量。吃得太多,体重涨太快,对妈妈和宝宝都不好。</p></div>
</div>
</section>
<details class="src">
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>循证来源与说明</summary>
<ul>
<li><b>《中国居民膳食指南(2022)》孕期妇女膳食指南:</b>孕期全程补充叶酸 400μg DFE/天;常吃含铁丰富的食物、选用碘盐、每周 1~2 次含碘海产品;孕中期起奶类每天增加 200g,鱼禽蛋肉孕中期增加 50g、孕晚期再增加;每周 2~3 次鱼;孕吐严重者每天至少保证含 130g 碳水化合物的食物;适量身体活动,维持孕期适宜增重</li>
<li><b>《中国居民膳食营养素参考摄入量(2023 版)》(中国营养学会):</b>孕期碘推荐摄入量 230μg/天;维生素 D 10μg/天;孕晚期铁 29mg/天;蛋白质孕中期 +15g/天、孕晚期 +30g/天;胆碱适宜摄入量约 420mg/天</li>
<li><b>《围受孕期增补叶酸预防神经管缺陷指南(2017)》:</b>无高危因素的妇女从孕前 3 个月开始每天增补 0.4mg 叶酸,至孕满 3 个月;研究显示孕前至孕早期增补叶酸可使神经管缺陷风险下降约 50%~70%</li>
<li><b>《中国孕产妇及婴幼儿补充 DHA 的专家共识》:</b>孕妇每天摄入 DHA 不少于 200mg,可通过每周 2~3 次鱼类获得</li>
<li><b>WHO 孕期保健建议(WHO recommendations on antenatal care for a positive pregnancy experience, 2016):</b>孕期每日补充铁和叶酸,强调健康饮食与适宜增重;不建议常规补充维生素 A 以提升妊娠结局</li>
<li><b>碘与智力:</b>WHO 等机构指出,孕期严重缺碘是可预防的儿童智力损伤的重要原因;轻中度缺碘地区补碘的获益仍在研究中</li>
<li><b>体重:</b>孕期适宜增重按孕前体重指数(BMI)分档,以产检医生建议为准</li>
</ul>
</details>
<p class="foot">本页为科普参考,不能代替医生诊断。<br>是否需要补充剂、补多少,请咨询产检医生或营养科医生。</p>
</div>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(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' });
}
[].forEach.call(document.querySelectorAll('[data-go]'), function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
/* 体重管理:同源相对路径,带身份 */
$('#goWeight').addEventListener('click', function () { location.href = '/yunqi-tizhong/' + location.search + location.hash; });
/* 按孕周点亮时间轴对应阶段 */
function mark(stage, ic, t, d) {
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 (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 || p.postpartum) return;
if (p.week != null && !p.empty) {
var w = p.week;
if (w < 14) mark('stE', 'sprout', '孕 ' + w + ' 周 · 孕早期', '叶酸别断,吃得下就好,不用加量');
else if (w < 28) mark('stM', 'mom', '孕 ' + w + ' 周 · 孕中期', '每天多一杯奶、多一份肉蛋,记得吃鱼');
else mark('stL', 'brain', '孕 ' + w + ' 周 · 宝宝大脑长得最快', '补铁、吃鱼,同时管住体重');
}
}).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 });
[].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>