首页宫格换正式应用图标;其他妈妈也在搜6问各配专题页(花费计算器/测一测/营养/补剂/职场维权)+热度设计 v26103111
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
726
topic/buji/index.html
Normal file
726
topic/buji/index.html
Normal file
@@ -0,0 +1,726 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>叶酸、DHA、铁、钙要不要补?</title>
|
||||
<!-- 孕期专题 · 孕期补剂(2026-10-31:孕期首页「其他妈妈也在搜」第 4 条的落地页)。
|
||||
沿用 topic/wen 妊娠纹专题的设计:3 个核心重点 + 每段一句重点结论 + 数字徽标 + 时间轴 + 「为什么这样做」常显 + 红绿灯速查 + 底部来源。
|
||||
只写营养成分,不写品牌、不写具体药品名;百分比只出现在页底「循证来源」。
|
||||
插画 img/*.webp 由 AI 生成(画面不含文字、不含药瓶),文案全部在本页排版。
|
||||
自成一页:不引 app.js;回首页走相对路径 ../../;跳补水补剂记录走同源 /yunqi-bushui/yindao/(App 表 bushui 的地址),带 search + hash。 -->
|
||||
<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;--blue:#3B7DD8}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;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}
|
||||
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;padding:0 1px}
|
||||
|
||||
/* 顶栏 */
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,248,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink)}
|
||||
.bar .t{font-weight:600;font-size:16px}
|
||||
.bar .tag{margin-left:auto;margin-right:6px;font-size:12px;color:var(--c);background:#FFE9E2;border-radius:99px;padding:2px 10px}
|
||||
|
||||
/* 头图 */
|
||||
.hero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
|
||||
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover}
|
||||
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.96) 46%)}
|
||||
.hero h1{font-size:26px;line-height:1.25;color:var(--deep);letter-spacing:.5px}
|
||||
.hero p{margin-top:4px;font-size:13px;color:var(--sub)}
|
||||
|
||||
/* 3 个核心重点 */
|
||||
.core{margin:16px 16px 0;padding:18px 16px 16px;border-radius:24px;background:#fff;box-shadow:0 6px 24px rgba(194,24,91,.08);border:1px solid #FBE0D8}
|
||||
.core-h{display:flex;align-items:center;gap:8px}
|
||||
.core-h .ic{font-size:22px;color:var(--c)}
|
||||
.core-h h2{font-size:19px;line-height:1.3}
|
||||
.core-h small{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap}
|
||||
.core ol{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
|
||||
.core li{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 10px;border-radius:18px;background:linear-gradient(120deg,#FFF1EB,#FFF9F6)}
|
||||
.core .no{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;font-family:Georgia,"Times New Roman",serif}
|
||||
.core li:nth-child(1) .no{background:var(--c)}
|
||||
.core li:nth-child(2) .no{background:var(--c2)}
|
||||
.core li:nth-child(3) .no{background:var(--deep)}
|
||||
.core .tx{flex:1;min-width:0}
|
||||
.core .tx b{display:block;font-size:16.5px;line-height:1.35}
|
||||
.core .tx span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.core .num{flex:none;min-width:66px;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:19px;font-weight:800;white-space:nowrap}
|
||||
.core .num em small{display:inline;margin-top:0;font-size:12px;color:inherit;margin-left:1px}
|
||||
.core .num small{display:block;margin-top:3px;font-size:11px;color:var(--sub);white-space:nowrap}
|
||||
.core-ban{margin-top:10px;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;background:var(--red);color:#fff}
|
||||
.core-ban .ic{font-size:24px}
|
||||
.core-ban b{font-size:14.5px;line-height:1.35}
|
||||
.core-ban span{display:block;font-size:12px;font-weight:400;opacity:.9}
|
||||
|
||||
/* 个性化:按孕周提示 */
|
||||
.me{margin:14px 16px 0;display:none;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1.5px dashed #FFC2B0}
|
||||
.me.on{display:flex}
|
||||
.me .dot{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#FFE9E2;color:var(--c);font-size:24px}
|
||||
.me .mt{flex:1;min-width:0}
|
||||
.me b{display:block;font-size:15px;line-height:1.4}
|
||||
.me span{display:block;font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.me .go{flex:none;font-size:13px;color:#fff;background:var(--c);border-radius:99px;padding:6px 12px;white-space:nowrap}
|
||||
|
||||
/* 目录 */
|
||||
.toc{display:flex;gap:8px;margin:14px 16px 0}
|
||||
.toc button{flex:1;min-width:0;padding:11px 2px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
|
||||
.toc .ib{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px}
|
||||
|
||||
/* 段标题 + 段落重点结论 */
|
||||
.sec{margin:36px 16px 0;scroll-margin-top:56px}
|
||||
.sec-h{display:flex;align-items:center;gap:10px}
|
||||
.sec-h .n{flex:none;width:32px;height:32px;border-radius:11px;background:var(--c);color:#fff;font-weight:800;display:grid;place-items:center;font-size:16px}
|
||||
.sec-h h2{font-size:20px;line-height:1.3}
|
||||
.sec-key{margin-top:10px;padding:11px 14px;border-radius:16px;background:var(--soft);border-left:4px solid var(--c);font-size:15.5px;font-weight:700;line-height:1.5;color:var(--deep)}
|
||||
.sec-sub{margin-top:6px;padding:0 4px;font-size:12.5px;color:var(--mute)}
|
||||
|
||||
/* ① 四种营养大卡 */
|
||||
.nut{position:relative;margin-top:16px;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;--k:var(--c);--kb:#FFEDE6}
|
||||
.nut .pic{position:relative;background:#FFF6F2}
|
||||
.nut .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.nut .badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;padding:4px 14px 4px 4px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px;box-shadow:0 2px 8px rgba(0,0,0,.08);white-space:nowrap}
|
||||
.nut .badge b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;background:var(--k)}
|
||||
.nut .ans{position:absolute;right:12px;top:12px;font-size:12.5px;font-weight:700;color:#fff;background:var(--k);border-radius:99px;padding:4px 12px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.08)}
|
||||
.nut .bd{padding:14px 14px 15px}
|
||||
.nut .concl{font-size:17px;font-weight:800;line-height:1.45}
|
||||
.nut .concl i{font-style:normal;color:var(--k)}
|
||||
.nut .nums div{background:var(--kb)}
|
||||
.nut .nums em{color:var(--k)}
|
||||
.nut .row .k .ic{color:var(--k)}
|
||||
.nut .pill{background:var(--kb);color:var(--k)}
|
||||
.nut.fa{--k:#2F8A5E;--kb:#E7F5EC}
|
||||
.nut.dh{--k:#3B7DD8;--kb:#E8F2FD}
|
||||
.nut.fe{--k:#C2185B;--kb:#FDE7EE}
|
||||
.nut.ca{--k:#D9822B;--kb:#FFF1DE}
|
||||
.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:21px;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}
|
||||
.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{opacity:.75;font-size:11px;margin-left:3px;font-weight:400}
|
||||
.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}
|
||||
.extra{margin-top:10px;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:#FFF1EC;font-size:13px;font-weight:600;color:var(--deep);line-height:1.5}
|
||||
.extra .ic{font-size:18px;margin-top:1px}
|
||||
|
||||
/* ② 按孕周时间轴 */
|
||||
.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) 40%,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;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 .bd{padding:13px 14px 14px}
|
||||
.stage .concl{font-size:16px;font-weight:800;line-height:1.45}
|
||||
.stage.hl .concl{padding-right:104px}
|
||||
.stage .concl i{font-style:normal;color:var(--deep)}
|
||||
.chips{display:flex;flex-direction:column;gap:6px;margin-top:10px}
|
||||
.chip{display:flex;align-items:center;gap:8px;font-size:13px;color:#6A5452;line-height:1.45}
|
||||
.chip .nm{flex:none;width:44px;text-align:center;font-size:12px;font-weight:700;border-radius:8px;padding:1px 0;white-space:nowrap}
|
||||
.n-fa{background:#E7F5EC;color:#2F8A5E}.n-dh{background:#E8F2FD;color:#3B7DD8}.n-fe{background:#FDE7EE;color:#C2185B}.n-ca{background:#FFF1DE;color:#D9822B}.n-ot{background:#F1ECF7;color:#8E6BB8}
|
||||
|
||||
/* ③ 先问医生 */
|
||||
.doc{margin-top:16px;border-radius:24px;overflow:hidden;background:#FFF5F7;border:1.5px solid #F8CDD9}
|
||||
.doc img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.doc .tx{padding:14px 14px 16px}
|
||||
.doc .pre{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff;background:var(--deep);border-radius:99px;padding:3px 10px 3px 8px}
|
||||
.doc h3{font-size:18px;line-height:1.35;margin-top:8px;color:#8E1446}
|
||||
.asks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
|
||||
.ask{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:16px;background:#fff}
|
||||
.ask .ai{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:19px;background:#FDE7EE;color:var(--deep)}
|
||||
.ask b{display:block;font-size:13.5px;line-height:1.35}
|
||||
.ask span{display:block;margin-top:2px;font-size:11.5px;color:var(--sub);line-height:1.45}
|
||||
|
||||
/* ④ 红绿灯速查 */
|
||||
.legend{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
|
||||
.legend span{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 10px;border-radius:99px;white-space:nowrap;font-weight:600}
|
||||
.legend i{width:8px;height:8px;border-radius:50%;background:currentColor}
|
||||
.ok{background:var(--gbg);color:var(--green)}
|
||||
.warn{background:var(--abg);color:var(--amber)}
|
||||
.nog{background:var(--rbg);color:var(--red)}
|
||||
.light{margin-top:12px;border-radius:20px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);padding:12px 14px}
|
||||
.light.am{border-left-color:var(--amber)}
|
||||
.light.rd{border-left-color:var(--red);background:var(--rbg);border-color:#F2A9A9}
|
||||
.light h4{display:flex;align-items:center;gap:6px;font-size:15px}
|
||||
.light h4 .ic{font-size:19px}
|
||||
.light ul{list-style:none;margin-top:6px}
|
||||
.light li{display:flex;gap:8px;padding:6px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.5}
|
||||
.light li:first-child{border-top:0}
|
||||
.light li b{flex:none;color:var(--ink);font-weight:700}
|
||||
.light.rd li{border-top-color:#F4C9C9;color:#8A4A4A}
|
||||
|
||||
/* 误区 */
|
||||
.myth{margin-top:12px;display:flex;gap:12px;align-items:center;padding:12px;border-radius:22px;background:#FFFBF2;border:1px solid #F5E6C8}
|
||||
.myth .mi{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:30px;background:#FCEFD2;color:#B7791F}
|
||||
.myth .mk{display:inline-block;font-size:11.5px;font-weight:700;color:#A0731E;background:#FCEFD2;border-radius:99px;padding:1px 8px}
|
||||
.myth b{display:block;margin-top:4px;font-size:15px;line-height:1.4}
|
||||
.myth p{font-size:12.5px;color:#7E6C50;margin-top:3px;line-height:1.55}
|
||||
|
||||
/* ⑤ 我的补剂自查 */
|
||||
.tool{margin-top:16px;padding:16px 14px;border-radius:24px;background:#fff;border:1px solid #FBE0D8;box-shadow:0 6px 24px rgba(194,24,91,.06)}
|
||||
.q{margin-top:14px}
|
||||
.q:first-child{margin-top:0}
|
||||
.q-t{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700}
|
||||
.q-t .ic{font-size:18px;color:var(--c)}
|
||||
.q-t small{font-weight:400;font-size:12px;color:var(--mute)}
|
||||
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
|
||||
.opt{padding:7px 13px;border-radius:99px;background:#FAF3F1;border:1.5px solid transparent;font-size:13.5px;color:#6A5452;white-space:nowrap;transition:all .2s}
|
||||
.opt.on{background:#FFEDE6;border-color:var(--c);color:var(--c);font-weight:700}
|
||||
.run{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;background:linear-gradient(90deg,var(--c),var(--c2));color:#fff;font-size:15.5px;font-weight:700;box-shadow:0 6px 16px rgba(232,71,111,.25)}
|
||||
.run .ic{font-size:19px}
|
||||
.run:disabled{opacity:.45;box-shadow:none}
|
||||
.hint{margin-top:8px;text-align:center;font-size:12px;color:var(--mute)}
|
||||
.res{display:none;margin-top:16px;padding-top:14px;border-top:1.5px dashed #F6D5CB}
|
||||
.res.on{display:block}
|
||||
.res-h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--deep)}
|
||||
.res-h .ic{font-size:21px}
|
||||
.res-sum{display:flex;gap:8px;margin-top:10px}
|
||||
.res-sum div{flex:1;padding:8px 4px;border-radius:14px;text-align:center;line-height:1.1}
|
||||
.res-sum em{display:block;font-style:normal;font-size:22px;font-weight:800}
|
||||
.res-sum span{display:block;margin-top:4px;font-size:11.5px;white-space:nowrap}
|
||||
.res ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px}
|
||||
.res li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:16px;background:#FAF7F6}
|
||||
.res li .li{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:18px}
|
||||
.res li b{display:block;font-size:14px;line-height:1.4}
|
||||
.res li span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.5}
|
||||
.res li.a{background:#FFF3F0}.res li.a .li{background:#FFE1D8;color:var(--c)}
|
||||
.res li.k{background:#F3FAF5}.res li.k .li{background:var(--gbg);color:var(--green)}
|
||||
.res li.t{background:#FFF9EC}.res li.t .li{background:#FFEBC2;color:#B7791F}
|
||||
.res-note{margin-top:10px;font-size:12px;color:var(--mute);line-height:1.55}
|
||||
.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%}
|
||||
.link .ic{font-size:18px}
|
||||
.link.ghost{background:#E7F5EC;color:var(--green)}
|
||||
|
||||
/* 来源 */
|
||||
.src{margin:32px 16px 0;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
|
||||
.src summary .ic{font-size:18px;color:var(--c)}
|
||||
.src summary::-webkit-details-marker{display:none}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12px;font-weight:400;color:var(--sub)}
|
||||
.src[open] summary::after{content:"收起"}
|
||||
.src ul{list-style:none;padding:0 16px 12px}
|
||||
.src li{padding:8px 0;border-top:1px dashed #F1E2DD;font-size:12.5px;color:#6A5452}
|
||||
.src li b{color:var(--ink);font-weight:600}
|
||||
.foot{margin:16px 20px 0;font-size:11.5px;color:#B09C98;text-align:center;line-height:1.7}
|
||||
|
||||
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 图标库:扁平双色(线条 + 同色浅面),统一 24 栅格 / 2px 圆角线条,用 <use href="#i-xxx"> 复用 -->
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs><style>.f{fill:currentColor;fill-opacity:.2;stroke:none}.s{fill:currentColor;stroke:none}</style></defs>
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-star" viewBox="0 0 24 24"><path class="f" d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/></symbol>
|
||||
<symbol id="i-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-fish" viewBox="0 0 24 24"><path class="f" d="M3 12c3-4.5 7-6 11-5 2.5.6 4.5 2.6 5.5 5-1 2.4-3 4.4-5.5 5-4 1-8-.5-11-5z"/><path d="M3 12c3-4.5 7-6 11-5 2.5.6 4.5 2.6 5.5 5-1 2.4-3 4.4-5.5 5-4 1-8-.5-11-5zM19.5 12L22 9.5v5zM9.5 9.5c1 1.5 1 3.5 0 5"/><circle class="s" cx="15.5" cy="11" r="1"/></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-milk" viewBox="0 0 24 24"><path class="f" d="M7 10.5h10V20a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"/><path d="M8.5 3h7M9 3v3l-2 3.5V20a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5L15 6V3M7 10.5h10"/></symbol>
|
||||
<symbol id="i-bone" viewBox="0 0 24 24"><path class="f" d="M8 8l8 8"/><path d="M7.5 9.5L14.5 16.5a2.5 2.5 0 1 0 3.5 2 2.5 2.5 0 1 0 2-3.5L13 8a2.5 2.5 0 1 0-3.5-2 2.5 2.5 0 1 0-2 3.5z"/></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-cal" viewBox="0 0 24 24"><rect class="f" x="3.5" y="5" width="17" height="15.5" rx="3"/><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M8 3v4M16 3v4M3.5 10h17M8 14h2M14 14h2M8 17h2"/></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-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-clinic" viewBox="0 0 24 24"><rect class="f" x="4" y="4" width="16" height="17" rx="3"/><rect x="4" y="4" width="16" height="17" rx="3"/><path d="M12 8.5v7M8.5 12h7"/></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-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-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-ask" viewBox="0 0 24 24"><path class="f" d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z"/><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5zM10 7.6a2 2 0 1 1 2.6 1.9c-.4.2-.6.5-.6 1v.5M12 12.8v.2"/></symbol>
|
||||
<symbol id="i-swap" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><path d="M5 8.5h12.5M14.5 5.5l3 3-3 3M19 15.5H6.5M9.5 12.5l-3 3 3 3"/></symbol>
|
||||
<symbol id="i-layers" viewBox="0 0 24 24"><path class="f" d="M12 3l9 4.5-9 4.5-9-4.5z"/><path d="M12 3l9 4.5-9 4.5-9-4.5zM3 12l9 4.5 9-4.5M3 16.5L12 21l9-4.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-twin" viewBox="0 0 24 24"><circle class="f" cx="8" cy="13" r="5"/><circle class="f" cx="16" cy="13" r="5"/><circle cx="8" cy="13" r="5"/><circle cx="16" cy="13" r="5"/><path d="M8 5.5v2M16 5.5v2"/></symbol>
|
||||
<symbol id="i-butterfly" viewBox="0 0 24 24"><path class="f" d="M12 9C10 4.5 3.5 4 3.5 8.5c0 3 3 4 5.5 4-2.5.5-4.5 2-3.5 4.5 1.3 2.8 5 1.5 6.5-3 1.5 4.5 5.2 5.8 6.5 3 1-2.5-1-4-3.5-4.5 2.5 0 5.5-1 5.5-4C20.5 4 14 4.5 12 9z"/><path d="M12 9C10 4.5 3.5 4 3.5 8.5c0 3 3 4 5.5 4-2.5.5-4.5 2-3.5 4.5 1.3 2.8 5 1.5 6.5-3 1.5 4.5 5.2 5.8 6.5 3 1-2.5-1-4-3.5-4.5 2.5 0 5.5-1 5.5-4C20.5 4 14 4.5 12 9zM12 9v9"/></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-heart" viewBox="0 0 24 24"><path class="f" d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z"/><path d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z"/></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-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-moon" viewBox="0 0 24 24"><path class="f" d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></symbol>
|
||||
<symbol id="i-meat" viewBox="0 0 24 24"><path class="f" d="M6 15c-3-3-1.5-9 4-10.5S20 6 19.5 11 13 19 9.5 17.5z"/><path d="M6 15c-3-3-1.5-9 4-10.5S20 6 19.5 11 13 19 9.5 17.5zM6 15l-2.5 3.5a1.5 1.5 0 1 0 2 2L9.5 17.5"/><circle cx="12.5" cy="10.5" r="2"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><rect class="f" x="5" y="4.5" width="14" height="16.5" rx="2.5"/><rect x="5" y="4.5" width="14" height="16.5" rx="2.5"/><path d="M9 4.5V3h6v1.5M8.5 10.5l1.5 1.5 2.5-2.5M14 11h2M8.5 16l1.5 1.5 2.5-2.5M14 16.5h2"/></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-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-cup" viewBox="0 0 24 24"><path class="f" d="M5 8h11v7a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z"/><path d="M5 8h11v7a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1.5 1 1.5 1 3M12 3.5c0 1.5 1 1.5 1 3"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
<header class="bar">
|
||||
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
|
||||
<span class="t">孕期专题</span>
|
||||
<span class="tag">孕期补剂</span>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈妈坐在窗边,桌上有牛奶、绿叶菜和鱼">
|
||||
<div class="cap">
|
||||
<h1>叶酸、DHA、铁、钙<br>要不要补?</h1>
|
||||
<p>要不要补 · 什么时候补 · 每天多少,3 分钟看懂</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心重点总览 -->
|
||||
<section class="core">
|
||||
<div class="core-h"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg><h2>先记住这 3 件事</h2><small>只看这里也够用</small></div>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div class="tx"><b>叶酸是唯一「人人都要补」的</b><span>备孕前 3 个月开始,至少吃到孕早期结束</span></div><div class="num"><em>0.4<small>mg</small></em><small>每天</small></div></li>
|
||||
<li><span class="no">2</span><div class="tx"><b>钙、铁、DHA 先靠吃</b><span>喝奶、吃鱼、吃红肉,吃不够再问医生</span></div><div class="num"><em>2~3<small>次</small></em><small>每周吃鱼</small></div></li>
|
||||
<li><span class="no">3</span><div class="tx"><b>补剂不是越多越好</b><span>复合维生素和单补别叠加,先算总量</span></div><div class="num"><em>先问</em><small>产检医生</small></div></li>
|
||||
</ol>
|
||||
<div class="core-ban"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg><b>钙和铁别一起吃<span>两者会「抢吸收」,建议错开 2 小时以上</span></b></div>
|
||||
</section>
|
||||
|
||||
<!-- 按孕周点亮对应阶段(拿不到身份就不显示) -->
|
||||
<div class="me" id="me">
|
||||
<div class="dot"><svg class="ic"><use id="meIc" href="#i-mom" xlink:href="#i-mom"/></svg></div>
|
||||
<div class="mt"><b id="meT"></b><span id="meD"></span></div>
|
||||
<button class="go" id="meGo">去看看</button>
|
||||
</div>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span>四种营养</button>
|
||||
<button data-go="s2"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg></span>按孕周补</button>
|
||||
<button data-go="s3"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-ask" xlink:href="#i-ask"/></svg></span>先问医生</button>
|
||||
<button data-go="s5"><span class="ib" style="background:#FFF1DE;color:#D9822B"><svg class="ic"><use href="#i-clip" xlink:href="#i-clip"/></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">叶酸要额外补;<mark>钙、铁、DHA 先从饮食里吃够</mark>,不够再按医生建议补。</div>
|
||||
<p class="sec-sub">每张卡都回答:要不要补、什么时候、每天多少、从哪吃、什么情况要多补</p>
|
||||
|
||||
<article class="nut fa fade" id="nFa">
|
||||
<div class="pic"><img src="img/greens.webp" alt="绿叶蔬菜、豆类和橙子" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></b>叶酸</span><span class="ans">要补</span></div>
|
||||
<div class="bd">
|
||||
<div class="concl">每天 0.4mg,<i>备孕前 3 个月就开始</i></div>
|
||||
<div class="nums">
|
||||
<div><em>0.4<small>mg</small></em><span>每天</span></div>
|
||||
<div><em>前 3<small>个月</small></em><span>备孕时开始</span></div>
|
||||
<div><em>全孕期</em><span>很多医生建议</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>什么时候</span><span class="v">备孕前 3 个月 → 至少到孕 12 周;很多医生建议一直吃到整个孕期</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>
|
||||
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>生过神经管缺陷宝宝、有糖尿病或长期吃某些药:剂量要医生定,可能需要加量</span></div>
|
||||
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>宝宝的神经管在怀孕后 3~4 周就闭合了,那时很多人还不知道怀孕。食物里的叶酸怕热、易流失,光靠吃很难稳定吃够,所以要提前额外补。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="nut dh fade" id="nDh">
|
||||
<div class="pic"><img src="img/fish.webp" alt="清蒸三文鱼和鸡蛋" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></b>DHA</span><span class="ans">吃鱼够就不用</span></div>
|
||||
<div class="bd">
|
||||
<div class="concl">每周吃 2~3 次低汞鱼,<i>通常就够了</i></div>
|
||||
<div class="nums">
|
||||
<div><em>2~3<small>次</small></em><span>每周吃鱼</span></div>
|
||||
<div><em>200<small>mg</small></em><span>DHA 每天</span></div>
|
||||
<div><em>孕中晚期</em><span>需要最多</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></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-ban" xlink:href="#i-ban"/></svg>少吃</span><span class="v">鲨鱼、旗鱼、方头鱼、大眼金枪鱼等大型掠食鱼(汞高)</span></div>
|
||||
</div>
|
||||
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>不吃鱼、素食:问医生是否需要补 DHA(有藻油来源的可选)</span></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 是宝宝大脑和视网膜的「建筑材料」,孕晚期积累最快。鱼肉同时还给蛋白质、碘和维 D,比单吃补剂更全面。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="nut fe fade" id="nFe">
|
||||
<div class="pic"><img src="img/iron.webp" alt="瘦牛肉、动物肝脏、绿叶菜和橙子" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></b>铁</span><span class="ans">先食补</span></div>
|
||||
<div class="bd">
|
||||
<div class="concl">孕中晚期需要量变大,<i>查出贫血按医生开</i></div>
|
||||
<div class="nums">
|
||||
<div><em>20<small>mg</small></em><span>孕早期每天</span></div>
|
||||
<div><em>24<small>mg</small></em><span>孕中期每天</span></div>
|
||||
<div><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-meat" xlink:href="#i-meat"/></svg>食物来源</span><span class="v pills"><span class="pill">牛羊瘦肉</span><span class="pill">动物血</span><span class="pill">肝脏<small>每周 1~2 次少量</small></span></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg>搭配</span><span class="v">同餐吃点橙子、猕猴桃、番茄等维 C 果蔬,铁吸收更好;饭后别马上喝浓茶、咖啡</span></div>
|
||||
</div>
|
||||
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>产检血常规显示贫血、或铁储备低:按医生开的铁剂和剂量吃,别自己加量</span></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>
|
||||
|
||||
<article class="nut ca fade" id="nCa">
|
||||
<div class="pic"><img src="img/milk.webp" alt="牛奶、豆腐、酸奶和奶酪" loading="lazy"><span class="badge"><b><svg class="ic"><use href="#i-bone" xlink:href="#i-bone"/></svg></b>钙</span><span class="ans">先食补</span></div>
|
||||
<div class="bd">
|
||||
<div class="concl">孕中晚期每天约 1000mg,<i>奶喝够是关键</i></div>
|
||||
<div class="nums">
|
||||
<div><em>约1000<small>mg</small></em><span>孕中晚期每天</span></div>
|
||||
<div><em>300~500<small>ml</small></em><span>奶 / 酸奶每天</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-milk" xlink:href="#i-milk"/></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 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">孕中期起需要量增加,一直持续到哺乳期</span></div>
|
||||
</div>
|
||||
<div class="extra"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg><span>不喝奶、乳糖不耐受、饮食钙明显不够:问医生是否需要补钙</span></div>
|
||||
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>宝宝骨骼在孕中晚期快速钙化,钙不够时会「借」妈妈骨头里的钙。每天 500ml 奶大约就有 500mg 钙,再加豆制品和蔬菜,多数人能吃够。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="link-wrap fade"><button class="link" id="goBushui1"><svg class="ic"><use href="#i-cup" xlink:href="#i-cup"/></svg>每天吃了没?去记录补剂<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button></div>
|
||||
</section>
|
||||
|
||||
<!-- ② 按孕周时间轴 -->
|
||||
<section class="sec" id="s2">
|
||||
<div class="sec-h"><span class="n">2</span><h2>按孕周看:现在该补什么</h2></div>
|
||||
<div class="sec-key">早期抓<mark>叶酸</mark>,中晚期加上<mark>钙、铁、DHA</mark>,哺乳期继续吃好。</div>
|
||||
<p class="sec-sub">从上往下就是孕产全程,找到你现在的那一段</p>
|
||||
|
||||
<div class="tl">
|
||||
<div class="phase"><span class="node" style="background:#F4593C"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg></span><b>备孕</b><span>怀孕前 3 个月起</span></div>
|
||||
<article class="stage fade" id="stPre"><div class="bd">
|
||||
<div class="concl">开始吃叶酸,<i>先查个血</i></div>
|
||||
<div class="chips">
|
||||
<div class="chip"><span class="nm n-fa">叶酸</span>每天 0.4mg,现在就开始</div>
|
||||
<div class="chip"><span class="nm n-ot">体检</span>查血常规、甲状腺功能,有问题先调好</div>
|
||||
<div class="chip"><span class="nm n-ot">碘</span>日常用加碘盐</div>
|
||||
</div>
|
||||
</div></article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#E8476F"><svg class="ic"><use href="#i-sprout" xlink:href="#i-sprout"/></svg></span><b>孕早期</b><span>1~12 周</span></div>
|
||||
<article class="stage fade" id="stE"><div class="bd">
|
||||
<div class="concl">叶酸一天不落,<i>吐得厉害别硬吃</i></div>
|
||||
<div class="chips">
|
||||
<div class="chip"><span class="nm n-fa">叶酸</span>继续每天 0.4mg,关键窗口</div>
|
||||
<div class="chip"><span class="nm n-ca">钙</span>需要量还没增加,正常喝奶即可</div>
|
||||
<div class="chip"><span class="nm n-ot">孕吐</span>补剂吃了就吐,换个时间或问医生</div>
|
||||
</div>
|
||||
</div></article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#C2185B"><svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg></span><b>孕中期</b><span>13~27 周</span></div>
|
||||
<article class="stage fade" id="stM"><div class="bd">
|
||||
<div class="concl">钙、铁需要量上来,<i>饭桌先跟上</i></div>
|
||||
<div class="chips">
|
||||
<div class="chip"><span class="nm n-ca">钙</span>约 1000mg/天,奶加到 300~500ml</div>
|
||||
<div class="chip"><span class="nm n-fe">铁</span>约 24mg/天,每周有红肉</div>
|
||||
<div class="chip"><span class="nm n-dh">DHA</span>每周 2~3 次低汞鱼</div>
|
||||
<div class="chip"><span class="nm n-fa">叶酸</span>多数医生建议继续吃</div>
|
||||
</div>
|
||||
</div></article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#A23B8E"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><b>孕晚期</b><span>28 周~分娩</span></div>
|
||||
<article class="stage fade" id="stL"><div class="bd">
|
||||
<div class="concl">铁需要最多,<i>留意产检贫血指标</i></div>
|
||||
<div class="chips">
|
||||
<div class="chip"><span class="nm n-fe">铁</span>约 29mg/天,贫血按医生开</div>
|
||||
<div class="chip"><span class="nm n-ca">钙</span>约 1000mg/天,奶和豆制品不能断</div>
|
||||
<div class="chip"><span class="nm n-dh">DHA</span>宝宝大脑积累最快,鱼继续吃</div>
|
||||
</div>
|
||||
</div></article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#8E6BB8"><svg class="ic"><use href="#i-moon" xlink:href="#i-moon"/></svg></span><b>哺乳期</b><span>产后</span></div>
|
||||
<article class="stage fade" id="stB"><div class="bd">
|
||||
<div class="concl">妈妈吃好,<i>营养跟着进奶水</i></div>
|
||||
<div class="chips">
|
||||
<div class="chip"><span class="nm n-ca">钙</span>继续每天喝奶,需要量和孕晚期相近</div>
|
||||
<div class="chip"><span class="nm n-dh">DHA</span>继续每周吃鱼,奶水里的 DHA 跟着妈妈饮食走</div>
|
||||
<div class="chip"><span class="nm n-fe">铁</span>产后失血多的,复查血常规</div>
|
||||
<div class="chip"><span class="nm n-fa">叶酸</span>是否继续吃,问医生</div>
|
||||
</div>
|
||||
</div></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ③ 先问医生 -->
|
||||
<section class="sec" id="s3">
|
||||
<div class="sec-h"><span class="n">3</span><h2>这些情况,先问医生</h2></div>
|
||||
<div class="sec-key">下面任一条符合,<mark>补什么、补多少都要医生定</mark>,别照通用量。</div>
|
||||
|
||||
<div class="doc fade">
|
||||
<img src="img/doctor.webp" alt="孕妈妈和医生面对面交谈" loading="lazy">
|
||||
<div class="tx">
|
||||
<span class="pre"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>产检时带着问</span>
|
||||
<h3>通用推荐量只适合「一般情况」</h3>
|
||||
<div class="asks">
|
||||
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span><div><b>贫血</b><span>铁剂和剂量按医生开</span></div></div>
|
||||
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-butterfly" xlink:href="#i-butterfly"/></svg></span><div><b>甲状腺问题</b><span>碘怎么吃、药和钙铁怎么错开</span></div></div>
|
||||
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><div><b>素食 / 不吃鱼</b><span>铁、DHA、维生素 B12 易缺</span></div></div>
|
||||
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-twin" xlink:href="#i-twin"/></svg></span><div><b>双胎或多胎</b><span>需要量更高</span></div></div>
|
||||
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><div><b>生过神经管缺陷宝宝</b><span>叶酸剂量要医生定</span></div></div>
|
||||
<div class="ask"><span class="ai"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg></span><div><b>糖尿病、癫痫等</b><span>长期用药者先问</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ④ 红绿灯速查 + 误区 -->
|
||||
<section class="sec" id="s4">
|
||||
<div class="sec-h"><span class="n">4</span><h2>速查:这样补对不对</h2></div>
|
||||
<div class="sec-key">绿灯放心做,橙灯先问医生,<mark>红灯别这样补</mark>。</div>
|
||||
<div class="legend"><span class="ok"><i></i>放心做</span><span class="warn"><i></i>先问医生</span><span class="nog"><i></i>别这样</span></div>
|
||||
|
||||
<div class="light fade">
|
||||
<h4 style="color:var(--green)"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg>放心做</h4>
|
||||
<ul>
|
||||
<li><b>叶酸</b>每天 0.4mg,从备孕吃起</li>
|
||||
<li><b>喝奶</b>每天 300~500ml 奶或酸奶</li>
|
||||
<li><b>吃鱼</b>每周 2~3 次低汞鱼</li>
|
||||
<li><b>红肉</b>每天适量瘦肉,配维 C 果蔬</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="light am fade">
|
||||
<h4 style="color:var(--amber)"><svg class="ic"><use href="#i-ask" xlink:href="#i-ask"/></svg>先问医生</h4>
|
||||
<ul>
|
||||
<li><b>铁剂</b>查过血常规再决定吃不吃、吃多少</li>
|
||||
<li><b>钙片</b>奶喝不够才考虑,问清剂量</li>
|
||||
<li><b>DHA 补剂</b>不吃鱼时再考虑</li>
|
||||
<li><b>复合维生素</b>和单补同时吃前,先算总量</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="light rd fade">
|
||||
<h4 style="color:var(--red)"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg>别这样</h4>
|
||||
<ul>
|
||||
<li><b>自己加倍</b>觉得「多吃点更保险」擅自加量</li>
|
||||
<li><b>高汞鱼</b>鲨鱼、旗鱼、方头鱼、大眼金枪鱼</li>
|
||||
<li><b>大剂量维 A</b>额外补维 A、天天大量吃动物肝脏</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-layers" xlink:href="#i-layers"/></svg></span><div><span class="mk">误区 1</span><b>补剂越多越好</b><p>多数营养够了就够了,超量反而有风险(如维 A、碘、铁过量)。缺什么补什么。</p></div></div>
|
||||
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg></span><div><span class="mk">误区 2</span><b>钙片和铁剂一起吃省事</b><p>钙会妨碍铁吸收。建议错开 2 小时以上,比如铁随早餐、钙放晚饭后或睡前。</p></div></div>
|
||||
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg></span><div><span class="mk">误区 3</span><b>复合维生素 + 单补,双保险</b><p>复合维生素里常已含叶酸、铁、钙,再单补容易叠加超量。看标签算总量,拿给医生看。</p></div></div>
|
||||
<div class="myth fade"><span class="mi"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><div><span class="mk">误区 4</span><b>吃了叶酸,就不用吃绿叶菜</b><p>绿叶菜还提供膳食纤维、维 C、钾、镁,补剂替代不了。每天蔬菜里一半是深色的更好。</p></div></div>
|
||||
</section>
|
||||
|
||||
<!-- ⑤ 我的补剂自查 -->
|
||||
<section class="sec" id="s5">
|
||||
<div class="sec-h"><span class="n">5</span><h2>我的补剂自查</h2></div>
|
||||
<div class="sec-key">选 4 个问题,<mark>生成一份带去产检问医生的清单</mark>。</div>
|
||||
<p class="sec-sub">只在本机计算,不上传;结果是提问参考,不是处方</p>
|
||||
|
||||
<div class="tool fade" id="tool">
|
||||
<div class="q" data-q="stage">
|
||||
<div class="q-t"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>我现在处于</div>
|
||||
<div class="opts">
|
||||
<button class="opt" data-v="pre">备孕</button><button class="opt" data-v="e">孕早期</button><button class="opt" data-v="m">孕中期</button><button class="opt" data-v="l">孕晚期</button><button class="opt" data-v="b">哺乳期</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q" data-q="milk">
|
||||
<div class="q-t"><svg class="ic"><use href="#i-milk" xlink:href="#i-milk"/></svg>每天喝奶(或酸奶)吗</div>
|
||||
<div class="opts"><button class="opt" data-v="2">每天 1~2 杯</button><button class="opt" data-v="1">偶尔喝</button><button class="opt" data-v="0">基本不喝</button></div>
|
||||
</div>
|
||||
<div class="q" data-q="fish">
|
||||
<div class="q-t"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg>每周吃鱼虾几次</div>
|
||||
<div class="opts"><button class="opt" data-v="2">2 次以上</button><button class="opt" data-v="1">1 次左右</button><button class="opt" data-v="0">几乎不吃</button></div>
|
||||
</div>
|
||||
<div class="q" data-q="meat">
|
||||
<div class="q-t"><svg class="ic"><use href="#i-meat" xlink:href="#i-meat"/></svg>吃红肉(猪牛羊瘦肉)吗</div>
|
||||
<div class="opts"><button class="opt" data-v="2">经常吃</button><button class="opt" data-v="1">偶尔吃</button><button class="opt" data-v="0">不吃 / 素食</button></div>
|
||||
</div>
|
||||
<div class="q" data-q="sp" data-multi="1">
|
||||
<div class="q-t"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>有这些情况吗<small>可多选,可不选</small></div>
|
||||
<div class="opts"><button class="opt" data-v="anemia">贫血</button><button class="opt" data-v="thy">甲状腺问题</button><button class="opt" data-v="twin">双胎 / 多胎</button><button class="opt" data-v="ntd">生过神经管缺陷宝宝</button><button class="opt" data-v="multi">在吃复合维生素</button></div>
|
||||
</div>
|
||||
<button class="run" id="run" disabled><svg class="ic"><use href="#i-clip" xlink:href="#i-clip"/></svg>生成我的建议清单</button>
|
||||
<p class="hint" id="hint">前 4 题选完就能生成</p>
|
||||
|
||||
<div class="res" id="res">
|
||||
<div class="res-h"><svg class="ic"><use href="#i-clip" xlink:href="#i-clip"/></svg><span id="resT">我的补剂清单</span></div>
|
||||
<div class="res-sum">
|
||||
<div style="background:#FFF3F0;color:var(--c)"><em id="cA">0</em><span>建议问医生</span></div>
|
||||
<div style="background:#F3FAF5;color:var(--green)"><em id="cK">0</em><span>继续保持</span></div>
|
||||
<div style="background:#FFF9EC;color:#B7791F"><em id="cT">0</em><span>小提醒</span></div>
|
||||
</div>
|
||||
<ul id="resL"></ul>
|
||||
<p class="res-note">清单按通用推荐量给出,个人情况不同,补什么、补多少请以产检医生意见为准。</p>
|
||||
<button class="link" id="goBushui2"><svg class="ic"><use href="#i-cup" xlink:href="#i-cup"/></svg>去「补水补剂」每天打卡<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details class="src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>循证来源与说明</summary>
|
||||
<ul>
|
||||
<li><b>叶酸:</b>《围受孕期增补叶酸预防神经管缺陷指南(2017)》:无高危因素的妇女从可能怀孕或孕前至少 3 个月开始,每天增补 0.4mg 或 0.8mg 叶酸至孕满 3 个月;有神经管缺陷生育史等高危因素者由医生确定剂量。多项研究汇总显示,围孕期增补叶酸可使神经管缺陷风险降低约 50%~70%</li>
|
||||
<li><b>钙、铁、DHA、膳食搭配:</b>《中国居民膳食指南(2022)》备孕和孕期妇女膳食指南;《中国居民膳食营养素参考摄入量》(孕期铁推荐量孕早、中、晚期分别约 20、24、29mg/天)。中国营养学会建议孕期和哺乳期 DHA 摄入约 200mg/天</li>
|
||||
<li><b>孕期贫血:</b>中华医学会围产医学分会《妊娠期铁缺乏和缺铁性贫血诊治指南》:诊断缺铁或贫血后按医生方案补铁</li>
|
||||
<li><b>国际建议:</b>WHO《孕期保健建议:积极的妊娠体验》(2016):推荐孕期每日补充铁和叶酸,低钙摄入人群补钙;具体方案因地区和个人情况而异</li>
|
||||
<li><b>钙与铁:</b>钙会影响非血红素铁的吸收,同时补充时建议分开服用</li>
|
||||
<li><b>鱼与汞:</b>各国孕期食鱼建议均提示选择低汞鱼、避开大型掠食性鱼类</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p class="foot">本页为科普参考,不能代替医生诊断。<br>孕期补充任何营养素前,请咨询产检医生或营养科医生。</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
var $ = function (s) { return document.querySelector(s); };
|
||||
var $$ = function (s, r) { return [].slice.call((r || document).querySelectorAll(s)); };
|
||||
function hp(n) { var h = (location.hash.slice(1) || '') + '&' + (location.search.slice(1) || ''); var m = h.match(new RegExp('(?:^|&)' + n + '=([^&]*)')); return m ? decodeURIComponent(m[1]) : ''; }
|
||||
var openid = hp('openid');
|
||||
var sc = $('#scroll');
|
||||
|
||||
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份 hash 原样带回 */
|
||||
$('#back').addEventListener('click', function () {
|
||||
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
|
||||
else location.href = '../../' + location.search + location.hash;
|
||||
});
|
||||
|
||||
function go(id) {
|
||||
var el = document.getElementById(id); if (!el) return;
|
||||
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 56;
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
$$('[data-go]').forEach(function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
|
||||
|
||||
/* 补水补剂记录:同源相对路径,带身份 */
|
||||
function goBushui() { location.href = '/yunqi-bushui/yindao/' + location.search + location.hash; }
|
||||
$('#goBushui1').addEventListener('click', goBushui);
|
||||
$('#goBushui2').addEventListener('click', goBushui);
|
||||
|
||||
/* ---------- 我的补剂自查 ---------- */
|
||||
var ans = { stage: '', milk: '', fish: '', meat: '', sp: {} };
|
||||
function pick(q, v) {
|
||||
var box = $('.q[data-q="' + q + '"]');
|
||||
$$('.opt', box).forEach(function (o) { o.classList.toggle('on', o.dataset.v === v); });
|
||||
ans[q] = v; check();
|
||||
}
|
||||
function check() {
|
||||
var ok = ans.stage && ans.milk && ans.fish && ans.meat;
|
||||
$('#run').disabled = !ok;
|
||||
$('#hint').style.display = ok ? 'none' : '';
|
||||
}
|
||||
$$('.q').forEach(function (box) {
|
||||
var q = box.dataset.q, multi = box.dataset.multi;
|
||||
$$('.opt', box).forEach(function (o) {
|
||||
o.addEventListener('click', function () {
|
||||
if (multi) { var on = !o.classList.contains('on'); o.classList.toggle('on', on); if (on) ans.sp[o.dataset.v] = 1; else delete ans.sp[o.dataset.v]; }
|
||||
else pick(q, o.dataset.v);
|
||||
if ($('#res').classList.contains('on')) build();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var IC = { a: 'ask', k: 'check', t: 'bulb' };
|
||||
function build() {
|
||||
var s = ans.stage, milk = +ans.milk, fish = +ans.fish, meat = +ans.meat, sp = ans.sp;
|
||||
var preg = s === 'e' || s === 'm' || s === 'l', later = s === 'm' || s === 'l' || s === 'b';
|
||||
var L = [];
|
||||
function add(t, b, d) { L.push({ t: t, b: b, d: d }); }
|
||||
|
||||
/* 叶酸 */
|
||||
if (sp.ntd) add('a', '建议问医生:叶酸该吃多大剂量', '生过神经管缺陷宝宝属于高危,剂量通常要医生另定,别只按 0.4mg 吃');
|
||||
else if (s === 'pre' || s === 'e') add('a', '建议问医生:每天 0.4mg 叶酸是否已经吃上', s === 'pre' ? '备孕前 3 个月开始是关键窗口' : '孕早期是神经管发育关键期,一天别落下');
|
||||
else if (preg) add('k', '叶酸:如果在吃,按医生建议继续', '很多医生建议吃到整个孕期');
|
||||
else add('a', '建议问医生:哺乳期是否还需要继续补叶酸', '有的医生会建议继续或换成哺乳期配方');
|
||||
|
||||
/* 钙 */
|
||||
if (milk === 0) add('a', '建议问医生:是否需要补钙', later ? '你基本不喝奶,孕中晚期和哺乳期每天约需 1000mg 钙,饮食可能不够' : '你基本不喝奶,先试试酸奶、奶酪、豆腐;孕中期起需要量会增加');
|
||||
else if (milk === 1 && later) add('a', '建议问医生:饮食钙是否够,要不要补钙', '偶尔喝奶时钙容易不足,先试着每天 300~500ml 奶或酸奶');
|
||||
else if (milk === 1) add('t', '钙:试着每天喝 1 杯奶', '孕中期起需要量会增加,现在养成习惯正好');
|
||||
else add('k', '钙:奶喝得够,一般食补即可', '再加点豆腐、深绿叶菜就更稳');
|
||||
|
||||
/* DHA */
|
||||
if (fish === 0) add('a', '建议问医生:是否需要额外补 DHA', '几乎不吃鱼虾时 DHA 容易不足,可问问藻油来源的补充');
|
||||
else if (fish === 1) add('t', 'DHA:试着加到每周 2~3 次低汞鱼', '做不到再问医生是否需要补 DHA');
|
||||
else add('k', 'DHA:每周 2 次以上吃鱼,通常就够了', '记得选三文鱼、鳕鱼、鲈鱼等低汞鱼');
|
||||
|
||||
/* 铁 */
|
||||
if (sp.anemia) add('a', '建议问医生:铁剂怎么吃、吃多久', '已经贫血要按医生方案吃,定期复查血常规,别自己加量');
|
||||
else if (meat === 0) add('a', '建议问医生:是否需要查血常规、补铁', '不吃红肉时铁很容易不够,植物里的铁吸收率低');
|
||||
else if (meat === 1 && later) add('a', '建议问医生:产检时看看铁够不够', '孕中晚期铁需要量明显增加,偶尔吃红肉可能不够');
|
||||
else if (meat === 1) add('t', '铁:每周多安排几次瘦肉', '同餐配维 C 果蔬,吸收更好');
|
||||
else add('k', '铁:常吃红肉,先食补就好', '按时做产检血常规就行');
|
||||
|
||||
/* 素食额外 */
|
||||
if (meat === 0 && fish === 0) add('a', '建议问医生:是否需要补维生素 B12', '不吃肉和鱼时 B12 几乎吃不到,它关系到宝宝神经发育');
|
||||
|
||||
/* 特殊情况 */
|
||||
if (sp.thy) add('a', '建议问医生:碘怎么吃,药和钙铁怎么错开', '甲状腺药物通常要和钙、铁错开几个小时吃');
|
||||
if (sp.twin) add('a', '建议问医生:双胎是否需要增加叶酸、铁、钙', '双胎多胎需要量更高,常需要个体化方案');
|
||||
if (sp.multi) add('t', '复合维生素:先看标签算总量', '已含叶酸、铁、钙的,别再叠加同样的单补;把标签拿给医生看');
|
||||
|
||||
/* 通用提醒 */
|
||||
add('t', '钙和铁错开 2 小时以上吃', '比如铁随早餐、钙放晚饭后或睡前');
|
||||
|
||||
var order = { a: 0, t: 1, k: 2 };
|
||||
L.sort(function (x, y) { return order[x.t] - order[y.t]; });
|
||||
var c = { a: 0, k: 0, t: 0 };
|
||||
var ul = $('#resL'); ul.innerHTML = '';
|
||||
L.forEach(function (it) {
|
||||
c[it.t]++;
|
||||
var li = document.createElement('li'); li.className = it.t;
|
||||
li.innerHTML = '<span class="li"><svg class="ic"><use href="#i-' + IC[it.t] + '" xlink:href="#i-' + IC[it.t] + '"/></svg></span><div><b></b><span></span></div>';
|
||||
li.querySelector('b').textContent = it.b; li.querySelector('div span').textContent = it.d;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
$('#cA').textContent = c.a; $('#cK').textContent = c.k; $('#cT').textContent = c.t;
|
||||
var nm = { pre: '备孕', e: '孕早期', m: '孕中期', l: '孕晚期', b: '哺乳期' }[s];
|
||||
$('#resT').textContent = nm + ' · 我的补剂清单';
|
||||
$('#res').classList.add('on');
|
||||
}
|
||||
$('#run').addEventListener('click', function () {
|
||||
build();
|
||||
setTimeout(function () { go('res'); }, 60);
|
||||
});
|
||||
|
||||
/* 按孕周点亮时间轴,并预选自查的阶段 */
|
||||
function mark(stage, ic, t, d, pickV) {
|
||||
var el = document.getElementById(stage); if (el) el.classList.add('hl');
|
||||
var u = $('#meIc'), ref = '#i-' + ic;
|
||||
u.setAttribute('href', ref); u.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', ref);
|
||||
$('#meT').textContent = t; $('#meD').textContent = d;
|
||||
$('#meGo').onclick = function () { go(stage); };
|
||||
$('#me').classList.add('on');
|
||||
if (pickV && !ans.stage) pick('stage', pickV);
|
||||
}
|
||||
if (openid) {
|
||||
fetch('/api/mp/public/mama-box/pregnancy?openid=' + encodeURIComponent(openid))
|
||||
.then(function (r) { return r.ok ? r.json() : null; })
|
||||
.then(function (j) {
|
||||
var p = j && j.code === 200 && j.result; if (!p) return;
|
||||
if (p.postpartum) mark('stB', 'moon', '宝宝出生了,看看哺乳期怎么吃', '钙和 DHA 继续靠喝奶、吃鱼', 'b');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w >= 28) mark('stL', 'baby', '孕 ' + w + ' 周 · 铁需要量最大', '留意产检贫血指标,钙和鱼别断', 'l');
|
||||
else if (w >= 13) mark('stM', 'mom', '孕 ' + w + ' 周 · 钙铁需要量上来了', '奶加到 300~500ml,每周吃鱼 2~3 次', 'm');
|
||||
else mark('stE', 'sprout', '孕 ' + w + ' 周 · 叶酸关键期', '每天 0.4mg,一天别落下', 'e');
|
||||
}
|
||||
}).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 });
|
||||
$$('.fade').forEach(function (el) { io.observe(el); });
|
||||
} else $$('.fade').forEach(function (el) { el.classList.add('in'); });
|
||||
|
||||
/* 禁止下拉回弹:固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
var y0 = 0;
|
||||
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
|
||||
sc.addEventListener('touchmove', function (e) {
|
||||
var dy = e.touches[0].clientY - y0;
|
||||
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) e.preventDefault();
|
||||
}, { passive: false });
|
||||
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user