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

265 lines
17 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>
<!-- 孕期专题 · 营养与智力(孕期首页「其他妈妈也在搜」第 3 条进入)。
2026-10-31 按《孕期专题统一设计规范 v2》重做:清新、简洁、核心明确。主色 #F08A24。
自成一页:不引 app.js;回首页走相对路径 ../../;体重工具 /yunqi-tizhong/ 同源 + 带身份。 -->
<style>
: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:#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}
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: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)}
.wrap{padding:0 20px}
/* 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{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 .ic{color:var(--c);width:20px;height:20px}
.me b{color:var(--c);margin-right:4px}
.me span{flex:1;min-width:0}
/* 记住这 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-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}
/* 阶段表 */
.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)}
/* 误区 */
.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}
/* 体重卡 */
.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}
/* 来源 + 免责 */
.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 .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(8px);transition:opacity .45s ease,transform .45s ease}
.fade.in{opacity:1;transform:none}
</style>
</head>
<body>
<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-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-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" id="bar">
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
<span class="t">孕期专题</span>
</header>
<main class="wrap">
<section class="hero">
<img src="img/hero.webp" alt="孕妈坐在餐桌前,桌上有鱼、青菜、鸡蛋和牛奶">
<h1>孕期营养<br>影响孩子智商吗?</h1>
<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="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>
<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="more"><b>另外:</b>蛋白质、胆碱、维生素 D,靠鸡蛋、奶、晒太阳。</p>
<div class="pic"><img src="img/foods.webp" alt="鸡蛋、三文鱼、菠菜、紫菜、红肉、牛奶、豆腐" loading="lazy"></div>
</section>
<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>
</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>
</section>
<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>
<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>
(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;直接打开(分享 / 刷新)就回同目录的首页,身份原样带回 */
$('#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 - 60;
sc.scrollTo({ top: top, behavior: 'smooth' });
}
/* 体重管理:同源相对路径,带身份 */
$('#goWeight').addEventListener('click', function () { location.href = '/yunqi-tizhong/' + location.search + location.hash; });
/* 按孕周点亮阶段表对应行 + 一条小提示 */
function mark(row, t, d) {
var el = document.getElementById(row); if (el) el.classList.add('hl');
$('#meT').textContent = t; $('#meD').textContent = d;
$('#me').onclick = function () { go('s2'); };
$('#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', '孕 ' + 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: .1 });
[].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>