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

428 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>妊娠纹,与体重管理</title>
<!-- 孕期专题 · 妊娠纹与体重管理(孕期首页「其他妈妈也在搜」第 6 条)。
2026-10-31 v3 按 /tmp/pl/topic-spec-v3.md(在 v2 /tmp/pl/topic-spec.md 基础上加设计感)重做;主色 #F25C78,浅底 #FFEFF2。
01 体重:按孕周的增重推荐区间曲线(SVG)+ 按孕前 BMI 分组卡(点卡切换曲线,有孕周时标出「你在这里」);
02 阶段时间轴(按 openid 读孕周点亮,逻辑同 v2);「为什么这样做」本页例外:可见的一句话(≤30 字);
03 成分对照两栏。推荐工具走 ../_shared/tools.js(原 #goWeight 跳 /yunqi-tizhong/ 已并入组件,不再单独放按钮)。
只写成分和品类、不点名品牌;百分比只出现在页底「参考来源」。
自成一页:不引 app.js;回首页走相对路径 ../../,站内跳转带 location.search + location.hash。
v2 备份 /tmp/pl/wen-v2-before-v3.html;更早 /tmp/pl/wen-v2-backup.html。 -->
<style>
:root{--c:#F25C78;--cs:#FFEFF2;--c4:#FFF8F9;--ink:#1F2329;--tx:#4E5969;--sub:#86909C;--line:#EEF0F3;--sec:#F7F8FA}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#fff;color:var(--tx);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
b,strong{color:var(--ink)}
.num{font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hide{position:absolute;width:0;height:0;overflow:hidden}
/* 顶栏 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.bar.solid{background:#fff;border-bottom-color:var(--line)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.bar .back .ic{width:22px;height:22px;stroke:var(--ink)}
.bar .t{font-size:16px;font-weight:600;color:var(--ink)}
.wrap{padding:0 20px}
/* Hero:主色浅渐变 + 柔和大圆 + 插画压右下出血 */
.hero-bg{position:absolute;left:0;right:0;top:0;height:470px;background:linear-gradient(160deg,var(--cs) 0%,#fff 72%);overflow:hidden;pointer-events:none}
.hero-bg i{position:absolute;border-radius:50%;background:rgba(242,92,120,.08)}
.hero-bg i:nth-child(1){width:260px;height:260px;right:-90px;top:-70px}
.hero-bg i:nth-child(2){width:120px;height:120px;left:-46px;top:210px;background:rgba(242,92,120,.06)}
.hero{position:relative;min-height:346px;padding-top:8px}
.eye{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--c)}
h1{position:relative;z-index:1;margin-top:6px;font-size:28px;font-weight:800;line-height:1.32;color:var(--ink)}
.mk{background:linear-gradient(transparent 62%,rgba(242,92,120,.22) 0)}
.lede{position:relative;z-index:1;margin-top:8px;font-size:14px;color:var(--sub);line-height:1.6}
.hero img{position:absolute;right:-20px;top:116px;width:76%;height:200px;object-fit:cover;object-position:30% 45%;border-radius:24px 0 0 24px;background:var(--cs)}
/* 结论卡 */
.ans{position:relative;z-index:2;margin-top:-34px;padding:16px 18px 18px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(242,92,120,.10)}
.tag{display:inline-block;font-size:12px;font-weight:600;line-height:22px;padding:0 10px;border-radius:99px;background:var(--cs);color:var(--c)}
.ans p{margin-top:8px;font-size:17px;font-weight:700;line-height:1.6;color:var(--ink)}
/* 个性化提示条 */
.me{display:none;margin-top:14px;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;font-size:13.5px;line-height:1.5}
.me.on{display:flex}
.me .mt{flex:1;min-width:0}
.me b{display:block;font-size:14px}
.me span{color:var(--sub);font-size:12.5px}
.me .go{flex:none;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--c);color:var(--c);font-size:13px;white-space:nowrap;transition:transform .15s}
.me .go:active{transform:scale(.96)}
/* 记住这 3 点:数字卡 */
h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
.pts{margin-top:40px}
.pts-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pt{padding:12px 10px 14px;border-radius:18px;background:var(--c4);border:1px solid #FBE3E8}
.pt .no{display:block;font-size:34px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c)}
.pt b{display:block;margin-top:10px;font-size:14px;line-height:1.45}
.pt span{display:block;margin-top:4px;font-size:12px;color:var(--sub);line-height:1.5}
/* 节 */
.sec{margin-top:40px;scroll-margin-top:56px}
.sec-h{display:flex;align-items:baseline;gap:8px}
.sec-h .n{flex:none;font-size:13px;font-weight:800;color:var(--c);letter-spacing:.04em}
.sec-h small{margin-left:auto;font-size:11px;letter-spacing:.14em;color:#C9CDD4;font-weight:600}
.key{margin-top:6px;font-weight:700;color:var(--c);line-height:1.6}
.panel{margin:16px -6px 0;padding:18px 16px;border-radius:24px;background:var(--sec)}
.panel.pink{background:var(--c4)}
/* 01 曲线 */
.chart{background:#fff;border-radius:18px;padding:12px 10px 8px;border:1px solid var(--line)}
.chart-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.chart-h b{font-size:14px}
.chart-h span{font-size:12px;color:var(--sub)}
.chart svg{display:block;width:100%;height:auto;margin-top:4px}
.chart .gl{stroke:#F0F1F4;stroke-width:1}
.chart .ax{font-size:10px;fill:#A9AEB8}
.chart .band{fill:rgba(242,92,120,.16);transition:d .4s}
.chart .ln{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .ln.lo{stroke-dasharray:4 4;stroke-width:1.6}
.chart-h span b{color:var(--c);font-size:13px}
.chart .nowl{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.chart .nowt{font-size:10.5px;font-weight:700;fill:var(--ink)}
.cap{padding:6px 4px 2px;font-size:12.5px;color:var(--sub);line-height:1.6}
.cap b{color:var(--c)}
.bmi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.bm{text-align:left;padding:10px 10px 12px;border-radius:16px;background:#fff;border:1.5px solid transparent;transition:border-color .2s,background .2s,transform .15s}
.bm:active{transform:scale(.98)}
.bm.on{border-color:var(--c);background:#fff}
.bm .l{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.bm .r{display:block;font-size:11px;color:var(--sub);line-height:1.4}
.bm .v{display:block;margin-top:6px;font-size:20px;font-weight:800;line-height:1.1;color:var(--ink)}
.bm .v em{font-style:normal;font-size:11px;font-weight:600;color:var(--sub);margin-left:2px}
.bm .rul{position:relative;display:block;height:5px;margin-top:8px;border-radius:9px;background:#F0F1F4}
.bm .rul i{position:absolute;top:0;bottom:0;border-radius:9px;background:#E3B5BF}
.bm.on .rul i{background:var(--c)}
.bm .w{display:block;margin-top:7px;font-size:11px;color:var(--sub);line-height:1.4}
.bm .w b{font-weight:700;color:var(--tx)}
.bm.on .v{color:var(--c)}
.note{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.6}
/* 02 时间轴 */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:12px;top:14px;bottom:24px;width:2px;background:linear-gradient(var(--c),rgba(242,92,120,.12))}
.st{position:relative;padding:12px 14px 12px;margin-top:12px;border-radius:18px;background:#fff;border:1.5px solid transparent;scroll-margin-top:60px;transition:border-color .3s}
.st:first-child{margin-top:0}
.st .dot{position:absolute;left:-34px;top:12px;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid var(--c);color:var(--c);font-size:12px;font-weight:800;line-height:23px;text-align:center}
.st.hl{border-color:var(--c)}
.st.hl .dot{background:var(--c);color:#fff}
.st .when{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--c)}
.st .hd{display:flex;align-items:center;gap:8px}
.st .hd b{font-size:15.5px}
.st .now{display:none;margin-left:auto;font-size:11.5px;line-height:20px;padding:0 8px;border-radius:99px;background:var(--c);color:#fff;white-space:nowrap}
.st.hl .now{display:inline-block}
.st p{margin-top:4px;font-size:14px;line-height:1.7}
.st .why{margin-top:8px;padding-top:8px;border-top:1px dashed #F3D3DA;font-size:12.5px;line-height:1.6;color:var(--sub)}
.st .why em{margin-right:6px;font-style:normal;font-weight:600;color:var(--c)}
/* 03 成分对照 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.vs .col{padding:14px 12px;border-radius:18px;border:1px solid var(--line);background:#fff}
.vs .col.ok{background:var(--c4);border-color:#FBE3E8}
.vs .ch{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink)}
.vs .ch .ic{width:18px;height:18px}
.vs .no .ic{stroke:var(--ink)}
.vs ul{list-style:none;margin-top:8px}
.vs li{padding:6px 0;border-top:1px solid rgba(0,0,0,.05);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
.vs li:first-child{border-top:0}
.vs li span{display:block;font-size:11.5px;font-weight:400;color:var(--sub)}
.vs .no li{text-decoration:line-through;text-decoration-color:rgba(31,35,41,.35)}
.vs .no li span{text-decoration:none;display:block}
.vs .no p{margin-top:8px;font-size:12px;color:var(--sub);line-height:1.55}
.ask{display:flex;align-items:center;gap:10px;margin-top:8px;padding:12px 14px;border-radius:18px;border:1px dashed #E5E6EB;font-size:13px;line-height:1.5}
.ask .tag{flex:none;background:var(--sec);color:var(--tx)}
.ask b{font-size:13.5px}
/* 来源 + 免责 */
.src{margin-top:36px;border-radius:18px;background:var(--sec)}
.src summary{list-style:none;display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:14px;font-weight:600;color:var(--ink)}
.src summary::-webkit-details-marker{display:none}
.src summary .arr{margin-left:auto;width:16px;height:16px;stroke:var(--sub);transition:transform .25s}
.src[open] summary .arr{transform:rotate(180deg)}
.src ul{list-style:none;padding:0 16px 12px}
.src li{padding:8px 0;border-top:1px solid #E9ECF0;font-size:12.5px;line-height:1.65;color:var(--tx)}
.foot{margin-top:14px;font-size:12px;line-height:1.7;color:var(--sub);text-align:center}
.fade{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
@media (max-width:370px){h1{font-size:26px}.pt b{font-size:13.5px}.bm{padding:9px 8px 11px}.bm .v{font-size:18px}}
</style>
</head>
<body>
<!-- 单色线性图标:stroke 1.8,颜色走 .ic(主色) -->
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
<symbol id="i-mom" viewBox="0 0 24 24"><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M12 9c4 .5 8 2.5 8 5.5s-2.5 4.5-6 4.5h-2M12 21v-2"/></symbol>
<symbol id="i-ok" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.7 2.7L16 9.6"/></symbol>
<symbol id="i-no" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M5.8 5.8l12.4 12.4"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
</svg>
<div id="scroll">
<div class="hero-bg" aria-hidden="true"><i></i><i></i></div>
<header class="bar" id="bar">
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
<span class="t">孕期专题</span>
</header>
<main class="wrap">
<section class="hero">
<div class="eye">STRETCH MARKS · 皮肤与体重</div>
<h1>妊娠纹,与<br><span class="mk">体重管理</span></h1>
<p class="lede">长不长纹,<br>一半看体重。</p>
<img src="img/hero.webp" alt="孕妈坐在沙发上轻抚孕肚">
</section>
<div class="ans">
<span class="tag">一句话答案</span>
<p>控制体重慢慢长、每天抹两次打底,红纹一出现就处理。</p>
</div>
<!-- 按 openid 读孕周 / 产后状态点亮对应阶段(拿不到身份就不显示) -->
<div class="me" id="me">
<svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg>
<div class="mt"><b id="meT"></b><span id="meD"></span></div>
<button class="go" id="meGo">去看看</button>
</div>
<section class="pts">
<h2>记住这 3 点</h2>
<div class="pts-g">
<div class="pt fade"><span class="no num">1</span><b>每周增重<br>不超 0.5kg</b><span>孕中晚期起算</span></div>
<div class="pt fade"><span class="no num">2</span><b>早晚<br>各抹一次</b><span>坚持整个孕期</span></div>
<div class="pt fade"><span class="no num">3</span><b>维 A 酸类<br>孕期禁用</b><span>视黄醇也别用</span></div>
</div>
</section>
<!-- 01 体重:曲线 + BMI 分组卡 -->
<section class="sec" id="s1">
<div class="sec-h"><span class="n num">01</span><h2>体重和妊娠纹</h2><small>WEIGHT</small></div>
<p class="key">长得越快越易长纹,控体重是最省钱的预防。</p>
<div class="panel fade">
<div class="chart">
<div class="chart-h"><b>累计增重推荐区间</b><span id="chG"></span></div>
<svg id="curve" viewBox="0 0 320 172" role="img" aria-label="按孕周的累计增重推荐区间">
<g id="grid"></g>
<path class="band" id="band"/>
<path class="ln" id="hiL"/>
<path class="ln lo" id="loL"/>
<g id="nowG"></g>
</svg>
<p class="cap" id="cap">孕早期只长 0~2kg,13 周后进入匀速增长。</p>
</div>
<div class="bmi" id="bmi"></div>
<p class="note">BMI = 体重(kg) ÷ 身高(m)²。双胎或有并发症,以产检医生建议为准。</p>
</div>
</section>
<!-- 02 时间轴:当前阶段按孕周高亮 -->
<section class="sec" id="s2">
<div class="sec-h"><span class="n num">02</span><h2>不同阶段怎么做</h2><small>CARE</small></div>
<p class="key">早打底,红纹趁早处理,白纹留到产后。</p>
<div class="panel pink">
<div class="tl">
<article class="st fade" id="stA">
<span class="dot num">1</span>
<div class="when">孕早期起</div>
<div class="hd"><b>每天打底预防</b><span class="now">你在这里</span></div>
<p>洗澡后和睡前,肚皮、大腿、臀部抹保湿霜,按摩到吸收;吃够蛋白质和维 C。</p>
<div class="why"><em>为什么这样做</em>皮肤水润有弹性,纤维不易拉断。</div>
</article>
<article class="st fade" id="stB">
<span class="dot num">2</span>
<div class="when">冒出红纹</div>
<div class="hd"><b>马上处理</b><span class="now">你在这里</span></div>
<p>红纹处每天薄涂 2 次医用硅酮凝胶,至少坚持 2 个月。</p>
<div class="why"><em>为什么这样做</em>红纹期还在修复,最容易变淡。</div>
</article>
<article class="st fade" id="stC">
<span class="dot num">3</span>
<div class="when">白纹 · 产后</div>
<div class="hd"><b>找皮肤科</b><span class="now">你在这里</span></div>
<p>涂抹作用有限,产后去正规医院皮肤科,评估激光、微针等。</p>
<div class="why"><em>为什么这样做</em>白纹已是疤,要靠刺激长新胶原。</div>
</article>
</div>
</div>
</section>
<!-- 03 成分对照 -->
<section class="sec" id="s3">
<div class="sec-h"><span class="n num">03</span><h2>成分速查</h2><small>INGREDIENTS</small></div>
<p class="key">买之前翻成分表,左边这栏孕期别碰。</p>
<div class="vs fade">
<div class="col no">
<div class="ch"><svg class="ic"><use href="#i-no" xlink:href="#i-no"/></svg>孕期别碰</div>
<ul><li>维 A 酸</li><li>视黄醇</li><li>视黄醛</li></ul>
<p>可能影响胎儿<br>哺乳期也别用</p>
</div>
<div class="col ok">
<div class="ch"><svg class="ic"><use href="#i-ok" xlink:href="#i-ok"/></svg>放心用</div>
<ul>
<li>透明质酸<span>补水,日常打底</span></li>
<li>神经酰胺、角鲨烷<span>修护屏障</span></li>
<li>医用硅酮凝胶<span>成膜保湿,帮红纹变淡</span></li>
</ul>
</div>
</div>
<div class="ask fade"><span class="tag">先问医生</span><div><b>积雪草类修护霜</b><br>抗炎促修复,用前问产检医生</div></div>
</section>
<div id="tools"></div>
<details class="src">
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
<ul>
<li><b>增重范围:</b>中国营养学会《中国妇女妊娠期体重监测与评价》(T/CNSS 009-2021)及 WS/T 801-2022,按孕前 BMI 分档;孕早期增重 0~2kg;偏胖档含超重 7~11kg、肥胖(BMI≥28)5~9kg。曲线为按总增重区间线性示意。</li>
<li><b>维 A 酸:</b>0.1% 维 A 酸涂早期红纹 6 个月,10 人中 8 人明显改善,对照组 12 人中 1 人(Arch Dermatol 1996,小样本)。孕期哺乳期禁用,产后不哺乳时遵医嘱使用。</li>
<li><b>医用硅酮:</b>1522 人连用 2 个月以上,颜色、柔软度改善约 70%~85%(研究对象为疤痕,非专门针对妊娠纹,仅作参考)。</li>
<li><b>透明质酸复方凝胶:</b>约 50 人连用 12 周,红纹深度和颜色明显减轻,但不会完全消失。</li>
<li><b>点阵激光:</b>联合强脉冲光的 60 人研究中纹路面积平均缩小约 37%,约 25% 有不良反应。</li>
<li><b>可可脂、橄榄油:</b>210 人随机对照研究,可可脂 45% 长纹、安慰剂 49%;70 人研究,橄榄油 45.7% 对 62.9%,均无统计学差异,润肤可以、防纹别指望。</li>
</ul>
</details>
<p class="foot">本页为科普参考,不能代替医生诊断。孕期用药、护肤有疑问请咨询医生。</p>
</main>
</div>
<script src="../_shared/tools.js"></script>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
function hp(n) { var h = (location.hash.slice(1) || '') + '&' + (location.search.slice(1) || ''); var m = h.match(new RegExp('(?:^|&)' + n + '=([^&]*)')); return m ? decodeURIComponent(m[1]) : ''; }
var openid = hp('openid');
var sc = $('#scroll'), bar = $('#bar');
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份原样带回 */
$('#back').addEventListener('click', function () {
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
else location.href = '../../' + location.search + location.hash;
});
/* 滚动后顶栏白底 + 细分割线 */
sc.addEventListener('scroll', function () { bar.classList.toggle('solid', sc.scrollTop > 8); }, { passive: true });
function go(id) {
var el = document.getElementById(id); if (!el) return;
var top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 56;
sc.scrollTo({ top: top, behavior: 'smooth' });
}
/* ===== 01 增重区间曲线 + BMI 分组卡 =====
区间:孕早期(≤13 周)0~2kg,之后线性到足月总增重区间(示意,标准见参考来源) */
var G = [
{ k: 'lean', n: '偏瘦', r: 'BMI < 18.5', lo: 11, hi: 16, w: '0.46' },
{ k: 'normal', n: '正常', r: 'BMI 18.5~23.9', lo: 8, hi: 14, w: '0.37' },
{ k: 'heavy', n: '偏胖', r: 'BMI ≥ 24', lo: 5, hi: 11, w: '0.22~0.30' }
];
var X0 = 30, X1 = 304, Y0 = 150, KG = 16, YK = 8.4; // 0~40 周、0~16kg
function x(w) { return (X0 + (X1 - X0) * w / 40).toFixed(1); }
function y(k) { return (Y0 - k * YK).toFixed(1); }
function rng(g, w) { return w <= 13 ? [0, 2 * w / 13] : [g.lo * (w - 13) / 27, 2 + (g.hi - 2) * (w - 13) / 27]; }
var wk = 0, cur = 1;
(function grid() {
var s = '';
[0, 4, 8, 12, 16].forEach(function (k) { s += '<line class="gl" x1="' + X0 + '" x2="' + X1 + '" y1="' + y(k) + '" y2="' + y(k) + '"/><text class="ax num" x="' + (X0 - 6) + '" y="' + (+y(k) + 3.5) + '" text-anchor="end">' + k + (k === 16 ? 'kg' : '') + '</text>'; });
[[0, '0'], [13, '13周'], [28, '28周'], [40, '40周']].forEach(function (t) { s += '<text class="ax num" x="' + x(t[0]) + '" y="166" text-anchor="' + (t[0] === 40 ? 'end' : t[0] === 0 ? 'start' : 'middle') + '">' + t[1] + '</text>'; });
$('#grid').innerHTML = s;
})();
function draw() {
var g = G[cur];
var hi = 'M' + x(0) + ' ' + y(0) + ' L' + x(13) + ' ' + y(2) + ' L' + x(40) + ' ' + y(g.hi);
var lo = 'M' + x(13) + ' ' + y(0) + ' L' + x(40) + ' ' + y(g.lo);
$('#hiL').setAttribute('d', hi);
$('#loL').setAttribute('d', lo);
$('#band').setAttribute('d', hi + ' L' + x(40) + ' ' + y(g.lo) + ' L' + x(13) + ' ' + y(0) + ' Z');
$('#chG').innerHTML = g.n + ' · 足月 <b class="num">' + g.lo + '~' + g.hi + '</b> kg';
var ng = '';
if (wk > 0 && wk <= 40) {
var r = rng(g, wk), xx = x(wk);
var anchor = wk > 30 ? 'end' : wk < 8 ? 'start' : 'middle';
ng = '<line class="nowl" x1="' + xx + '" x2="' + xx + '" y1="20" y2="' + Y0 + '"/>' +
'<circle cx="' + xx + '" cy="' + y((r[0] + r[1]) / 2) + '" r="4" fill="#fff" stroke="#1F2329" stroke-width="1.6"/>' +
'<text class="nowt" x="' + xx + '" y="16" text-anchor="' + anchor + '">你在这里 · ' + wk + '周</text>';
$('#cap').innerHTML = '孕 ' + wk + ' 周,建议累计增重 <b class="num">' + r[0].toFixed(1) + '~' + r[1].toFixed(1) + ' kg</b>(' + g.n + ')。';
}
$('#nowG').innerHTML = ng;
[].forEach.call(document.querySelectorAll('.bm'), function (b, i) { b.classList.toggle('on', i === cur); b.setAttribute('aria-pressed', i === cur); });
}
$('#bmi').innerHTML = G.map(function (g, i) {
return '<button class="bm" data-i="' + i + '"><span class="l">' + g.n + '</span><span class="r num">' + g.r + '</span>' +
'<span class="v num">' + g.lo + '~' + g.hi + '<em>kg</em></span>' +
'<span class="rul"><i style="left:' + (g.lo / KG * 100) + '%;width:' + ((g.hi - g.lo) / KG * 100) + '%"></i></span>' +
'<span class="w">中晚期每周<br><b class="num">' + g.w + '</b> kg</span></button>';
}).join('');
[].forEach.call(document.querySelectorAll('.bm'), function (b) { b.addEventListener('click', function () { cur = +b.dataset.i; draw(); }); });
draw();
/* ===== 推荐工具 ===== */
function tools() {
if (!window.TopicTools) return;
TopicTools.render(document.getElementById('tools'), [
{ id: 'yunqitizhong', why: '每周称一次,不超标防纹', btn: '去称重' },
{ id: 'bushui', why: '皮肤水润,先要喝够水' },
{ id: 'yunqinengbuchi', why: '控体重先管住嘴,吃前查', btn: '去查' }
], { title: '用得上的工具', color: '#F25C78', bg: '#FFEFF2', wk: wk });
}
tools();
/* ===== 按孕周点亮阶段(stA 预防 / stB 红纹 / stC 白纹产后),同时标到曲线上 ===== */
function mark(id, t, d) {
var el = document.getElementById(id); if (el) el.classList.add('hl');
$('#meT').textContent = t; $('#meD').textContent = d;
$('#meGo').onclick = function () { go(id); };
$('#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) return;
if (p.postpartum) mark('stB', '宝宝出生了,重点看修复', '红纹趁早处理,白纹找皮肤科');
else if (p.week != null && !p.empty) {
var w = +p.week;
if (w >= 20) mark('stA', '孕 ' + w + ' 周 · 肚子长得最快', '坚持打底,留意有没有冒红纹');
else mark('stA', '孕 ' + w + ' 周 · 正是打底好时候', '现在开始抹,比长了再补管用');
wk = w; draw(); tools();
}
}).catch(function () {});
}
/* 进场 fade-up:按批次 60ms 错开 */
var fades = document.querySelectorAll('.fade');
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (es) {
var n = 0;
es.forEach(function (e) { if (e.isIntersecting) { e.target.style.transitionDelay = (n++ * 60) + 'ms'; e.target.classList.add('in'); io.unobserve(e.target); } });
}, { root: sc, threshold: .1 });
[].forEach.call(fades, function (el) { io.observe(el); });
} else [].forEach.call(fades, function (el) { el.classList.add('in'); });
/* 禁止下拉回弹:固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
var y0 = 0;
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
sc.addEventListener('touchmove', function (e) {
var dy = e.touches[0].clientY - y0;
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) e.preventDefault();
}, { passive: false });
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
})();
</script>
</body>
</html>