6个专题页重设计:清新简洁一句话答案;测一测扩到16题;生娃计算器改7步选择+生下来/1/2/3岁分阶段花费
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,564 +5,195 @@
|
||||
<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;回首页走相对路径 ../../。 -->
|
||||
<!-- 孕期专题 · 营养与智力(孕期首页「其他妈妈也在搜」第 3 条进入)。
|
||||
2026-10-31 按《孕期专题统一设计规范 v2》重做:清新、简洁、核心明确。主色 #F08A24。
|
||||
自成一页:不引 app.js;回首页走相对路径 ../../;体重工具 /yunqi-tizhong/ 同源 + 带身份。 -->
|
||||
<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}
|
||||
:root{--c:#F08A24;--cbg:#FFF3E6;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--soft:#F7F8FA}
|
||||
*{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}
|
||||
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;-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}
|
||||
b,strong{color:var(--h)}
|
||||
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
/* 顶栏 */
|
||||
.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}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.on{background:#fff;border-bottom-color:var(--line)}
|
||||
.bar .back{width:38px;height:38px;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{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)}
|
||||
.wrap{padding:0 20px}
|
||||
|
||||
/* 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}
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;border-radius:20px;background:var(--cbg)}
|
||||
h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.ans{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.65;color:var(--h)}
|
||||
|
||||
/* 个性化:你现在该看哪段 */
|
||||
.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{display:none;margin-top:12px;width:100%;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);font-size:13.5px;text-align:left;color:var(--t)}
|
||||
.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}
|
||||
.me .ic{color:var(--c);width:20px;height:20px}
|
||||
.me b{color:var(--c);margin-right:4px}
|
||||
.me span{flex:1;min-width:0}
|
||||
|
||||
/* 目录 */
|
||||
.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}
|
||||
/* 记住这 3 点 */
|
||||
.three{margin-top:28px;padding:18px 18px 6px;border-radius:18px;border:1px solid var(--line)}
|
||||
.three h2{font-size:18px;font-weight:700;color:var(--h);margin-bottom:6px}
|
||||
.pt{display:flex;gap:14px;padding:10px 0 12px}
|
||||
.pt+.pt{border-top:1px solid var(--line)}
|
||||
.pt .n{flex:none;width:24px;font-size:26px;font-weight:800;line-height:1.1;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.pt b{display:block;font-size:16px;line-height:1.5}
|
||||
.pt small{display:block;font-size:12.5px;color:var(--m);line-height:1.6;margin-top:2px}
|
||||
|
||||
/* 段标题 + 段落重点结论 */
|
||||
.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)}
|
||||
/* 节 */
|
||||
.sec{margin-top:36px}
|
||||
.sec h2{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--h)}
|
||||
.sec h2 i{font-style:normal;font-size:13px;font-weight:700;color:var(--c);background:var(--cbg);border-radius:99px;width:22px;height:22px;display:grid;place-items:center}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c)}
|
||||
.items{margin-top:12px;border-radius:18px;border:1px solid var(--line);padding:2px 16px}
|
||||
.it{display:flex;gap:12px;padding:13px 0}
|
||||
.it+.it{border-top:1px solid var(--line)}
|
||||
.it .ib{flex:none;width:36px;height:36px;border-radius:12px;background:var(--cbg);color:var(--c);display:grid;place-items:center}
|
||||
.it p{flex:1;min-width:0;line-height:1.65}
|
||||
.it p b{margin-right:6px}
|
||||
.more{margin-top:10px;font-size:13.5px;color:var(--m);padding-left:2px}
|
||||
.more b{color:var(--t);font-weight:600}
|
||||
.pic{margin-top:14px}
|
||||
.pic img{width:100%;height:120px;object-fit:cover;border-radius:18px}
|
||||
|
||||
/* 一句话公式 */
|
||||
.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)}
|
||||
/* 阶段表 */
|
||||
.tbl{margin-top:12px;border-radius:18px;border:1px solid var(--line);overflow:hidden}
|
||||
.tr{display:grid;grid-template-columns:76px 70px 1fr;gap:8px;align-items:center;padding:12px 14px;font-size:14px;line-height:1.55}
|
||||
.tr+.tr{border-top:1px solid var(--line)}
|
||||
.tr.hd{background:var(--soft);font-size:12.5px;color:var(--m);padding:8px 14px}
|
||||
.tr .s b{display:block;font-size:15px}
|
||||
.tr .s small{font-size:12px;color:var(--m)}
|
||||
.tr .f{font-weight:700;color:var(--c)}
|
||||
.tr.hl{background:var(--cbg);box-shadow:inset 3px 0 0 var(--c)}
|
||||
|
||||
/* ① 分步卡 */
|
||||
.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}
|
||||
/* 误区 */
|
||||
.my{display:flex;gap:12px;padding:13px 0}
|
||||
.my+.my{border-top:1px solid var(--line)}
|
||||
.my .x{flex:none;width:22px;height:22px;margin-top:2px;color:#C9CDD4}
|
||||
.my .q{display:block;font-size:14px;color:var(--m);text-decoration:line-through;text-decoration-color:#C9CDD4}
|
||||
.my p{line-height:1.65}
|
||||
|
||||
/* 关键前提:体重 */
|
||||
.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}
|
||||
/* 体重卡 */
|
||||
.wt{margin-top:36px;padding:18px;border-radius:18px;background:var(--soft)}
|
||||
.wt .hd{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--h)}
|
||||
.wt .hd .ic{color:var(--c)}
|
||||
.wt p{margin-top:6px;font-size:14px}
|
||||
.btn{margin-top:14px;width:100%;height:46px;border-radius:99px;background:var(--c);color:#fff;font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
|
||||
.btn .ic{width:18px;height: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{margin-top:32px;border-top:1px solid var(--line);padding-top:6px}
|
||||
.src summary{list-style:none;display:flex;align-items:center;gap:6px;padding:10px 0;font-size:13.5px;color:var(--m);cursor:pointer}
|
||||
.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}
|
||||
.src summary .ic{width:18px;height:18px}
|
||||
.src summary .ar{margin-left:auto;transition:transform .2s}
|
||||
.src[open] summary .ar{transform:rotate(180deg)}
|
||||
.src ul{padding:0 0 6px 18px;font-size:12.5px;line-height:1.7;color:var(--m)}
|
||||
.src li+li{margin-top:6px}
|
||||
.foot{margin-top:10px;font-size:12px;line-height:1.7;color:var(--m)}
|
||||
|
||||
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
|
||||
/* 进场 */
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
|
||||
.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>
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||
<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-leaf" viewBox="0 0 24 24"><path d="M5 19c0-8 5-13 14-14 0 9-5 14-13 14z"/><path d="M5 19l8-8"/></symbol>
|
||||
<symbol id="i-salt" viewBox="0 0 24 24"><path d="M8 9h8l-1 11H9z"/><path d="M8.5 9l1-4.5h5l1 4.5"/><path d="M11 6.5h.01M13 6.5h.01"/></symbol>
|
||||
<symbol id="i-fish" viewBox="0 0 24 24"><path d="M3 12c3-4.5 8-6 12-3.5L20 6v12l-5-2.5C11 18 6 16.5 3 12z"/><path d="M8 11.5h.01"/></symbol>
|
||||
<symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 3.5c3.5 4.5 6 7.8 6 10.5a6 6 0 0 1-12 0c0-2.7 2.5-6 6-10.5z"/></symbol>
|
||||
<symbol id="i-x" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></symbol>
|
||||
<symbol id="i-scale" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="M8 9.5a5.5 5.5 0 0 1 8 0M12 9.5l1.2-1.8"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="3"/><path d="M4 10h16M9 3v4M15 3v4"/></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>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5zM20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
<header class="bar">
|
||||
<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>
|
||||
<span class="tag">营养与智力</span>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈坐在餐桌前吃营养餐,轻抚孕肚">
|
||||
<div class="cap">
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈坐在餐桌前,桌上有鱼、青菜、鸡蛋和牛奶">
|
||||
<h1>孕期营养<br>影响孩子智商吗?</h1>
|
||||
<p>影响多大 · 吃什么 · 哪些是误区,3 分钟看懂</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="ans">会影响大脑发育,但关键是别缺,没有吃了变聪明的食物。</div>
|
||||
<button class="me" id="me" type="button"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg><span><b id="meT"></b><em id="meD" style="font-style:normal"></em></span><svg class="ic" style="color:#C9CDD4;width:16px;height:16px"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
</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>
|
||||
<section class="three fade">
|
||||
<h2>记住这 3 点</h2>
|
||||
<div class="pt"><span class="n">1</span><div><b>叶酸每天 0.4mg</b><small>孕前 3 个月开始,至少吃到孕 3 个月</small></div></div>
|
||||
<div class="pt"><span class="n">2</span><div><b>炒菜用加碘盐</b><small>缺碘会影响宝宝大脑发育</small></div></div>
|
||||
<div class="pt"><span class="n">3</span><div><b>每周 2~3 次鱼</b><small>补 DHA,选刺少、汞低的鱼</small></div></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>
|
||||
<section class="sec fade" id="s1">
|
||||
<h2><i>1</i>大脑最需要的 4 种营养</h2>
|
||||
<p class="key">这 4 样别缺,比任何「补脑品」都管用。</p>
|
||||
<div class="items">
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><p><b>叶酸</b>预防神经管缺陷。多吃绿叶菜,再加每天一片叶酸。</p></div>
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-salt" xlink:href="#i-salt"/></svg></span><p><b>碘</b>帮宝宝大脑正常发育。用加碘盐,常吃海带、紫菜。</p></div>
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></span><p><b>DHA</b>大脑和视力的原料。主要靠吃鱼,不爱吃鱼再问医生。</p></div>
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span><p><b>铁</b>缺铁贫血,宝宝供氧受影响。吃红肉、动物血,配蔬果。</p></div>
|
||||
</div>
|
||||
<p class="eq-note">孕期营养是其中一块,做到「不缺」就是满分</p>
|
||||
</div>
|
||||
<p class="more"><b>另外:</b>蛋白质、胆碱、维生素 D,靠鸡蛋、奶、晒太阳。</p>
|
||||
<div class="pic"><img src="img/foods.webp" alt="鸡蛋、三文鱼、菠菜、紫菜、红肉、牛奶、豆腐" loading="lazy"></div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="sec fade" id="s2">
|
||||
<h2><i>2</i>孕早中晚期各吃什么</h2>
|
||||
<p class="key">孕早期不用多吃,之后每天也只多一点。</p>
|
||||
<div class="tbl">
|
||||
<div class="tr hd"><span>阶段</span><span>重点</span><span>一句话</span></div>
|
||||
<div class="tr" id="stE"><span class="s"><b>孕早期</b><small>1~13 周</small></span><span class="f">叶酸</span><span>吃得下就好,不用加量</span></div>
|
||||
<div class="tr" id="stM"><span class="s"><b>孕中期</b><small>14~27 周</small></span><span class="f">奶、肉蛋</span><span>每天多一杯奶、一份肉蛋</span></div>
|
||||
<div class="tr" id="stL"><span class="s"><b>孕晚期</b><small>28 周起</small></span><span class="f">铁、DHA</span><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>
|
||||
</section>
|
||||
|
||||
<section class="sec fade" id="s3">
|
||||
<h2><i>3</i>3 个误区</h2>
|
||||
<p class="key">「补脑」食物和贵价补剂,替代不了均衡饮食。</p>
|
||||
<div class="items">
|
||||
<div class="my"><svg class="ic x"><use href="#i-x" xlink:href="#i-x"/></svg><div><span class="q">多吃核桃,宝宝更聪明</span><p>形似大脑不等于补脑,一天一小把。</p></div></div>
|
||||
<div class="my"><svg class="ic x"><use href="#i-x" xlink:href="#i-x"/></svg><div><span class="q">补剂越贵越好</span><p>看成分含量,几种同吃易超量。</p></div></div>
|
||||
<div class="my"><svg class="ic x"><use href="#i-x" xlink:href="#i-x"/></svg><div><span class="q">一人吃,两人补</span><p>孕中晚期每天只多一杯奶、一个蛋的量。</p></div></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>
|
||||
|
||||
<!-- ② 关键营养 -->
|
||||
<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>
|
||||
<section class="wt fade">
|
||||
<div class="hd"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg>体重长得合理,宝宝才长得好</div>
|
||||
<p>孕前偏瘦、正常、偏胖,该长的不一样。每周固定时间称一次。</p>
|
||||
<button class="btn" id="goWeight" type="button">算算我的增重范围<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<details class="src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源<svg class="ic ar"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<ul>
|
||||
<li>《中国居民膳食指南(2022)》孕期妇女膳食指南:全程补充叶酸、选用碘盐、常吃含铁食物,每周 2~3 次鱼,孕中期起适量增加奶和鱼禽蛋肉,维持适宜增重。</li>
|
||||
<li>《中国居民膳食营养素参考摄入量(2023 版)》(中国营养学会):孕期碘、铁、维生素 D、蛋白质、胆碱的推荐量。</li>
|
||||
<li>《围受孕期增补叶酸预防神经管缺陷指南(2017)》:无高危因素者孕前 3 个月起每天增补 0.4mg 叶酸,至孕满 3 个月。</li>
|
||||
<li>《中国孕产妇及婴幼儿补充 DHA 的专家共识》:可通过每周 2~3 次鱼类获得 DHA。</li>
|
||||
<li>WHO recommendations on antenatal care for a positive pregnancy experience(2016):孕期补充铁和叶酸,强调健康饮食与适宜增重。</li>
|
||||
<li>WHO:孕期严重缺碘是可预防的儿童智力损伤的重要原因。</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p class="foot">本页为科普参考,不能代替医生诊断。是否需要补充剂、补多少,请咨询产检医生。</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -573,29 +204,30 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
var openid = hp('openid');
|
||||
var sc = $('#scroll');
|
||||
|
||||
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份 hash 原样带回 */
|
||||
/* 返回:从首页点进来就 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;
|
||||
});
|
||||
|
||||
/* 滚动后顶栏变白底 + 细分割线 */
|
||||
var bar = $('#bar');
|
||||
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 - 56;
|
||||
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 60;
|
||||
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);
|
||||
/* 按孕周点亮阶段表对应行 + 一条小提示 */
|
||||
function mark(row, t, d) {
|
||||
var el = document.getElementById(row); if (el) el.classList.add('hl');
|
||||
$('#meT').textContent = t; $('#meD').textContent = d;
|
||||
$('#meGo').onclick = function () { go(stage); };
|
||||
$('#me').onclick = function () { go('s2'); };
|
||||
$('#me').classList.add('on');
|
||||
}
|
||||
if (openid) {
|
||||
@@ -605,16 +237,16 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
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 + ' 周 · 宝宝大脑长得最快', '补铁、吃鱼,同时管住体重');
|
||||
if (w < 14) mark('stE', '孕 ' + w + ' 周', '叶酸别断,吃得下就好');
|
||||
else if (w < 28) mark('stM', '孕 ' + w + ' 周', '每天多一杯奶、一份肉蛋');
|
||||
else mark('stL', '孕 ' + 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 });
|
||||
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: .1 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user