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

369 lines
23 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 v3:在 v2「清新简洁」基础上加设计感(渐变 hero + 结论卡 + 数字卡 + 营养素网格 + 孕周时间轴 + 误区对照两栏 + 推荐工具)。主色 #F08A24。
自成一页:不引 app.js;回首页走相对路径 ../../;工具入口走 ../_shared/tools.js(同源 + 带身份)。 -->
<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;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
b,strong{color:var(--h)}
.num{font-variant-numeric:tabular-nums;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 背景装饰:浅橙渐变 + 两个柔和大圆,只在首屏,不挡字 */
.deco{position:absolute;left:0;right:0;top:0;height:560px;overflow:hidden;pointer-events:none;background:linear-gradient(160deg,var(--cbg) 0%,#fff 70%)}
.deco i{position:absolute;border-radius:50%;background:rgba(240,138,36,.08)}
.deco .c1{width:240px;height:240px;right:-90px;top:-70px}
.deco .c2{width:120px;height:120px;left:-50px;top:250px;background:rgba(240,138,36,.06)}
/* 顶栏 */
.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:active{background:rgba(0,0,0,.04)}
.bar .back .ic{width:22px;height:22px}
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
.wrap{position:relative;padding:0 20px}
/* Hero:标题在上,插画右侧出血,结论卡压在插画下沿 */
.eyebrow{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--c)}
h1{margin-top:6px;font-size:28px;font-weight:800;line-height:1.3;color:var(--h)}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(240,138,36,.22) 0)}
.hpic{margin:18px -20px 0 44px}
.hpic img{width:100%;height:190px;object-fit:cover;object-position:50% 40%;border-radius:24px 0 0 24px;background:var(--cbg)}
.ans{position:relative;margin:-44px 28px 0 0;padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(240,138,36,.12)}
.ans .tag{display:inline-block;padding:1px 10px;border-radius:99px;background:var(--cbg);color:var(--c);font-size:12px;font-weight:700;line-height:20px}
.ans p{margin-top:8px;font-size:17px;font-weight:700;line-height:1.6;color:var(--h)}
.ans p span{color:var(--c)}
/* 孕周提示条 */
.me{display:none;margin-top:14px;width:100%;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13.5px;text-align:left;color:var(--t);transition:transform .15s}
.me.on{display:flex}
.me:active{transform:scale(.98)}
.me .ic{color:var(--c);width:20px;height:20px}
.me b{color:var(--c);margin-right:6px}
.me span{flex:1;min-width:0}
/* 记住这 3 点:三张数字卡 */
.lbl{display:flex;align-items:baseline;gap:8px;font-size:18px;font-weight:800;color:var(--h)}
.lbl small{font-size:11px;font-weight:700;letter-spacing:.1em;color:#C9CDD4}
.three{margin-top:40px}
.cards3{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.c3{padding:12px 10px 14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.c3 .n{display:block;font-size:34px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c)}
.c3 b{display:block;margin-top:10px;font-size:14.5px;font-weight:800;line-height:1.45}
.c3 small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--m)}
/* 节 */
.sec{margin-top:40px}
.sec.box{padding:22px 16px 18px;margin-left:-6px;margin-right:-6px;border-radius:24px;background:var(--soft)}
.sh{display:flex;align-items:center;gap:10px}
.sh .no{font-size:13px;font-weight:800;color:var(--c);letter-spacing:.04em}
.sh h2{font-size:18px;font-weight:800;color:var(--h)}
.key{margin-top:6px;font-size:14.5px;font-weight:700;color:var(--c);line-height:1.6}
/* 01 营养素网格 */
.grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nu{padding:14px 14px 12px;border-radius:18px;background:#fff;transition:transform .15s}
.nu:active{transform:scale(.98)}
.nu .ib{width:34px;height:34px;border-radius:11px;background:var(--cbg);color:var(--c);display:grid;place-items:center}
.nu .ib .ic{width:19px;height:19px}
.nu b{display:block;margin-top:10px;font-size:18px;font-weight:800;line-height:1.3}
.nu .r{display:block;font-size:13px;color:var(--t);line-height:1.5}
.nu .f{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--m);line-height:1.5}
.more{margin-top:12px;font-size:12.5px;color:var(--m)}
.more b{color:var(--t);font-weight:700}
.pic{margin-top:14px}
.pic img{width:100%;height:104px;object-fit:cover;border-radius:18px}
/* 为什么?折叠 */
.why{margin-top:12px;border-radius:14px;background:#fff}
.why summary{list-style:none;display:flex;align-items:center;gap:6px;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--h);cursor:pointer}
.why summary::-webkit-details-marker{display:none}
.why summary .ar{margin-left:auto;width:16px;height:16px;color:var(--m);transition:transform .2s}
.why[open] summary .ar{transform:rotate(180deg)}
.why p{padding:0 14px 12px;font-size:13.5px;line-height:1.7}
/* 02 孕周刻度尺 + 时间轴 */
.ruler{margin-top:16px;position:relative;padding-top:26px}
.rbar{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:3px}
.rbar i{display:block;height:100%}
.rbar .e{flex:13;background:rgba(240,138,36,.25)}
.rbar .m{flex:14;background:rgba(240,138,36,.55)}
.rbar .l{flex:13;background:var(--c)}
.rtk{position:relative;height:18px;margin-top:4px;font-size:11.5px;color:var(--m)}
.rtk span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.rtk span:first-child{transform:none}
.rtk span:last-child{transform:translateX(-100%)}
.you{display:none;position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;background:var(--h);border-radius:99px;padding:0 8px;line-height:19px;white-space:nowrap}
.you:after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:var(--h)}
.you.on{display:block}
.tl{margin-top:14px;position:relative;padding-left:22px}
.tl:before{content:"";position:absolute;left:6px;top:10px;bottom:22px;width:2px;background:var(--line);border-radius:2px}
.st{position:relative;padding:12px 14px 14px;border-radius:18px;border:1px solid var(--line);background:#fff}
.st+.st{margin-top:10px}
.st:before{content:"";position:absolute;left:-22px;top:17px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--c)}
.st.hl{border-color:rgba(240,138,36,.45);background:var(--cbg)}
.st.hl:before{background:var(--c);box-shadow:0 0 0 4px rgba(240,138,36,.18)}
.st .hd{display:flex;align-items:center;gap:8px}
.st .hd b{font-size:16px;font-weight:800}
.st .hd .wk{font-size:12px;color:var(--m)}
.st .hd .fo{margin-left:auto;padding:1px 9px;border-radius:99px;background:var(--cbg);color:var(--c);font-size:12px;font-weight:700;line-height:20px}
.st.hl .hd .fo{background:#fff}
.st p{margin-top:4px;font-size:14px;line-height:1.6}
.amt{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--m)}
.amt .tr{flex:1;height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.st.hl .amt .tr{background:#fff}
.amt .tr i{display:block;height:100%;border-radius:99px;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.3,1) .2s}
.in .amt .tr i,.amt.in .tr i{transform:scaleX(1)}
.amt em{flex:none;width:72px;font-style:normal;text-align:right;color:var(--t)}
/* 03 误区:错 / 对 两栏 */
.vs{margin-top:14px}
.vh{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;padding:0 4px 8px;font-size:12px;font-weight:700}
.vh span{display:flex;align-items:center;gap:4px}
.vh .ic{width:16px;height:16px}
.vh .no{color:var(--m)}
.vh .ok{color:var(--c)}
.vr{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}
.vr+.vr{margin-top:8px}
.vr .x{padding:12px;border-radius:14px;border:1px dashed #DDE0E5;font-size:13.5px;line-height:1.55;color:var(--m);text-decoration:line-through;text-decoration-color:#C9CDD4}
.vr .y{padding:12px;border-radius:14px;background:#fff;box-shadow:inset 3px 0 0 var(--c);font-size:13.5px;line-height:1.55;font-weight:600;color:var(--h)}
/* 来源 + 免责 */
.src{margin-top:28px;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-up 12px,同批 60ms 错开 */
.fade{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}.amt .tr i{transform:none;transition: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-ok" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.8 2.8L16 10"/></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">
<div class="deco" aria-hidden="true"><i class="c1"></i><i class="c2"></i></div>
<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">
<p class="eyebrow">NUTRITION · 孕期营养</p>
<h1>孕期营养<br>影响孩子<em>智商</em>吗?</h1>
<div class="hpic"><img src="img/hero.webp" alt="孕妈坐在餐桌前,桌上有鱼、青菜、鸡蛋和牛奶"></div>
<div class="ans">
<span class="tag">一句话答案</span>
<p>会影响大脑发育,但关键是<span>别缺</span>,没有吃了变聪明的食物。</p>
</div>
<button class="me" id="me" type="button"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg><span><b id="meT" class="num"></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">
<h2 class="lbl fade">记住这 3 点<small>KEY POINTS</small></h2>
<div class="cards3">
<div class="c3 fade"><span class="n num">01</span><b>叶酸每天<br><span class="num">0.4mg</span></b><small>孕前 3 月起<br>吃到孕 3 月</small></div>
<div class="c3 fade"><span class="n num">02</span><b>炒菜用<br>加碘盐</b><small>缺碘会影响<br>大脑发育</small></div>
<div class="c3 fade"><span class="n num">03</span><b>每周吃鱼<br><span class="num">2~3</span> 次</b><small>补 DHA<br>选低汞的鱼</small></div>
</div>
</section>
<section class="sec box" id="s1">
<div class="sh fade"><span class="no num">01</span><h2>大脑最需要的 4 种营养</h2></div>
<p class="key fade">这 4 样别缺,比任何「补脑品」都管用。</p>
<div class="grid">
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><b>叶酸</b><span class="r">预防神经管缺陷</span><span class="f">绿叶菜 + 每天一片</span></div>
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-salt" xlink:href="#i-salt"/></svg></span><b>碘</b><span class="r">帮大脑正常发育</span><span class="f">加碘盐、海带紫菜</span></div>
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></span><b>DHA</b><span class="r">大脑和视力的原料</span><span class="f">主要靠吃鱼</span></div>
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span><b>铁</b><span class="r">缺了宝宝供氧少</span><span class="f">红肉、动物血 + 蔬果</span></div>
</div>
<p class="more fade"><b>另外:</b>蛋白质、胆碱、维生素 D 靠蛋、奶、晒太阳。</p>
<details class="why fade">
<summary>为什么「别缺」比「多补」重要?<svg class="ic ar"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
<p>大脑发育需要足量原料,缺了会受影响;够了以后再多吃,并不会更聪明,补剂叠加反而可能超量。不爱吃鱼、贫血,再请医生判断要不要补。</p>
</details>
<div class="pic fade"><img src="img/foods.webp" alt="鸡蛋、三文鱼、菠菜、紫菜、红肉、牛奶、豆腐" loading="lazy"></div>
</section>
<section class="sec" id="s2">
<div class="sh fade"><span class="no num">02</span><h2>孕早中晚期各吃什么</h2></div>
<p class="key fade">孕早期不用多吃,之后每天也只多一点。</p>
<div class="ruler fade" aria-hidden="true">
<span class="you num" id="you"></span>
<div class="rbar"><i class="e"></i><i class="m"></i><i class="l"></i></div>
<div class="rtk num"><span style="left:0">1 周</span><span style="left:32.5%">13</span><span style="left:67.5%">27</span><span style="left:100%">40 周</span></div>
</div>
<div class="tl">
<div class="st fade" id="stE">
<div class="hd"><b>孕早期</b><span class="wk num">1~13 周</span><span class="fo">叶酸</span></div>
<p>吃得下就好,不用加量。</p>
<div class="amt"><span>加量</span><span class="tr"><i style="width:4%"></i></span><em>不用加</em></div>
</div>
<div class="st fade" id="stM">
<div class="hd"><b>孕中期</b><span class="wk num">14~27 周</span><span class="fo">奶、肉蛋</span></div>
<p>每天多一杯奶、一份肉蛋。</p>
<div class="amt"><span>加量</span><span class="tr"><i style="width:50%"></i></span><em>一点点</em></div>
</div>
<div class="st fade" id="stL">
<div class="hd"><b>孕晚期</b><span class="wk num">28 周起</span><span class="fo">铁、DHA</span></div>
<p>再加一份鱼或红肉,管住体重。</p>
<div class="amt"><span>加量</span><span class="tr"><i style="width:78%"></i></span><em>再多一点</em></div>
</div>
</div>
</section>
<section class="sec box" id="s3">
<div class="sh fade"><span class="no num">03</span><h2>3 个误区</h2></div>
<p class="key fade">补脑食物、贵价补剂,都替代不了均衡饮食。</p>
<div class="vs">
<div class="vh fade"><span class="no"><svg class="ic"><use href="#i-x" xlink:href="#i-x"/></svg>常听说</span><span class="ok"><svg class="ic"><use href="#i-ok" xlink:href="#i-ok"/></svg>其实是</span></div>
<div class="vr fade"><span class="x">多吃核桃,宝宝更聪明</span><span class="y">形似大脑不等于补脑,一天一小把就够</span></div>
<div class="vr fade"><span class="x">补剂越贵越好</span><span class="y">看成分含量,几种同吃容易超量</span></div>
<div class="vr fade"><span class="x">一人吃,两人补</span><span class="y">孕中晚期每天只多一杯奶、一个蛋的量</span></div>
</div>
</section>
<div id="tools" class="fade"></div>
<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 src="../_shared/tools.js"></script>
<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' });
}
/* 推荐工具(共用组件,同源 + 带身份);拿到孕周后重渲染一次 */
var TOOLS = [
{ id: 'yunqinengbuchi', why: '拿不准的食物,吃之前查一下', btn: '去查' },
{ id: 'bushui', why: '叶酸、DHA、铁按需补,不重复' },
{ id: 'yunqitizhong', why: '营养要够,体重别超,看增重范围' },
{ id: 'yunqixuetang', why: '控糖也是营养管理,记下血糖' }
];
function renderTools(wk) {
var el = document.getElementById('tools');
if (!el || !window.TopicTools) return;
TopicTools.render(el, TOOLS, { title: '用得上的工具', color: '#F08A24', bg: '#FFF3E6', wk: wk || 0 });
}
renderTools(0);
/* 按孕周点亮时间轴对应阶段 + 刻度尺定位 + 一条小提示 */
function mark(row, w, d) {
var el = document.getElementById(row); if (el) el.classList.add('hl');
var you = $('#you');
you.textContent = '你在孕 ' + w + ' 周';
you.style.left = Math.min(92, Math.max(8, w / 40 * 100)) + '%';
you.classList.add('on');
$('#meT').textContent = '孕 ' + w + ' 周'; $('#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, '补铁、吃鱼,管住体重');
renderTools(w);
}
}).catch(function () {});
}
/* 进场:同一批进入视口的元素按顺序错开 60ms */
var fades = document.querySelectorAll('.fade');
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (es) {
var i = 0;
es.forEach(function (e) {
if (!e.isIntersecting) return;
e.target.style.transitionDelay = (i++ * 60) + 'ms';
e.target.classList.add('in');
io.unobserve(e.target);
});
}, { root: sc, threshold: .1 });
[].forEach.call(fades, function (el) { io.observe(el); });
} else [].forEach.call(fades, function (el) { el.classList.add('in'); });
/* 禁止下拉回弹:固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
var y0 = 0;
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
sc.addEventListener('touchmove', function (e) {
var dy = e.touches[0].clientY - y0;
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) e.preventDefault();
}, { passive: false });
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
})();
</script>
<script src="../_shared/brand.js?v=26110203"></script>
</body>
</html>