6个专题页重设计：清新简洁一句话答案；测一测扩到16题；生娃计算器改7步选择+生下来/1/2/3岁分阶段花费
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -5,567 +5,258 @@
|
||||
<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。 -->
|
||||
<!-- 孕期专题 · 孕期补剂（孕期首页「其他妈妈也在搜」第 4 条）。
|
||||
2026-10-31 按 /tmp/pl/topic-spec.md v2 重做：清新、简洁、核心明确；主色 #2E7CF6。
|
||||
只写营养成分，不写品牌和药品名；百分比只出现在页底来源。
|
||||
自成一页：不引 app.js；返回回 ../../；跳补水补剂走同源 /yunqi-bushui/yindao/，带 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}
|
||||
:root{--c:#2E7CF6;--cb:#EAF2FF;--h:#1F2329;--t:#4E5969;--s:#86909C;--bg2:#F7F8FA;--ln:#EEF0F3}
|
||||
*{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;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}
|
||||
b{color:var(--h)}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.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}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:transparent;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.on{background:#fff;border-bottom-color:var(--ln)}
|
||||
.bar .back{width:36px;height:36px;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:26px;line-height:1.25;color:var(--deep);letter-spacing:.5px}
|
||||
.hero p{margin-top:4px;font-size:13px;color:var(--sub)}
|
||||
/* Hero */
|
||||
.hero{padding:4px 16px 0}
|
||||
.hero img{width:100%;height:180px;object-fit:cover;border-radius:20px;background:var(--cb)}
|
||||
.hero h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.answer{margin-top:14px;padding:13px 14px 13px 16px;border-radius:14px;background:var(--cb);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
|
||||
/* 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}
|
||||
/* 区块通用 */
|
||||
.blk{margin:32px 16px 0}
|
||||
.blk h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--h)}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c)}
|
||||
.card{margin-top:12px;background:#fff;border:1px solid var(--ln);border-radius:18px}
|
||||
|
||||
/* 个性化：按孕周提示 */
|
||||
.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}
|
||||
/* 记住这 3 点 */
|
||||
.three{margin:28px 16px 0;padding:16px;border-radius:18px;background:var(--bg2)}
|
||||
.three h2{font-size:18px;font-weight:700;color:var(--h)}
|
||||
.three ol{list-style:none;margin-top:6px}
|
||||
.three li{display:flex;gap:14px;align-items:flex-start;padding:10px 0}
|
||||
.three li+li{border-top:1px solid var(--ln)}
|
||||
.three .no{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}
|
||||
.three b{display:block;font-size:16px;line-height:1.45}
|
||||
.three span{display:block;font-size:13px;color:var(--s);line-height:1.6}
|
||||
|
||||
/* 目录 */
|
||||
.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}
|
||||
/* 1 对照表 */
|
||||
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.5;table-layout:fixed}
|
||||
.tbl th{padding:10px 8px;text-align:left;font-size:12.5px;font-weight:500;color:var(--s);background:var(--bg2)}
|
||||
.tbl th:first-child{border-top-left-radius:17px}
|
||||
.tbl th:last-child{border-top-right-radius:17px}
|
||||
.tbl td{padding:11px 8px;border-top:1px solid var(--ln);vertical-align:top;color:var(--t)}
|
||||
.tbl td:first-child{font-weight:700;color:var(--h)}
|
||||
.tbl .y{color:var(--c);font-weight:700}
|
||||
.tbl col.c1{width:15%}.tbl col.c2{width:24%}.tbl col.c3{width:26%}
|
||||
.why{margin-top:10px}
|
||||
.why summary{list-style:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--c);cursor:pointer}
|
||||
.why summary::-webkit-details-marker{display:none}
|
||||
.why summary .ic{width:16px;height:16px;transition:transform .2s}
|
||||
.why[open] summary .ic{transform:rotate(180deg)}
|
||||
.why p{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--t)}
|
||||
|
||||
/* 段标题 + 段落重点结论 */
|
||||
.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)}
|
||||
/* 2 横向时间轴 */
|
||||
.me{display:none;margin-top:10px;font-size:12.5px;color:var(--c);background:var(--cb);border-radius:99px;padding:4px 12px;width:max-content;max-width:100%}
|
||||
.me.on{display:block}
|
||||
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
|
||||
.tl::before{content:"";position:absolute;left:12%;right:12%;top:7px;height:2px;background:var(--ln)}
|
||||
.st{position:relative;text-align:center}
|
||||
.st .dot{position:relative;display:block;width:16px;height:16px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid #D5DAE1}
|
||||
.st b{display:block;margin-top:8px;font-size:13.5px;line-height:1.35;white-space:nowrap;letter-spacing:-.2px}
|
||||
.st p{margin-top:4px;padding:8px 6px;border-radius:12px;background:var(--bg2);font-size:12.5px;line-height:1.5;color:var(--t);min-height:62px}
|
||||
.st.hl .dot{border-color:var(--c);background:var(--c);box-shadow:0 0 0 4px var(--cb)}
|
||||
.st.hl b{color:var(--c)}
|
||||
.st.hl p{background:var(--cb);color:var(--h)}
|
||||
|
||||
/* ① 四种营养大卡 */
|
||||
.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}
|
||||
/* 3 标签云 */
|
||||
.doc{display:flex;gap:12px;align-items:center;margin-top:12px}
|
||||
.doc img{flex:none;width:76px;height:76px;border-radius:16px;object-fit:cover}
|
||||
.doc p{font-size:14px;color:var(--t);line-height:1.65}
|
||||
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
|
||||
.tags span{font-size:13.5px;line-height:1.4;padding:6px 12px;border-radius:99px;background:var(--bg2);color:var(--h);white-space:nowrap}
|
||||
|
||||
/* ② 按孕周时间轴 */
|
||||
.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)}
|
||||
/* 自查 */
|
||||
.tool{padding:16px 14px}
|
||||
.q+.q{margin-top:14px}
|
||||
.q-t{font-size:14.5px;font-weight:700;color:var(--h)}
|
||||
.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}
|
||||
.opt{padding:6px 13px;border-radius:99px;background:var(--bg2);border:1px solid transparent;font-size:13.5px;line-height:1.5;color:var(--t);white-space:nowrap;transition:all .15s}
|
||||
.opt.on{background:var(--cb);border-color:var(--c);color:var(--c);font-weight:600}
|
||||
.hint{margin-top:14px;font-size:12.5px;color:var(--s)}
|
||||
.res{display:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--ln)}
|
||||
.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)}
|
||||
.res h3{font-size:15px;font-weight:700;color:var(--h)}
|
||||
.res ul{list-style:none;margin-top:6px}
|
||||
.res li{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
|
||||
.res li i{flex:none;margin-top:2px;font-style:normal;font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;white-space:nowrap;min-width:52px;text-align:center;background:var(--bg2);color:var(--s)}
|
||||
.res li.a i{background:var(--c);color:#fff}
|
||||
.res li.t i{background:var(--cb);color:var(--c)}
|
||||
.res li b{display:block;font-size:14px;line-height:1.5}
|
||||
.res li span{display:block;font-size:12.5px;color:var(--s);line-height:1.55}
|
||||
.res-note{margin-top:6px;font-size:12px;color:var(--s)}
|
||||
|
||||
/* 工具入口 */
|
||||
.go{display:flex;gap:12px;align-items:center;padding:14px}
|
||||
.go .gi{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--cb);color:var(--c)}
|
||||
.go .gi .ic{width:22px;height:22px}
|
||||
.go .gt{flex:1;min-width:0}
|
||||
.go b{display:block;font-size:15px;line-height:1.4}
|
||||
.go span{display:block;font-size:12.5px;color:var(--s);line-height:1.5}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;background:var(--c);color:#fff;font-size:15.5px;font-weight:600}
|
||||
.btn .ic{width:18px;height:18px}
|
||||
.go-wrap{padding:0 14px 14px}
|
||||
|
||||
/* 来源 */
|
||||
.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:32px 16px 0;border-radius:18px;background:var(--bg2)}
|
||||
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--h);display:flex;align-items:center}
|
||||
.src summary::-webkit-details-marker{display:none}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12px;font-weight:400;color:var(--sub)}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12px;font-weight:400;color:var(--s)}
|
||||
.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 li{padding:8px 0;border-top:1px solid var(--ln);font-size:12.5px;line-height:1.65;color:var(--t)}
|
||||
.foot{margin:14px 20px 0;font-size:12px;color:var(--s);text-align:center;line-height:1.7}
|
||||
|
||||
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.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"> 复用 -->
|
||||
<!-- 单色线性图标，stroke 1.8 -->
|
||||
<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-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
||||
<symbol id="i-cup" viewBox="0 0 24 24"><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>
|
||||
<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">
|
||||
<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">
|
||||
<h1>叶酸、DHA、铁、钙<br>要不要补？</h1>
|
||||
<p>要不要补 · 什么时候补 · 每天多少，3 分钟看懂</p>
|
||||
</div>
|
||||
<h1>叶酸、DHA、铁、钙<br>要不要补？</h1>
|
||||
<div class="answer">叶酸要补；钙、铁、DHA 先靠吃，不够再按医生建议补。</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>
|
||||
<section class="three fade">
|
||||
<h2>记住这 3 点</h2>
|
||||
<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>
|
||||
<li><span class="no">1</span><div><b>叶酸 0.4mg/天</b><span>备孕前 3 个月开始，至少吃到孕 12 周</span></div></li>
|
||||
<li><span class="no">2</span><div><b>钙铁错开 2 小时</b><span>一起吃会抢吸收，比如铁早上、钙睡前</span></div></li>
|
||||
<li><span class="no">3</span><div><b>补剂不是越多越好</b><span>复合维生素和单补别叠加，先算总量</span></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>
|
||||
<!-- 1 四种营养一张表 -->
|
||||
<section class="blk fade" id="s1">
|
||||
<h2>四种营养一张表</h2>
|
||||
<p class="key">只有叶酸人人要补，其余三样先吃够。</p>
|
||||
<div class="card">
|
||||
<table class="tbl">
|
||||
<colgroup><col class="c1"><col class="c2"><col class="c3"><col></colgroup>
|
||||
<thead><tr><th>营养</th><th>要不要补</th><th>每天多少</th><th>先吃什么</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>叶酸</td><td class="y">要补</td><td>0.4mg</td><td>深绿叶菜、豆类</td></tr>
|
||||
<tr><td>钙</td><td>先食补</td><td>孕中晚期约 1000mg</td><td>奶、酸奶、豆腐</td></tr>
|
||||
<tr><td>铁</td><td>先食补，贫血听医生</td><td>20~29mg，越往后越多</td><td>红肉、动物血，配维 C 果蔬</td></tr>
|
||||
<tr><td>DHA</td><td>常吃鱼就不用</td><td>约 200mg</td><td>低汞鱼，每周 2~3 次</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<details class="why">
|
||||
<summary>为什么？<svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<p>宝宝神经管在怀孕 3~4 周就闭合，那时很多人还不知道怀孕，而食物里的叶酸怕热易流失，所以要提前补。钙、铁、DHA 从奶、红肉、鱼里吃更全面；植物里的铁吸收差，鲨鱼、旗鱼等大型鱼汞高要少吃。</p>
|
||||
</details>
|
||||
</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>
|
||||
|
||||
<!-- 2 按孕周怎么补 -->
|
||||
<section class="blk fade" id="s2">
|
||||
<h2>按孕周怎么补</h2>
|
||||
<p class="key">早期抓叶酸，中期起加上钙、铁、DHA。</p>
|
||||
<div class="me" id="me"></div>
|
||||
<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 class="st" id="stPre"><span class="dot"></span><b>备孕</b><p>开始每天 0.4mg 叶酸</p></div>
|
||||
<div class="st" id="stE"><span class="dot"></span><b>孕早期</b><p>叶酸别断，孕吐别硬吃</p></div>
|
||||
<div class="st" id="stM"><span class="dot"></span><b>孕中期</b><p>奶加量，常吃鱼和红肉</p></div>
|
||||
<div class="st" id="stL"><span class="dot"></span><b>孕晚期·哺乳</b><p>铁需要最多，奶和鱼别断</p></div>
|
||||
</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">
|
||||
<!-- 3 这些情况先问医生 -->
|
||||
<section class="blk fade" id="s3">
|
||||
<h2>这些情况先问医生</h2>
|
||||
<p class="key">符合任一条，补什么、补多少听医生的。</p>
|
||||
<div class="doc">
|
||||
<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>
|
||||
<p>上面的量只适合一般情况。下面这些人需要量不同，产检时带着问。</p>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span>贫血</span><span>甲状腺问题</span><span>素食 / 不吃鱼</span><span>双胎 / 多胎</span><span>生过神经管缺陷宝宝</span><span>糖尿病</span><span>长期用药</span><span>在吃复合维生素</span>
|
||||
</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">
|
||||
<!-- 我的补剂自查 -->
|
||||
<section class="blk fade" id="s4">
|
||||
<h2>我的补剂自查</h2>
|
||||
<p class="key">选 3 个问题，看看该注意什么。</p>
|
||||
<div class="card tool" 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 class="q-t">我现在处于</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="q-t">每天喝奶（或酸奶）吗</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="q-t">每周吃鱼虾几次</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>
|
||||
|
||||
<p class="hint" id="hint">3 题选完自动出结果，只在本机计算</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>
|
||||
<h3 id="resT">给你的 3 条建议</h3>
|
||||
<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>
|
||||
<p class="res-note">仅供参考，补什么、补多少以产检医生意见为准。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 工具入口 -->
|
||||
<section class="blk fade">
|
||||
<div class="card">
|
||||
<div class="go">
|
||||
<span class="gi"><svg class="ic"><use href="#i-cup" xlink:href="#i-cup"/></svg></span>
|
||||
<div class="gt"><b>补水补剂打卡</b><span>每天吃了没记一笔，不漏吃也不重复</span></div>
|
||||
</div>
|
||||
<div class="go-wrap"><button class="btn" id="goBushui">去记录<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>
|
||||
<summary>参考来源</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>
|
||||
<li>《围受孕期增补叶酸预防神经管缺陷指南（2017）》：无高危因素者从孕前至少 3 个月起每天增补 0.4mg 或 0.8mg 叶酸至孕满 3 个月；高危者由医生定剂量。研究汇总显示可使神经管缺陷风险降低约 50%~70%</li>
|
||||
<li>《中国居民膳食指南（2022）》备孕和孕期妇女膳食指南；《中国居民膳食营养素参考摄入量》：孕早、中、晚期铁约 20、24、29mg/天，孕中晚期钙约 1000mg/天；孕期和哺乳期 DHA 约 200mg/天</li>
|
||||
<li>中华医学会围产医学分会《妊娠期铁缺乏和缺铁性贫血诊治指南》</li>
|
||||
<li>WHO《孕期保健建议：积极的妊娠体验》（2016）</li>
|
||||
<li>钙会影响非血红素铁吸收，同时补充建议分开服用；孕期食鱼宜选低汞鱼</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p class="foot">本页为科普参考，不能代替医生诊断。<br>孕期补充任何营养素前，请咨询产检医生或营养科医生。</p>
|
||||
<p class="foot">本页为科普参考，不能代替医生诊断。</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -577,138 +268,98 @@ 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;
|
||||
});
|
||||
|
||||
/* 顶栏：滚动后白底 + 细分割线 */
|
||||
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' });
|
||||
}
|
||||
$$('[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);
|
||||
$('#goBushui').addEventListener('click', function () { location.href = '/yunqi-bushui/yindao/' + location.search + location.hash; });
|
||||
|
||||
/* ---------- 我的补剂自查 ---------- */
|
||||
var ans = { stage: '', milk: '', fish: '', meat: '', sp: {} };
|
||||
/* ---------- 我的补剂自查：3 题，最多 3 条建议 ---------- */
|
||||
var ans = { stage: '', milk: '', fish: '' };
|
||||
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' : '';
|
||||
$$('.opt', $('.q[data-q="' + q + '"]')).forEach(function (o) { o.classList.toggle('on', o.dataset.v === v); });
|
||||
ans[q] = v;
|
||||
if (ans.stage && ans.milk && ans.fish) build();
|
||||
}
|
||||
$$('.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 first = !$('#res').classList.contains('on');
|
||||
pick(box.dataset.q, o.dataset.v);
|
||||
if (first && $('#res').classList.contains('on')) setTimeout(function () { go('res'); }, 60);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var IC = { a: 'ask', k: 'check', t: 'bulb' };
|
||||
var TAG = { a: '问医生', t: '加一点', k: '保持' };
|
||||
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 s = ans.stage, milk = +ans.milk, fish = +ans.fish;
|
||||
var 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 (s === 'pre' || s === 'e') add('t', '叶酸每天 0.4mg，一天别落下', s === 'pre' ? '备孕前 3 个月开始是关键' : '孕早期是神经管发育关键期');
|
||||
else if (s === 'b') add('a', '哺乳期叶酸是否继续，问医生', '有的医生会建议继续吃');
|
||||
else add('k', '叶酸按医生建议继续吃', '很多医生建议吃到整个孕期');
|
||||
|
||||
/* 钙 */
|
||||
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', '钙：奶喝得够，一般食补即可', '再加点豆腐、深绿叶菜就更稳');
|
||||
if (milk === 0) add('a', '钙可能不够，问医生要不要补', later ? '孕中晚期和哺乳期每天约需 1000mg' : '先试试酸奶、奶酪、豆腐');
|
||||
else if (milk === 1) add('t', '奶加到每天 300~500ml', later ? '偶尔喝时钙容易不足' : '孕中期起钙需要量会增加');
|
||||
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 小时以上吃', '比如铁随早餐、钙放晚饭后或睡前');
|
||||
if (fish === 0) add('a', '问医生是否需要补 DHA', '几乎不吃鱼虾时 DHA 容易不足');
|
||||
else if (fish === 1) add('t', '鱼加到每周 2~3 次', '选三文鱼、鳕鱼、鲈鱼等低汞鱼');
|
||||
else add('k', 'DHA 吃鱼就够，继续保持', '记得选低汞鱼');
|
||||
|
||||
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]++;
|
||||
L.slice(0, 3).forEach(function (it) {
|
||||
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;
|
||||
li.innerHTML = '<i></i><div><b></b><span></span></div>';
|
||||
li.querySelector('i').textContent = TAG[it.t];
|
||||
li.querySelector('b').textContent = it.b; li.querySelector('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 + ' · 我的补剂清单';
|
||||
$('#hint').style.display = 'none';
|
||||
$('#res').classList.add('on');
|
||||
}
|
||||
$('#run').addEventListener('click', function () {
|
||||
build();
|
||||
setTimeout(function () { go('res'); }, 60);
|
||||
});
|
||||
|
||||
/* 按孕周点亮时间轴，并预选自查的阶段 */
|
||||
function mark(stage, ic, t, d, pickV) {
|
||||
function mark(stage, txt, v) {
|
||||
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);
|
||||
var me = $('#me'); me.textContent = txt; me.classList.add('on');
|
||||
if (v && !ans.stage) pick('stage', v);
|
||||
}
|
||||
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');
|
||||
if (p.postpartum) mark('stL', '宝宝出生了 · 你在哺乳期', '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');
|
||||
if (w >= 28) mark('stL', '你在孕 ' + w + ' 周 · 孕晚期', 'l');
|
||||
else if (w >= 13) mark('stM', '你在孕 ' + w + ' 周 · 孕中期', 'm');
|
||||
else mark('stE', '你在孕 ' + w + ' 周 · 孕早期', '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 });
|
||||
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: .08 });
|
||||
$$('.fade').forEach(function (el) { io.observe(el); });
|
||||
} else $$('.fade').forEach(function (el) { el.classList.add('in'); });
|
||||
|
||||
|
||||
@@ -5,273 +5,205 @@
|
||||
<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：孕期首页「其他妈妈也在搜」第 2 条入口）。
|
||||
视觉沿用 topic/wen（妊娠纹专题）：暖粉色系、圆角卡、扁平双色 SVG 图标（页内 symbol 复用，不用 emoji）。
|
||||
一页三屏：开始 / 答题（一题一屏）/ 结果；结果存 localStorage「mmbox.ceshi.v1」，再进直接看上次结果。
|
||||
插画 img/*.webp 由 AI 生成（画面不含文字）。自成一页：不引 app.js；回首页走相对路径 ../../，跳工具走 /<slug>/ 并带 search + hash。
|
||||
<!-- 孕期专题 · 趣味测试（孕期首页「其他妈妈也在搜」第 2 条入口）。
|
||||
2026-10-31 按《孕期专题页统一设计规范 v2》重做：主色 #7C5CFC、白底、单色线性图标、16 道题。
|
||||
一页三屏：开始 / 答题（一题一屏）/ 结果；结果存 localStorage「mmbox.ceshi.v2」（题目已换，不复用 v1）。
|
||||
插画复用 img/*.webp。自成一页：不引 app.js；返回走 history 或相对路径 ../../，跳工具走 /<slug>/ 并带 search + hash。
|
||||
纯娱乐，不采集、不上报答题数据。 -->
|
||||
<style>
|
||||
:root{--c:#F4593C;--c2:#E8476F;--deep:#C2185B;--ink:#3B2A2A;--sub:#8A7471;--mute:#A8928E;--bg:#FFF8F5;--card:#fff;--line:#F6E3DD;--soft:#FFF0EA;--k:#E8476F;--kbg:#FDE7EE}
|
||||
:root{--c:#7C5CFC;--cbg:#F1EDFF;--ink:#1F2329;--txt:#4E5969;--sub:#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}
|
||||
#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))}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--txt);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(24px + 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}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
|
||||
/* 顶栏 */
|
||||
.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;padding-top:env(safe-area-inset-top);background:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
|
||||
.bar.sh{border-bottom-color:var(--line)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--ink)}
|
||||
|
||||
/* 三屏切换 */
|
||||
.view{display:none}
|
||||
.view.on{display:block;animation:vin .45s ease both}
|
||||
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
||||
/* 三屏 */
|
||||
.view{display:none;padding:0 20px}
|
||||
.view.on{display:block;animation:vin .35s ease both}
|
||||
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||||
|
||||
/* 头图 */
|
||||
.hero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
|
||||
.hero img{width:100%;aspect-ratio:1/1;object-fit:cover}
|
||||
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:56px 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)}
|
||||
.pic{width:100%;height:200px;object-fit:cover;object-position:center 40%;border-radius:20px;background:var(--soft)}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;font-size:16px;font-weight:700}
|
||||
.btn.pri{background:var(--c);color:#fff}
|
||||
.btn.sec{background:#fff;color:var(--c);border:1px solid var(--c)}
|
||||
.btn:active{opacity:.85}
|
||||
|
||||
/* 开始页 */
|
||||
.meta{display:flex;gap:8px;margin:14px 16px 0}
|
||||
.meta div{flex:1;padding:12px 4px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center;line-height:1.15}
|
||||
.meta .ib{width:36px;height:36px;margin:0 auto 6px;border-radius:12px;display:grid;place-items:center;font-size:20px}
|
||||
.meta em{display:block;font-style:normal;font-size:18px;font-weight:800;color:var(--deep)}
|
||||
.meta span{display:block;margin-top:4px;font-size:12px;color:var(--sub);white-space:nowrap}
|
||||
.types{margin:14px 16px 0;padding:16px;border-radius:24px;background:#fff;box-shadow:0 6px 24px rgba(194,24,91,.08);border:1px solid #FBE0D8}
|
||||
.types h2{display:flex;align-items:center;gap:8px;font-size:17px;line-height:1.3}
|
||||
.types h2 .ic{font-size:20px;color:var(--c)}
|
||||
.types ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
|
||||
.types li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;font-size:13.5px;font-weight:600;white-space:nowrap}
|
||||
.types li .ic{font-size:18px}
|
||||
.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);height:52px;margin:18px 16px 0;border-radius:99px;background:linear-gradient(90deg,var(--c),var(--c2));color:#fff;font-size:17px;font-weight:700;box-shadow:0 8px 20px rgba(232,71,111,.28)}
|
||||
.cta .ic{font-size:20px}
|
||||
.cta:active{transform:scale(.98)}
|
||||
.note{margin:10px 16px 0;text-align:center;font-size:12px;color:var(--mute)}
|
||||
/* 开始 */
|
||||
#vStart{padding-top:12px;text-align:center}
|
||||
#vStart h1{margin-top:22px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
#vStart .meta{margin-top:10px;font-size:14px;color:var(--sub)}
|
||||
#vStart .meta b{color:var(--c);font-weight:700}
|
||||
#vStart .btn{margin-top:28px}
|
||||
#vStart .note{margin-top:12px;font-size:12.5px;color:var(--sub)}
|
||||
|
||||
/* 答题 */
|
||||
.prog{margin:6px 16px 0}
|
||||
.prog .row{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--sub)}
|
||||
.prog .row b{font-size:22px;color:var(--deep);font-weight:800;margin-right:2px}
|
||||
.prog .track{margin-top:8px;height:8px;border-radius:9px;background:#F8E1DA;overflow:hidden}
|
||||
.prog .fill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--c),var(--c2));transition:width .45s cubic-bezier(.4,0,.2,1)}
|
||||
.dots{display:flex;gap:6px;margin-top:8px}
|
||||
.dots i{flex:1;height:3px;border-radius:3px;background:#F3DDD6;transition:background .3s}
|
||||
.dots i.d{background:#F7A08C}
|
||||
.qcard{margin:16px 16px 0;padding:20px 16px 16px;border-radius:24px;background:#fff;border:1px solid #FBE0D8;box-shadow:0 6px 24px rgba(194,24,91,.08);transition:opacity .26s ease,transform .26s ease}
|
||||
.qcard.out{opacity:0;transform:translateX(-28px)}
|
||||
.qcard.out.rev{transform:translateX(28px)}
|
||||
.qcard.pre{opacity:0;transform:translateX(28px);transition:none}
|
||||
.qcard.pre.rev{transform:translateX(-28px)}
|
||||
.qh{display:flex;align-items:center;gap:12px}
|
||||
.qh .qi{flex:none;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:#FFEDE6;color:var(--c)}
|
||||
.qh small{display:block;font-size:12px;color:var(--mute)}
|
||||
.qh h2{font-size:19px;line-height:1.4}
|
||||
.opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
|
||||
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px 10px 10px;border-radius:18px;background:linear-gradient(120deg,#FFF5F1,#FFFAF8);border:1.5px solid #F8E4DD;text-align:left;font-size:15px;line-height:1.45;transition:border-color .2s,background .2s,transform .15s}
|
||||
.opt .l{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--c);font-weight:800;font-size:15px;box-shadow:0 2px 6px rgba(194,24,91,.08);transition:background .2s,color .2s;font-family:Georgia,"Times New Roman",serif}
|
||||
.opt .ok{margin-left:auto;font-size:20px;color:var(--c2);opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
|
||||
.opt:active{transform:scale(.985)}
|
||||
.opt.sel{border-color:var(--c2);background:#FFF0F3}
|
||||
.opt.sel .l{background:var(--c2);color:#fff}
|
||||
.opt.sel .ok{opacity:1;transform:none}
|
||||
.qnav{display:flex;align-items:center;justify-content:space-between;margin:14px 20px 0}
|
||||
.qnav button{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--sub);padding:8px 4px}
|
||||
.qnav button:disabled{opacity:.35}
|
||||
.qnav span{font-size:12px;color:var(--mute)}
|
||||
#vQuiz{padding-top:8px}
|
||||
.qtop{display:flex;align-items:center;justify-content:space-between;height:32px}
|
||||
.qtop .no{font-size:13px;color:var(--sub)}
|
||||
.qtop .no b{font-size:15px;color:var(--c);font-weight:700}
|
||||
.qtop button{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;color:var(--sub);padding:4px 0 4px 8px}
|
||||
.qtop button .ic{width:16px;height:16px}
|
||||
.qtop button:disabled{visibility:hidden}
|
||||
.track{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
|
||||
.track i{display:block;height:100%;width:0;border-radius:4px;background:var(--c);transition:width .35s ease}
|
||||
.qbody{margin-top:28px;transition:opacity .2s ease,transform .2s ease}
|
||||
.qbody.out{opacity:0;transform:translateY(-8px)}
|
||||
.qbody.pre{opacity:0;transform:translateY(8px);transition:none}
|
||||
.qbody h2{font-size:22px;font-weight:700;line-height:1.45;color:var(--ink);min-height:64px}
|
||||
.opts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
|
||||
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:left;font-size:16px;line-height:1.45;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
|
||||
.opt .l{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--sub);font-size:13px;font-weight:700;transition:background .2s,color .2s}
|
||||
.opt.sel{border-color:var(--c);background:var(--cbg);color:var(--c);font-weight:600}
|
||||
.opt.sel .l{background:var(--c);color:#fff}
|
||||
.qtip{margin-top:18px;text-align:center;font-size:12.5px;color:var(--sub)}
|
||||
|
||||
/* 结果 */
|
||||
.rhero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
|
||||
.rhero img{width:100%;aspect-ratio:1/1;object-fit:cover}
|
||||
.rhero .last{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);border-radius:99px;padding:3px 12px;font-size:12px;color:var(--sub);display:none}
|
||||
.rhero .last.on{display:block}
|
||||
.rhero .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.97) 42%)}
|
||||
.rhero .you{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#fff;background:var(--k);border-radius:99px;padding:3px 11px 3px 8px}
|
||||
.rhero .you .ic{font-size:14px}
|
||||
.rhero h1{margin-top:6px;font-size:30px;line-height:1.2;color:var(--k);letter-spacing:1px}
|
||||
.rhero p{margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.55}
|
||||
|
||||
.rsec{margin:16px 16px 0;padding:16px;border-radius:24px;background:#fff;border:1px solid var(--line)}
|
||||
.rsec-h{display:flex;align-items:center;gap:8px}
|
||||
.rsec-h .hi{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--kbg);color:var(--k)}
|
||||
.rsec-h h2{font-size:17px;line-height:1.3}
|
||||
.rsec-h small{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap}
|
||||
.adv{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
|
||||
.adv li{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 10px;border-radius:18px;background:linear-gradient(120deg,var(--kbg),#FFFAF8)}
|
||||
.adv .ai{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#fff;color:var(--k);box-shadow:0 2px 8px rgba(194,24,91,.06)}
|
||||
.adv b{display:block;font-size:15px;line-height:1.35}
|
||||
.adv span{display:block;margin-top:1px;font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.tips{margin-top:12px;display:flex;flex-direction:column;gap:8px}
|
||||
.tipc{display:flex;gap:10px;padding:11px 12px;border-radius:16px;background:#FFF8E9;border:1px solid #F7E5BE}
|
||||
.tipc .wi{flex:none;width:30px;height:30px;border-radius:10px;background:#FFE7A8;color:#B7791F;display:grid;place-items:center;font-size:18px}
|
||||
.tipc b{display:block;font-size:14px;color:#8A5A12;line-height:1.4}
|
||||
.tipc p{font-size:12.5px;color:#7A6343;line-height:1.6;margin-top:2px}
|
||||
|
||||
.tool{margin:16px 16px 0;display:flex;align-items:center;gap:12px;width:calc(100% - 32px);padding:14px;border-radius:22px;background:var(--kbg);border:1.5px solid var(--k);text-align:left}
|
||||
.tool .ti{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:var(--k);color:#fff}
|
||||
#vResult{padding-top:12px}
|
||||
.rhead{position:relative;text-align:center}
|
||||
.rhead .last{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border-radius:99px;padding:0 10px;font-size:12px;line-height:24px;color:var(--sub);display:none}
|
||||
.rhead .last.on{display:block}
|
||||
.rhead .you{margin-top:18px;font-size:14px;color:var(--sub)}
|
||||
.rhead h1{margin-top:2px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
.rhead h1 em{font-style:normal;color:var(--c)}
|
||||
.rhead p{margin-top:6px;font-size:15px;color:var(--txt)}
|
||||
.blk{margin-top:24px}
|
||||
.blk h2{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.4}
|
||||
.blk h2 .ic{color:var(--c)}
|
||||
.tags{display:flex;gap:8px;margin-top:12px}
|
||||
.tags span{flex:1;text-align:center;padding:8px 4px;border-radius:12px;background:var(--cbg);color:var(--c);font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap}
|
||||
.tip{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.7}
|
||||
.dist{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:10px}
|
||||
.dr{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--txt)}
|
||||
.dr .n{flex:none;width:68px;white-space:nowrap}
|
||||
.dr .tr{flex:1;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
|
||||
.dr .tr i{display:block;height:100%;width:0;border-radius:6px;background:#D6CCFE;transition:width .8s cubic-bezier(.3,.7,.2,1)}
|
||||
.dr .p{flex:none;width:36px;text-align:right;color:var(--sub)}
|
||||
.dr.me .n{color:var(--c);font-weight:700}
|
||||
.dr.me .tr i{background:var(--c)}
|
||||
.dr.me .p{color:var(--c);font-weight:700}
|
||||
.tool{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;gap:12px}
|
||||
.tool .ti{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--cbg);color:var(--c)}
|
||||
.tool .ti .ic{width:22px;height:22px}
|
||||
.tool .tx{flex:1;min-width:0}
|
||||
.tool small{display:block;font-size:12px;color:var(--sub)}
|
||||
.tool b{display:block;font-size:16.5px;line-height:1.35}
|
||||
.tool span{display:block;font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.tool .go{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13px;color:#fff;background:var(--k);border-radius:99px;padding:6px 10px 6px 12px;white-space:nowrap}
|
||||
.tool small{display:block;font-size:12.5px;color:var(--sub);line-height:1.5}
|
||||
.tool b{display:block;font-size:16px;color:var(--ink);line-height:1.4}
|
||||
.tool .go{flex:none;height:34px;padding:0 16px;border-radius:99px;background:var(--c);color:#fff;font-size:14px;font-weight:600}
|
||||
.acts{display:flex;gap:10px;margin-top:20px}
|
||||
.acts .btn{flex:1;font-size:15px}
|
||||
|
||||
.dist{margin-top:12px;display:flex;flex-direction:column;gap:11px}
|
||||
.dr .dl{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
|
||||
.dr .dl .ic{font-size:16px}
|
||||
.dr .dl em{margin-left:auto;font-style:normal;font-size:13px;font-weight:800}
|
||||
.dr .dl .me{font-size:11px;font-weight:700;color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
|
||||
.dr .tr{margin-top:5px;height:10px;border-radius:9px;background:#F6ECE9;overflow:hidden}
|
||||
.dr .tr i{display:block;height:100%;width:0;border-radius:9px;transition:width .9s cubic-bezier(.3,.7,.2,1)}
|
||||
.foot{margin:28px 20px 0;font-size:12px;color:var(--sub);text-align:center}
|
||||
.toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translate(-50%,8px);max-width:300px;padding:10px 16px;border-radius:12px;background:rgba(31,35,41,.88);color:#fff;font-size:13.5px;line-height:1.6;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
|
||||
.toast.on{opacity:1;transform:translate(-50%,0)}
|
||||
|
||||
.again{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);height:48px;margin:18px 16px 0;border-radius:99px;background:#fff;border:1.5px solid #F5C9BC;color:var(--c);font-size:16px;font-weight:700}
|
||||
.again .ic{font-size:18px}
|
||||
|
||||
.foot{margin:18px 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{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.qcard,.view.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.qbody,.view.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 图标库：扁平双色（线条 + 同色浅面），统一 24 栅格 / 2px 圆角线条 -->
|
||||
<!-- 单色线性图标 -->
|
||||
<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-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-right" viewBox="0 0 24 24"><path d="M9 5l7 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-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-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-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-chat" 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.5H10l-4.5 4v-4A1.5 1.5 0 0 1 4 14.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.5H10l-4.5 4v-4A1.5 1.5 0 0 1 4 14.5zM8.5 9.5h.01M12 9.5h.01M15.5 9.5h.01"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
|
||||
<symbol id="i-hand" viewBox="0 0 24 24"><path class="f" d="M7 12V7a1.5 1.5 0 0 1 3 0v4V5a1.5 1.5 0 0 1 3 0v6V6.5a1.5 1.5 0 0 1 3 0V12v-2a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8z"/><path d="M10 11V5a1.5 1.5 0 0 1 3 0v6M13 10.5v-4a1.5 1.5 0 0 1 3 0V12M16 11.5v-1.5a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8L7 13.5V7a1.5 1.5 0 0 1 3 0v4"/></symbol>
|
||||
<symbol id="i-home" viewBox="0 0 24 24"><path class="f" d="M5 10.5L12 4.5l7 6V20H5z"/><path d="M3.5 11.5L12 4.5l8.5 7M5.5 10v10h13V10M10 20v-5h4v5"/></symbol>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle class="f" cx="11" cy="11" r="6.5"/><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></symbol>
|
||||
<symbol id="i-list" viewBox="0 0 24 24"><rect class="f" x="4" y="3.5" width="16" height="17" rx="3"/><rect x="4" y="3.5" width="16" height="17" rx="3"/><path d="M8 9l1.3 1.3L11.5 8M8 14.5l1.3 1.3 2.2-2.3M14 9.2h2.5M14 14.7h2.5"/></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-cup" viewBox="0 0 24 24"><path class="f" d="M4.5 9h12v5.5a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5z"/><path d="M4.5 9h12v5.5a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5zM16.5 10.5h1.5a2.5 2.5 0 0 1 0 5h-1.8M8.5 3.5c-.8 1 .8 2-.1 3M12.5 3.5c-.8 1 .8 2-.1 3"/></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-gift" viewBox="0 0 24 24"><rect class="f" x="4" y="10" width="16" height="10.5" rx="2"/><rect x="3" y="7" width="18" height="4" rx="1.5"/><path d="M4.5 11v8a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-8M12 7v13.5M12 7c-1-2.5-4.5-3.5-4.5-1.2C7.5 7 10 7 12 7zM12 7c1-2.5 4.5-3.5 4.5-1.2C16.5 7 14 7 12 7z"/></symbol>
|
||||
<symbol id="i-spark" viewBox="0 0 24 24"><path class="f" d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM18.5 16.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z"/></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="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17.2h2"/></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 10zM16 4l.5 1.5L18 6l-1.5.5L16 8l-.5-1.5L14 6l1.5-.5z"/></symbol>
|
||||
<symbol id="i-phone" viewBox="0 0 24 24"><rect class="f" x="6" y="2.5" width="12" height="19" rx="3"/><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3M9 8h6M9 11.5h4"/></symbol>
|
||||
<symbol id="i-bag" viewBox="0 0 24 24"><rect class="f" x="3.5" y="8" width="17" height="12.5" rx="3"/><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2M3.5 13h17M11 13v2h2v-2"/></symbol>
|
||||
<symbol id="i-users" viewBox="0 0 24 24"><circle class="f" cx="9" cy="8" r="3.5"/><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.8a3.4 3.4 0 0 1 0 6.4M18 14a6 6 0 0 1 3.5 6"/></symbol>
|
||||
<symbol id="i-camera" viewBox="0 0 24 24"><rect class="f" x="3" y="7" width="18" height="13" rx="3"/><path d="M3 10a3 3 0 0 1 3-3h1.5L9 4.5h6L16.5 7H18a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/><circle cx="12" cy="13.5" r="3.5"/></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-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-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-star" viewBox="0 0 24 24"><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-bulb" viewBox="0 0 24 24"><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-chart" viewBox="0 0 24 24"><path d="M4 20h16M7 16v-4M12 16V7M17 16v-6"/></symbol>
|
||||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.4-5.7M20 4v4.5h-4.5"/></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-kick" viewBox="0 0 24 24"><path class="f" d="M8.5 21c-2.5 0-4-2-3.6-4.8.4-2.6 1.4-5.2 1.6-7.2.3-2.4 2-3.5 3.9-3.2 2.2.3 3.1 2.3 2.8 4.7-.3 2.5-1.2 4.5-1.3 6.6-.1 2.4-.9 3.9-3.4 3.9z"/><path d="M8.5 21c-2.5 0-4-2-3.6-4.8.4-2.6 1.4-5.2 1.6-7.2.3-2.4 2-3.5 3.9-3.2 2.2.3 3.1 2.3 2.8 4.7-.3 2.5-1.2 4.5-1.3 6.6-.1 2.4-.9 3.9-3.4 3.9z"/><circle class="s" cx="15.2" cy="5.2" r="1.5"/><circle class="s" cx="17.8" cy="8" r="1.2"/><circle class="s" cx="18.8" cy="11.3" r="1"/><circle class="s" cx="18.6" cy="14.4" r=".9"/></symbol>
|
||||
<symbol id="i-chart" viewBox="0 0 24 24"><rect class="f" x="3.5" y="3.5" width="17" height="17" rx="3"/><rect x="3.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 16v-3M12 16V8M16 16v-5"/></symbol>
|
||||
<symbol id="i-share" viewBox="0 0 24 24"><path d="M12 15V4M8 7.5L12 3.5l4 4M5 12v6.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V12"/></symbol>
|
||||
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.5h.01M14.8 11.5h.01M9.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-scale" viewBox="0 0 24 24"><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-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17.2h2"/></symbol>
|
||||
<symbol id="i-bag" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2M3.5 13h17"/></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>
|
||||
|
||||
<!-- ① 开始页 -->
|
||||
<!-- ① 开始 -->
|
||||
<main class="view" id="vStart">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈拿着小测试卡片微笑">
|
||||
<div class="cap">
|
||||
<h1>测一测<br>你是什么样的妈妈？</h1>
|
||||
<p>8 道题，1 分钟 · 发现你的带娃超能力</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="meta fade">
|
||||
<div><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-list" xlink:href="#i-list"/></svg></span><em>8 道</em><span>轻松小题</span></div>
|
||||
<div><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg></span><em>1 分钟</em><span>凭直觉选</span></div>
|
||||
<div><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-spark" xlink:href="#i-spark"/></svg></span><em>4 种</em><span>妈妈类型</span></div>
|
||||
</div>
|
||||
<section class="types fade">
|
||||
<h2><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>你会是哪一种？</h2>
|
||||
<ul id="typeList"></ul>
|
||||
</section>
|
||||
<button class="cta" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
<p class="note">没有对错，选最像你的那一个就好</p>
|
||||
<img class="pic" src="img/hero.webp" alt="孕妈拿着小测试卡片微笑">
|
||||
<h1>测一测<br>你是什么样的妈妈？</h1>
|
||||
<p class="meta"><b>16</b> 道题 · 约 <b>2</b> 分钟</p>
|
||||
<button class="btn pri" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
<p class="note">没有对错，凭第一感觉选就好</p>
|
||||
</main>
|
||||
|
||||
<!-- ② 答题（一题一屏） -->
|
||||
<!-- ② 答题 -->
|
||||
<main class="view" id="vQuiz">
|
||||
<div class="prog">
|
||||
<div class="row"><span><b id="qNo">1</b>/ 8</span><span id="qLeft">还剩 7 题</span></div>
|
||||
<div class="track"><div class="fill" id="qFill"></div></div>
|
||||
</div>
|
||||
<article class="qcard" id="qCard">
|
||||
<div class="qh">
|
||||
<span class="qi" id="qIco"><svg class="ic"><use id="qIcoUse" href="#i-heart" xlink:href="#i-heart"/></svg></span>
|
||||
<div><small id="qTag">第 1 题</small><h2 id="qTitle"></h2></div>
|
||||
</div>
|
||||
<div class="opts" id="qOpts"></div>
|
||||
</article>
|
||||
<div class="qnav">
|
||||
<div class="qtop">
|
||||
<span class="no">第 <b id="qNo">1</b> / <span id="qTotal">16</span> 题</span>
|
||||
<button id="prevBtn"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一题</button>
|
||||
<span>选完自动进入下一题</span>
|
||||
</div>
|
||||
<div class="track"><i id="qFill"></i></div>
|
||||
<div class="qbody" id="qBody">
|
||||
<h2 id="qTitle"></h2>
|
||||
<div class="opts" id="qOpts"></div>
|
||||
</div>
|
||||
<p class="qtip">选完自动进入下一题</p>
|
||||
</main>
|
||||
|
||||
<!-- ③ 结果 -->
|
||||
<main class="view" id="vResult">
|
||||
<section class="rhero">
|
||||
<img id="rImg" src="" alt="">
|
||||
<div class="rhead">
|
||||
<img class="pic" id="rImg" src="" alt="">
|
||||
<span class="last" id="rLast"></span>
|
||||
<div class="cap">
|
||||
<span class="you"><svg class="ic"><use id="rYouIc" href="#i-heart" xlink:href="#i-heart"/></svg>你是</span>
|
||||
<h1 id="rName"></h1>
|
||||
<p id="rLine"></p>
|
||||
</div>
|
||||
<p class="you">你是</p>
|
||||
<h1><em id="rName"></em></h1>
|
||||
<p id="rLine"></p>
|
||||
</div>
|
||||
|
||||
<section class="blk fade">
|
||||
<h2><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>你的优势</h2>
|
||||
<div class="tags" id="rAdv"></div>
|
||||
</section>
|
||||
|
||||
<section class="rsec fade">
|
||||
<div class="rsec-h"><span class="hi"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg></span><h2>你的带娃优势</h2></div>
|
||||
<ul class="adv" id="rAdv"></ul>
|
||||
<section class="blk fade">
|
||||
<h2><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>给你一句建议</h2>
|
||||
<p class="tip" id="rTip"></p>
|
||||
</section>
|
||||
|
||||
<section class="rsec fade">
|
||||
<div class="rsec-h"><span class="hi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><h2>给你的小建议</h2></div>
|
||||
<div class="tips" id="rTips"></div>
|
||||
</section>
|
||||
|
||||
<button class="tool fade" id="rTool">
|
||||
<span class="ti"><svg class="ic"><use id="rToolIc" href="#i-kick" xlink:href="#i-kick"/></svg></span>
|
||||
<span class="tx"><small>适合你的工具</small><b id="rToolName"></b><span id="rToolDesc"></span></span>
|
||||
<span class="go">去用<svg class="ic"><use href="#i-right" xlink:href="#i-right"/></svg></span>
|
||||
</button>
|
||||
|
||||
<section class="rsec fade">
|
||||
<div class="rsec-h"><span class="hi"><svg class="ic"><use href="#i-chart" xlink:href="#i-chart"/></svg></span><h2>你的类型分布</h2><small>8 道题的选择</small></div>
|
||||
<section class="blk fade">
|
||||
<h2><svg class="ic"><use href="#i-chart" xlink:href="#i-chart"/></svg>你的类型占比</h2>
|
||||
<div class="dist" id="rDist"></div>
|
||||
</section>
|
||||
|
||||
<button class="again" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>再测一次</button>
|
||||
<div class="tool fade">
|
||||
<span class="ti"><svg class="ic"><use id="rToolIc" href="#i-baby" xlink:href="#i-baby"/></svg></span>
|
||||
<span class="tx"><small>适合你的工具</small><b id="rToolName"></b></span>
|
||||
<button class="go" id="rTool">去用</button>
|
||||
</div>
|
||||
|
||||
<div class="acts fade">
|
||||
<button class="btn sec" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>再测一次</button>
|
||||
<button class="btn pri" id="shareBtn"><svg class="ic"><use href="#i-share" xlink:href="#i-share"/></svg>分享给老公看看</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<p class="foot">趣味测试，仅供娱乐<br>每一种妈妈都是好妈妈，孕期健康问题请以产检医生意见为准。</p>
|
||||
<p class="foot">趣味测试，仅供娱乐</p>
|
||||
</div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
var $ = function (s) { return document.querySelector(s); };
|
||||
var sc = $('#scroll');
|
||||
var KEY = 'mmbox.ceshi.v1';
|
||||
var KEY = 'mmbox.ceshi.v2';
|
||||
var XL = 'http://www.w3.org/1999/xlink';
|
||||
function useRef(el, id) { el.setAttribute('href', '#i-' + id); el.setAttributeNS(XL, 'xlink:href', '#i-' + id); }
|
||||
function svg(id) { return '<svg class="ic"><use href="#i-' + id + '" xlink:href="#i-' + id + '"/></svg>'; }
|
||||
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||||
|
||||
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回同目录的首页，身份 hash 原样带回 */
|
||||
@@ -279,100 +211,74 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
|
||||
else location.href = '../../' + location.search + location.hash;
|
||||
});
|
||||
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('sh', sc.scrollTop > 4); }, { passive: true });
|
||||
|
||||
/* 4 种类型（顺序即平分时的优先级） */
|
||||
/* 4 种类型（ORDER 顺序即平分时的优先级） */
|
||||
var TYPES = {
|
||||
nuan: {
|
||||
name: '温柔守护型', short: '温柔守护', ic: 'heart', c: '#E8476F', bg: '#FDE7EE', img: 'img/nuan.webp', alt: '妈妈温柔地抱着襁褓中的宝宝',
|
||||
line: '你的爱细腻又安稳，宝宝在你身边，就像被柔软的云朵包住。',
|
||||
adv: [
|
||||
['heart', '共情力超强', '总能第一时间读懂宝宝的小情绪'],
|
||||
['hand', '细心又周到', '再小的事也照顾得妥妥帖帖'],
|
||||
['shield', '安全感满满', '是宝宝和全家最温暖的依靠']
|
||||
],
|
||||
tips: [
|
||||
['担心是爱，但别一个人扛', '胎动、身体不适拿不准时，及时问产检医生，比自己反复琢磨更安心。'],
|
||||
['先照顾好自己', '累了就让家人搭把手，适当求助不丢人，妈妈状态好，宝宝才更好。']
|
||||
],
|
||||
tool: { name: '数胎动', path: '/taidong/', ic: 'baby', desc: '每天数一数，把牵挂变成安心' }
|
||||
},
|
||||
xue: {
|
||||
name: '理性研究型', short: '理性研究', ic: 'book', c: '#3B7DD8', bg: '#E8F2FD', img: 'img/xue.webp', alt: '孕妈戴着眼镜认真看书做笔记',
|
||||
line: '你相信知识就是底气，每一个决定背后，都有认真做过的功课。',
|
||||
adv: [
|
||||
['search', '信息甄别力强', '能从各种说法里找到靠谱答案'],
|
||||
['list', '计划井井有条', '产检、待产、月子都提前安排好'],
|
||||
['bulb', '遇事冷静', '关键时刻能稳住自己也稳住全家']
|
||||
],
|
||||
tips: [
|
||||
['别越查越焦虑', '网上信息真假混杂，看到吓人的说法先打个问号，一切以产检医生的意见为准。'],
|
||||
['给计划留点弹性', '宝宝不会照着教科书长大，偶尔不按计划来也没关系。']
|
||||
],
|
||||
tool: { name: '孕期体重', path: '/yunqi-tizhong/', ic: 'scale', desc: '体重曲线一目了然，用数据安心' }
|
||||
},
|
||||
song: {
|
||||
name: '松弛自在型', short: '松弛自在', ic: 'leaf', c: '#2F8A5E', bg: '#E7F5EC', img: 'img/song.webp', alt: '孕妈靠在软垫上悠闲地喝茶',
|
||||
line: '你情绪稳定、心态在线，好心情就是送给宝宝最好的胎教。',
|
||||
adv: [
|
||||
['leaf', '情绪稳定', '不容易被焦虑和比较带着走'],
|
||||
['sun', '抓大放小', '懂得取舍，不在小事上内耗'],
|
||||
['cup', '自带快乐能量', '家里的氛围总是轻松又愉快']
|
||||
],
|
||||
tips: [
|
||||
['松弛也别错过产检', '按时产检，唐筛、大排畸、糖耐这些重要检查记得提前预约。'],
|
||||
['身体信号别硬扛', '出血、腹痛、胎动明显减少时别想着「应该没事」，要及时就医。']
|
||||
],
|
||||
tool: { name: '孕检日历', path: '/chanjian-rili/', ic: 'cal', desc: '设好产检提醒，松弛也不掉链子' }
|
||||
},
|
||||
re: {
|
||||
name: '元气分享型', short: '元气分享', ic: 'chat', c: '#F4593C', bg: '#FFEDE6', img: 'img/re.webp', alt: '孕妈和朋友们开心地聊天',
|
||||
line: '你热情开朗、乐于连接，身边总有一群人陪你一起期待宝宝到来。',
|
||||
adv: [
|
||||
['users', '社交力满分', '总能找到同路的孕妈伙伴'],
|
||||
['gift', '乐于分享', '把经验和快乐传递给身边的人'],
|
||||
['spark', '行动力超强', '想到就去做，从不拖泥带水']
|
||||
],
|
||||
tips: [
|
||||
['经验只作参考', '群里每个人情况不同，涉及身体和用药的问题，以产检医生的意见为准。'],
|
||||
['热闹之余多休息', '给自己留点安静时间，睡够觉，也多和宝宝说说悄悄话。']
|
||||
],
|
||||
tool: { name: '待产清单', path: '/daichan-qingdan/', ic: 'bag', desc: '和家人一起勾清单，待产不慌张' }
|
||||
}
|
||||
nuan: { name: '温柔守护型', img: 'img/nuan.webp', alt: '妈妈温柔地抱着宝宝',
|
||||
line: '你的爱细腻又安稳，是宝宝最软的依靠',
|
||||
adv: ['共情力强', '细心周到', '安全感满满'],
|
||||
tip: '担心时别一个人扛，拿不准就问产检医生；累了就让家人搭把手。',
|
||||
tool: { name: '数胎动', path: '/taidong/', ic: 'baby' } },
|
||||
xue: { name: '理性研究型', img: 'img/xue.webp', alt: '孕妈认真看书做笔记',
|
||||
line: '知识是你的底气，每个决定都做过功课',
|
||||
adv: ['会甄别信息', '计划周全', '遇事冷静'],
|
||||
tip: '网上说法真假混杂，看到吓人的先打个问号，一切以产检医生意见为准。',
|
||||
tool: { name: '孕期体重', path: '/yunqi-tizhong/', ic: 'scale' } },
|
||||
song: { name: '松弛自在型', img: 'img/song.webp', alt: '孕妈靠在软垫上悠闲喝茶',
|
||||
line: '情绪稳定心态好，好心情就是最好的胎教',
|
||||
adv: ['情绪稳定', '抓大放小', '快乐能量'],
|
||||
tip: '松弛也别错过产检，唐筛、大排畸、糖耐记得提前预约。',
|
||||
tool: { name: '孕检日历', path: '/chanjian-rili/', ic: 'cal' } },
|
||||
re: { name: '元气分享型', img: 'img/re.webp', alt: '孕妈和朋友们开心聊天',
|
||||
line: '热情开朗爱连接，总有人陪你期待宝宝',
|
||||
adv: ['社交满分', '乐于分享', '行动力强'],
|
||||
tip: '群里的经验只作参考，涉及身体和用药，以产检医生意见为准。',
|
||||
tool: { name: '待产清单', path: '/daichan-qingdan/', ic: 'bag' } }
|
||||
};
|
||||
var ORDER = ['nuan', 'xue', 'song', 're'];
|
||||
|
||||
/* 8 道题：每个选项对应一种类型，选项顺序打散 */
|
||||
/* 16 道题：每个选项对应一种类型，顺序已打散 */
|
||||
var QS = [
|
||||
{ ic: 'spark', q: '刚知道怀孕的那一刻，你第一件事是？', o: [
|
||||
['nuan', '摸摸肚子，悄悄跟宝宝打个招呼'], ['xue', '马上搜一搜孕早期注意事项'],
|
||||
['re', '迫不及待告诉最亲的人'], ['song', '先深呼吸，吃顿好的庆祝一下'] ] },
|
||||
{ ic: 'cal', q: '明天要产检了，今晚你会？', o: [
|
||||
['xue', '把要问医生的问题列成小清单'], ['song', '定好闹钟早早睡，明天再说'],
|
||||
['nuan', '有点忐忑，睡前多摸摸肚子'], ['re', '去妈妈群问问大家都查了啥'] ] },
|
||||
{ ic: 'moon', q: '半夜宝宝在肚子里拳打脚踢，你会？', o: [
|
||||
['nuan', '轻轻拍拍：宝贝，妈妈在呢'], ['re', '赶紧叫醒老公一起感受'],
|
||||
['song', '翻个身接着睡，他精神足挺好'], ['xue', '看看时间，顺手记一下胎动'] ] },
|
||||
{ ic: 'phone', q: '刷到一条「孕期千万别吃 XX」，你的反应是？', o: [
|
||||
['re', '转给姐妹们，一起讨论讨论'], ['xue', '先查查权威说法，看有没有依据'],
|
||||
['nuan', '宁可信其有，先不吃了'], ['song', '适量就好，不太当回事'] ] },
|
||||
{ ic: 'bag', q: '准备待产包，你的风格更像？', o: [
|
||||
['song', '买齐必需品，其他缺啥再补'], ['nuan', '小衣服都洗好晒好，叠得整整齐齐'],
|
||||
['xue', '按清单逐项打勾，一样不落'], ['re', '拉上闺蜜一起逛，顺手拍照分享'] ] },
|
||||
{ ic: 'cup', q: '理想的孕期周末是？', o: [
|
||||
['xue', '去上一节孕妈课，或看本育儿书'], ['re', '约朋友喝个下午茶聊聊天'],
|
||||
['song', '窝在家追剧、睡个自然醒'], ['nuan', '给宝宝写写日记、整理小衣柜'] ] },
|
||||
{ ic: 'users', q: '家里人对带娃方式有不同意见时，你会？', o: [
|
||||
['nuan', '先照顾大家情绪，慢慢沟通'], ['song', '不纠结，大方向对就行'],
|
||||
['re', '拉上全家开个小会，摊开聊'], ['xue', '拿出资料，讲讲科学依据'] ] },
|
||||
{ ic: 'camera', q: '想象宝宝出生后的第一张照片，你希望是？', o: [
|
||||
['re', '全家人围着宝宝笑成一团'], ['nuan', '宝宝小手紧紧握着你的手指'],
|
||||
['xue', '宝宝和他的身长体重出生卡'], ['song', '宝宝睡得四仰八叉的样子'] ] }
|
||||
{ q: '刚知道怀孕的那一刻，你第一件事是？', o: [
|
||||
['nuan', '摸摸肚子，跟宝宝打招呼'], ['xue', '马上搜孕早期注意事项'], ['re', '第一时间告诉最亲的人'], ['song', '先吃顿好的庆祝一下'] ] },
|
||||
{ q: '明天要产检了，今晚你会？', o: [
|
||||
['xue', '把要问医生的问题列好'], ['song', '早早睡觉，明天再说'], ['nuan', '有点忐忑，多摸摸肚子'], ['re', '去妈妈群问问要查啥'] ] },
|
||||
{ q: '产检排队等了一个多小时，你在干嘛？', o: [
|
||||
['re', '和旁边孕妈聊成了朋友'], ['xue', '翻看之前的检查报告'], ['song', '刷剧玩手机，不着急'], ['nuan', '和肚里宝宝说悄悄话'] ] },
|
||||
{ q: '半夜宝宝在肚子里拳打脚踢，你会？', o: [
|
||||
['song', '翻个身接着睡'], ['nuan', '轻轻拍拍：妈妈在呢'], ['xue', '看看时间，记一下胎动'], ['re', '叫醒老公一起感受'] ] },
|
||||
{ q: '刷到一条「孕期千万别吃 XX」，你会？', o: [
|
||||
['re', '转给姐妹们一起讨论'], ['nuan', '宁可信其有，先不吃'], ['song', '适量就好，不太在意'], ['xue', '先查查权威说法'] ] },
|
||||
{ q: '突然特别想吃一样东西，你会？', o: [
|
||||
['xue', '先查查孕妇能不能吃'], ['song', '想吃就吃，开心最重要'], ['nuan', '自己做一份，吃得放心'], ['re', '发朋友圈求推荐好店'] ] },
|
||||
{ q: '婆婆端来一大锅补汤，你会？', o: [
|
||||
['re', '拍照发群：被宠到了'], ['xue', '先问问汤里放了什么'], ['nuan', '笑着喝两口，谢谢婆婆'], ['song', '喝一碗，剩下全家分'] ] },
|
||||
{ q: '莫名其妙想哭的时候，你会？', o: [
|
||||
['song', '睡一觉，醒来就好了'], ['re', '打电话找闺蜜倾诉'], ['xue', '查查是不是激素在作怪'], ['nuan', '抱抱自己，允许情绪来'] ] },
|
||||
{ q: '家里人对带娃方式意见不同时，你会？', o: [
|
||||
['nuan', '先照顾大家情绪再沟通'], ['song', '大方向对就行，不纠结'], ['re', '全家开个小会摊开聊'], ['xue', '拿出资料讲科学依据'] ] },
|
||||
{ q: '老公说「我也想参与孕期」，你会让他？', o: [
|
||||
['xue', '学会看懂产检报告'], ['nuan', '每晚给宝宝讲个故事'], ['song', '负责每天逗你开心'], ['re', '陪你去上孕妈课'] ] },
|
||||
{ q: '理想的孕期周末是？', o: [
|
||||
['re', '约朋友喝个下午茶'], ['song', '窝在家睡到自然醒'], ['xue', '上节孕妈课或看本书'], ['nuan', '给宝宝写日记、理衣柜'] ] },
|
||||
{ q: '给宝宝取名，你的方式是？', o: [
|
||||
['song', '小名先叫着，大名不急'], ['xue', '查字义、读音和寓意'], ['re', '发起全家投票'], ['nuan', '选一个念着最温柔的'] ] },
|
||||
{ q: '准备待产包，你的风格更像？', o: [
|
||||
['nuan', '小衣服洗好晒好叠整齐'], ['re', '拉闺蜜一起逛，顺手分享'], ['song', '买齐必需品，缺啥再补'], ['xue', '按清单逐项打勾'] ] },
|
||||
{ q: '离预产期还有一个月，你在？', o: [
|
||||
['xue', '反复熟悉入院流程路线'], ['re', '和孕妈群约好互报喜讯'], ['nuan', '每天跟宝宝说慢慢来'], ['song', '该吃吃该睡睡，等发动'] ] },
|
||||
{ q: '想象宝宝出生后的第一张照片，你希望是？', o: [
|
||||
['re', '全家围着宝宝笑成一团'], ['song', '宝宝睡得四仰八叉'], ['nuan', '小手紧紧握着你的手指'], ['xue', '宝宝和身长体重出生卡'] ] },
|
||||
{ q: '想象宝宝第一次大哭不止，你会？', o: [
|
||||
['song', '先稳住自己，别慌'], ['nuan', '抱在怀里轻轻哼歌'], ['xue', '逐项排查：饿了还是尿了'], ['re', '视频问问有经验的妈妈'] ] }
|
||||
];
|
||||
$('#qTotal').textContent = QS.length;
|
||||
|
||||
var views = { start: $('#vStart'), quiz: $('#vQuiz'), result: $('#vResult') };
|
||||
var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (es) {
|
||||
es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
|
||||
}, { root: sc, threshold: .12 }) : null;
|
||||
}, { root: sc, threshold: .1 }) : null;
|
||||
|
||||
function show(name) {
|
||||
Object.keys(views).forEach(function (k) { views[k].classList.toggle('on', k === name); });
|
||||
@@ -383,66 +289,53 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
});
|
||||
}
|
||||
|
||||
/* 开始页：4 种类型预览 */
|
||||
$('#typeList').innerHTML = ORDER.map(function (k) {
|
||||
var t = TYPES[k];
|
||||
return '<li style="background:' + t.bg + ';color:' + t.c + '">' + svg(t.ic) + '<span style="color:#3B2A2A">' + t.name + '</span></li>';
|
||||
}).join('');
|
||||
|
||||
/* 答题 */
|
||||
var cur = 0, ans = [], busy = false;
|
||||
var card = $('#qCard');
|
||||
var body = $('#qBody');
|
||||
|
||||
function paint() {
|
||||
var q = QS[cur];
|
||||
$('#qNo').textContent = cur + 1;
|
||||
$('#qLeft').textContent = cur === QS.length - 1 ? '最后一题' : '还剩 ' + (QS.length - 1 - cur) + ' 题';
|
||||
$('#qFill').style.width = ((cur + 1) / QS.length * 100) + '%';
|
||||
$('#qTag').textContent = '第 ' + (cur + 1) + ' 题';
|
||||
$('#qTitle').textContent = q.q;
|
||||
useRef($('#qIcoUse'), q.ic);
|
||||
$('#qOpts').innerHTML = q.o.map(function (o, i) {
|
||||
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) + '</span>' +
|
||||
'<svg class="ic ok"><use href="#i-check" xlink:href="#i-check"/></svg></button>';
|
||||
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '" data-t="' + o[0] + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) + '</span></button>';
|
||||
}).join('');
|
||||
$('#prevBtn').disabled = cur === 0;
|
||||
}
|
||||
|
||||
/* 卡片切换：旧卡滑出 → 换内容 → 新卡从另一侧滑入；dir=-1 为返回上一题 */
|
||||
function swap(dir, after) {
|
||||
/* 轻柔切换：淡出上移 → 换内容 → 自下淡入 */
|
||||
function swap(after) {
|
||||
busy = true;
|
||||
var rev = dir < 0;
|
||||
card.classList.toggle('rev', rev);
|
||||
card.classList.add('out');
|
||||
body.classList.add('out');
|
||||
setTimeout(function () {
|
||||
after();
|
||||
card.classList.remove('out');
|
||||
card.classList.add('pre');
|
||||
void card.offsetWidth;
|
||||
card.classList.remove('pre', 'rev');
|
||||
setTimeout(function () { busy = false; }, 260);
|
||||
}, 260);
|
||||
body.classList.remove('out');
|
||||
body.classList.add('pre');
|
||||
void body.offsetWidth;
|
||||
body.classList.remove('pre');
|
||||
setTimeout(function () { busy = false; }, 200);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
$('#qOpts').addEventListener('click', function (e) {
|
||||
var b = e.target.closest('.opt'); if (!b || busy) return;
|
||||
busy = true;
|
||||
var i = +b.dataset.i;
|
||||
ans[cur] = i;
|
||||
ans[cur] = +b.dataset.i;
|
||||
[].forEach.call(document.querySelectorAll('#qOpts .opt'), function (x) { x.classList.toggle('sel', x === b); });
|
||||
setTimeout(function () {
|
||||
if (cur < QS.length - 1) swap(1, function () { cur++; paint(); });
|
||||
if (cur < QS.length - 1) swap(function () { cur++; paint(); });
|
||||
else { busy = false; finish(); }
|
||||
}, 320);
|
||||
}, 250);
|
||||
});
|
||||
$('#prevBtn').addEventListener('click', function () {
|
||||
if (busy || cur === 0) return;
|
||||
swap(-1, function () { cur--; paint(); });
|
||||
swap(function () { cur--; paint(); });
|
||||
});
|
||||
|
||||
function startQuiz() {
|
||||
cur = 0; ans = []; busy = false;
|
||||
card.classList.remove('out', 'pre', 'rev');
|
||||
body.classList.remove('out', 'pre');
|
||||
paint();
|
||||
show('quiz');
|
||||
}
|
||||
@@ -450,60 +343,78 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
$('#againBtn').addEventListener('click', startQuiz);
|
||||
|
||||
function finish() {
|
||||
var sc_ = { nuan: 0, xue: 0, song: 0, re: 0 };
|
||||
ans.forEach(function (i, qi) { sc_[QS[qi].o[i][0]]++; });
|
||||
var top = ORDER.reduce(function (a, k) { return sc_[k] > sc_[a] ? k : a; }, ORDER[0]);
|
||||
var s = { nuan: 0, xue: 0, song: 0, re: 0 };
|
||||
ans.forEach(function (i, qi) { s[QS[qi].o[i][0]]++; });
|
||||
var top = ORDER.reduce(function (a, k) { return s[k] > s[a] ? k : a; }, ORDER[0]);
|
||||
/* 平分时以最后一题的选择打破平局（如果它属于并列第一） */
|
||||
var last = QS[QS.length - 1].o[ans[QS.length - 1]][0];
|
||||
if (sc_[last] === sc_[top]) top = last;
|
||||
var rec = { type: top, scores: sc_, at: Date.now() };
|
||||
if (s[last] === s[top]) top = last;
|
||||
var rec = { type: top, scores: s, at: Date.now() };
|
||||
try { localStorage.setItem(KEY, JSON.stringify(rec)); } catch (e) {}
|
||||
render(rec, false);
|
||||
}
|
||||
|
||||
var curType = null;
|
||||
function render(rec, fromCache) {
|
||||
var t = TYPES[rec.type];
|
||||
var root = views.result;
|
||||
root.style.setProperty('--k', t.c);
|
||||
root.style.setProperty('--kbg', t.bg);
|
||||
curType = t;
|
||||
$('#rImg').src = t.img; $('#rImg').alt = t.alt;
|
||||
$('#rName').textContent = t.name;
|
||||
$('#rName').textContent = t.name + '妈妈';
|
||||
$('#rLine').textContent = t.line;
|
||||
useRef($('#rYouIc'), t.ic);
|
||||
var last = $('#rLast');
|
||||
if (fromCache && rec.at) {
|
||||
var d = new Date(rec.at);
|
||||
last.textContent = '上次测试 · ' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
|
||||
last.classList.add('on');
|
||||
} else last.classList.remove('on');
|
||||
$('#rAdv').innerHTML = t.adv.map(function (a) {
|
||||
return '<li><span class="ai">' + svg(a[0]) + '</span><div><b>' + esc(a[1]) + '</b><span>' + esc(a[2]) + '</span></div></li>';
|
||||
}).join('');
|
||||
$('#rTips').innerHTML = t.tips.map(function (a) {
|
||||
return '<div class="tipc"><span class="wi">' + svg('bulb') + '</span><div><b>' + esc(a[0]) + '</b><p>' + esc(a[1]) + '</p></div></div>';
|
||||
}).join('');
|
||||
$('#rAdv').innerHTML = t.adv.map(function (a) { return '<span>' + esc(a) + '</span>'; }).join('');
|
||||
$('#rTip').textContent = t.tip;
|
||||
useRef($('#rToolIc'), t.tool.ic);
|
||||
$('#rToolName').textContent = t.tool.name;
|
||||
$('#rToolDesc').textContent = t.tool.desc;
|
||||
$('#rTool').onclick = function () { location.href = t.tool.path + location.search + location.hash; };
|
||||
var total = 0; ORDER.forEach(function (k) { total += rec.scores[k] || 0; });
|
||||
total = total || 1;
|
||||
$('#rDist').innerHTML = ORDER.map(function (k) {
|
||||
var x = TYPES[k], n = rec.scores[k] || 0, pct = Math.round(n / total * 100);
|
||||
return '<div class="dr"><div class="dl" style="color:' + x.c + '">' + svg(x.ic) + '<span style="color:#3B2A2A">' + x.name + '</span>' +
|
||||
(k === rec.type ? '<span class="me" style="background:' + x.c + '">你的类型</span>' : '') +
|
||||
'<em>' + pct + '%</em></div><div class="tr"><i data-w="' + pct + '" style="background:' + x.c + '"></i></div></div>';
|
||||
/* 占比按四舍五入后补差，保证合计 100% */
|
||||
var pcts = ORDER.map(function (k) { return Math.round((rec.scores[k] || 0) / total * 100); });
|
||||
var diff = 100 - pcts.reduce(function (a, b) { return a + b; }, 0);
|
||||
pcts[ORDER.indexOf(rec.type)] += diff;
|
||||
$('#rDist').innerHTML = ORDER.map(function (k, i) {
|
||||
return '<div class="dr' + (k === rec.type ? ' me' : '') + '"><span class="n">' + TYPES[k].name.slice(0, 4) + '</span>' +
|
||||
'<span class="tr"><i data-w="' + pcts[i] + '"></i></span><span class="p">' + pcts[i] + '%</span></div>';
|
||||
}).join('');
|
||||
show('result');
|
||||
/* 分布条在可见后再长出来 */
|
||||
var bars = document.querySelectorAll('#rDist i');
|
||||
function grow() { [].forEach.call(bars, function (b) { b.style.width = b.dataset.w + '%'; }); }
|
||||
if (io) {
|
||||
var bo = new IntersectionObserver(function (es) { if (es[0].isIntersecting) { setTimeout(grow, 150); bo.disconnect(); } }, { root: sc, threshold: .2 });
|
||||
var bo = new IntersectionObserver(function (es) { if (es[0].isIntersecting) { setTimeout(grow, 120); bo.disconnect(); } }, { root: sc, threshold: .2 });
|
||||
bo.observe($('#rDist'));
|
||||
} else grow();
|
||||
}
|
||||
|
||||
/* 分享：复制一段文字（链接不带身份 hash），复制不了就提示截图 */
|
||||
var tt;
|
||||
function toast(msg) {
|
||||
var el = $('#toast'); el.textContent = msg; el.classList.add('on');
|
||||
clearTimeout(tt); tt = setTimeout(function () { el.classList.remove('on'); }, 2400);
|
||||
}
|
||||
function copy(text) {
|
||||
function legacy() { return new Promise(function (ok, no) {
|
||||
var ta = document.createElement('textarea');
|
||||
ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:-999px;opacity:0';
|
||||
document.body.appendChild(ta); ta.select();
|
||||
var r = false; try { r = document.execCommand('copy'); } catch (e) {}
|
||||
document.body.removeChild(ta);
|
||||
r ? ok() : no();
|
||||
}); }
|
||||
if (navigator.clipboard && window.isSecureContext) return navigator.clipboard.writeText(text).catch(legacy);
|
||||
return legacy();
|
||||
}
|
||||
$('#shareBtn').addEventListener('click', function () {
|
||||
if (!curType) return;
|
||||
var text = '老公，我测出来是「' + curType.name + '妈妈」：' + curType.line + '。你觉得像吗？';
|
||||
copy(text).then(function () { toast('已复制，发给老公看看吧'); }, function () { toast('截个图发给老公看看吧'); });
|
||||
});
|
||||
|
||||
/* 入口：有上次结果直接看结果，否则开始页 */
|
||||
var saved = null;
|
||||
try { saved = JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) {}
|
||||
|
||||
@@ -5,481 +5,425 @@
|
||||
<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：孕期首页「其他妈妈也在搜」第 1 条入口）。
|
||||
沿用 topic/wen 妊娠纹专题的视觉与结构：hero + 「先记住这 3 件事」+ 每节一句高亮结论 + 扁平双色 SVG 图标（页内 symbol 复用，不用 emoji）。
|
||||
核心是可交互计算器：城市 / 分娩方式 / 医院 / 月子 / 喂养 → 四块费用区间 + 总计，环形图看占比。
|
||||
价格表为常见区间的保守粗估（元，未扣医保），只写品类不点名品牌、不放百分比统计；改数字只改脚本里的 COST 表。
|
||||
插画 img/*.webp 由 AI 生成（画面不含文字）。自成一页：不引 app.js；回首页走相对路径 ../../ 并带回 search + hash。 -->
|
||||
<!-- 孕期专题 · 生娃计算器（孕期首页「其他妈妈也在搜」第 1 条入口）。
|
||||
2026-10-31 v2 重做：按 topic-spec v2（主色 #18A058），改成「一屏一题 → 出结果」的分步计算器。
|
||||
开始屏 → 7 个问题（城市 / 医院 / 分娩 / 月子 / 喂养 / 1～3 岁谁带 / 花钱风格）→ 结果屏（生下来 / 养到 1、2、3 岁切换）。
|
||||
选择存 localStorage「mmbox.huafei.v2」，再进来直接看上次结果。改价格只改脚本顶部 COST 表。
|
||||
自成一页：不引 app.js；返回走 history.back 或相对路径 ../../ 并带回 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;
|
||||
--k1:#F4593C;--k2:#E8476F;--k3:#C2185B;--k4:#8E6BB8}
|
||||
:root{--c:#18A058;--cbg:#EAF7F0;--h:#1F2329;--t:#4E5969;--s:#86909C;--line:#EEF0F3;--gray:#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;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,input{font:inherit;border:0;background:none;color:inherit}
|
||||
button{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}
|
||||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.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}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);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:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--h)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-size:16px;font-weight:600;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)}
|
||||
.screen{display:none;padding:0 20px}
|
||||
.screen.on{display:block;animation:fd .35s ease both}
|
||||
@keyframes fd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||||
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}
|
||||
|
||||
/* 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:18px;font-weight:800;white-space:nowrap}
|
||||
.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}
|
||||
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border-radius:99px;background:var(--c);color:#fff;font-size:16px;font-weight:600}
|
||||
.btn.ghost{background:#fff;color:var(--c);border:1px solid var(--c)}
|
||||
|
||||
/* 目录 */
|
||||
.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:12px;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}
|
||||
/* 开始屏 */
|
||||
.hero{margin-top:8px;height:200px;border-radius:20px;overflow:hidden;background:var(--gray)}
|
||||
.hero img{width:100%;height:100%;object-fit:cover}
|
||||
h1{margin-top:22px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.lead{margin-top:8px;color:var(--t)}
|
||||
.start-list{margin:20px 0 26px;padding:14px 16px;border-radius:18px;background:var(--gray);display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13.5px;color:var(--t);line-height:1.6}
|
||||
.start-list span{display:flex;align-items:center;gap:6px}
|
||||
.start-list i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--c)}
|
||||
.tiny{margin-top:12px;font-size:12.5px;color:var(--s);text-align:center;line-height:1.6}
|
||||
|
||||
/* 段标题 + 段落重点结论 */
|
||||
.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)}
|
||||
.pic-card{margin-top:14px;border-radius:22px;overflow:hidden;background:#FFF6F2}
|
||||
.pic-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
/* 问题屏 */
|
||||
.prog{display:flex;align-items:center;gap:12px;margin-top:6px}
|
||||
.prog .pb{flex:1;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
|
||||
.prog .pb i{display:block;height:100%;border-radius:9px;background:var(--c);transition:width .3s}
|
||||
.prog span{font-size:13px;color:var(--s);font-variant-numeric:tabular-nums}
|
||||
.qh{margin-top:26px;font-size:22px;font-weight:800;line-height:1.35;color:var(--h)}
|
||||
.qs{margin-top:4px;font-size:13.5px;color:var(--s)}
|
||||
.opts{margin-top:20px;display:flex;flex-direction:column;gap:12px}
|
||||
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px;border-radius:18px;border:1.5px solid var(--line);background:#fff;text-align:left;transition:border-color .15s,background .15s}
|
||||
.opt .ox{flex:1;min-width:0}
|
||||
.opt b{display:block;font-size:16.5px;font-weight:700;color:var(--h);line-height:1.4}
|
||||
.opt small{display:block;margin-top:2px;font-size:13px;color:var(--s);line-height:1.45}
|
||||
.opt .rd{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #D5D9DE;display:grid;place-items:center}
|
||||
.opt.on{border-color:var(--c);background:var(--cbg)}
|
||||
.opt.on .rd{border-color:var(--c);background:var(--c)}
|
||||
.opt.on .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
|
||||
.prev{display:inline-flex;align-items:center;gap:2px;margin-top:22px;padding:6px 4px;font-size:14px;color:var(--s)}
|
||||
.prev .ic{width:18px;height:18px}
|
||||
|
||||
/* ① 计算器 */
|
||||
.calc{margin-top:14px;padding:16px 14px 14px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 24px rgba(194,24,91,.06)}
|
||||
.q{margin-top:14px}
|
||||
.q:first-child{margin-top:0}
|
||||
.q-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
|
||||
.q-h .ic{font-size:17px;color:var(--c)}
|
||||
.q-h small{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--mute)}
|
||||
.seg{display:flex;gap:6px;margin-top:8px}
|
||||
.seg button{flex:1;min-width:0;padding:9px 2px;border-radius:14px;background:#FAF3F1;border:1.5px solid transparent;font-size:13px;line-height:1.3;color:#6A5452;text-align:center;transition:background .2s,border-color .2s,color .2s}
|
||||
.seg button small{display:block;font-size:10.5px;color:var(--mute);margin-top:1px}
|
||||
.seg button.on{background:#FFEDE6;border-color:var(--c);color:var(--deep);font-weight:700}
|
||||
.seg button.on small{color:#D9765F}
|
||||
.sw{margin-top:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#FAF3F1;width:100%;text-align:left}
|
||||
.sw .tx{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35}
|
||||
.sw .tx small{display:block;font-size:11.5px;color:var(--mute);font-weight:400}
|
||||
.sw .tg{flex:none;width:44px;height:26px;border-radius:99px;background:#E5D6D2;position:relative;transition:background .2s}
|
||||
.sw .tg::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .2s}
|
||||
.sw.on .tg{background:var(--c)}
|
||||
.sw.on .tg::after{transform:translateX(18px)}
|
||||
/* 结果屏 */
|
||||
.r-t{margin-top:6px;font-size:20px;font-weight:800;color:var(--h)}
|
||||
.chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
|
||||
.chips button{padding:2px 10px;border-radius:99px;background:var(--gray);font-size:12.5px;color:var(--t);line-height:1.8}
|
||||
.hint{margin-top:6px;font-size:12.5px;color:var(--s)}
|
||||
.tabs{margin-top:16px;display:flex;padding:3px;border-radius:99px;background:var(--gray)}
|
||||
.tabs button{flex:1;min-width:0;height:36px;border-radius:99px;font-size:14px;color:var(--t);white-space:nowrap;transition:background .2s,color .2s}
|
||||
.tabs button.on{background:#fff;color:var(--c);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.06)}
|
||||
.total{margin-top:14px;padding:20px 16px 18px;border-radius:18px;background:var(--cbg);text-align:center}
|
||||
.total .l{font-size:13px;color:var(--t)}
|
||||
.total .v{margin-top:2px;font-size:30px;font-weight:800;color:var(--c);line-height:1.3;font-variant-numeric:tabular-nums}
|
||||
.total .v span{white-space:nowrap}
|
||||
.total .m{margin-top:4px;font-size:13.5px;color:var(--t)}
|
||||
.total .m b{color:var(--h)}
|
||||
.stack{margin-top:18px;display:flex;gap:2px;height:12px;border-radius:9px;overflow:hidden}
|
||||
.stack i{display:block;height:100%;transition:flex-grow .4s,background .3s}
|
||||
.list{margin-top:10px;border-top:1px solid var(--line)}
|
||||
.list details{border-bottom:1px solid var(--line)}
|
||||
.list summary{list-style:none;display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer}
|
||||
.list summary::-webkit-details-marker{display:none}
|
||||
.list .dot{flex:none;width:10px;height:10px;border-radius:3px}
|
||||
.list .nm{flex:1;min-width:0;font-size:15px;color:var(--h)}
|
||||
.list .rg{font-size:15px;font-weight:700;color:var(--h);white-space:nowrap;font-variant-numeric:tabular-nums}
|
||||
.list .ar{flex:none;width:16px;height:16px;color:#C0C5CC;transition:transform .2s}
|
||||
.list details[open] .ar{transform:rotate(180deg)}
|
||||
.list .ds{padding:0 2px 12px 20px;font-size:13px;color:var(--s);line-height:1.6}
|
||||
.list details.off .nm,.list details.off .rg{color:#C0C5CC;font-weight:400}
|
||||
.list details.off .rg{font-size:13px}
|
||||
|
||||
.res{margin-top:16px;padding:16px 14px 14px;border-radius:24px;background:linear-gradient(160deg,#FFEDE6,#FFF8F4);border:1px solid #FBDCD2}
|
||||
.res-top{display:flex;align-items:center;gap:14px}
|
||||
.donut{flex:none;position:relative;width:min(128px,32vw);height:min(128px,32vw)}
|
||||
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
|
||||
.donut circle{fill:none;stroke-width:16;transition:stroke-dasharray .5s,stroke-dashoffset .5s}
|
||||
.donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;text-align:center}
|
||||
.donut .mid small{font-size:11px;color:var(--sub)}
|
||||
.donut .mid b{font-size:19px;color:var(--deep);white-space:nowrap}
|
||||
.donut .mid span{font-size:10.5px;color:var(--mute)}
|
||||
.tot{flex:1;min-width:0}
|
||||
.tot .l{font-size:12.5px;color:var(--sub)}
|
||||
.tot .v{margin-top:2px;font-size:22px;font-weight:800;color:var(--deep);line-height:1.2}
|
||||
.tot .v span{white-space:nowrap}
|
||||
.tot .v small{font-size:13px;font-weight:700;margin-left:2px}
|
||||
.tot .d{margin-top:6px;font-size:12px;color:#8A6A64;line-height:1.5}
|
||||
.tot .d b{white-space:nowrap}
|
||||
.blk{margin-top:12px;display:flex;flex-direction:column;gap:8px}
|
||||
.bk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fff}
|
||||
.bk .bi{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:19px;color:#fff}
|
||||
.bk .bx{flex:1;min-width:0}
|
||||
.bk .r1{display:flex;align-items:baseline;gap:6px}
|
||||
.bk .r1 b{font-size:14px;white-space:nowrap}
|
||||
.bk .r1 em{margin-left:auto;font-style:normal;font-size:14px;font-weight:800;white-space:nowrap}
|
||||
.bk .bar2{margin-top:6px;height:7px;border-radius:9px;background:#F6ECE9;overflow:hidden}
|
||||
.bk .bar2 i{display:block;height:100%;border-radius:9px;transition:width .5s}
|
||||
.bk .r2{margin-top:4px;font-size:11.5px;color:var(--mute);line-height:1.4}
|
||||
.note{margin-top:12px;display:flex;gap:8px;padding:10px 12px;border-radius:14px;background:#FFF8E9;border:1px solid #F7E5BE;font-size:12px;color:#7A6343;line-height:1.55}
|
||||
.note .ic{flex:none;font-size:16px;color:#B7791F;margin-top:1px}
|
||||
|
||||
/* ② 花在哪：清单卡 */
|
||||
.item{margin-top:14px;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden}
|
||||
.item .hd{display:flex;align-items:center;gap:10px;padding:13px 14px 0}
|
||||
.item .hi{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:#fff}
|
||||
.item h3{font-size:16.5px;line-height:1.35}
|
||||
.item .hd small{margin-left:auto;font-size:11.5px;color:var(--mute);white-space:nowrap}
|
||||
.item .concl{margin:8px 14px 0;font-size:15px;font-weight:800;line-height:1.45}
|
||||
.item .concl i{font-style:normal;color:var(--deep)}
|
||||
.item ul{list-style:none;padding:6px 14px 12px}
|
||||
.item li{display:flex;gap:10px;padding:7px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.5}
|
||||
.item li:first-child{border-top:0}
|
||||
.item li .k{flex:none;width:76px;font-size:12.5px;font-weight:600;color:var(--ink)}
|
||||
.item li .v{flex:1;min-width:0}
|
||||
.item .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
|
||||
/* ③ 能省 / 不能省 */
|
||||
.two{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
|
||||
.col{border-radius:22px;padding:14px;border:1.5px solid}
|
||||
.col.ok{background:#F3FAF4;border-color:#CFEAD7}
|
||||
.col.no{background:var(--rbg);border-color:#F2B9B9}
|
||||
.col .ch{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
|
||||
.col.ok .ch{color:var(--green)}
|
||||
.col.no .ch{color:var(--red)}
|
||||
.col .ch .ic{font-size:22px}
|
||||
.col ul{list-style:none;margin-top:8px}
|
||||
.col li{display:flex;gap:8px;padding:7px 0;border-top:1px dashed rgba(0,0,0,.07);font-size:13px;line-height:1.5;color:#5A4A48}
|
||||
.col li:first-child{border-top:0}
|
||||
.col li .ic{flex:none;font-size:16px;margin-top:2px}
|
||||
.col.ok li .ic{color:var(--green)}
|
||||
.col.no li .ic{color:var(--red)}
|
||||
.col li b{color:var(--ink)}
|
||||
|
||||
/* ④ 生育保险 */
|
||||
.ins{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||||
.ins div{padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c)}
|
||||
.ins div:nth-child(2){border-top-color:var(--deep)}
|
||||
.ins .ii{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px}
|
||||
.ins h4{margin-top:6px;font-size:14.5px;line-height:1.35}
|
||||
.ins p{margin-top:3px;font-size:12px;color:var(--sub);line-height:1.5}
|
||||
.formula{margin-top:14px;padding:14px 12px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
|
||||
.formula .ft{font-size:14px;font-weight:700;text-align:center;color:var(--deep)}
|
||||
.eq{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:10px}
|
||||
.eq .it{flex:1;min-width:0;max-width:96px;padding:9px 2px 8px;border-radius:16px;background:#fff;box-shadow:0 3px 10px rgba(240,112,79,.08);font-size:11.5px;line-height:1.3;text-align:center}
|
||||
.eq .it .ic{display:block;margin:0 auto 4px;font-size:24px;color:var(--c)}
|
||||
.eq .op{flex:none;font-size:18px;color:var(--c);font-weight:700}
|
||||
.eq .rs{background:var(--deep);color:#fff}
|
||||
.eq .rs .ic{color:#fff}
|
||||
.est{margin-top:12px;padding:12px;border-radius:16px;background:#fff}
|
||||
.est .fl{display:flex;gap:8px}
|
||||
.est label{flex:1;min-width:0;font-size:12px;color:var(--sub)}
|
||||
.est input{display:block;width:100%;margin-top:4px;height:40px;padding:0 10px;border-radius:12px;background:#FAF3F1;border:1.5px solid #F1E2DD;font-size:16px;font-weight:700;color:var(--ink)}
|
||||
.est input:focus{outline:none;border-color:var(--c)}
|
||||
.est .out{margin-top:10px;display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--sub)}
|
||||
.est .out b{margin-left:auto;font-size:22px;color:var(--deep);white-space:nowrap}
|
||||
.est .out b small{font-size:12px;margin-left:2px}
|
||||
.steps{margin-top:14px;list-style:none;counter-reset:s}
|
||||
.steps li{position:relative;padding:10px 12px 10px 46px;margin-top:8px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.55;color:#6A5452}
|
||||
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:11px;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
|
||||
.steps li b{display:block;color:var(--ink);font-size:14px}
|
||||
|
||||
/* ⑤ 问医院 */
|
||||
.ask{margin-top:12px;display:flex;flex-direction:column;gap:10px}
|
||||
.ak{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.ak .ai{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px}
|
||||
.ak b{display:block;font-size:14.5px;line-height:1.4}
|
||||
.ak p{margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.55}
|
||||
|
||||
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px}
|
||||
.foot{margin:28px 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}}
|
||||
.card{margin-top:16px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff}
|
||||
.row{display:flex;gap:10px;align-items:flex-start}
|
||||
.row+.row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
|
||||
.row .ic{margin-top:3px;color:var(--c)}
|
||||
.row b{display:block;font-size:15px;color:var(--h);line-height:1.5}
|
||||
.row b em{font-style:normal;color:var(--c)}
|
||||
.row p{font-size:13.5px;color:var(--t);line-height:1.6}
|
||||
.ins p{margin-top:2px}
|
||||
.ins .f span{white-space:nowrap}
|
||||
.ins .f{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:10px;background:var(--gray);font-size:12.5px;color:var(--h)}
|
||||
.acts{margin-top:22px}
|
||||
.note{margin-top:14px;font-size:12px;color:var(--s);line-height:1.6;text-align:center}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 图标库：扁平双色（线条 + 同色浅面），统一 24 栅格 / 2px 圆角线条 -->
|
||||
<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-calc" viewBox="0 0 24 24"><rect class="f" x="5" y="3" width="14" height="18" rx="3"/><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7h7M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01M8.5 15h.01M12 15h.01M15.5 15v2.5M8.5 17.5h.01M12 17.5h.01"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M9 7.5l3 4 3-4M12 11.5V17M9 12.5h6M9 15h6"/></symbol>
|
||||
<symbol id="i-piggy" viewBox="0 0 24 24"><path class="f" d="M4 12a7 6 0 0 1 12.5-3.6H19l-.6 2.6 1.6 1.2v3l-2 .6-1.5 2.2V20h-3v-1.5h-3V20h-3v-2.2A6 6 0 0 1 4 12z"/><path d="M4 12a7 6 0 0 1 12.5-3.6H19l-.6 2.6 1.6 1.2v3l-2 .6-1.5 2.2V20h-3v-1.5h-3V20h-3v-2.2A6 6 0 0 1 4 12zM10 6.5h3M4 12c-1 0-1.5-.8-1.5-1.5"/><circle class="s" cx="15.5" cy="11" r=".9"/></symbol>
|
||||
<symbol id="i-city" viewBox="0 0 24 24"><path class="f" d="M4 21V9l5-3v15zM13 21V4h7v17z"/><path d="M3 21h18M4 21V9l5-3v15M13 21V4h7v17M9 11h4M16 8h1M16 11.5h1M16 15h1M6.5 12h.01M6.5 15.5h.01"/></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-steth" viewBox="0 0 24 24"><path class="f" d="M18 13.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/><path d="M6 3v5a4 4 0 0 0 8 0V3M10 12v2.5a4.5 4.5 0 0 0 9 0V13.5"/><circle cx="18" cy="16" r="2.5"/></symbol>
|
||||
<symbol id="i-bed" viewBox="0 0 24 24"><path class="f" d="M3 11h18v6H3z"/><path d="M3 6v13M21 12v7M3 17h18M3 11h18"/><circle cx="7.5" cy="8.5" r="1.8"/></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-home" viewBox="0 0 24 24"><path class="f" d="M5 10l7-6 7 6v10H5z"/><path d="M3 11.5L12 4l9 7.5M5 10v10h14V10M10 20v-5.5h4V20"/></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.4 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.4 4.3 4.3 0 0 1 19.5 10c0 5.5-7.5 10-7.5 10z"/></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-bottle" viewBox="0 0 24 24"><path class="f" d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2z"/><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V8h6v2M10.5 8V5.5a1.5 1.5 0 0 1 3 0V8M8 14h3M8 17h3"/></symbol>
|
||||
<symbol id="i-syringe" viewBox="0 0 24 24"><path class="f" d="M14.5 5.5l4 4-8 8H6.5v-4z"/><path d="M14.5 5.5l4 4-8 8H6.5v-4zM17 3l4 4M19 5l-2.5 2.5M6.5 17.5L3 21M10.5 9.5l2 2M8.5 11.5l2 2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
|
||||
<symbol id="i-doc" viewBox="0 0 24 24"><path class="f" d="M6 3h8l4 4v14H6z"/><path d="M6 3h8l4 4v14H6zM14 3v4h4M9 11h6M9 14.5h6M9 18h3"/></symbol>
|
||||
<symbol id="i-receipt" viewBox="0 0 24 24"><path class="f" d="M5 3h14v18l-2.3-1.5L14.3 21 12 19.5 9.7 21l-2.4-1.5L5 21z"/><path d="M5 3h14v18l-2.3-1.5L14.3 21 12 19.5 9.7 21l-2.4-1.5L5 21zM9 8h6M9 11.5h6M9 15h4"/></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="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2"/></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-wallet" viewBox="0 0 24 24"><rect class="f" x="3" y="6" width="18" height="14" rx="3"/><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M16 13h2.5M6 6l9-3 1.5 3"/></symbol>
|
||||
<symbol id="i-chat" viewBox="0 0 24 24"><path class="f" d="M4 5h16v11H9l-5 4z"/><path d="M4 5h16v11H9l-5 4zM8.5 9.5h7M8.5 12.5h4"/></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-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-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-bag" viewBox="0 0 24 24"><path class="f" d="M5 8h14l-1 13H6z"/><path d="M5 8h14l-1 13H6zM9 8V6a3 3 0 0 1 6 0v2"/></symbol>
|
||||
<symbol id="i-cart" viewBox="0 0 24 24"><path class="f" d="M6 6h15l-2 8H7.5z"/><path d="M3 3h2.5l2.5 11h11l2-8H6M9.5 19.5h.01M17 19.5h.01"/></symbol>
|
||||
<symbol id="i-team" viewBox="0 0 24 24"><circle class="f" cx="9" cy="8" r="3.5"/><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14a6.5 6.5 0 0 1 3.5 6"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 7.5l3 4 3-4M12 11.5V17M9 12.5h6M9 15h6"/></symbol>
|
||||
<symbol id="i-bulb" viewBox="0 0 24 24"><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-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></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">
|
||||
<h1>生娃计算器<br>到底要花多少钱？</h1>
|
||||
<p>选 5 个条件，算出产检、分娩、月子、宝宝第一年的大概花费</p>
|
||||
<!-- 开始屏 -->
|
||||
<section class="screen" id="sStart">
|
||||
<div class="hero"><img src="img/hero.webp" alt="孕妈在桌前记账"></div>
|
||||
<h1>生娃计算器<br>到底要花多少钱？</h1>
|
||||
<p class="lead">回答 7 个小问题，算出从怀孕到宝宝 3 岁大概要花多少。</p>
|
||||
<div class="start-list">
|
||||
<span><i></i>孕期产检</span><span><i></i>分娩住院</span>
|
||||
<span><i></i>坐月子</span><span><i></i>养到 1～3 岁</span>
|
||||
</div>
|
||||
<button class="btn" id="go">开始计算</button>
|
||||
<p class="tiny">约 1 分钟 · 不用填个人信息</p>
|
||||
</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>先定</em><small>月子方式</small></div></li>
|
||||
<li><span class="no">2</span><div class="tx"><b>宝宝第一年按月花</b><span>奶粉、纸尿裤每月都要买，别一次囤太多</span></div><div class="num"><em>12 个月</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-ban" xlink:href="#i-ban"/></svg><b>医生建议的产检一项都别省<span>要省钱从用品、月子方式上省，不从安全上省</span></b></div>
|
||||
<!-- 问题屏 -->
|
||||
<section class="screen" id="sQ">
|
||||
<div class="prog"><div class="pb"><i id="pbar"></i></div><span id="pnum">1 / 7</span></div>
|
||||
<h2 class="qh" id="qh"></h2>
|
||||
<p class="qs" id="qs"></p>
|
||||
<div class="opts" id="opts"></div>
|
||||
<button class="prev" id="prev"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一步</button>
|
||||
</section>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-calc" xlink:href="#i-calc"/></svg></span>算一算</button>
|
||||
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-receipt" xlink:href="#i-receipt"/></svg></span>花在哪</button>
|
||||
<button data-go="s3"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-piggy" xlink:href="#i-piggy"/></svg></span>怎么省</button>
|
||||
<button data-go="s4"><span class="ib" style="background:#F1EAF8;color:#8E6BB8"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></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>结果马上跟着变</mark>。</div>
|
||||
<p class="sec-sub">按常见价格区间粗略估算，各地各医院差别很大，以建档医院实际报价为准</p>
|
||||
|
||||
<div class="calc fade">
|
||||
<div class="q">
|
||||
<div class="q-h"><svg class="ic"><use href="#i-city" xlink:href="#i-city"/></svg>在哪个城市生</div>
|
||||
<div class="seg" data-k="city">
|
||||
<button data-v="0">一线城市</button>
|
||||
<button data-v="1" class="on">新一线<small>及二线</small></button>
|
||||
<button data-v="2">三四线<small>及县城</small></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q">
|
||||
<div class="q-h"><svg class="ic"><use href="#i-bed" xlink:href="#i-bed"/></svg>分娩方式<small>最终听医生评估</small></div>
|
||||
<div class="seg" data-k="way">
|
||||
<button data-v="0" class="on">顺产</button>
|
||||
<button data-v="1">剖宫产</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q">
|
||||
<div class="q-h"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>医院类型</div>
|
||||
<div class="seg" data-k="hosp">
|
||||
<button data-v="0" class="on">公立普通</button>
|
||||
<button data-v="1">公立特需<small>或私立</small></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q">
|
||||
<div class="q-h"><svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg>怎么坐月子</div>
|
||||
<div class="seg" data-k="yz">
|
||||
<button data-v="0" class="on">家人照顾</button>
|
||||
<button data-v="1">请月嫂</button>
|
||||
<button data-v="2">月子中心</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q">
|
||||
<div class="q-h"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg>宝宝怎么喂</div>
|
||||
<div class="seg" data-k="feed">
|
||||
<button data-v="0" class="on">母乳为主</button>
|
||||
<button data-v="1">混合喂养</button>
|
||||
<button data-v="2">奶粉为主</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sw" id="vac" aria-pressed="false">
|
||||
<span class="tx">算上自费疫苗<small>免费疫苗之外，自愿选打的那部分</small></span>
|
||||
<span class="tg"></span>
|
||||
</button>
|
||||
|
||||
<div class="res" id="res" aria-live="polite">
|
||||
<div class="res-top">
|
||||
<div class="donut">
|
||||
<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" stroke="#F6E6E1"/><g id="ring"></g></svg>
|
||||
<div class="mid"><small>大约</small><b id="midV">--</b><span>中间值</span></div>
|
||||
</div>
|
||||
<div class="tot">
|
||||
<div class="l">从怀孕到宝宝 1 岁，合计</div>
|
||||
<div class="v" id="totV">--</div>
|
||||
<div class="d" id="totD"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blk" id="blk"></div>
|
||||
</div>
|
||||
<div class="note"><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span>以上是医保报销前的粗略区间，不含孕期并发症、早产、新生儿住院等意外情况。各地各医院差别很大，以建档医院实际报价为准。</span></div>
|
||||
<!-- 结果屏 -->
|
||||
<section class="screen" id="sRes">
|
||||
<h2 class="r-t">你家大概要花</h2>
|
||||
<div class="chips" id="chips"></div>
|
||||
<p class="hint">点任一项可单独修改</p>
|
||||
<div class="tabs" id="tabs">
|
||||
<button data-s="0">生下来</button><button data-s="1">养到1岁</button><button data-s="2">养到2岁</button><button data-s="3">养到3岁</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>；月子和宝宝用品基本全靠自己。</div>
|
||||
<p class="sec-sub">按时间顺序，一块一块看清楚</p>
|
||||
|
||||
<article class="item fade">
|
||||
<div class="pic"><img src="img/hospital.webp" alt="护士给孕妈递资料" loading="lazy"></div>
|
||||
<div class="hd"><span class="hi" style="background:var(--k1)"><svg class="ic"><use href="#i-steth" xlink:href="#i-steth"/></svg></span><h3>孕期产检</h3><small>约 10~13 次</small></div>
|
||||
<div class="concl">跟着医生的产检表走，<i>大部分是常规项目</i></div>
|
||||
<ul>
|
||||
<li><span class="k">建档</span><span class="v">首次检查：血常规、尿常规、肝肾功能、传染病筛查、B 超等</span></li>
|
||||
<li><span class="k">常规复查</span><span class="v">每次量血压体重、听胎心、查宫高腹围</span></li>
|
||||
<li><span class="k">筛查项目</span><span class="v">唐氏筛查或无创 DNA、排畸 B 超、糖耐量检查</span></li>
|
||||
<li><span class="k">孕晚期</span><span class="v">胎心监护、B 超评估胎位和羊水，可能每周一次</span></li>
|
||||
<li><span class="k">额外项目</span><span class="v">医生建议才做的检查，如羊水穿刺</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="item fade">
|
||||
<div class="hd"><span class="hi" style="background:var(--k2)"><svg class="ic"><use href="#i-bed" xlink:href="#i-bed"/></svg></span><h3>分娩住院</h3><small>顺产约 2~3 天 · 剖宫产约 4~6 天</small></div>
|
||||
<div class="concl">剖宫产比顺产贵，<i>主要贵在手术和住院天数</i></div>
|
||||
<ul>
|
||||
<li><span class="k">分娩费用</span><span class="v">接生费、手术费（剖宫产）、麻醉费</span></li>
|
||||
<li><span class="k">无痛分娩</span><span class="v">顺产可选的镇痛，单独计费，先问医院</span></li>
|
||||
<li><span class="k">住院</span><span class="v">床位、护理、药品、检查化验</span></li>
|
||||
<li><span class="k">新生儿</span><span class="v">新生儿护理、听力和疾病筛查</span></li>
|
||||
<li><span class="k">升级项目</span><span class="v">单人间、家庭化产房、特需门诊，大多自费</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="item fade">
|
||||
<div class="hd"><span class="hi" style="background:var(--k3)"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg></span><h3>坐月子</h3><small>约 4~6 周</small></div>
|
||||
<div class="concl">选哪种方式，<i>决定这块是几千还是几万</i></div>
|
||||
<ul>
|
||||
<li><span class="k">家人照顾</span><span class="v">月子餐食材、产妇用品（卫生巾、哺乳内衣、防溢乳垫等）</span></li>
|
||||
<li><span class="k">请月嫂</span><span class="v">月嫂工资按 26 天一个周期算，城市和经验不同差得多</span></li>
|
||||
<li><span class="k">月子中心</span><span class="v">通常按 28 天套餐收费，含住宿、餐食、母婴护理</span></li>
|
||||
<li><span class="k">产后复查</span><span class="v">产后 42 天复查，母婴一起</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="item fade">
|
||||
<div class="pic"><img src="img/baby.webp" alt="婴儿床旁的小衣服、纸尿裤和奶瓶" loading="lazy"></div>
|
||||
<div class="hd"><span class="hi" style="background:var(--k4)"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><h3>宝宝第一年</h3><small>按月花</small></div>
|
||||
<div class="concl">奶粉和纸尿裤是<i>每个月都要花</i>的钱</div>
|
||||
<ul>
|
||||
<li><span class="k">吃</span><span class="v">奶粉（看喂养方式）、吸奶和储奶用品、6 个月后辅食</span></li>
|
||||
<li><span class="k">纸尿裤</span><span class="v">新生儿一天用得多，长大后慢慢减少</span></li>
|
||||
<li><span class="k">衣物</span><span class="v">长得快，各尺码备几套够换洗就行</span></li>
|
||||
<li><span class="k">大件用品</span><span class="v">婴儿床、推车、汽车安全座椅、洗澡盆</span></li>
|
||||
<li><span class="k">洗护</span><span class="v">洗护用品、湿巾、指甲剪、体温计</span></li>
|
||||
<li><span class="k">疫苗</span><span class="v">国家免疫规划内的免费；自费疫苗按需选择，听接种医生建议</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
</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="pic-card fade"><img src="img/plan.webp" alt="夫妻依偎在沙发上一起商量" loading="lazy"></div>
|
||||
<div class="two">
|
||||
<div class="col ok fade">
|
||||
<div class="ch"><svg class="ic"><use href="#i-piggy" xlink:href="#i-piggy"/></svg>可以省</div>
|
||||
<ul>
|
||||
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>新生儿衣服</b>：长得快，几套换洗就够，亲友送的也能用</span></li>
|
||||
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>囤货</b>：奶粉、纸尿裤先少买，确认宝宝适合再补</span></li>
|
||||
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>用得短的大件</b>：婴儿床、摇椅等可以借用或买二手</span></li>
|
||||
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>非必要的套餐</b>：写真、纪念品、月子中心的附加项目</span></li>
|
||||
<li><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg><span><b>宣传很神的东西</b>：号称「防纹」「催奶」「提高免疫」的高价产品</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col no fade">
|
||||
<div class="ch"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg>不能省</div>
|
||||
<ul>
|
||||
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>医生建议的产检</b>：筛查、排畸、糖耐量按时做</span></li>
|
||||
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>分娩安全</b>：选有产科和新生儿抢救能力的医院</span></li>
|
||||
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>汽车安全座椅</b>：开车接宝宝就要用，不建议买来历不明的二手</span></li>
|
||||
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>免费疫苗</b>：按时接种，别拖</span></li>
|
||||
<li><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg><span><b>应急备用金</b>：留一笔钱应对住院延长、新生儿看病等意外</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="total" aria-live="polite">
|
||||
<div class="l" id="totL"></div>
|
||||
<div class="v" id="totV"></div>
|
||||
<div class="m" id="totM"></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="stack" id="stack"></div>
|
||||
<div class="list" id="list"></div>
|
||||
|
||||
<!-- ④ 生育保险 -->
|
||||
<section class="sec" id="s4">
|
||||
<div class="sec-h"><span class="n">4</span><h2>生育保险能报什么</h2></div>
|
||||
<div class="sec-key">能报两样：<mark>看病的钱 + 休产假的钱</mark>。条件和流程以当地医保为准。</div>
|
||||
<p class="sec-sub">现在生育保险和职工医保合并缴纳，单位交了职工医保一般就有</p>
|
||||
|
||||
<div class="ins">
|
||||
<div class="fade"><span class="ii" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-receipt" xlink:href="#i-receipt"/></svg></span><h4>生育医疗费</h4><p>产检、分娩住院里医保目录内的费用，按当地标准报销或定额补助</p></div>
|
||||
<div class="fade"><span class="ii" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-wallet" xlink:href="#i-wallet"/></svg></span><h4>生育津贴</h4><p>休产假期间的工资补偿，按单位上年度职工月平均工资算</p></div>
|
||||
<div class="card">
|
||||
<div class="row"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg><div><b id="bigT"></b><p id="bigD"></p></div></div>
|
||||
<div class="row"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg><div><b>能省的地方</b><p id="save"></p></div></div>
|
||||
</div>
|
||||
|
||||
<div class="formula fade">
|
||||
<div class="ft">生育津贴怎么算</div>
|
||||
<div class="eq">
|
||||
<div class="it"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>单位上年度<br>职工月平均工资</div>
|
||||
<span class="op">÷</span>
|
||||
<div class="it"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>30<br>天</div>
|
||||
<span class="op">×</span>
|
||||
<div class="it"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>产假<br>天数</div>
|
||||
</div>
|
||||
<div class="est">
|
||||
<div class="fl">
|
||||
<label>单位上年度职工月平均工资（元）<input id="wage" type="number" inputmode="numeric" min="0" placeholder="如 8000"></label>
|
||||
<label style="flex:none;width:96px">产假天数<input id="days" type="number" inputmode="numeric" min="0" value="98"></label>
|
||||
</div>
|
||||
<div class="out">估算生育津贴<b id="allow">--</b></div>
|
||||
</div>
|
||||
<p class="tip">国家规定产假 98 天，难产、多胞胎另有增加，各地还有延长的天数，按当地规定填。</p>
|
||||
<div class="card ins">
|
||||
<div class="row"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg><div>
|
||||
<b>生育保险能报一部分</b>
|
||||
<p>产检和分娩费用可按规定报销；产假期间还能领生育津贴。以当地医保为准。</p>
|
||||
<span class="f"><span>生育津贴 = 单位上年度职工月平均工资</span> <span>÷ 30 × 产假天数</span></span>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<ol class="steps">
|
||||
<li class="fade"><b>先确认能不能报</b>一般要求生育时在参保、缴费满一定时间，各地要求不同，打电话问当地医保或单位人事</li>
|
||||
<li class="fade"><b>在定点医院建档、生产</b>就医时出示医保电子凭证或社保卡，很多地方出院直接结算</li>
|
||||
<li class="fade"><b>票据都留好</b>没能直接结算的，发票、费用清单、出院小结、出生医学证明都要保存</li>
|
||||
<li class="fade"><b>产后按时申领津贴</b>通常由单位或本人在当地医保办理，有办理期限，别错过</li>
|
||||
</ol>
|
||||
<div class="acts"><button class="btn ghost" id="redo">重新选择</button></div>
|
||||
<p class="note">按常见价格区间粗略估算，各地各医院差别很大，以实际为准；不含孕期并发症、早产、住院等意外支出。</p>
|
||||
</section>
|
||||
|
||||
<!-- ⑤ 问医院 -->
|
||||
<section class="sec" id="s5">
|
||||
<div class="sec-h"><span class="n">5</span><h2>提前要问医院的几件事</h2></div>
|
||||
<div class="sec-key">建档时把这几件事问清，<mark>心里的账就有底了</mark>。</div>
|
||||
<div class="ask">
|
||||
<div class="ak fade"><span class="ai" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-doc" xlink:href="#i-doc"/></svg></span><div><b>整个孕期要做哪些检查，大概多少钱？</b><p>要一份产检时间表，看看哪些是必做、哪些是可选</p></div></div>
|
||||
<div class="ak fade"><span class="ai" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-bed" xlink:href="#i-bed"/></svg></span><div><b>顺产、剖宫产一般住几天，费用大概多少？</b><p>顺便问无痛分娩能不能做、怎么收费</p></div></div>
|
||||
<div class="ak fade"><span class="ai" style="background:#F1EAF8;color:#8E6BB8"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span><div><b>能不能直接用医保结算？</b><p>哪些项目在医保范围外、需要自费</p></div></div>
|
||||
<div class="ak fade"><span class="ai" style="background:#FFF1DE;color:#D9822B"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg></span><div><b>病房有哪几种，价格差多少？</b><p>多人间、单人间、家庭化产房，床位紧不紧张</p></div></div>
|
||||
<div class="ak fade"><span class="ai" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><div><b>有没有新生儿科，宝宝需要观察怎么办？</b><p>出现意外要不要转院，费用怎么算</p></div></div>
|
||||
<div class="ak fade"><span class="ai" style="background:#E8F2FD;color:#3B7DD8"><svg class="ic"><use href="#i-bag" xlink:href="#i-bag"/></svg></span><div><b>住院要自己带什么？</b><p>问清医院会提供哪些，待产包就不会重复买</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="foot">本页费用为常见价格区间的粗略估算，仅供做预算参考，不代表任何医院或机构的实际收费。<br>各地各医院差别很大，请以建档医院实际报价、当地医保政策为准。</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ================= 费用表（单位：元，[低, 高]，医保报销前的常见区间，偏保守取整） =================
|
||||
城市下标 c：0 一线 / 1 新一线及省会 / 2 普通地级市 / 3 县城及乡镇
|
||||
×STYLE 的项是「可选消费」，按第 7 题花钱风格乘系数；其余是刚性支出，不乘。 */
|
||||
var COST = {
|
||||
// —— 生下来 ——
|
||||
// 孕期产检全程（约 10~13 次 + 筛查）[c][医院]，医院 0 公立普通 / 1 公立特需或单间 / 2 私立
|
||||
check: [
|
||||
[[6000, 10000], [15000, 30000], [20000, 50000]],
|
||||
[[4000, 8000], [10000, 20000], [15000, 35000]],
|
||||
[[3000, 6000], [6000, 12000], [8000, 20000]],
|
||||
[[2000, 4000], [4000, 8000], [5000, 12000]]
|
||||
],
|
||||
// 孕妇装、待产包等孕期用品 [c]，×STYLE
|
||||
pregGoods: [[2000, 5000], [1500, 4000], [1200, 3000], [1000, 2500]],
|
||||
// 分娩住院 [c][医院][方式]，方式 0 顺产 / 1 剖宫产；「还不确定」取两者合并区间（顺产低值 ~ 剖宫产高值）
|
||||
birth: [
|
||||
[[[6000, 12000], [12000, 20000]], [[15000, 30000], [25000, 45000]], [[30000, 60000], [45000, 90000]]],
|
||||
[[[4000, 8000], [8000, 15000]], [[10000, 20000], [15000, 30000]], [[18000, 40000], [28000, 60000]]],
|
||||
[[[3000, 6000], [6000, 11000]], [[6000, 12000], [10000, 18000]], [[10000, 25000], [15000, 35000]]],
|
||||
[[[2000, 4000], [4000, 8000]], [[4000, 8000], [6000, 12000]], [[6000, 15000], [10000, 22000]]]
|
||||
],
|
||||
// 坐月子（含月子餐、产妇用品）[c][方式]，0 家人照顾 / 1 月嫂约 26 天 / 2 月子中心约 28 天
|
||||
yuezi: [
|
||||
[[3000, 8000], [15000, 30000], [40000, 100000]],
|
||||
[[2500, 6000], [10000, 20000], [25000, 60000]],
|
||||
[[2000, 5000], [7000, 14000], [15000, 35000]],
|
||||
[[1500, 4000], [5000, 10000], [10000, 25000]]
|
||||
],
|
||||
|
||||
// —— 0～1 岁 ——
|
||||
eat01: [[1000, 3000], [5000, 9000], [8000, 14000]], // 奶粉/辅食 [喂养]：0 母乳为主 / 1 混合 / 2 奶粉为主（不分城市）
|
||||
diaper01: [3000, 5000], // 纸尿裤湿巾（不分城市）
|
||||
goods01: [[5000, 10000], [4000, 8000], [3000, 6000], [2500, 5000]], // 衣物、婴儿床推车安全座椅、洗护玩具 [c]，×STYLE
|
||||
med01: [[1500, 6000], [1200, 5000], [1000, 4000], [800, 3000]], // 看病 + 自费疫苗 [c]
|
||||
// 0～1 岁按产假 + 家人带计，不算带娃费用（第 6 题只管 1～3 岁）
|
||||
|
||||
// —— 1～2 岁 ——
|
||||
eat12: [[3000, 6000], [5000, 9000], [6000, 11000]], // 奶粉/辅食/日常饮食 [喂养]
|
||||
diaper12: [2500, 4000],
|
||||
goods12: [[4000, 8000], [3000, 6000], [2500, 5000], [2000, 4000]], // 衣物用品玩具 [c]，×STYLE
|
||||
edu12: [[2000, 8000], [1500, 6000], [1000, 4000], [500, 3000]], // 早教、绘本、游乐 [c]，×STYLE
|
||||
med12: [[1200, 4000], [1000, 3500], [800, 3000], [600, 2500]],
|
||||
|
||||
// —— 2～3 岁 ——
|
||||
eat23: [[6000, 10000], [5000, 8000], [4000, 7000], [3000, 6000]], // 日常饮食 + 牛奶 [c]
|
||||
diaper23: [800, 2000], // 逐步戒纸尿裤
|
||||
goods23: [[4000, 8000], [3000, 6000], [2500, 5000], [2000, 4000]], // ×STYLE
|
||||
edu23: [[3000, 10000], [2000, 8000], [1500, 5000], [800, 3500]], // ×STYLE
|
||||
med23: [[1000, 3500], [800, 3000], [600, 2500], [500, 2000]],
|
||||
|
||||
// —— 1～3 岁谁来带（按年计）[带法][c] ——
|
||||
// 0 老人或自己带：少量补贴（约 100~1000 元/月）
|
||||
// 1 育儿嫂或保姆：月薪 × 12；2 托育园全日托：月费 × 12
|
||||
care: [
|
||||
[[4800, 12000], [3600, 9600], [2400, 7200], [1200, 6000]],
|
||||
[[7000 * 12, 10000 * 12], [5000 * 12, 7500 * 12], [4000 * 12, 6000 * 12], [3000 * 12, 4500 * 12]],
|
||||
[[4000 * 12, 8000 * 12], [2500 * 12, 5000 * 12], [1800 * 12, 3500 * 12], [1200 * 12, 2500 * 12]]
|
||||
],
|
||||
|
||||
STYLE: [0.6, 1, 1.8] // 花钱风格系数：精打细算 / 适中 / 想给最好的
|
||||
};
|
||||
|
||||
/* ================= 问题 ================= */
|
||||
var QS = [
|
||||
{ k: 'city', h: '你在哪类城市？', s: '各地价格差别最大的一项', o: [
|
||||
['一线城市', '北京、上海、广州、深圳'], ['新一线及省会', '如成都、杭州、武汉、各省会'], ['普通地级市', '三四线城市'], ['县城及乡镇', '县城、镇上']] },
|
||||
{ k: 'hosp', h: '打算在哪生？', s: '产检一般也在同一家', o: [
|
||||
['公立医院普通病房', '多人间，大多数人的选择'], ['公立医院特需或单间', '单人间、特需门诊，部分自费'], ['私立医院', '环境服务好，基本全自费']] },
|
||||
{ k: 'way', h: '分娩方式？', s: '最终听医生评估', o: [
|
||||
['顺产', '住院约 2～3 天'], ['剖宫产', '住院约 4～6 天，费用更高'], ['还不确定', '两种都算进去，区间宽一些']] },
|
||||
{ k: 'yz', h: '月子怎么坐？', s: '这项差距最大', o: [
|
||||
['家人照顾', '主要花在月子餐和产妇用品'], ['请月嫂', '上门照顾，一般 26 天'], ['月子中心', '一般 28 天套餐']] },
|
||||
{ k: 'feed', h: '宝宝怎么喂？', s: '大概的打算就行', o: [
|
||||
['母乳为主', '奶粉钱很少'], ['混合喂养', '母乳加一部分奶粉'], ['奶粉为主', '奶粉是每月固定开销']] },
|
||||
{ k: 'care', h: '1～3 岁谁来带？', s: '产假结束后的安排', o: [
|
||||
['老人或自己带', '给老人一点补贴'], ['请育儿嫂或保姆', '按月薪算'], ['上托育园（全日托）', '按月费算']] },
|
||||
{ k: 'style', h: '平时花钱风格？', s: '影响用品、衣物、玩具、早教', o: [
|
||||
['精打细算', '够用就行，能借能用二手'], ['适中', '买点好的，不追高'], ['想给最好的', '用品玩具早教都挑好的']] }
|
||||
];
|
||||
var SHORT = { // 结果页的选择标签
|
||||
city: ['一线', '新一线/省会', '地级市', '县城乡镇'], hosp: ['公立普通', '公立特需', '私立'], way: ['顺产', '剖宫产', '方式未定'],
|
||||
yz: ['家人坐月子', '请月嫂', '月子中心'], feed: ['母乳', '混合喂养', '奶粉'], care: ['老人带', '育儿嫂', '托育园'], style: ['精打细算', '适中', '给最好的']
|
||||
};
|
||||
var STAGES = ['孕期产检', '分娩住院', '坐月子', '0～1岁', '1～2岁', '2～3岁'];
|
||||
var SHADES = ['#0B6E3A', '#18A058', '#45B779', '#79CC9E', '#A8DFC0', '#D2F0DF'];
|
||||
var TAB_L = ['怀孕到坐完月子', '怀孕到宝宝 1 岁', '怀孕到宝宝 2 岁', '怀孕到宝宝 3 岁'];
|
||||
var UPTO = [3, 4, 5, 6]; // 每个标签包含前几段
|
||||
var MONTHS = [10, 21, 33, 45]; // 平均每月的分母：怀孕约 9 个月 + 月子 1 个月；之后每岁 12 个月
|
||||
var KEY = 'mmbox.huafei.v2';
|
||||
|
||||
var $ = function (s) { return document.querySelector(s); };
|
||||
var sc = $('#scroll');
|
||||
var st = { city: 1, hosp: 0, way: 2, yz: 0, feed: 1, care: 0, style: 1 };
|
||||
var stage = 1, qi = 0, editing = false;
|
||||
|
||||
function add(a, b) { return [a[0] + b[0], a[1] + b[1]]; }
|
||||
function mul(a, k) { return [a[0] * k, a[1] * k]; }
|
||||
function sum() { return [].slice.call(arguments).reduce(add, [0, 0]); }
|
||||
|
||||
/* 六段费用，返回 [[低, 高] × 6] */
|
||||
function calc(s) {
|
||||
var c = s.city, k = COST.STYLE[s.style];
|
||||
var b = COST.birth[c][s.hosp];
|
||||
var birth = s.way === 2 ? [Math.min(b[0][0], b[1][0]), Math.max(b[0][1], b[1][1])] : b[s.way];
|
||||
var care = COST.care[s.care][c];
|
||||
return [
|
||||
sum(COST.check[c][s.hosp], mul(COST.pregGoods[c], k)),
|
||||
birth,
|
||||
COST.yuezi[c][s.yz],
|
||||
sum(COST.eat01[s.feed], COST.diaper01, mul(COST.goods01[c], k), COST.med01[c]),
|
||||
sum(COST.eat12[s.feed], COST.diaper12, mul(COST.goods12[c], k), mul(COST.edu12[c], k), COST.med12[c], care),
|
||||
sum(COST.eat23[c], COST.diaper23, mul(COST.goods23[c], k), mul(COST.edu23[c], k), COST.med23[c], care)
|
||||
];
|
||||
}
|
||||
|
||||
function wan(n) { return (Math.round(n / 1000) / 10) + '万'; }
|
||||
function yuan(n) { return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ','); }
|
||||
function rng(a) { return wan(a[0]) + '～' + wan(a[1]); } // 统一用「万」，一位小数
|
||||
|
||||
function detail(i) {
|
||||
var s = st;
|
||||
var careTxt = ['老人带的少量补贴', '育儿嫂 12 个月工资', '托育园 12 个月费用'][s.care];
|
||||
return [
|
||||
'约 10～13 次产检和筛查（' + QS[1].o[s.hosp][0] + '），加孕妇装、待产包',
|
||||
(s.way === 2 ? '按顺产到剖宫产的范围算' : QS[2].o[s.way][0] + '，' + QS[2].o[s.way][1].replace('，费用更高', '')) + '；含接生或手术、麻醉、床位、新生儿筛查',
|
||||
['月子餐食材、产妇用品、产后复查', '月嫂约 26 天工资，加月子餐和产妇用品', '月子中心约 28 天套餐，含住宿餐食和母婴护理'][s.yz],
|
||||
QS[4].o[s.feed][0] + '的奶粉辅食、纸尿裤、衣物和婴儿床推车等用品、看病和自费疫苗',
|
||||
'奶粉辅食、纸尿裤、衣物玩具早教、看病疫苗，加' + careTxt,
|
||||
'日常饮食、纸尿裤（逐步戒掉）、衣物玩具早教、看病，加' + careTxt
|
||||
][i];
|
||||
}
|
||||
|
||||
/* 能省的地方（≤30 字），按最花钱的那段给 */
|
||||
function saveTip(i) {
|
||||
var s = st;
|
||||
if (i === 0) return s.hosp ? '常规产检在公立医院做，只把分娩放在想去的医院。' : '跟着医生的产检表走，不额外加做没必要的项目。';
|
||||
if (i === 1) return s.hosp ? '公立医院普通病房也安全，单间按需再升级。' : '提前问清医保能不能直接结算，出院少垫钱。';
|
||||
if (i === 2) return s.yz === 2 ? '月子中心可只住 2 周，后面换月嫂或家人接手。' : s.yz === 1 ? '月嫂可只请前 2 周，之后家人接手。' : '月子餐自己做，产妇用品按需买不囤货。';
|
||||
if (i === 3) return s.feed ? '奶粉先买小罐试，宝宝适合再按需补，别囤货。' : '大件用品能借就借，衣服各尺码几套够换洗就行。';
|
||||
if (s.care === 1) return '老人能搭把手的话，育儿嫂可只请白天或半天。';
|
||||
if (s.care === 2) return '托育园可先上半日托，或等 2 岁后再上全日托。';
|
||||
return s.style === 2 ? '早教班不用早报，玩具绘本可以轮换或借阅。' : '衣物玩具亲友送、买二手都行，省下的留作备用金。';
|
||||
}
|
||||
|
||||
/* ================= 屏幕切换 ================= */
|
||||
function show(id) {
|
||||
[].forEach.call(document.querySelectorAll('.screen'), function (el) { el.classList.toggle('on', el.id === id); });
|
||||
sc.scrollTop = 0;
|
||||
}
|
||||
|
||||
function renderQ() {
|
||||
var q = QS[qi];
|
||||
$('#pbar').style.width = ((qi + 1) / QS.length * 100) + '%';
|
||||
$('#pnum').textContent = (qi + 1) + ' / ' + QS.length;
|
||||
$('#qh').textContent = q.h;
|
||||
$('#qs').textContent = q.s;
|
||||
$('#opts').innerHTML = q.o.map(function (o, v) {
|
||||
return '<button class="opt' + (st[q.k] === v && st._done ? ' on' : '') + '" data-v="' + v + '"><span class="ox"><b>' + o[0] + '</b><small>' + o[1] + '</small></span><span class="rd"></span></button>';
|
||||
}).join('');
|
||||
$('#prev').style.visibility = editing ? 'hidden' : 'visible';
|
||||
show('sQ');
|
||||
}
|
||||
|
||||
$('#opts').addEventListener('click', function (e) {
|
||||
var b = e.target.closest('.opt'); if (!b || $('#opts').dataset.lock) return;
|
||||
[].forEach.call(this.children, function (x) { x.classList.toggle('on', x === b); });
|
||||
st[QS[qi].k] = +b.dataset.v;
|
||||
$('#opts').dataset.lock = '1';
|
||||
setTimeout(function () {
|
||||
delete $('#opts').dataset.lock;
|
||||
if (editing || qi === QS.length - 1) { st._done = true; editing = false; save(); renderRes(); show('sRes'); }
|
||||
else { qi++; renderQ(); }
|
||||
}, 220);
|
||||
});
|
||||
$('#prev').addEventListener('click', function () { if (qi > 0) { qi--; renderQ(); } else show('sStart'); });
|
||||
$('#go').addEventListener('click', function () { qi = 0; editing = false; renderQ(); });
|
||||
$('#redo').addEventListener('click', function () { qi = 0; editing = false; renderQ(); });
|
||||
|
||||
function renderRes() {
|
||||
var parts = calc(st), n = UPTO[stage];
|
||||
var mids = parts.map(function (p) { return (p[0] + p[1]) / 2; });
|
||||
var all = mids.reduce(function (a, b) { return a + b; }, 0);
|
||||
var tot = parts.slice(0, n).reduce(add, [0, 0]);
|
||||
|
||||
[].forEach.call($('#tabs').children, function (b, i) { b.classList.toggle('on', i === stage); });
|
||||
$('#chips').innerHTML = QS.map(function (q, i) { return '<button data-q="' + i + '">' + SHORT[q.k][st[q.k]] + '</button>'; }).join('');
|
||||
$('#totL').textContent = TAB_L[stage] + '，合计约';
|
||||
var w = tot[1] >= 10000;
|
||||
$('#totV').innerHTML = '<span>' + (w ? wan(tot[0]) : yuan(tot[0])) + '～</span><wbr><span>' + (w ? wan(tot[1]) : yuan(tot[1]) + '元') + '</span>';
|
||||
$('#totM').innerHTML = '平均每月约 <b>' + yuan((tot[0] + tot[1]) / 2 / MONTHS[stage]) + '</b> 元';
|
||||
|
||||
$('#stack').innerHTML = mids.map(function (m, i) {
|
||||
return '<i style="flex-grow:' + (m / all * 1000).toFixed(0) + ';background:' + (i < n ? SHADES[i] : '#E5E8EC') + '"></i>';
|
||||
}).join('');
|
||||
|
||||
var open = {};
|
||||
[].forEach.call(document.querySelectorAll('#list details'), function (d, i) { if (d.open) open[i] = 1; });
|
||||
$('#list').innerHTML = parts.map(function (p, i) {
|
||||
var on = i < n;
|
||||
return '<details' + (on ? '' : ' class="off"') + (open[i] ? ' open' : '') + '><summary><span class="dot" style="background:' + (on ? SHADES[i] : '#E5E8EC') + '"></span>' +
|
||||
'<span class="nm">' + STAGES[i] + '</span><span class="rg">' + (on ? rng(p) : '未计入') + '</span>' +
|
||||
'<svg class="ic ar"><use href="#i-down" xlink:href="#i-down"/></svg></summary><div class="ds">' + detail(i) + '</div></details>';
|
||||
}).join('');
|
||||
|
||||
var big = 0;
|
||||
for (var i = 1; i < n; i++) if (mids[i] > mids[big]) big = i;
|
||||
$('#bigT').innerHTML = '最花钱的是<em>' + STAGES[big] + '</em>';
|
||||
var why = [
|
||||
st.hosp ? '特需和私立的产检套餐偏贵' : '主要是产检和筛查',
|
||||
st.hosp ? '贵在病房和服务升级' : '主要是接生、手术和住院',
|
||||
['主要是月子餐和产妇用品', '主要是月嫂工资', '主要是月子中心套餐'][st.yz],
|
||||
st.feed ? '奶粉和纸尿裤每月都要买' : '主要是用品、纸尿裤和看病',
|
||||
['主要是日常吃用和老人补贴', '主要是育儿嫂工资', '主要是托育园月费'][st.care]
|
||||
][Math.min(big, 4)];
|
||||
$('#bigD').textContent = '约 ' + rng(parts[big]) + '，' + why + '。';
|
||||
$('#save').textContent = saveTip(big);
|
||||
}
|
||||
|
||||
$('#tabs').addEventListener('click', function (e) {
|
||||
var b = e.target.closest('button'); if (!b) return;
|
||||
stage = +b.dataset.s; save(); renderRes();
|
||||
});
|
||||
$('#chips').addEventListener('click', function (e) {
|
||||
var b = e.target.closest('button'); if (!b) return;
|
||||
qi = +b.dataset.q; editing = true; renderQ();
|
||||
});
|
||||
|
||||
function save() {
|
||||
try { var o = {}; QS.forEach(function (q) { o[q.k] = st[q.k]; }); o.stage = stage; localStorage.setItem(KEY, JSON.stringify(o)); } catch (e) {}
|
||||
}
|
||||
function load() {
|
||||
try {
|
||||
var o = JSON.parse(localStorage.getItem(KEY) || 'null'); if (!o) return false;
|
||||
var ok = QS.every(function (q) { return o[q.k] >= 0 && o[q.k] < q.o.length; });
|
||||
if (!ok) return false;
|
||||
QS.forEach(function (q) { st[q.k] = o[q.k]; });
|
||||
if (o.stage >= 0 && o.stage < 4) stage = o.stage;
|
||||
st._done = true; return true;
|
||||
} catch (e) { return false; }
|
||||
}
|
||||
|
||||
if (load()) { renderRes(); show('sRes'); } else show('sStart');
|
||||
|
||||
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回同目录的首页，身份原样带回 */
|
||||
$('#back').addEventListener('click', function () {
|
||||
@@ -487,129 +431,7 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
else location.href = '../../' + location.search + location.hash;
|
||||
});
|
||||
|
||||
function go(id) {
|
||||
var el = document.getElementById(id); if (!el) return;
|
||||
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 56;
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
[].forEach.call(document.querySelectorAll('[data-go]'), function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
|
||||
|
||||
/* ===== 费用表（元，医保报销前，常见区间的保守粗估） =====
|
||||
城市下标：0 一线 / 1 新一线及二线 / 2 三四线及县城；医院：0 公立普通 / 1 公立特需或私立 */
|
||||
var COST = {
|
||||
// 孕期产检全程 [city][hosp] = [低, 高]
|
||||
check: [
|
||||
[[5000, 9000], [15000, 40000]],
|
||||
[[3500, 7000], [10000, 25000]],
|
||||
[[2500, 5000], [6000, 15000]]
|
||||
],
|
||||
// 分娩住院 [city][hosp][way]，way 0 顺产 / 1 剖宫产
|
||||
birth: [
|
||||
[[[5000, 10000], [10000, 18000]], [[20000, 50000], [30000, 80000]]],
|
||||
[[[3000, 7000], [7000, 13000]], [[12000, 30000], [18000, 45000]]],
|
||||
[[[2000, 5000], [5000, 10000]], [[8000, 18000], [12000, 28000]]]
|
||||
],
|
||||
// 坐月子 [city][yz]，yz 0 家人照顾 / 1 请月嫂（约 26 天） / 2 月子中心（约 28 天）；含月子餐和产妇用品
|
||||
yuezi: [
|
||||
[[3000, 8000], [15000, 30000], [40000, 100000]],
|
||||
[[2000, 6000], [9000, 18000], [25000, 60000]],
|
||||
[[1500, 4000], [6000, 12000], [15000, 35000]]
|
||||
],
|
||||
// 宝宝第一年：吃 [feed]（含奶粉、吸奶储奶用品、辅食）
|
||||
milk: [[1500, 3500], [5000, 9000], [9000, 15000]],
|
||||
// 纸尿裤湿巾 + 衣物 + 大件用品 + 洗护 [city]
|
||||
goods: [[9000, 18000], [7000, 14000], [5000, 10000]],
|
||||
// 自费疫苗（可选，看选哪几种）
|
||||
vac: [2000, 8000]
|
||||
};
|
||||
var NAMES = [
|
||||
{ k: '孕期产检', ic: 'steth', c: 'var(--k1)', d: '约 10~13 次常规产检 + 筛查' },
|
||||
{ k: '分娩住院', ic: 'bed', c: 'var(--k2)', d: '' },
|
||||
{ k: '坐月子', ic: 'home', c: 'var(--k3)', d: '' },
|
||||
{ k: '宝宝第一年', ic: 'baby', c: 'var(--k4)', d: '' }
|
||||
];
|
||||
var COLORS = ['#F4593C', '#E8476F', '#C2185B', '#8E6BB8'];
|
||||
var WAY = ['顺产约 2~3 天', '剖宫产约 4~6 天'], HOSP = ['公立普通', '特需或私立'];
|
||||
var YZ = ['月子餐 + 产妇用品', '月嫂一个周期 + 月子餐用品', '月子中心约 28 天套餐'];
|
||||
var FEED = ['母乳为主', '混合喂养', '奶粉为主'];
|
||||
|
||||
var st = { city: 1, way: 0, hosp: 0, yz: 0, feed: 0, vac: false };
|
||||
|
||||
function fmt(n, wan) {
|
||||
if (n >= 10000 || wan) { var w = Math.round(n / 1000) / 10; return w + '万'; }
|
||||
return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
function rng(a) { var w = a[1] >= 10000; return fmt(a[0], w) + '~' + fmt(a[1], w); } // 上限过万则两端都用「万」
|
||||
function add(a, b) { return [a[0] + b[0], a[1] + b[1]]; }
|
||||
|
||||
function calc() {
|
||||
var c = st.city;
|
||||
var baby = add(COST.milk[st.feed], COST.goods[c]);
|
||||
if (st.vac) baby = add(baby, COST.vac);
|
||||
var parts = [COST.check[c][st.hosp], COST.birth[c][st.hosp][st.way], COST.yuezi[c][st.yz], baby];
|
||||
var total = parts.reduce(add, [0, 0]);
|
||||
var mids = parts.map(function (p) { return (p[0] + p[1]) / 2; });
|
||||
var midTotal = mids.reduce(function (a, b) { return a + b; }, 0);
|
||||
var maxMid = Math.max.apply(null, mids);
|
||||
|
||||
NAMES[1].d = WAY[st.way] + ' · ' + HOSP[st.hosp];
|
||||
NAMES[2].d = YZ[st.yz];
|
||||
NAMES[3].d = FEED[st.feed] + ' · 纸尿裤衣物用品' + (st.vac ? ' · 含自费疫苗' : '');
|
||||
|
||||
var tw = total[1] >= 10000; // 总计两端各自不换行，窄屏在「~」处折行
|
||||
$('#totV').innerHTML = '<span>' + fmt(total[0], tw) + '~</span><wbr><span>' + fmt(total[1], tw) + '<small>元</small></span>';
|
||||
$('#midV').textContent = fmt(midTotal);
|
||||
var big = mids.indexOf(maxMid);
|
||||
$('#totD').innerHTML = '花得最多的一块是<b style="color:' + COLORS[big] + '">' + NAMES[big].k + '</b>。实际以建档医院报价为准。';
|
||||
|
||||
// 环形图：按各块中间值的占比画弧
|
||||
var C = 2 * Math.PI * 50, off = 0, gap = 2, html = '';
|
||||
mids.forEach(function (m, i) {
|
||||
var len = Math.max(C * m / midTotal - gap, 1);
|
||||
html += '<circle cx="60" cy="60" r="50" stroke="' + COLORS[i] + '" stroke-dasharray="' + len.toFixed(2) + ' ' + C.toFixed(2) + '" stroke-dashoffset="' + (-off).toFixed(2) + '"/>';
|
||||
off += C * m / midTotal;
|
||||
});
|
||||
$('#ring').innerHTML = html;
|
||||
|
||||
// 四块明细：条长 = 中间值相对最大块
|
||||
$('#blk').innerHTML = parts.map(function (p, i) {
|
||||
var n = NAMES[i];
|
||||
return '<div class="bk"><span class="bi" style="background:' + n.c + '"><svg class="ic"><use href="#i-' + n.ic + '" xlink:href="#i-' + n.ic + '"/></svg></span>' +
|
||||
'<div class="bx"><div class="r1"><b>' + n.k + '</b><em style="color:' + COLORS[i] + '">' + rng(p) + ' 元</em></div>' +
|
||||
'<div class="bar2"><i style="width:' + Math.max(mids[i] / maxMid * 100, 4).toFixed(1) + '%;background:' + COLORS[i] + '"></i></div>' +
|
||||
'<div class="r2">' + n.d + '</div></div></div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
[].forEach.call(document.querySelectorAll('.seg'), function (seg) {
|
||||
seg.addEventListener('click', function (e) {
|
||||
var b = e.target.closest('button'); if (!b) return;
|
||||
[].forEach.call(seg.children, function (x) { x.classList.toggle('on', x === b); });
|
||||
st[seg.dataset.k] = +b.dataset.v;
|
||||
calc();
|
||||
});
|
||||
});
|
||||
$('#vac').addEventListener('click', function () {
|
||||
st.vac = !st.vac;
|
||||
this.classList.toggle('on', st.vac);
|
||||
this.setAttribute('aria-pressed', st.vac);
|
||||
calc();
|
||||
});
|
||||
calc();
|
||||
|
||||
/* 生育津贴估算 = 单位上年度职工月平均工资 ÷ 30 × 产假天数 */
|
||||
function allow() {
|
||||
var w = parseFloat($('#wage').value), d = parseFloat($('#days').value);
|
||||
$('#allow').innerHTML = (w > 0 && d > 0) ? Math.round(w / 30 * d).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '<small>元</small>' : '--';
|
||||
}
|
||||
$('#wage').addEventListener('input', allow);
|
||||
$('#days').addEventListener('input', allow);
|
||||
|
||||
/* 进场动画 */
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { root: sc, threshold: .12 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('on', sc.scrollTop > 4); }, { passive: true });
|
||||
|
||||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
var y0 = 0;
|
||||
|
||||
@@ -4,504 +4,233 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>妊娠纹 · 从预防到修复</title>
|
||||
<!-- 孕期专题 · 妊娠纹（2026-10-31 用户定：首页「今日孕期小知识」加专题入口；只写成分和品类、不点名品牌；
|
||||
效果百分比不放显眼处，只在页底「循证来源」注明研究对象和人数；多插画、少大段文字）。
|
||||
2026-10-31 改版：顶部「3 个核心重点」总览 + 每段/每卡一句加粗重点结论 + 关键数字做成徽标；
|
||||
分阶段改为时间轴；「为什么这样做」直接展示不折叠；全部图标改为内联 SVG 扁平图标（页内 symbol 复用，不用 emoji）。
|
||||
插画 img/*.webp 由 AI 生成（画面不含文字），文案全部在本页排版。
|
||||
自成一页：不引 app.js；回首页走相对路径 ../../（预览 /mama-box-preview/、正式 /mama-box-v2/ 都对）。 -->
|
||||
<title>妊娠纹，与体重管理</title>
|
||||
<!-- 孕期专题 · 妊娠纹与体重管理（孕期首页「其他妈妈也在搜」第 6 条）。
|
||||
2026-10-31 v2 按 /tmp/pl/topic-spec.md 统一规范重做：清新、简洁、核心明确；主色 #F25C78。
|
||||
体重管理是核心之一（第 1 节 + 增重简表 + #goWeight 跳 /yunqi-tizhong/）；
|
||||
「为什么这样做」本页例外：可见的一句话（≤30 字）。只写成分和品类、不点名品牌；百分比只出现在页底「参考来源」。
|
||||
自成一页：不引 app.js；回首页走相对路径 ../../，站内跳转带 location.search + location.hash。
|
||||
旧版备份 /tmp/pl/wen-v2-backup.html。 -->
|
||||
<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:#F25C78;--cs:#FFEFF2;--ink:#1F2329;--tx:#4E5969;--sub:#86909C;--line:#EEF0F3;--sec:#F7F8FA;
|
||||
--green:#18A058;--gbg:#EAF7F0;--amber:#E08A1E;--abg:#FFF4E5;--red:#E5484D;--rbg:#FFEDEE}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--tx);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}
|
||||
/* 图标统一规格：24 栅格、2px 圆角线条，.f 为同色浅面（双色扁平） */
|
||||
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
|
||||
b,strong{color:var(--ink)}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.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}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.solid{background:#fff;border-bottom-color:var(--line)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
|
||||
.bar .back .ic{width:22px;height:22px;stroke:var(--ink)}
|
||||
.bar .t{font-size:16px;font-weight:600;color:var(--ink)}
|
||||
|
||||
/* 头图 */
|
||||
.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 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}
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;object-position:50% 40%;border-radius:20px;background:var(--cs)}
|
||||
h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
.ans{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--cs);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--ink)}
|
||||
|
||||
/* 个性化：你现在该看哪段 */
|
||||
.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:14px;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);font-size:13.5px;line-height:1.5}
|
||||
.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 b{display:block;font-size:14px}
|
||||
.me span{color:var(--sub);font-size:12.5px}
|
||||
.me .go{flex:none;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--c);color:var(--c);font-size:13px;white-space:nowrap}
|
||||
|
||||
/* 记住这 3 点 */
|
||||
.pts{margin-top:28px}
|
||||
h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
|
||||
.pts ol{list-style:none;margin-top:8px}
|
||||
.pts li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
|
||||
.pts li:first-child{border-top:0}
|
||||
.pts .no{flex:none;width:26px;font-size:26px;font-weight:800;line-height:1.1;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.pts b{display:block;font-size:15.5px;line-height:1.5}
|
||||
.pts span{display:block;font-size:13px;color:var(--sub);line-height:1.5}
|
||||
|
||||
/* 目录 */
|
||||
.toc{display:flex;gap:8px;margin:14px 16px 0}
|
||||
.toc button{flex:1;padding:11px 4px 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}
|
||||
.toc{display:flex;gap:8px;margin-top:16px}
|
||||
.toc button{flex:1;min-width:0;height:36px;border-radius:99px;background:var(--sec);font-size:13px;color:var(--tx);white-space:nowrap}
|
||||
|
||||
/* 段标题 + 段落重点结论 */
|
||||
.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;scroll-margin-top:56px}
|
||||
.sec-h{display:flex;align-items:center;gap:8px}
|
||||
.sec-h .n{flex:none;font-size:18px;font-weight:800;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c)}
|
||||
.card{margin-top:14px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
|
||||
|
||||
/* 一句话公式 */
|
||||
.formula{margin-top:14px;padding:14px 12px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
|
||||
.eq{display:flex;align-items:center;justify-content:center;gap:6px}
|
||||
.eq .it{width:86px;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:20px;color:var(--c);font-weight:700}
|
||||
.eq .res{background:var(--deep);color:#fff}
|
||||
.eq .res .ic{color:#fff}
|
||||
/* 1 体重 */
|
||||
.wpic{width:100%;height:120px;object-fit:cover;object-position:60% 55%}
|
||||
table{width:100%;border-collapse:collapse;font-size:14px}
|
||||
th{font-size:12.5px;font-weight:500;color:var(--sub);text-align:left;padding:10px 14px 6px}
|
||||
td{padding:9px 14px;border-top:1px solid var(--line);color:var(--tx);white-space:nowrap}
|
||||
td:first-child b{font-weight:600}
|
||||
td small{display:block;font-size:12px;color:var(--sub);line-height:1.3}
|
||||
td.v{font-weight:700;color:var(--ink)}
|
||||
.note{padding:8px 14px 12px;font-size:12.5px;color:var(--sub);line-height:1.6}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;margin-top:14px;border-radius:99px;background:var(--c);color:#fff;font-size:15px;font-weight:600}
|
||||
.btn .ic{stroke:#fff}
|
||||
|
||||
/* ① 形成三步 */
|
||||
.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 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}
|
||||
.colors{display:flex;gap:8px;margin-top:10px}
|
||||
.colors span{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.35;padding:8px 10px;border-radius:12px;background:#FAF5F3}
|
||||
.colors em{flex:none;width:26px;height:8px;border-radius:9px}
|
||||
/* 2 时间轴 */
|
||||
.tl{margin-top:16px;position:relative;padding-left:22px}
|
||||
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line)}
|
||||
.st{position:relative;padding:14px 14px 12px;margin-top:10px;border:1px solid var(--line);border-radius:18px;background:#fff;scroll-margin-top:60px;transition:border-color .3s,background .3s}
|
||||
.st:first-child{margin-top:0}
|
||||
.st::before{content:"";position:absolute;left:-22px;top:20px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #D5D9E0}
|
||||
.st.hl{border-color:var(--c);background:var(--cs)}
|
||||
.st.hl::before{border-color:var(--c);background:var(--c)}
|
||||
.st .hd{display:flex;align-items:center;gap:8px}
|
||||
.st .hd b{font-size:15.5px}
|
||||
.st .now{display:none;margin-left:auto;font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;background:var(--c);color:#fff;white-space:nowrap}
|
||||
.st.hl .now{display:inline-block}
|
||||
.st p{margin-top:4px;font-size:14.5px;line-height:1.7}
|
||||
.st .why{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--sub)}
|
||||
.st .why em{font-style:normal;color:var(--c);margin-right:4px}
|
||||
|
||||
/* 关键前提：体重 */
|
||||
.key{margin-top:16px;border-radius:24px;overflow:hidden;background:#F3FAF4;border:1.5px solid #CFEAD7}
|
||||
.key img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.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:24px;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}
|
||||
/* 3 成分速查 */
|
||||
.ing{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-top:1px solid var(--line)}
|
||||
.ing:first-child{border-top:0}
|
||||
.ing .lt{flex:none;margin-top:3px;width:52px;text-align:center;font-size:12px;font-weight:700;line-height:22px;border-radius:99px;white-space:nowrap}
|
||||
.ing .r{background:var(--rbg);color:var(--red)}
|
||||
.ing .g{background:var(--gbg);color:var(--green)}
|
||||
.ing .a{background:var(--abg);color:var(--amber)}
|
||||
.ing b{display:block;font-size:15px;line-height:1.5}
|
||||
.ing span{display:block;font-size:13px;color:var(--sub);line-height:1.55}
|
||||
|
||||
/* ② 分阶段：时间轴 */
|
||||
.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:21px;font-weight:800;color:var(--deep)}
|
||||
.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{color:#C9826F;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}
|
||||
|
||||
/* 禁用警示（时间轴之后） */
|
||||
.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}
|
||||
|
||||
/* ③ 成分速查：红绿灯 */
|
||||
.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)}
|
||||
.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)}
|
||||
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
|
||||
.ing{position:relative;padding:12px 12px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);display:flex;flex-direction:column;gap:6px}
|
||||
.ing .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px}
|
||||
.ing h4{font-size:14.5px;line-height:1.3}
|
||||
.ing .how{position:absolute;right:10px;top:10px;font-size:11px;padding:1px 8px;border-radius:99px;background:#F5EFEE;color:var(--sub)}
|
||||
.ing .pct{align-self:flex-start;font-size:13px;font-weight:800;color:var(--green);background:var(--gbg);border-radius:8px;padding:1px 7px;white-space:nowrap}
|
||||
.ing .use{font-size:12px;color:var(--sub);line-height:1.45}
|
||||
.ing.am{border-top-color:var(--amber)}
|
||||
.ing.am .pct{color:var(--amber);background:var(--abg)}
|
||||
.ing.full{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
|
||||
.ing.full .ico{width:44px;height:44px}
|
||||
.ing.full .bx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
|
||||
/* 红灯：禁用项最显眼 */
|
||||
.ing.stop{grid-column:1/-1;margin-top:10px;border:2px solid var(--red);background:var(--rbg);flex-direction:row;align-items:center;gap:12px;padding:14px}
|
||||
.ing.stop .ico{width:52px;height:52px;border-radius:16px;background:var(--red);color:#fff;font-size:30px}
|
||||
.ing.stop .bx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
|
||||
.ing.stop h4{font-size:16px;color:var(--red)}
|
||||
.ing.stop .flag{align-self:flex-start;font-size:13px;font-weight:800;color:#fff;background:var(--red);border-radius:8px;padding:2px 8px}
|
||||
.ing.stop .use{color:#8A4A4A}
|
||||
.ing.stop .how{background:#fff}
|
||||
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px}
|
||||
|
||||
/* 误区 */
|
||||
.myth{margin-top:16px;display:flex;gap:12px;align-items:center;padding:12px;border-radius:22px;background:#FFFBF2;border:1px solid #F5E6C8}
|
||||
.myth img{flex:none;width:96px;height:96px;border-radius:16px;object-fit:cover}
|
||||
.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}
|
||||
|
||||
/* 来源 */
|
||||
.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:36px;border-radius:18px;background:var(--sec)}
|
||||
.src summary{list-style:none;display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:14px;font-weight:600;color:var(--ink)}
|
||||
.src summary::-webkit-details-marker{display:none}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12px;font-weight:400;color:var(--sub)}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12.5px;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 li{padding:8px 0;border-top:1px solid #E9ECF0;font-size:12.5px;line-height:1.65;color:var(--tx)}
|
||||
.foot{margin-top:14px;font-size:12px;line-height:1.7;color:var(--sub);text-align:center}
|
||||
|
||||
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.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"> 复用 -->
|
||||
<!-- 单色线性图标：stroke 1.8，颜色走 .ic（主色） -->
|
||||
<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-search" viewBox="0 0 24 24"><circle class="f" cx="11" cy="11" r="6.5"/><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></symbol>
|
||||
<symbol id="i-lotion" viewBox="0 0 24 24"><rect class="f" x="6.5" y="9" width="11" height="12" rx="3"/><rect x="6.5" y="9" width="11" height="12" rx="3"/><path d="M10 9V6h4v3M12 6V3h4M10 14h4"/></symbol>
|
||||
<symbol id="i-flask" viewBox="0 0 24 24"><path class="f" d="M7.6 14.5h8.8l2.3 4.1A1.6 1.6 0 0 1 17.3 21H6.7a1.6 1.6 0 0 1-1.4-2.4z"/><path d="M9 3h6M10 3v6l-4.8 8.6A2.3 2.3 0 0 0 7.2 21h9.6a2.3 2.3 0 0 0 2-3.4L14 9V3"/></symbol>
|
||||
<symbol id="i-fiber" viewBox="0 0 24 24"><path class="f" d="M2.5 9.5h7.5l-1.5 2.5 1.5 2.5H2.5zM21.5 9.5H14l1.5 2.5-1.5 2.5h7.5z"/><path d="M2.5 9.5h7.5l-1.5 2.5 1.5 2.5H2.5M21.5 9.5H14l1.5 2.5-1.5 2.5h7.5M12 4.5v2M8.5 5.5l1 1.5M15.5 5.5l-1 1.5"/></symbol>
|
||||
<symbol id="i-expand" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="5"/><path d="M2 12h3M3.5 10L2 12l1.5 2M22 12h-3M20.5 10l1.5 2-1.5 2M12 2v2.5M12 19.5V22"/></symbol>
|
||||
<symbol id="i-wave" viewBox="0 0 24 24"><path d="M3 8.5c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 15.5c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></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-hourglass" viewBox="0 0 24 24"><path class="f" d="M8 21c0-3 4-4.5 4-6.5 0 2 4 3.5 4 6.5z"/><path d="M6.5 3h11M6.5 21h11M8 3c0 5 8 6 8 9s-8 4-8 9M16 3c0 5-8 6-8 9s8 4 8 9"/></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-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-bricks" viewBox="0 0 24 24"><path class="f" d="M3 5h8v5H3zM13 14h8v5h-8z"/><path d="M3 5h8v5H3zM13 5h8v5h-8zM3 14h8v5H3zM13 14h8v5h-8z"/></symbol>
|
||||
<symbol id="i-oil" viewBox="0 0 24 24"><ellipse class="f" cx="12" cy="13.5" rx="6" ry="7"/><ellipse cx="12" cy="13.5" rx="6" ry="7"/><path d="M12 6.5c0-2 1.5-3.5 4-3.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-film" viewBox="0 0 24 24"><path class="f" d="M3 16c3-2 6-2 9 0s6 2 9 0v3c-3 2-6 2-9 0s-6-2-9 0z"/><path d="M3 16c3-2 6-2 9 0s6 2 9 0M3 19c3-2 6-2 9 0s6 2 9 0"/><circle cx="8" cy="8" r="3"/><circle cx="15.5" cy="6.5" r="2"/></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-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-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-down" viewBox="0 0 24 24"><path d="M12 4v15M6.5 13.5L12 19l5.5-5.5"/></symbol>
|
||||
<symbol id="i-hand" viewBox="0 0 24 24"><path class="f" d="M7 12V7a1.5 1.5 0 0 1 3 0v4V5a1.5 1.5 0 0 1 3 0v6V6.5a1.5 1.5 0 0 1 3 0V12v-2a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8z"/><path d="M10 11V5a1.5 1.5 0 0 1 3 0v6M13 10.5v-4a1.5 1.5 0 0 1 3 0V12M16 11.5v-1.5a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8L7 13.5V7a1.5 1.5 0 0 1 3 0v4"/></symbol>
|
||||
<symbol id="i-scale" viewBox="0 0 24 24"><rect x="3.5" y="4" width="17" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></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="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 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>
|
||||
</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">
|
||||
<h1>妊娠纹<br>从预防到修复</h1>
|
||||
<p>为什么会长 · 现在抹什么 · 成分怎么挑，3 分钟看懂</p>
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈坐在沙发上轻抚孕肚">
|
||||
<h1>妊娠纹，与体重管理</h1>
|
||||
<div class="ans">控制体重慢慢长、每天抹两次打底，红纹一出现就处理。</div>
|
||||
</section>
|
||||
|
||||
<!-- 按 openid 读孕周 / 产后状态点亮对应阶段（拿不到身份就不显示） -->
|
||||
<div class="me" id="me">
|
||||
<svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg>
|
||||
<div class="mt"><b id="meT"></b><span id="meD"></span></div>
|
||||
<button class="go" id="meGo">去看看</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心重点总览：只看这一屏也知道最重要的事 -->
|
||||
<section class="core">
|
||||
<div class="core-h"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg><h2>先记住这 3 件事</h2><small>只看这里也够用</small></div>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div class="tx"><b>慢慢长体重</b><span>防纹第一招，最省钱</span></div><div class="num"><em>≤0.5kg</em><small>每周增重</small></div></li>
|
||||
<li><span class="no">2</span><div class="tx"><b>每天抹两次打底</b><span>从孕早期开始，坚持整个孕期</span></div><div class="num"><em>2 次</em><small>每天</small></div></li>
|
||||
<li><span class="no">3</span><div class="tx"><b>红纹一出现立刻处理</b><span>越早越好，拖成白纹就难修</span></div><div class="num"><em>2 个月</em><small>至少坚持</small></div></li>
|
||||
</ol>
|
||||
<div class="core-ban"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg><b>维 A 酸 / 视黄醇：孕期、哺乳期禁用<span>买淡纹产品先翻成分表</span></b></div>
|
||||
</section>
|
||||
<section class="pts">
|
||||
<h2>记住这 3 点</h2>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div><b>每周增重不超过 0.5kg</b><span>孕中晚期起，长得慢纹就少</span></div></li>
|
||||
<li><span class="no">2</span><div><b>早晚各抹一次</b><span>从孕早期开始，坚持整个孕期</span></div></li>
|
||||
<li><span class="no">3</span><div><b>维 A 酸类孕期禁用</b><span>含视黄醇、视黄醛的也别用</span></div></li>
|
||||
</ol>
|
||||
</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">体重和妊娠纹</button>
|
||||
<button data-go="s2">不同阶段</button>
|
||||
<button data-go="s3">成分速查</button>
|
||||
</nav>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-search" xlink:href="#i-search"/></svg></span>为什么会长</button>
|
||||
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-lotion" xlink:href="#i-lotion"/></svg></span>现在抹什么</button>
|
||||
<button data-go="s3"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></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-fiber" xlink:href="#i-fiber"/></svg>纤维变脆</div>
|
||||
<span class="op">+</span>
|
||||
<div class="it"><svg class="ic"><use href="#i-expand" xlink:href="#i-expand"/></svg>撑得太快</div>
|
||||
<span class="op">=</span>
|
||||
<div class="it res"><svg class="ic"><use href="#i-wave" xlink:href="#i-wave"/></svg>长出纹路</div>
|
||||
<!-- 1 体重 -->
|
||||
<section class="sec" id="s1">
|
||||
<div class="sec-h"><span class="n">01</span><h2>体重和妊娠纹</h2></div>
|
||||
<p class="key">肚皮撑得越快越容易长纹，控体重是最省钱的预防。</p>
|
||||
<div class="card fade">
|
||||
<img class="wpic" src="img/slow.webp" alt="孕妈牵着背体重秤的小乌龟散步" loading="lazy">
|
||||
<table>
|
||||
<thead><tr><th>孕前体重</th><th>整个孕期</th><th>孕中晚期每周</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>偏瘦</b><small>BMI < 18.5</small></td><td class="v">11~16 kg</td><td>约 0.46 kg</td></tr>
|
||||
<tr><td><b>正常</b><small>BMI 18.5~23.9</small></td><td class="v">8~14 kg</td><td>约 0.37 kg</td></tr>
|
||||
<tr><td><b>偏胖</b><small>BMI ≥ 24</small></td><td class="v">5~11 kg</td><td>约 0.22~0.30 kg</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="note">BMI = 体重(kg) ÷ 身高(m)²。双胎或有并发症，以产检医生建议为准。</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" 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>
|
||||
</section>
|
||||
|
||||
<article class="step fade">
|
||||
<div class="pic"><img src="img/fiber.webp" alt="皮肤剖面里的纤维变脆" loading="lazy"><span class="badge"><b style="background:#E8476F">1</b>激素让皮肤变脆</span></div>
|
||||
<div class="tx">
|
||||
<h3>「橡皮筋」先变脆了</h3>
|
||||
<p>孕期激素升高，皮肤里的纤维合成变少、失去韧性。</p>
|
||||
<div class="vs"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg><span>对抗它：每天保湿增韧 + 吃够蛋白质和维 C</span></div>
|
||||
<!-- 2 时间轴：当前阶段按孕周高亮 -->
|
||||
<section class="sec" id="s2">
|
||||
<div class="sec-h"><span class="n">02</span><h2>不同阶段怎么做</h2></div>
|
||||
<p class="key">早打底，红纹趁早处理，白纹留到产后。</p>
|
||||
<div class="tl">
|
||||
<article class="st fade" id="stA">
|
||||
<div class="hd"><b>孕早期起 · 预防</b><span class="now">你在这里</span></div>
|
||||
<p>洗澡后和睡前，肚皮、大腿、臀部抹保湿霜，按摩到吸收。<span id="stA2">饮食吃够蛋白质和维 C。</span></p>
|
||||
<div class="why"><em>为什么这样做</em>皮肤水润有弹性，纤维不易拉断。</div>
|
||||
</article>
|
||||
<article class="st fade" id="stB">
|
||||
<div class="hd"><b>冒出红纹 · 马上处理</b><span class="now">你在这里</span></div>
|
||||
<p>红纹处每天薄涂 2 次医用硅酮凝胶，至少坚持 2 个月。</p>
|
||||
<div class="why"><em>为什么这样做</em>红纹期还在修复，最容易变淡。</div>
|
||||
</article>
|
||||
<article class="st fade" id="stC">
|
||||
<div class="hd"><b>白纹 · 产后</b><span class="now">你在这里</span></div>
|
||||
<p>涂抹作用有限，产后去正规医院皮肤科，评估激光、微针等。</p>
|
||||
<div class="why"><em>为什么这样做</em>白纹已是疤，要靠刺激长新胶原。</div>
|
||||
</article>
|
||||
</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/stretch.webp" alt="孕肚一天天变大" loading="lazy"><span class="badge"><b style="background:#E39A2D">2</b>肚子被快速撑大</span></div>
|
||||
<div class="tx">
|
||||
<h3>拉得太快，超过了极限</h3>
|
||||
<p>宝宝长大 + 体重涨太快，肚皮被往外拉，超过纤维能承受的程度。</p>
|
||||
<div class="vs"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg><span>对抗它：控制体重增速，涂什么都不如慢点长肉</span></div>
|
||||
</section>
|
||||
|
||||
<!-- 3 成分速查 -->
|
||||
<section class="sec" id="s3">
|
||||
<div class="sec-h"><span class="n">03</span><h2>成分速查</h2></div>
|
||||
<p class="key">买之前翻成分表，红色的孕期别碰。</p>
|
||||
<div class="card fade">
|
||||
<div class="ing"><span class="lt r">禁用</span><div><b>维 A 酸 / 视黄醇 / 视黄醛</b><span>可能影响胎儿，孕期哺乳期都别用</span></div></div>
|
||||
<div class="ing"><span class="lt g">可用</span><div><b>透明质酸、神经酰胺、角鲨烷</b><span>补水修护，日常打底用</span></div></div>
|
||||
<div class="ing"><span class="lt g">可用</span><div><b>医用硅酮凝胶</b><span>成膜保湿，帮红纹变淡</span></div></div>
|
||||
<div class="ing"><span class="lt a">先问医生</span><div><b>积雪草类修护霜</b><span>抗炎促修复，用前问产检医生</span></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/snap.webp" alt="纤维被拉断出现纹路" loading="lazy"><span class="badge"><b style="background:#C2185B">3</b>纤维被拉断</span></div>
|
||||
<div class="tx">
|
||||
<h3>「脆 + 快」叠加，纹就出来了</h3>
|
||||
<div class="colors">
|
||||
<span><em style="background:linear-gradient(90deg,#E58AA5,#B65C8F)"></em>先是紫红色<br>（红纹期）</span>
|
||||
<span><em style="background:linear-gradient(90deg,#EFE7E2,#D9CEC8)"></em>后变银白色<br>（白纹期）</span>
|
||||
</div>
|
||||
<div class="vs"><svg class="ic"><use href="#i-hourglass" xlink:href="#i-hourglass"/></svg><span>红纹期是修复黄金窗口，拖成白纹就难多了</span></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="key fade">
|
||||
<img src="img/slow.webp" alt="孕妈牵着背体重秤的小乌龟散步" loading="lazy">
|
||||
<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>≤0.5<small>kg</small></em><span>孕中晚期每周增重</span></div>
|
||||
<div><em>看孕前<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="s2">
|
||||
<div class="sec-h"><span class="n">2</span><h2>不同阶段，抹什么、怎么用</h2></div>
|
||||
<div class="sec-key">孕早期就开始打底；<mark>红纹一冒头立刻处理</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-sprout" xlink:href="#i-sprout"/></svg></span><b>孕早期起</b><span>预防 · 越早开始越好</span></div>
|
||||
|
||||
<article class="stage fade" id="stA">
|
||||
<div class="pic"><img src="img/lotion.webp" alt="洗澡后和睡前涂身体乳" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#F4593C">预防</span><h3>刚怀孕起 · 抹着打底</h3></div>
|
||||
<div class="concl">每天抹 2 次保湿霜，<i>坚持整个孕期</i></div>
|
||||
<div class="nums">
|
||||
<div><em>2<small>次</small></em><span>每天</span></div>
|
||||
<div><em>全孕期</em><span>一直坚持</span></div>
|
||||
<div><em>3<small>处</small></em><span>肚皮 大腿 臀部</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-lotion" xlink:href="#i-lotion"/></svg>抹什么</span><span class="v">保湿修护身体乳 / 妊娠霜</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>看成分</span><span class="v pills"><span class="pill">透明质酸<small>0.1~1%</small></span><span class="pill">神经酰胺<small>0.2~0.5%</small></span><span class="pill">角鲨烷<small>5~10%</small></span><span class="pill">维生素 E<small>1~5%</small></span></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-hand" xlink:href="#i-hand"/></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>
|
||||
|
||||
<article class="stage fade" id="stA2">
|
||||
<div class="pic"><img src="img/food.webp" alt="鱼、蛋、奶、水果" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#E39A2D">同时吃好</span><h3>从里面给皮肤打底</h3></div>
|
||||
<div class="concl">吃够蛋白质和维 C，<i>均衡饮食就够</i></div>
|
||||
<div class="nums">
|
||||
<div><em>约 100<small>mg</small></em><span>维 C 每天</span></div>
|
||||
<div><em>每餐</em><span>有优质蛋白</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<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-flask" xlink:href="#i-flask"/></svg>补什么</span><span class="v pills"><span class="pill">优质蛋白</span><span class="pill">维生素 C</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="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>纤维要靠蛋白质和维 C 合成，吃够了才有「原料」。但它管不了「撑得太快」，还是要配合控体重。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#C2185B"><svg class="ic"><use href="#i-hourglass" xlink:href="#i-hourglass"/></svg></span><b>冒出红纹</b><span>黄金窗口 · 越早越好</span></div>
|
||||
|
||||
<article class="stage fade" id="stB">
|
||||
<div class="pic"><img src="img/redgel.webp" alt="在淡红色纹路上薄涂凝胶" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#C2185B">黄金窗口</span><h3>刚长出红纹 · 马上处理</h3></div>
|
||||
<div class="concl">红纹一冒头就涂，<i>至少坚持 2 个月</i></div>
|
||||
<div class="nums">
|
||||
<div><em>2<small>次</small></em><span>每天薄涂</span></div>
|
||||
<div><em>≥2<small>个月</small></em><span>至少坚持</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-lotion" xlink:href="#i-lotion"/></svg>抹什么</span><span class="v">医用硅酮凝胶（硅凝胶）；积雪草类修护霜</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>看成分</span><span class="v pills"><span class="pill">硅酮<small>医用级、成膜型</small></span><span class="pill">积雪草总苷<small>按说明书，先问医生</small></span></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:#8E6BB8"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><b>白纹 / 产后</b><span>改善外观 · 找医生</span></div>
|
||||
|
||||
<article class="stage fade" id="stC">
|
||||
<div class="pic"><img src="img/clinic.webp" alt="产后在皮肤科咨询" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#8E6BB8">改善外观</span><h3>已经变成白纹 · 产后处理</h3></div>
|
||||
<div class="concl">白纹涂抹难改善，<i>产后找皮肤科</i></div>
|
||||
<div class="nums">
|
||||
<div><em>3~5<small>次</small></em><span>激光一个疗程</span></div>
|
||||
<div><em>仅产后</em><span>维 A 酸遵医嘱</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>做什么</span><span class="v">正规医院皮肤科：点阵激光、微针等</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>可辅助</span><span class="v pills"><span class="pill">外用维 A 酸<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">维 A 酸遵医嘱、晚上薄涂、从低浓度开始</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>
|
||||
|
||||
<div class="ban fade">
|
||||
<span class="bi"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg></span>
|
||||
<div><b>维 A 酸 / 视黄醇：孕期、哺乳期禁用</b><p>成分表里看到「维 A 酸、视黄醇、视黄醛」就先放下，产后不哺乳了再遵医嘱用。</p></div>
|
||||
</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>
|
||||
<p class="sec-sub">翻到产品背面的成分表，对着看含量和能不能用</p>
|
||||
<div class="legend"><span class="ok"><i></i>孕期可用</span><span class="warn"><i></i>先问医生</span><span class="nog"><i></i>孕期禁用</span></div>
|
||||
|
||||
<!-- 红灯放最前、最大 -->
|
||||
<div class="ing stop fade">
|
||||
<span class="how">涂</span>
|
||||
<div class="ico"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg></div>
|
||||
<div class="bx">
|
||||
<h4>维 A 酸 / 视黄醇 / 视黄醛</h4>
|
||||
<span class="flag">孕期哺乳期禁用</span>
|
||||
<div class="use">可能影响胎儿发育。产后不哺乳时作为处方药（0.025%~0.1%）遵医嘱用于改善白纹。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grp"><i style="background:var(--green)"></i>孕期可用<small>按含量挑</small></div>
|
||||
<div class="grid">
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#E8F2FD;color:#3B7DD8"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></div><h4>透明质酸</h4><span class="pct">0.1% ~ 1%</span><div class="use">补水增韧，扛住拉扯</div></div>
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#FFF2E0;color:#D9822B"><svg class="ic"><use href="#i-bricks" xlink:href="#i-bricks"/></svg></div><h4>神经酰胺</h4><span class="pct">0.2% ~ 0.5%</span><div class="use">修护屏障、锁住水分</div></div>
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#F3F6DC;color:#7C8F2A"><svg class="ic"><use href="#i-oil" xlink:href="#i-oil"/></svg></div><h4>角鲨烷 / 维 E</h4><span class="pct">5~10% / 1~5%</span><div class="use">滋润，缓解干痒紧绷</div></div>
|
||||
<div class="ing fade"><span class="how">吃</span><div class="ico" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-egg" xlink:href="#i-egg"/></svg></div><h4>蛋白质 + 维 C</h4><span class="pct">维 C 约 100mg/天</span><div class="use">给纤维合成供原料</div></div>
|
||||
<div class="ing full fade"><span class="how">涂</span><div class="ico" style="background:#EEF0FF;color:#5B63C9"><svg class="ic"><use href="#i-film" xlink:href="#i-film"/></svg></div><div class="bx"><h4>硅酮（孕期哺乳期可用）</h4><span class="pct">医用级、成膜型</span><div class="use">封闭保湿，淡化红纹</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="grp"><i style="background:var(--amber)"></i>先问医生<small>再决定用不用</small></div>
|
||||
<div class="grid">
|
||||
<div class="ing am full fade"><span class="how">涂</span><div class="ico" style="background:#E9F6E6;color:#3E9A4A"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></div><div class="bx"><h4>积雪草总苷</h4><span class="pct">按说明书，先问医生</span><div class="use">抗炎促修复，帮红纹转淡</div></div></div>
|
||||
</div>
|
||||
<p class="tip">含量是常见起效区间，以产品成分表为准；处方药请以皮肤科医生面诊为准。</p>
|
||||
|
||||
<div class="myth fade">
|
||||
<img src="img/myth.webp" alt="可可脂和橄榄油" loading="lazy">
|
||||
<div><span class="mk">常见误区</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>维 A 酸：</b>0.1% 维 A 酸涂早期红纹 6 个月，10 人中 8 人明显改善，对照组 12 人中 1 人（Arch Dermatol 1996，小样本，研究对象为早期红纹）</li>
|
||||
<li><b>医用硅酮：</b>1522 人连用 2 个月以上，颜色、柔软度改善约 70%~85%（研究对象为<u>疤痕</u>，非专门针对妊娠纹，仅作参考）</li>
|
||||
<li><b>透明质酸复方凝胶：</b>约 50 人连用 12 周，红纹深度和颜色明显减轻，但不会完全消失</li>
|
||||
<li><b>点阵激光：</b>小样本临床研究显示对妊娠纹总有效率较高；联合强脉冲光的 60 人研究中纹路面积平均缩小约 37%，满意度较高，但约 25% 有不良反应</li>
|
||||
<li><b>可可脂：</b>210 人随机对照研究，用可可脂 45% 长纹、安慰剂 49%，无明显差异</li>
|
||||
<li><b>橄榄油：</b>70 人随机对照研究，涂 45.7% vs 不涂 62.9% 长纹，差异未达统计学意义</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>参考来源</summary>
|
||||
<ul>
|
||||
<li><b>增重范围：</b>中国营养学会《中国妇女妊娠期体重监测与评价》（T/CNSS 009-2021）及 WS/T 801-2022，按孕前 BMI 分档；偏胖档含超重 7~11kg、肥胖（BMI≥28）5~9kg。</li>
|
||||
<li><b>维 A 酸：</b>0.1% 维 A 酸涂早期红纹 6 个月，10 人中 8 人明显改善，对照组 12 人中 1 人（Arch Dermatol 1996，小样本）。孕期哺乳期禁用，产后不哺乳时遵医嘱使用。</li>
|
||||
<li><b>医用硅酮：</b>1522 人连用 2 个月以上，颜色、柔软度改善约 70%~85%（研究对象为疤痕，非专门针对妊娠纹，仅作参考）。</li>
|
||||
<li><b>透明质酸复方凝胶：</b>约 50 人连用 12 周，红纹深度和颜色明显减轻，但不会完全消失。</li>
|
||||
<li><b>点阵激光：</b>联合强脉冲光的 60 人研究中纹路面积平均缩小约 37%，约 25% 有不良反应。</li>
|
||||
<li><b>可可脂、橄榄油：</b>210 人随机对照研究，可可脂 45% 长纹、安慰剂 49%；70 人研究，橄榄油 45.7% 对 62.9%，均无统计学差异，润肤可以、防纹别指望。</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p class="foot">本页为科普参考，不能代替医生诊断。孕期用药、护肤有疑问请咨询医生。</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -510,14 +239,17 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
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');
|
||||
var sc = $('#scroll'), bar = $('#bar');
|
||||
|
||||
/* 返回：从首页点进来就 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;
|
||||
});
|
||||
|
||||
/* 滚动后顶栏白底 + 细分割线 */
|
||||
sc.addEventListener('scroll', function () { bar.classList.toggle('solid', 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;
|
||||
@@ -528,13 +260,12 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
/* 体重管理：同源相对路径，带身份 */
|
||||
$('#goWeight').addEventListener('click', function () { location.href = '/yunqi-tizhong/' + location.search + location.hash; });
|
||||
|
||||
/* 按孕周点亮阶段；ic 为图标 symbol 名（mom / sprout / baby），切换 <use> 的引用 */
|
||||
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);
|
||||
/* 按孕周点亮阶段（stA 预防 / stA2 饮食并在 stA 内 / stB 红纹 / stC 白纹产后） */
|
||||
function mark(stage, t, d) {
|
||||
var id = stage === 'stA2' ? 'stA' : stage;
|
||||
var el = document.getElementById(id); if (el) el.classList.add('hl');
|
||||
$('#meT').textContent = t; $('#meD').textContent = d;
|
||||
$('#meGo').onclick = function () { go(stage); };
|
||||
$('#meGo').onclick = function () { go(id); };
|
||||
$('#me').classList.add('on');
|
||||
}
|
||||
if (openid) {
|
||||
@@ -542,18 +273,18 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
.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', 'baby', '宝宝出生了，重点看修复', '红纹趁早处理，白纹产后找皮肤科');
|
||||
if (p.postpartum) mark('stB', '宝宝出生了，重点看修复', '红纹趁早处理，白纹找皮肤科');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w >= 20) mark('stA', 'mom', '孕 ' + w + ' 周 · 肚子长得最快', '坚持打底，每天看看有没有冒红纹');
|
||||
else mark('stA', 'sprout', '孕 ' + w + ' 周 · 正是打底好时候', '现在开始抹，比长了再补管用得多');
|
||||
if (w >= 20) mark('stA', '孕 ' + w + ' 周 · 肚子长得最快', '坚持打底，留意有没有冒红纹');
|
||||
else mark('stA', '孕 ' + 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'); });
|
||||
|
||||
|
||||
@@ -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'); });
|
||||
|
||||
|
||||
@@ -5,522 +5,277 @@
|
||||
<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：孕期首页「其他妈妈也在搜」第 5 条入口）。
|
||||
版式沿用妊娠纹专题 topic/wen/（用户已认可）：hero + 3 个核心重点 + 每段一句重点结论 + 数字徽标 + 时间轴 + 常显说明块 + 页底依据来源。
|
||||
内容只写全国通用的法律法规明文（《女职工劳动保护特别规定》《劳动合同法》《妇女权益保障法》《社会保险法》《劳动争议调解仲裁法》），
|
||||
地方差异（生育奖励假天数、津贴补差、剖宫产是否按难产等）一律写「以当地规定为准」，不写具体地方天数。
|
||||
插画 img/*.webp 由 AI 生成（画面不含文字）。自成一页：不引 app.js；回首页走相对路径 ../../。 -->
|
||||
<!-- 孕期专题 · 职场维权（孕期首页「其他妈妈也在搜」第 5 条）。
|
||||
2026-10-31 按《孕期专题页统一设计规范 v2》重做：清新、简洁、核心明确；主色 #5B6CFF。
|
||||
只写全国通用法条（《女职工劳动保护特别规定》《劳动合同法》《妇女权益保障法》《社会保险法》《劳动争议调解仲裁法》），
|
||||
地方差异一律写「以当地规定为准」。自成一页：不引 app.js；返回兜底走相对路径 ../../ 并带回 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}
|
||||
:root{--c:#5B6CFF;--cbg:#EEF0FF;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--sec:#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,input,select{font:inherit;border:0;background:none;color:inherit}
|
||||
button,input{font:inherit;border:0;background:none;color:inherit}
|
||||
button{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}
|
||||
b{color:var(--h)}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.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}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);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:36px;height:36px;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}
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;object-position:center 30%;border-radius:20px;margin-top:4px}
|
||||
h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.ans{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
|
||||
/* 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;white-space:nowrap}
|
||||
.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(--deep);color:#fff}
|
||||
.core-ban .ic{font-size:24px}
|
||||
.core-ban b{font-size:14.5px;line-height:1.35}
|
||||
.core-ban span{display:block;font-size:12px;font-weight:400;opacity:.9}
|
||||
|
||||
/* 个性化 */
|
||||
.me{margin:14px 16px 0;display:none;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1.5px dashed #FFC2B0}
|
||||
/* 个性化提示条 */
|
||||
.me{display:none;margin-top:12px;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--sec);font-size:13px;line-height:1.5;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:18px;height:18px}
|
||||
.me span{flex:1;min-width:0}
|
||||
.me button{flex:none;font-size:13px;color:var(--c);font-weight:600}
|
||||
|
||||
/* 目录 */
|
||||
.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 点 */
|
||||
.key{margin-top:28px}
|
||||
h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--h)}
|
||||
.key ol{list-style:none;margin-top:6px}
|
||||
.key li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
|
||||
.key li:last-child{border-bottom:0}
|
||||
.key .no{flex:none;width:26px;font-size:28px;line-height:1.1;font-weight:800;color:var(--c);font-family:Georgia,"Times New Roman",serif}
|
||||
.key b{display:block;font-size:16px;line-height:1.45}
|
||||
.key span{display:block;font-size:13px;color:var(--m);line-height:1.5;margin-top:1px}
|
||||
|
||||
/* 段标题 */
|
||||
.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:28px;padding:24px 20px;background:var(--sec);scroll-margin-top:48px}
|
||||
.sec.w{background:#fff}
|
||||
.sec+.sec{margin-top:0}
|
||||
.lead{margin-top:4px;font-size:15px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
|
||||
/* 时间轴 */
|
||||
.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) 35%,var(--deep) 65%,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;overflow:hidden;text-overflow:ellipsis}
|
||||
.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: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}
|
||||
.row .v b{color:var(--deep)}
|
||||
.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}
|
||||
/* 三阶段卡 */
|
||||
.stg{margin-top:12px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
|
||||
.stg.hl{border-color:var(--c);box-shadow:0 0 0 3px rgba(91,108,255,.12)}
|
||||
.stg .hd{display:flex;align-items:center;gap:8px}
|
||||
.stg .hd .ic{color:var(--c);width:22px;height:22px}
|
||||
.stg .hd b{font-size:16px}
|
||||
.stg .hd small{margin-left:auto;font-size:12.5px;color:var(--m)}
|
||||
.stg .hd .now{display:none;margin-left:6px;font-size:11.5px;color:#fff;background:var(--c);border-radius:99px;padding:0 8px;line-height:20px}
|
||||
.stg.hl .hd .now{display:inline-block}
|
||||
.stg ul{list-style:none;margin-top:6px}
|
||||
.stg li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.7}
|
||||
.stg li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.55}
|
||||
.stg li b{font-weight:600}
|
||||
|
||||
/* 法条重点卡（合同顺延） */
|
||||
.law{margin-top:18px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:#F3FAF4;border:1.5px solid #CFEAD7}
|
||||
.law .bi{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;font-size:28px}
|
||||
.law b{display:block;color:#1F5E3F;font-size:15.5px;line-height:1.4}
|
||||
.law p{font-size:12.5px;color:#5E7466;margin-top:3px;line-height:1.55}
|
||||
/* 折叠 */
|
||||
details.fold{margin-top:12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
|
||||
details.fold summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--h)}
|
||||
details.fold summary::-webkit-details-marker{display:none}
|
||||
details.fold summary .ic{width:18px;height:18px;color:var(--c)}
|
||||
details.fold summary::after{content:"展开";margin-left:auto;font-size:12.5px;font-weight:400;color:var(--m)}
|
||||
details.fold[open] summary::after{content:"收起"}
|
||||
details.fold .bd{padding:0 14px 12px;font-size:13.5px;line-height:1.7}
|
||||
details.fold .bd p+p{margin-top:6px}
|
||||
|
||||
/* 计算器 */
|
||||
.calc{margin-top:14px;padding:16px 14px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(194,24,91,.06)}
|
||||
.fld{margin-top:14px}
|
||||
.fld:first-child{margin-top:0}
|
||||
.fld>label,.fld>.lb{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700}
|
||||
.fld>label .ic,.fld>.lb .ic{font-size:17px;color:var(--c)}
|
||||
.fld .hint{display:block;margin-top:4px;font-size:12px;color:var(--mute);line-height:1.5}
|
||||
.inp{margin-top:8px;display:block;width:100%;height:44px;padding:0 14px;border-radius:14px;background:#FFF6F2;border:1.5px solid #F6DCD3;font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none}
|
||||
.calc{margin-top:12px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.fld+.fld{margin-top:14px}
|
||||
.lb{display:block;font-size:13.5px;font-weight:600;color:var(--h)}
|
||||
.hint{display:block;margin-top:4px;font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
.inp{margin-top:6px;display:block;width:100%;height:44px;padding:0 14px;border-radius:12px;background:var(--sec);border:1px solid var(--line);font-size:15px;color:var(--h);-webkit-appearance:none;appearance:none}
|
||||
.inp:focus{outline:none;border-color:var(--c)}
|
||||
.seg{margin-top:8px;display:flex;gap:6px;padding:4px;border-radius:14px;background:#FFF6F2}
|
||||
.seg button{flex:1;min-width:0;height:36px;border-radius:11px;font-size:13.5px;color:var(--sub);white-space:nowrap}
|
||||
.seg button.on{background:var(--c);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(244,89,60,.25)}
|
||||
.stp{margin-top:8px;display:flex;align-items:center;gap:10px}
|
||||
.stp button{flex:none;width:44px;height:44px;border-radius:14px;background:#FFF0EA;color:var(--c);font-size:22px;font-weight:700;display:grid;place-items:center}
|
||||
.seg{margin-top:6px;display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--sec)}
|
||||
.seg button{flex:1;min-width:0;height:36px;border-radius:10px;font-size:14px;color:var(--t);white-space:nowrap}
|
||||
.seg button.on{background:#fff;color:var(--c);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
|
||||
.stp{margin-top:6px;display:flex;align-items:center;gap:8px}
|
||||
.stp button{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--c);color:var(--c);font-size:20px;font-weight:600;display:grid;place-items:center}
|
||||
.stp .inp{margin-top:0;flex:1;min-width:0;text-align:center;font-weight:700}
|
||||
.stp em{flex:none;font-style:normal;font-size:13px;color:var(--sub)}
|
||||
.res{margin-top:16px;padding:14px;border-radius:18px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
|
||||
.res .empty{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sub)}
|
||||
.res .empty .ic{font-size:20px;color:var(--c)}
|
||||
.res .tot{display:flex;align-items:flex-end;gap:8px}
|
||||
.res .tot em{font-style:normal;font-size:38px;line-height:1;font-weight:800;color:var(--deep)}
|
||||
.res .tot span{font-size:14px;font-weight:700;color:var(--deep);padding-bottom:4px}
|
||||
.res .tot small{margin-left:auto;font-size:12px;color:var(--sub);padding-bottom:5px;white-space:nowrap}
|
||||
.res .parts{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
|
||||
.res .parts span{font-size:12px;padding:2px 9px;border-radius:99px;background:#fff;color:#B23A1F;font-weight:600;white-space:nowrap}
|
||||
.res .dates{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.res .dates>div{padding:9px 10px;border-radius:14px;background:#fff;line-height:1.25}
|
||||
.res .dates small{display:block;font-size:11.5px;color:var(--sub)}
|
||||
.res .dates b{display:block;margin-top:3px;font-size:15px;color:var(--ink);white-space:nowrap}
|
||||
.res .dates .main{grid-column:1/-1;background:var(--deep);color:#fff;display:flex;align-items:center;gap:10px}
|
||||
.res .dates .main small{color:rgba(255,255,255,.85)}
|
||||
.res .dates .main b{color:#fff;font-size:19px}
|
||||
.res .dates .main .ic{font-size:26px}
|
||||
.res .note{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.55}
|
||||
.stp em{flex:none;font-style:normal;font-size:14px;color:var(--t)}
|
||||
.res{margin-top:16px;padding:14px;border-radius:14px;background:var(--cbg)}
|
||||
.res .empty{font-size:14px;color:var(--t);text-align:center}
|
||||
.res .tot{display:flex;align-items:baseline;gap:6px;color:var(--c)}
|
||||
.res .tot em{font-style:normal;font-size:36px;line-height:1.1;font-weight:800}
|
||||
.res .tot span{font-size:15px;font-weight:700}
|
||||
.res .tot small{margin-left:auto;font-size:12.5px;color:var(--m)}
|
||||
.res .dt{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.res .dt div{padding:8px 10px;border-radius:12px;background:#fff;line-height:1.35}
|
||||
.res .dt small{display:block;font-size:12.5px;color:var(--m)}
|
||||
.res .dt b{display:block;margin-top:2px;font-size:15px;white-space:nowrap}
|
||||
.res .note{margin-top:8px;font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
|
||||
/* 公式 */
|
||||
.formula{margin-top:14px;padding:14px 12px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
|
||||
.eq{display:flex;align-items:center;justify-content:center;gap:6px}
|
||||
.eq .it{width:92px;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}
|
||||
.eq .it .ic{display:block;margin:0 auto 4px;font-size:26px;color:var(--c)}
|
||||
.eq .op{font-size:20px;color:var(--c);font-weight:700}
|
||||
.eq .rs{background:var(--deep);color:#fff}
|
||||
.eq .rs .ic{color:#fff}
|
||||
.eq-note{margin-top:8px;text-align:center;font-size:12px;color:var(--sub)}
|
||||
/* 维权四步 */
|
||||
.flow{list-style:none;margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
|
||||
.flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;background:#D5DAFF}
|
||||
.flow li{position:relative;text-align:center}
|
||||
.flow .n{display:grid;place-items:center;width:32px;height:32px;margin:0 auto;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:15px;box-shadow:0 0 0 4px var(--sec)}
|
||||
.flow b{display:block;margin-top:8px;font-size:14px;line-height:1.4}
|
||||
.flow span{display:block;margin-top:3px;font-size:12px;color:var(--m);line-height:1.45}
|
||||
.flow .lim{color:var(--c);font-weight:600}
|
||||
.hot{margin-top:16px;display:flex;gap:8px}
|
||||
.hot a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--t);font-size:12.5px;line-height:1.35}
|
||||
.hot a .ic{color:var(--c)}
|
||||
.hot a b{display:block;font-size:16px;color:var(--h)}
|
||||
|
||||
/* 两列对比卡 */
|
||||
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
|
||||
.duo>div{padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);display:flex;flex-direction:column;gap:6px}
|
||||
.duo>div.am{border-top-color:var(--amber)}
|
||||
.duo .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px}
|
||||
.duo h4{font-size:14.5px;line-height:1.3}
|
||||
.duo .pct{align-self:flex-start;font-size:12.5px;font-weight:800;color:var(--green);background:var(--gbg);border-radius:8px;padding:1px 7px}
|
||||
.duo .am .pct{color:var(--amber);background:var(--abg)}
|
||||
.duo .use{font-size:12px;color:var(--sub);line-height:1.5}
|
||||
.ok-line{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}
|
||||
.ok-line .ic{font-size:20px}
|
||||
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px;line-height:1.55}
|
||||
/* 页底 */
|
||||
.src{margin:24px 20px 0}
|
||||
.src ul{list-style:none}
|
||||
.src li{padding:6px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--t)}
|
||||
.src li:first-child{border-top:0}
|
||||
.foot{margin:14px 20px 0;font-size:12px;color:var(--m);text-align:center;line-height:1.6}
|
||||
|
||||
/* 侵权场景 */
|
||||
.case{margin-top:10px;display:flex;gap:12px;padding:13px 13px 13px 12px;border-radius:20px;background:#fff;border:1px solid var(--line)}
|
||||
.cases{margin-top:14px}
|
||||
.cases .case:first-child{margin-top:0}
|
||||
.case .ico{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--rbg);color:var(--red)}
|
||||
.case .bx{flex:1;min-width:0}
|
||||
.case h4{font-size:15px;line-height:1.35;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
|
||||
.case .flag{font-size:11.5px;font-weight:700;color:var(--red);background:var(--rbg);border-radius:6px;padding:0 6px;white-space:nowrap}
|
||||
.case .ans{margin-top:5px;font-size:13.5px;font-weight:700;color:var(--green);line-height:1.5}
|
||||
.case .by{margin-top:3px;font-size:12px;color:var(--mute);line-height:1.5}
|
||||
|
||||
/* 应对四步 */
|
||||
.steps-pic{margin-top:18px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff}
|
||||
.steps-pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.steps-pic .hd{padding:12px 14px 0;font-size:16px;font-weight:800}
|
||||
.steps{list-style:none;padding:6px 14px 14px}
|
||||
.steps li{position:relative;display:flex;gap:12px;padding:10px 0}
|
||||
.steps li+li{border-top:1px dashed #F1E2DD}
|
||||
.steps .sn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
|
||||
.steps b{display:block;font-size:15px;line-height:1.4}
|
||||
.steps p{margin-top:2px;font-size:12.5px;color:var(--sub);line-height:1.55}
|
||||
.steps .bdg{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;padding:1px 8px;border-radius:8px;background:var(--soft);color:var(--deep);white-space:nowrap}
|
||||
.hot{margin-top:12px;display:flex;gap:8px}
|
||||
.hot a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:#fff;border:1.5px solid #F6DCD3;text-decoration:none;color:var(--ink)}
|
||||
.hot a .ic{font-size:22px;color:var(--c)}
|
||||
.hot a b{display:block;font-size:17px;line-height:1.2;color:var(--deep)}
|
||||
.hot a small{display:block;font-size:11.5px;color:var(--sub);white-space:nowrap}
|
||||
|
||||
/* 复工清单 */
|
||||
.ck{margin-top:14px;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line)}
|
||||
.ck img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.ck .prog{display:flex;align-items:center;gap:10px;padding:12px 14px 4px}
|
||||
.ck .prog b{font-size:15px}
|
||||
.ck .prog .bar2{flex:1;height:8px;border-radius:9px;background:#FBE7E0;overflow:hidden}
|
||||
.ck .prog .bar2 i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--c),var(--deep));transition:width .3s}
|
||||
.ck .prog small{font-size:12px;color:var(--sub);white-space:nowrap}
|
||||
.ck ul{list-style:none;padding:4px 14px 12px}
|
||||
.ck li{display:flex;gap:10px;padding:10px 0;border-top:1px dashed #F1E2DD;cursor:pointer}
|
||||
.ck li:first-child{border-top:0}
|
||||
.ck .box{flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;border:2px solid #F2B3A3;display:grid;place-items:center;color:#fff;font-size:16px;transition:background .2s,border-color .2s}
|
||||
.ck .box .ic{opacity:0}
|
||||
.ck li.done .box{background:var(--green);border-color:var(--green)}
|
||||
.ck li.done .box .ic{opacity:1}
|
||||
.ck li .t2{flex:1;min-width:0}
|
||||
.ck li b{display:block;font-size:14.5px;line-height:1.4}
|
||||
.ck li span{display:block;margin-top:1px;font-size:12.5px;color:var(--sub);line-height:1.5}
|
||||
.ck li.done b{color:var(--mute);text-decoration:line-through}
|
||||
.ck .cat{flex:none;align-self:flex-start;font-size:11px;padding:1px 7px;border-radius:99px;background:#F5EFEE;color:var(--sub);white-space:nowrap}
|
||||
|
||||
/* 来源 */
|
||||
.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{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.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-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></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-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-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-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-tick" viewBox="0 0 24 24"><path d="M5.5 12.5l4 4 9-9"/></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-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></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="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2"/></symbol>
|
||||
<symbol id="i-calc" viewBox="0 0 24 24"><rect class="f" x="5" y="3" width="14" height="18" rx="3"/><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7h7M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M9 8l3 4 3-4M12 12v5M9 13h6M9 15.5h6"/></symbol>
|
||||
<symbol id="i-bag" viewBox="0 0 24 24"><rect class="f" x="3" y="7.5" width="18" height="12.5" rx="3"/><rect x="3" y="7.5" width="18" height="12.5" rx="3"/><path d="M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3 12.5h18"/></symbol>
|
||||
<symbol id="i-bottle" viewBox="0 0 24 24"><path class="f" d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2z"/><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V7.5h6V10M10.5 7.5L11 4h2l.5 3.5M8 14h3M8 17h3"/></symbol>
|
||||
<symbol id="i-doc" viewBox="0 0 24 24"><path class="f" d="M6 3h8l4 4v14H6z"/><path d="M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 15.5h6M9 8.5h2"/></symbol>
|
||||
<symbol id="i-chat" viewBox="0 0 24 24"><path class="f" d="M4 5h16v11H9l-5 4z"/><path d="M4 5h16v11H9l-5 4zM8 9.5h8M8 12.5h5"/></symbol>
|
||||
<symbol id="i-phone" viewBox="0 0 24 24"><path class="f" d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></symbol>
|
||||
<symbol id="i-gavel" viewBox="0 0 24 24"><path class="f" d="M4 19h10v2H4z"/><path d="M4 21h10M13.5 3.5l5 5M11 6l5 5M12.2 4.8l-3.4 3.4 5 5 3.4-3.4M10.5 10l-6.5 6.5"/></symbol>
|
||||
<symbol id="i-down2" viewBox="0 0 24 24"><path class="f" d="M4 15h16v5H4z"/><path d="M12 3v11M7.5 9.5L12 14l4.5-4.5M4 15v5h16v-5"/></symbol>
|
||||
<symbol id="i-swap" viewBox="0 0 24 24"><path d="M4 8h13M13.5 4.5L17 8l-3.5 3.5M20 16H7M10.5 12.5L7 16l3.5 3.5"/></symbol>
|
||||
<symbol id="i-moon" viewBox="0 0 24 24"><path class="f" d="M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z"/><path d="M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z"/></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.5 4.3 4.3 0 0 1 19.5 10C19.5 15.5 12 20 12 20z"/><path d="M12 20s-7.5-4.5-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10C19.5 15.5 12 20 12 20z"/></symbol>
|
||||
<symbol id="i-home" viewBox="0 0 24 24"><path class="f" d="M5 10.5L12 4.5l7 6V20H5z"/><path d="M3.5 12L12 4.5 20.5 12M5 10.5V20h14v-9.5M10 20v-5h4v5"/></symbol>
|
||||
<symbol id="i-pregnant" viewBox="0 0 24 24"><circle class="f" cx="14" cy="14" r="4.5"/><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M11 9.5c3.5 0 6 2 6 4.5s-2 4-5 4h-1M11 21v-3"/></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-preg" viewBox="0 0 24 24"><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M11 9.5c3.5 0 6 2 6 4.5s-2 4-5 4h-1M11 21v-3"/></symbol>
|
||||
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.5h.01M14.8 11.5h.01M9.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-bottle" viewBox="0 0 24 24"><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V7.5h6V10M10.5 7.5L11 4h2l.5 3.5M8 14h3M8 17h3"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
|
||||
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></symbol>
|
||||
<symbol id="i-plus" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 8l3 4 3-4M12 12v5M9 13h6M9 15.5h6"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><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-pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.5-6.5-11a6.5 6.5 0 0 1 13 0c0 5.5-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></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">
|
||||
<h1>产后复工<br>职场维权指南</h1>
|
||||
<p>孕期 · 产假 · 复工 · 哺乳期，法律怎么护着你</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="wrap">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="职场妈妈抱着宝宝站在办公室窗前">
|
||||
<h1>孕妈产后复工，<br>职场维权指南</h1>
|
||||
<div class="ans">孕期、产期、哺乳期，单位不能因此辞退你、降你工资。</div>
|
||||
<div class="me" id="me"><svg class="ic"><use href="#i-pin" xlink:href="#i-pin"/></svg><span id="meT"></span><button id="meGo">去看</button></div>
|
||||
</section>
|
||||
|
||||
<!-- 核心重点总览 -->
|
||||
<section class="core">
|
||||
<div class="core-h"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg><h2>先记住这 3 件事</h2><small>只看这里也够用</small></div>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div class="tx"><b>「三期」内不得随便辞退</b><span>孕期、产期、哺乳期，合同到期也要顺延</span></div><div class="num"><em>三期</em><small>受法律保护</small></div></li>
|
||||
<li><span class="no">2</span><div class="tx"><b>产假不少于 98 天</b><span>难产、多胞胎另加，各省还有延长假</span></div><div class="num"><em>98 天</em><small>国家底线</small></div></li>
|
||||
<li><span class="no">3</span><div class="tx"><b>每天 1 小时哺乳时间</b><span>宝宝 1 岁内，在劳动时间内安排</span></div><div class="num"><em>1 小时</em><small>每天</small></div></li>
|
||||
</ol>
|
||||
<div class="core-ban"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg><b>因怀孕、生育、哺乳降薪或辞退：违法<span>遇到了先留证据，可打 12333 咨询</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>
|
||||
<section class="key">
|
||||
<h2>记住这 3 点</h2>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div><b>产假不少于 98 天</b><span>难产、多胞胎另加，各省还有奖励假</span></div></li>
|
||||
<li><span class="no">2</span><div><b>产检算上班时间</b><span>不扣工资，也不算请假</span></div></li>
|
||||
<li><span class="no">3</span><div><b>每天 1 小时哺乳时间</b><span>宝宝 1 岁内，多 1 个宝宝多 1 小时</span></div></li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1"><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span>各段保护</button>
|
||||
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-calc" xlink:href="#i-calc"/></svg></span>产假怎么算</button>
|
||||
<button data-go="s3"><span class="ib" style="background:#FFF2E0;color:#D9822B"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg></span>钱怎么发</button>
|
||||
<button data-go="s4"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-gavel" xlink:href="#i-gavel"/></svg></span>遇到侵权</button>
|
||||
</nav>
|
||||
|
||||
<!-- ① 时间轴 -->
|
||||
<!-- 1 三个阶段 -->
|
||||
<section class="sec" id="s1">
|
||||
<div class="sec-h"><span class="n">1</span><h2>从怀孕到哺乳期，每段护你什么</h2></div>
|
||||
<div class="sec-key">孕期、产期、哺乳期合称「三期」，单位<mark>不得因此降薪、辞退、解除合同</mark>。</div>
|
||||
<p class="sec-sub">从上往下就是怀孕到宝宝 1 岁的全程，找到你现在的那一段</p>
|
||||
<h2>三个阶段的保护</h2>
|
||||
<p class="lead">不得降薪、不得辞退，合同到期也要顺延。</p>
|
||||
|
||||
<div class="tl">
|
||||
<div class="phase"><span class="node" style="background:#F4593C"><svg class="ic"><use href="#i-pregnant" xlink:href="#i-pregnant"/></svg></span><b>怀孕后</b><span>孕期 · 上班有照顾</span></div>
|
||||
<article class="stg fade" id="stA">
|
||||
<div class="hd"><svg class="ic"><use href="#i-preg" xlink:href="#i-preg"/></svg><b>孕期</b><span class="now">你在这里</span><small>怀孕上班</small></div>
|
||||
<ul>
|
||||
<li>产检时间<b>计入劳动时间</b></li>
|
||||
<li>干不了原岗位，凭医院证明可减量或调岗</li>
|
||||
<li>满 7 个月，<b>不加班、不排夜班</b></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="stg fade" id="stB">
|
||||
<div class="hd"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg><b>产假</b><span class="now">你在这里</span><small>至少 98 天</small></div>
|
||||
<ul>
|
||||
<li>98 天，其中<b>产前可休 15 天</b></li>
|
||||
<li>难产 +15 天，每多 1 个宝宝 +15 天</li>
|
||||
<li>各省奖励假另加，以当地规定为准</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="stg fade" id="stC">
|
||||
<div class="hd"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg><b>哺乳期</b><span class="now">你在这里</span><small>宝宝 1 岁内</small></div>
|
||||
<ul>
|
||||
<li>每天<b>1 小时哺乳时间</b>，在上班时间内</li>
|
||||
<li>不加班、不排夜班</li>
|
||||
<li>合同到期，<b>顺延到哺乳期结束</b></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="stage fade" id="stA">
|
||||
<div class="pic"><img src="img/preg.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>产检</em><span>计入劳动时间</span></div>
|
||||
<div><em>7<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-clinic" xlink:href="#i-clinic"/></svg>产检</span><span class="v">劳动时间内去产检，所需时间<b>计入劳动时间</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg>岗位</span><span class="v">不能适应原岗位的，凭医疗机构证明，单位应<b>减轻劳动量或安排其他能适应的工作</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-moon" xlink:href="#i-moon"/></svg>7 个月+</span><span class="v">怀孕 7 个月以上，<b>不得延长劳动时间或安排夜班</b>，并应在劳动时间内安排一定休息时间</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>《女职工劳动保护特别规定》第 5、6 条：不得因怀孕、生育、哺乳降低工资、予以辞退、解除劳动或聘用合同。调岗是为了减轻负担，不能变成降薪的理由。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#E8476F"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><b>生宝宝</b><span>产假 · 至少 98 天</span></div>
|
||||
|
||||
<article class="stage fade" id="stB">
|
||||
<div class="pic"><img src="img/leave.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>不少于 98 天</i>，产前可休 15 天</div>
|
||||
<div class="nums">
|
||||
<div><em>98<small>天</small></em><span>基础产假</span></div>
|
||||
<div><em>+15<small>天</small></em><span>难产</span></div>
|
||||
<div><em>+15<small>天</small></em><span>每多 1 个宝宝</span></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>产前</span><span class="v">98 天里，产前可以休 15 天</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg>流产</span><span class="v">怀孕未满 4 个月流产，产假 <b>15 天</b>；满 4 个月流产，产假 <b>42 天</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg>地方</span><span class="v">各省另有生育奖励假 / 延长产假，天数不同，<b>以当地规定为准</b></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>《女职工劳动保护特别规定》第 7 条。98 天是全国统一的最低标准，各省在此基础上另加奖励假，实际能休多少要看你参保 / 工作所在地的规定。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="phase"><span class="node" style="background:#8E6BB8"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg></span><b>复工 · 哺乳期</b><span>宝宝满 1 岁前</span></div>
|
||||
|
||||
<article class="stage fade" id="stC">
|
||||
<div class="pic"><img src="img/back.webp" alt="妈妈提着背奶包回到办公室，同事挥手打招呼" loading="lazy"></div>
|
||||
<div class="bd">
|
||||
<div class="hd"><span class="when" style="background:#8E6BB8">哺乳期</span><h3>回去上班 · 宝宝 1 岁内</h3></div>
|
||||
<div class="concl">每天 <i>1 小时哺乳时间</i>，不加班不排夜班</div>
|
||||
<div class="nums">
|
||||
<div><em>1<small>小时</small></em><span>每天哺乳时间</span></div>
|
||||
<div><em>+1<small>小时</small></em><span>每多 1 个宝宝</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-clock" xlink:href="#i-clock"/></svg>哺乳</span><span class="v">单位应在<b>每天劳动时间内</b>安排 1 小时哺乳时间；多胞胎每多 1 个，每天多 1 小时</span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-moon" xlink:href="#i-moon"/></svg>加班</span><span class="v">哺乳未满 1 周岁婴儿的，<b>不得延长劳动时间或安排夜班</b></span></div>
|
||||
<div class="row"><span class="k"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></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>《女职工劳动保护特别规定》第 9、10 条。1 小时具体怎么用（分两次、合并提前下班等），法规没有统一规定，可以和单位商量、以当地规定为准。</p></div></div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="law fade">
|
||||
<span class="bi"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg></span>
|
||||
<div><b>三期内合同到期：自动顺延到三期结束</b><p>《劳动合同法》第 42、45 条：三期内单位不得以「不能胜任、客观情况变化、经济性裁员」等理由解除合同；合同期满的，续延到哺乳期结束才终止。（严重违纪等第 39 条情形除外）</p></div>
|
||||
</div>
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg>还有这些也受保护</summary>
|
||||
<div class="bd">
|
||||
<p><b>流产假：</b>怀孕未满 4 个月 15 天，满 4 个月 42 天。</p>
|
||||
<p><b>晋升：</b>不得因怀孕、生育、哺乳限制晋职、晋级、评职称。</p>
|
||||
<p><b>调岗降薪：</b>改岗位、薪酬须协商一致并书面确认。</p>
|
||||
<p><b>违法辞退：</b>可要求继续履行合同，或主张经济补偿 2 倍的赔偿金。严重违纪等情形除外。</p>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- ② 产假计算器 -->
|
||||
<section class="sec" id="s2">
|
||||
<div class="sec-h"><span class="n">2</span><h2>我的产假怎么算</h2></div>
|
||||
<div class="sec-key">98 天是全国底线，<mark>再加上本省延长天数</mark>，才是你实际能休的。</div>
|
||||
<p class="sec-sub">填预产期和情况，帮你估算产假天数和返岗日期</p>
|
||||
<!-- 2 产假计算器 -->
|
||||
<section class="sec w" id="s2">
|
||||
<h2>我的产假怎么算</h2>
|
||||
<p class="lead">98 天是底线，加上本省天数才是你能休的。</p>
|
||||
|
||||
<div class="calc fade">
|
||||
<div class="fld">
|
||||
<label for="cDue"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>预产期</label>
|
||||
<label class="lb" for="cDue">预产期</label>
|
||||
<input class="inp" id="cDue" type="date">
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>是否难产</span>
|
||||
<div class="seg" id="cHard"><button data-v="0" class="on">否</button><button data-v="1">是（+15 天）</button></div>
|
||||
<span class="hint">剖宫产是否按难产算，各地认定不同，以当地规定为准</span>
|
||||
<span class="lb">是否难产</span>
|
||||
<div class="seg" id="cHard"><button data-v="0" class="on">否</button><button data-v="1">是 +15 天</button></div>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg>宝宝个数</span>
|
||||
<span class="lb">几胞胎</span>
|
||||
<div class="seg" id="cMulti"><button data-v="1" class="on">单胎</button><button data-v="2">双胞胎</button><button data-v="3">三胞胎</button></div>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-home" xlink:href="#i-home"/></svg>本省可延长天数</span>
|
||||
<span class="lb">本省可延长天数</span>
|
||||
<div class="stp"><button id="cMinus" aria-label="减少">-</button><input class="inp" id="cLocal" type="number" inputmode="numeric" min="0" max="365" value="0"><em>天</em><button id="cPlus" aria-label="增加">+</button></div>
|
||||
<span class="hint">各省生育奖励假天数不同，请查当地人社部门或卫健部门规定；不确定就先填 0</span>
|
||||
<span class="hint">各省不同，可问单位人事或当地人社；不确定先填 0</span>
|
||||
</div>
|
||||
<div class="fld">
|
||||
<span class="lb"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>产前是否提前休 15 天</span>
|
||||
<div class="seg" id="cPre"><button data-v="1" class="on">提前休</button><button data-v="0">生了再休</button></div>
|
||||
</div>
|
||||
|
||||
<div class="res" id="cRes"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ③ 钱 -->
|
||||
<!-- 3 维权 -->
|
||||
<section class="sec" id="s3">
|
||||
<div class="sec-h"><span class="n">3</span><h2>产假期间，钱怎么发</h2></div>
|
||||
<div class="sec-key">参保的领<mark>生育津贴</mark>，没参保的由单位按原工资发；产假<mark>不得降低工资、福利</mark>。</div>
|
||||
<p class="sec-sub">生育津贴就是产假期间的「工资」，由生育保险基金出</p>
|
||||
<h2>被劝退、降薪怎么办</h2>
|
||||
<p class="lead">别签「自愿离职」，先留证据。</p>
|
||||
|
||||
<div class="formula fade">
|
||||
<div class="eq">
|
||||
<div class="it"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>单位上年度<br>职工月均工资</div>
|
||||
<span class="op">×</span>
|
||||
<div class="it"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>产假<br>时长</div>
|
||||
<span class="op">=</span>
|
||||
<div class="it rs"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg>生育<br>津贴</div>
|
||||
<ol class="flow fade">
|
||||
<li><span class="n">1</span><b>留证据</b><span>聊天、工资条截图备份</span></li>
|
||||
<li><span class="n">2</span><b>书面沟通</b><span>邮件写明诉求</span></li>
|
||||
<li><span class="n">3</span><b>监察投诉</b><span>找当地人社劳动监察</span></li>
|
||||
<li><span class="n">4</span><b>劳动仲裁</b><span class="lim">时效 1 年</span><span>不收费</span></li>
|
||||
</ol>
|
||||
<div class="hot">
|
||||
<a href="tel:12333"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12333</b>人社热线</div></a>
|
||||
<a href="tel:12338"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12338</b>妇女维权热线</div></a>
|
||||
</div>
|
||||
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>产假期间，钱怎么发？</summary>
|
||||
<div class="bd">
|
||||
<p><b>交了生育保险：</b>由生育保险基金发生育津贴，按单位上年度职工月平均工资计发。</p>
|
||||
<p><b>没交：</b>单位按你产假前的工资发。</p>
|
||||
<p>津贴低于原工资要不要补差，以当地规定为准。</p>
|
||||
</div>
|
||||
<p class="eq-note">按天怎么折算、多久发放，以当地规定为准</p>
|
||||
</div>
|
||||
|
||||
<div class="duo">
|
||||
<div class="fade"><div class="ico" style="background:var(--gbg);color:var(--green)"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg></div><h4>单位给你交了生育保险</h4><span class="pct">生育保险基金支付</span><div class="use">按单位上年度职工月平均工资计发，另可报销生育医疗费用</div></div>
|
||||
<div class="am fade"><div class="ico" style="background:var(--abg);color:var(--amber)"><svg class="ic"><use href="#i-warn" xlink:href="#i-warn"/></svg></div><h4>单位没给你交</h4><span class="pct">单位自己支付</span><div class="use">按你产假前的工资标准，由单位支付</div></div>
|
||||
</div>
|
||||
<div class="ok-line fade"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg><span>不得因怀孕、生育、哺乳降低工资和福利待遇，也不得限制晋职、晋级、评职称</span></div>
|
||||
<p class="tip">生育津贴低于本人原工资时，单位要不要补差额，各地规定不同，以当地规定为准。可以问单位人事或当地医保 / 社保经办机构。</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- ④ 侵权场景 + 应对 -->
|
||||
<section class="sec" id="s4">
|
||||
<div class="sec-h"><span class="n">4</span><h2>遇到这些情况，怎么办</h2></div>
|
||||
<div class="sec-key">先留证据，再书面沟通；谈不拢就<mark>投诉或申请仲裁，时效 1 年</mark>。</div>
|
||||
<p class="sec-sub">下面是最常见的 5 种情况，对着看看法律怎么说</p>
|
||||
|
||||
<div class="cases">
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg></div><div class="bx"><h4>被劝退、被辞退<span class="flag">常见</span></h4><div class="ans">三期内不得因怀孕生育解除合同</div><div class="by">违法解除的，可要求继续履行合同；不要求或无法继续的，可主张赔偿金（经济补偿标准的 2 倍）。别急着签「自愿离职」。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-swap" xlink:href="#i-swap"/></svg></div><div class="bx"><h4>被调岗、降薪</h4><div class="ans">不得因怀孕、生育、哺乳降低工资</div><div class="by">变更合同内容（岗位、薪酬）应协商一致并采用书面形式。孕期减轻劳动量是照顾，不是降薪理由。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-doc" xlink:href="#i-doc"/></svg></div><div class="bx"><h4>合同到期说不续签</h4><div class="ans">三期内到期的合同，顺延到三期结束</div><div class="by">《劳动合同法》第 45 条。哺乳期结束前，单位不能以「到期」为由让你走。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg></div><div class="bx"><h4>扣产假工资、不发津贴</h4><div class="ans">参保的领生育津贴，未参保的单位照发</div><div class="by">查一下自己的社保缴费记录；单位未依法缴纳生育保险的，由单位按产假前工资支付。</div></div></div>
|
||||
<div class="case fade"><div class="ico"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg></div><div class="bx"><h4>不给哺乳时间、安排加班</h4><div class="ans">宝宝 1 岁内每天 1 小时，不加班不排夜班</div><div class="by">哺乳时间在劳动时间内安排，不能当事假扣钱。</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="steps-pic fade">
|
||||
<img src="img/rights.webp" alt="妈妈在桌前整理文件和聊天记录" loading="lazy">
|
||||
<div class="hd">应对四步，按顺序来</div>
|
||||
<ol class="steps">
|
||||
<li><span class="sn" style="background:#F4593C">1</span><div><b>保留证据</b><p>书面通知、聊天记录、邮件、工资条、考勤记录、社保缴费记录，截图并备份</p></div></li>
|
||||
<li><span class="sn" style="background:#E8476F">2</span><div><b>和单位书面沟通</b><p>用邮件或书面函件写清诉求和依据，留存发送记录；不要在压力下签不认可的文件</p></div></li>
|
||||
<li><span class="sn" style="background:#C2185B">3</span><div><b>向劳动保障监察投诉</b><p>向当地人社部门的劳动保障监察机构投诉；不清楚流程可先打 12333 咨询</p></div></li>
|
||||
<li><span class="sn" style="background:#8E6BB8">4</span><div><b>申请劳动仲裁</b><p>向用人单位所在地的劳动人事争议仲裁委员会申请，仲裁不收费</p><span class="bdg">时效 1 年 · 从知道权利被侵害之日起算</span></div></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="hot fade">
|
||||
<a href="tel:12333"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12333</b><small>人社服务热线</small></div></a>
|
||||
<a href="tel:12338"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12338</b><small>妇女维权热线</small></div></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ⑤ 复工清单 -->
|
||||
<section class="sec" id="s5">
|
||||
<div class="sec-h"><span class="n">5</span><h2>复工前，这份清单打打勾</h2></div>
|
||||
<div class="sec-key">提前沟通、背奶备齐、托育定好，<mark>回去第一周就不慌</mark>。</div>
|
||||
<p class="sec-sub">点一下打勾，进度只存在你这台手机上</p>
|
||||
|
||||
<div class="ck fade">
|
||||
<div class="prog"><b>准备进度</b><span class="bar2"><i id="ckBar"></i></span><small id="ckNum">0 / 6</small></div>
|
||||
<ul id="ckList">
|
||||
<li data-k="talk"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>和主管沟通返岗时间与安排</b><span>岗位、工作内容、哺乳时间怎么用，最好邮件确认留底</span></div><span class="cat">沟通</span></li>
|
||||
<li data-k="pump"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>背奶装备备齐</b><span>吸奶器、储奶袋、冰包冰排；问问单位有没有哺乳室或可用的私密空间</span></div><span class="cat">背奶</span></li>
|
||||
<li data-k="care"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>定好谁来带宝宝</b><span>家人或托育机构，提前一两周试着交接、让宝宝适应</span></div><span class="cat">托育</span></li>
|
||||
<li data-k="body"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>做完产后复查</b><span>产后 42 天左右复查，伤口、盆底、腰背情况心里有数</span></div><span class="cat">身体</span></li>
|
||||
<li data-k="money"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>确认生育津贴和社保</b><span>津贴有没有申领到账、社保是否正常续缴</span></div><span class="cat">钱</span></li>
|
||||
<li data-k="keep"><span class="box"><svg class="ic"><use href="#i-tick" xlink:href="#i-tick"/></svg></span><div class="t2"><b>重要材料留个底</b><span>劳动合同、请假审批、工资条拍照存好，以备不时之需</span></div><span class="cat">证据</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details class="src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>法律依据与说明</summary>
|
||||
<ul>
|
||||
<li><b>《女职工劳动保护特别规定》：</b>第 5 条 不得因怀孕、生育、哺乳降低工资、辞退、解除合同；第 6 条 孕期减轻劳动量、7 个月以上不加班不排夜班、产检计入劳动时间；第 7 条 98 天产假及难产、多胞胎、流产产假；第 8 条 生育津贴；第 9 条 哺乳时间；第 10 条 哺乳室等设施</li>
|
||||
<li><b>《劳动合同法》：</b>第 35 条 变更合同应协商一致、书面形式；第 42 条 三期内不得依第 40、41 条解除合同；第 45 条 合同期满顺延至三期情形消失；第 48、87 条 违法解除的继续履行或 2 倍赔偿金</li>
|
||||
<li><b>《妇女权益保障法》（2022 年修订）：</b>第 48 条 不得因结婚、怀孕、产假、哺乳降低工资福利，限制晋职、晋级、评职称，辞退或单方解除合同</li>
|
||||
<li><b>《社会保险法》：</b>第 53～56 条 生育保险由用人单位缴纳，待遇包括生育医疗费用和生育津贴，生育津贴按单位上年度职工月平均工资计发</li>
|
||||
<li><b>《劳动争议调解仲裁法》：</b>第 27 条 仲裁时效 1 年，从知道或应当知道权利被侵害之日起算；第 53 条 劳动争议仲裁不收费</li>
|
||||
<li><b>地方规定：</b>生育奖励假天数、生育津贴折算与补差、剖宫产是否按难产、哺乳时间使用方式等，各地规定不同，以当地规定为准</li>
|
||||
<li><b>计算器说明：</b>按「98 天 + 难产 15 天 + 每多 1 个宝宝 15 天 + 本省天数」估算，起算日按预产期前 15 天（或预产期当天），实际以分娩日期和单位审批为准；产假是否顺延法定节假日以当地规定为准</li>
|
||||
</ul>
|
||||
<details class="fold src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源</summary>
|
||||
<div class="bd"><ul>
|
||||
<li>《女职工劳动保护特别规定》第 5～10 条：不得因三期降薪辞退；孕期减量、产检计入劳动时间、7 个月以上不加班不排夜班；98 天产假及难产、多胞胎、流产假；生育津贴；哺乳时间与设施</li>
|
||||
<li>《劳动合同法》第 35、42、45、48、87 条：变更合同须书面协商；三期内不得依第 40、41 条解除；合同期满顺延至三期结束；违法解除继续履行或 2 倍赔偿金</li>
|
||||
<li>《妇女权益保障法》（2022 年修订）第 48 条：不得因怀孕、产假、哺乳降低工资福利，限制晋职、晋级、评职称，辞退或解除合同</li>
|
||||
<li>《社会保险法》第 53～56 条：生育保险待遇含生育医疗费用和生育津贴</li>
|
||||
<li>《劳动争议调解仲裁法》第 27、53 条：仲裁时效 1 年，自知道或应当知道权利被侵害之日起算；仲裁不收费</li>
|
||||
<li>计算器：98 天 + 难产 15 天 + 每多 1 个宝宝 15 天 + 本省天数，按预产期前 15 天起休估算；实际以分娩日期、单位审批及当地规定（含节假日是否顺延、剖宫产是否按难产）为准</li>
|
||||
</ul></div>
|
||||
</details>
|
||||
<p class="foot">本页为法律常识整理，不构成法律意见，<br>具体以当地规定和专业意见为准。</p>
|
||||
<p class="foot">本页为法律常识整理，不构成法律意见。</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -537,21 +292,22 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
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); }); });
|
||||
|
||||
/* ---------- 产假计算器 ---------- */
|
||||
var DAY = 864e5;
|
||||
function pad(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function iso(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
|
||||
function parseDay(s) { var m = /^(\d{4})-(\d{1,2})-(\d{1,2})/.exec(s || ''); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
|
||||
function addDays(d, n) { return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n); } /* 按日历日加，避开夏令时 */
|
||||
function cn(d) { return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'; }
|
||||
var WK = '日一二三四五六';
|
||||
function segVal(id) { var b = document.querySelector('#' + id + ' .on'); return b ? +b.dataset.v : 0; }
|
||||
[].forEach.call(document.querySelectorAll('.seg'), function (s) {
|
||||
s.addEventListener('click', function (e) {
|
||||
@@ -569,63 +325,33 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
$('#cDue').addEventListener('input', calc);
|
||||
$('#cDue').addEventListener('change', calc);
|
||||
|
||||
/* 计算：国家 = 98 + 难产 15 + (胎数-1)×15；合计 = 国家 + 本省；
|
||||
起算 = 预产期前 15 天（提前休）或预产期当天；最后一天 = 起算 + 合计 - 1；返岗 = 起算 + 合计 */
|
||||
/* 国家 = 98 + 难产 15 + (胎数-1)×15；合计 = 国家 + 本省；
|
||||
起休 = 预产期前 15 天（pre=0 则预产期当天）；最后一天 = 起休 + 合计 - 1；返岗 = 起休 + 合计 */
|
||||
function compute(due, hard, multi, local, pre) {
|
||||
if (pre === undefined) pre = 1;
|
||||
var nat = 98 + (hard ? 15 : 0) + (multi - 1) * 15;
|
||||
var total = nat + local;
|
||||
var start = addDays(due, pre ? -15 : 0);
|
||||
return { nat: nat, total: total, start: start, last: addDays(start, total - 1), back: addDays(start, total), oneYear: new Date(due.getFullYear() + 1, due.getMonth(), due.getDate()) };
|
||||
return { nat: nat, total: total, start: start, last: addDays(start, total - 1), back: addDays(start, total) };
|
||||
}
|
||||
window.__leaveCalc = compute; /* 自查用 */
|
||||
|
||||
function calc() {
|
||||
var box = $('#cRes'), due = parseDay($('#cDue').value);
|
||||
if (!due) { box.innerHTML = '<div class="empty"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg>填上预产期，马上帮你算</div>'; return; }
|
||||
var hard = segVal('cHard'), multi = segVal('cMulti') || 1, local = localDays(), pre = segVal('cPre');
|
||||
var r = compute(due, hard, multi, local, pre);
|
||||
var parts = ['基础 98 天'];
|
||||
if (hard) parts.push('难产 +15');
|
||||
if (multi > 1) parts.push('多胞胎 +' + (multi - 1) * 15);
|
||||
parts.push(local ? '本省 +' + local : '本省 +0（未填）');
|
||||
if (!due) { box.innerHTML = '<div class="empty">填上预产期，马上帮你算</div>'; return; }
|
||||
var r = compute(due, segVal('cHard'), segVal('cMulti') || 1, localDays(), 1);
|
||||
box.innerHTML =
|
||||
'<div class="tot"><em id="rTotal">' + r.total + '</em><span>天产假</span><small>国家规定 <b id="rNat">' + r.nat + '</b> 天</small></div>' +
|
||||
'<div class="parts">' + parts.map(function (p) { return '<span>' + p + '</span>'; }).join('') + '</div>' +
|
||||
'<div class="dates">' +
|
||||
'<div class="main"><svg class="ic"><use href="#i-bag" xlink:href="#i-bag"/></svg><div><small>预计返岗日期</small><b id="rBack">' + cn(r.back) + ' 周' + WK[r.back.getDay()] + '</b></div></div>' +
|
||||
'<div><small>产假开始</small><b id="rStart">' + cn(r.start) + '</b></div>' +
|
||||
'<div><small>产假最后一天</small><b id="rLast">' + cn(r.last) + '</b></div>' +
|
||||
'</div>' +
|
||||
'<p class="note">按预产期估算，实际以分娩日期和单位审批为准。哺乳期保护约到 <b>' + cn(r.oneYear) + '</b>（宝宝满 1 周岁）。' +
|
||||
(local ? '' : '<br>记得查一下本省生育奖励假，加上后天数会更多。') + '</p>';
|
||||
'<div class="tot"><em id="rTotal">' + r.total + '</em><span>天产假</span><small>国家规定 ' + r.nat + ' 天</small></div>' +
|
||||
'<div class="dt"><div><small>开始休</small><b id="rStart">' + cn(r.start) + '</b></div>' +
|
||||
'<div><small>返岗日</small><b id="rBack">' + cn(r.back) + '</b></div></div>' +
|
||||
'<p class="note">按预产期前 15 天起休估算，以实际分娩日为准。</p>';
|
||||
}
|
||||
calc();
|
||||
|
||||
/* ---------- 复工清单（只存本机） ---------- */
|
||||
var CK = 'topic_zhichang_ck', st = {};
|
||||
try { st = JSON.parse(localStorage.getItem(CK) || '{}') || {}; } catch (e) { st = {}; }
|
||||
var lis = document.querySelectorAll('#ckList li');
|
||||
function ckPaint() {
|
||||
var n = 0;
|
||||
[].forEach.call(lis, function (li) { var on = !!st[li.dataset.k]; li.classList.toggle('done', on); if (on) n++; });
|
||||
$('#ckNum').textContent = n + ' / ' + lis.length;
|
||||
$('#ckBar').style.width = (n / lis.length * 100) + '%';
|
||||
}
|
||||
[].forEach.call(lis, function (li) {
|
||||
li.addEventListener('click', function () {
|
||||
st[li.dataset.k] = !st[li.dataset.k];
|
||||
try { localStorage.setItem(CK, JSON.stringify(st)); } catch (e) {}
|
||||
ckPaint();
|
||||
});
|
||||
});
|
||||
ckPaint();
|
||||
|
||||
/* ---------- 按孕周点亮阶段 + 预填预产期 ---------- */
|
||||
function mark(stage, ic, t, d, target) {
|
||||
function mark(stage, t, target) {
|
||||
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;
|
||||
$('#meT').textContent = t;
|
||||
$('#meGo').onclick = function () { go(target || stage); };
|
||||
$('#me').classList.add('on');
|
||||
}
|
||||
@@ -643,18 +369,18 @@ mark{background:linear-gradient(transparent 58%,#FFD3C4 58%);color:inherit;paddi
|
||||
.then(function (j) {
|
||||
var p = j && j.code === 200 && j.result; if (!p) return;
|
||||
/* 先判产后（产后返回体 week 也是 null） */
|
||||
if (p.postpartum) mark('stC', 'baby', '宝宝出生了，重点看复工和哺乳期', '每天 1 小时哺乳时间，复工清单也在下面');
|
||||
if (p.postpartum) mark('stC', '宝宝出生了，重点看哺乳期的保护');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w >= 28) mark('stA', 'pregnant', '孕 ' + w + ' 周 · 已满 7 个月', '不加班不排夜班，算算你的产假', 's2');
|
||||
else mark('stA', 'pregnant', '孕 ' + w + ' 周 · 先看孕期的权利', '产检算劳动时间，不得因怀孕降薪');
|
||||
if (w >= 28) mark('stA', '孕 ' + w + ' 周，已满 7 个月：不加班，算算产假', 's2');
|
||||
else mark('stA', '孕 ' + 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