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