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

538 lines
36 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/ 已并入组件,不再单独放按钮)。
只写成分和品类、不点名品牌。
2026-11-01 按用户「妊娠纹内容丰富一点,说含量(成分)不说品牌」:03 由两栏速查扩为「看成分怎么选」三组
(孕期可以用 / 产后再用·停止哺乳后 / 孕期别用),每条=成分名 + 常见添加量或浓度(没有可靠数值就不写数)+ 作用 + 证据强弱(●●●);
加「说句实话」卡;新增 04「怎么抹」四格清单;页底参考来源补成分依据。03 起页面正文开始出现浓度数字(原「百分比只在页底」规则作废)。
(/tmp/wen-before-cssclean.html 为本次删旧 .vs 样式前的中间稿。)
自成一页:不引 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)}
/* 去医院提示条 */
.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}
/* 03 看成分怎么选:三组成分卡(2026-11-01) */
.grp{margin-top:12px;padding:14px 14px 6px;border-radius:20px;border:1px solid var(--line);background:#fff}
.grp.ok{background:var(--c4);border-color:#FBE3E8}
.grp.later{background:var(--sec);border-color:var(--sec)}
.grp-h{display:flex;align-items:center;gap:6px}
.grp-h b{font-size:15px}
.grp-h .ic{width:18px;height:18px}
.grp.no .grp-h .ic,.grp.later .grp-h .ic{stroke:var(--ink)}
.grp-h .tag{margin-left:auto;font-size:11px;line-height:20px;padding:0 8px;white-space:nowrap}
.grp.no .grp-h .tag,.grp.later .grp-h .tag{background:#fff;color:var(--tx)}
.ing{padding:10px 0;border-top:1px solid rgba(0,0,0,.05)}
.grp-h + .ing{margin-top:6px;border-top:0}
.ing-t{display:flex;align-items:flex-start;gap:8px}
.ing-t b{flex:1;min-width:0;font-size:14px;line-height:1.45}
.ing-t b small{display:block;font-size:11.5px;font-weight:400;color:var(--sub)}
.ing .amt{flex:none;max-width:46%;font-size:11.5px;font-weight:700;line-height:1.45;padding:1px 8px;border-radius:8px;background:#fff;color:var(--c);text-align:right}
.grp.ok .ing .amt{background:#fff}
.grp.later .ing .amt,.grp.no .ing .amt{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ing p{margin-top:3px;font-size:13px;line-height:1.6}
.ing .ev{display:flex;align-items:baseline;gap:6px;margin-top:2px;font-size:12px;line-height:1.55;color:var(--sub)}
.ing .ev em{flex:none;font-style:normal;font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--c)}
.ing .ev em i{font-style:normal;color:#E9C3CB}
.grp.no .ing-t b{text-decoration:line-through;text-decoration-color:rgba(31,35,41,.35)}
.grp.no .ing-t b small{display:inline-block;width:100%}
.truth{margin-top:12px;padding:14px 16px;border-radius:18px;background:var(--cs);font-size:13.5px;line-height:1.7}
.truth .tag{background:#fff;margin-bottom:6px}
.truth b{color:var(--c)}
/* 04 怎么抹 */
.how{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.how .pt b{margin-top:8px}
.how .pt .no{font-size:28px}
.how .pt span{font-size:12.5px;color:var(--tx)}
/* 来源 + 免责 */
.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>
<symbol id="i-time" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></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 看成分怎么选(2026-11-01 由两栏速查扩成三组:孕期可用 / 产后再用 / 孕期别用;只写成分不写品牌) -->
<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>
<p class="note">含量是市面常见添加范围,不是越高越好;证据 ●●● 越满越可靠。</p>
<div class="grp ok fade">
<div class="grp-h"><svg class="ic"><use href="#i-ok" xlink:href="#i-ok"/></svg><b>孕期可以用</b><span class="tag">打底预防</span></div>
<div class="ing">
<div class="ing-t"><b>积雪草提取物<small>积雪草苷、羟基积雪草苷</small></b><span class="amt">多不标含量</span></div>
<p>抗炎、促胶原,帮皮肤扛拉伸。</p>
<div class="ev"><em>证据 ●●<i>●</i></em>防纹研究里相对靠谱的一个,但多是复方小样本。</div>
</div>
<div class="ing">
<div class="ing-t"><b>透明质酸<small>玻尿酸、透明质酸钠</small></b><span class="amt num">常见 0.1%~1%</span></div>
<p>强力补水,让皮肤更软、更有弹性。</p>
<div class="ev"><em>证据 ●●<i>●</i></em>复方凝胶小试验有效,单用效果不确定。</div>
</div>
<div class="ing">
<div class="ing-t"><b>甜杏仁油 + 按摩</b><span class="amt">纯油直接抹</span></div>
<p>润滑皮肤,方便每天按摩。</p>
<div class="ev"><em>证据 ●<i>●●</i></em>小研究里按摩组长纹更少,功劳更像按摩。</div>
</div>
<div class="ing">
<div class="ing-t"><b>神经酰胺、甘油、角鲨烷<small>乳木果油同类</small></b><span class="amt">护肤常规量</span></div>
<p>修护屏障、止痒,打底保湿用。</p>
<div class="ev"><em>证据 ●<i>●●</i></em>没有专门防纹研究,胜在温和、止痒。</div>
</div>
<div class="ing">
<div class="ing-t"><b>可可脂、橄榄油</b><span class="amt">纯油或高比例</span></div>
<p>便宜好用的保湿油。</p>
<div class="ev"><em>证据 <i>●●●</i></em>随机对照试验:防纹和不抹差不多。</div>
</div>
<div class="ing">
<div class="ing-t"><b>医用硅酮凝胶<small>以聚硅氧烷为主</small></b><span class="amt">按说明书</span></div>
<p>成膜锁水,冒红纹时薄涂。</p>
<div class="ev"><em>证据 ●<i>●●</i></em>小样本显示红纹变淡,证据多来自疤痕。</div>
</div>
</div>
<div class="grp later fade">
<div class="grp-h"><svg class="ic"><use href="#i-time" xlink:href="#i-time"/></svg><b>产后再用</b><span class="tag">停止哺乳后 · 听医生</span></div>
<div class="ing">
<div class="ing-t"><b>维 A 酸<small>处方药,皮肤科开</small></b><span class="amt num">0.05%~0.1%</span></div>
<p>促新胶原,主要对早期红纹管用。</p>
<div class="ev"><em>证据 ●●<i>●</i></em>小样本随机对照有效;白纹效果差,会发红脱皮。</div>
</div>
<div class="ing">
<div class="ing-t"><b>视黄醇类身体乳<small>视黄醇、视黄醛</small></b><span class="amt">添加量低</span></div>
<p>作用同维 A 酸,但弱得多。</p>
<div class="ev"><em>证据 ●<i>●●</i></em>缺少专门针对妊娠纹的研究。</div>
</div>
<div class="ing">
<div class="ing-t"><b>果酸<small>羟基乙酸 / 甘醇酸</small></b><span class="amt num">居家 5%~10%</span></div>
<p>加速角质更新,让纹路颜色更匀。</p>
<div class="ev"><em>证据 ●<i>●●</i></em>20% 以上属医院换肤;小研究多和维 A 酸合用。</div>
</div>
</div>
<div class="ask fade"><span class="tag">去医院</span><div><b>点阵激光、微针、强脉冲光</b><br>对白纹更管用,选正规医院皮肤科,别去美容店</div></div>
<div class="grp no fade">
<div class="grp-h"><svg class="ic"><use href="#i-no" xlink:href="#i-no"/></svg><b>孕期别用</b><span class="tag">翻成分表认准</span></div>
<div class="ing">
<div class="ing-t"><b>维 A 酸、阿达帕林、他扎罗汀<small>外用维 A 酸类处方药</small></b><span class="amt">任何浓度</span></div>
<p>口服有明确致畸性,外用也不冒险。孕期、哺乳期都别用。</p>
</div>
<div class="ing">
<div class="ing-t"><b>视黄醇、视黄醛、视黄醇棕榈酸酯<small>护肤品里的「A 醇」</small></b><span class="amt">任何浓度</span></div>
<p>和维 A 酸同一家族,孕期别用;哺乳期先问医生。</p>
</div>
<div class="ing">
<div class="ing-t"><b>对苯二酚<small>氢醌,常见于祛斑美白</small></b><span class="amt">任何浓度</span></div>
<p>皮肤吸收多,孕期别用。</p>
</div>
<div class="ing">
<div class="ing-t"><b>高浓度水杨酸<small>刷酸换肤、大面积涂</small></b><span class="amt">换肤级</span></div>
<p>孕期别做;洗面奶里小面积低浓度的,先问医生。</p>
</div>
</div>
<div class="truth fade"><span class="tag">说句实话</span><br>没有哪瓶霜能<b>保证不长纹</b>。遗传和体重长得快不快,影响更大。<br>早抹、坚持、配合按摩、控体重,最实在。</div>
</section>
<!-- 04 怎么抹(2026-11-01 新增) -->
<section class="sec" id="s4">
<div class="sec-h"><span class="n num">04</span><h2>怎么抹</h2><small>HOW TO</small></div>
<p class="key">早开始、抹全、天天抹,比挑贵的管用。</p>
<div class="how">
<div class="pt fade"><span class="no num">1</span><b>什么时候开始</b><span>孕早期就开始,一直抹到产后。</span></div>
<div class="pt fade"><span class="no num">2</span><b>抹哪些部位</b><span>肚子、腰侧、大腿、臀部、胸部。</span></div>
<div class="pt fade"><span class="no num">3</span><b>一天几次</b><span>早晚各一次,洗澡后趁皮肤微湿。</span></div>
<div class="pt fade"><span class="no num">4</span><b>手法</b><span>打圈抹到吸收,每处 1~2 分钟;肚子轻抹不按压。</span></div>
</div>
<p class="note">新产品先在手肘内侧试抹 1 天,不红不痒再大面积用。</p>
</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>
<li><b>外用防纹总体证据:</b>Cochrane 关于孕期外用制剂预防妊娠纹的系统评价认为,目前没有高质量证据证明任何外用产品能预防妊娠纹;多篇皮肤科综述认为积雪草提取物、透明质酸类复方是现有研究中相对有希望的,但试验规模小、多为复方。</li>
<li><b>积雪草:</b>早年欧洲一项孕妇对照试验,用含积雪草提取物的复方霜,长纹比例低于安慰剂,主要对既往有妊娠纹的人更明显;产品含量多不公开,本页不给推荐浓度。</li>
<li><b>甜杏仁油:</b>土耳其一项孕妇研究,甜杏仁油加按摩组长纹比例明显低于对照,只抹不按摩与对照差别不大,提示按摩本身可能起作用(非盲法、小样本)。</li>
<li><b>透明质酸浓度:</b>「0.1%~1%」为护肤品常见添加范围的经验值,不是防纹的推荐剂量。</li>
<li><b>维 A 酸类、A 醇:</b>国内维 A 酸乳膏(常见 0.025%、0.05%、0.1% 规格)说明书写明孕妇及哺乳期妇女禁用;阿达帕林、他扎罗汀同属维 A 酸类,孕期不用。视黄醇等 A 醇护肤品按主流保守口径孕期避免。</li>
<li><b>果酸:</b>小样本研究中 20% 羟基乙酸联合维 A 酸或维 C,对妊娠纹外观有一定改善;居家产品常见 5%~10%,更高浓度属医院化学换肤。</li>
<li><b>对苯二酚、水杨酸:</b>对苯二酚外用吸收比例较高,孕期护肤建议中普遍列为避免;水杨酸大面积或高浓度换肤孕期避免,低浓度小面积洗去型多认为风险低,仍建议先问医生。</li>
<li><b>医美:</b>点阵激光、微针、强脉冲光 / 脉冲染料激光对妊娠纹有改善报道,红纹偏向血管类激光、白纹偏向点阵和微针,需在正规医院皮肤科评估,孕期不做。</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>
<script src="../_shared/brand.js?v=26110203"></script>
<script src="../../js/last-sub.js?v=26110703"></script> <!-- 11-07 小程序刷新回到这一页(见 js/last-sub.js) -->
<script src="../../js/pv.js?v=26110653"></script> <!-- 11-07 页面访问记录(推送效果看板,见 js/pv.js) -->
</body>
</html>