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

572 lines
46 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>
<!-- 孕期专题 · 妊娠纹(2026-10-31 用户定:首页「今日孕期小知识」加专题入口;只写成分和品类、不点名品牌;
效果百分比不放显眼处,只在页底「循证来源」注明研究对象和人数;多插画、少大段文字)。
2026-10-31 改版:顶部「3 个核心重点」总览 + 每段/每卡一句加粗重点结论 + 关键数字做成徽标;
分阶段改为时间轴;「为什么这样做」直接展示不折叠;全部图标改为内联 SVG 扁平图标(页内 symbol 复用,不用 emoji)。
插画 img/*.webp 由 AI 生成(画面不含文字),文案全部在本页排版。
自成一页:不引 app.js;回首页走相对路径 ../../(预览 /mama-box-preview/、正式 /mama-box-v2/ 都对)。 -->
<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}
/* 图标统一规格:24 栅格、2px 圆角线条,.f 为同色浅面(双色扁平) */
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.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 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;padding:11px 4px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap}
.toc .ib{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:20px}
/* 段标题 + 段落重点结论 */
.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 12px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4)}
.eq{display:flex;align-items:center;justify-content:center;gap:6px}
.eq .it{width:86px;padding:10px 0 8px;border-radius:16px;background:#fff;box-shadow:0 3px 10px rgba(240,112,79,.08);font-size:12.5px;line-height:1.3;text-align:center;white-space:nowrap}
.eq .it .ic{display:block;margin:0 auto 4px;font-size:26px;color:var(--c)}
.eq .op{font-size:20px;color:var(--c);font-weight:700}
.eq .res{background:var(--deep);color:#fff}
.eq .res .ic{color:#fff}
/* ① 形成三步 */
.step{margin-top:14px;border-radius:22px;background:var(--card);overflow:hidden;border:1px solid var(--line)}
.step .pic{position:relative;background:#FFF6F2}
.step .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.step .badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;padding:3px 12px 3px 4px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.06);white-space:nowrap}
.step .badge b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px}
.step .tx{padding:13px 16px 15px}
.step h3{font-size:17px;line-height:1.4}
.step p{margin-top:4px;font-size:13px;color:var(--sub);line-height:1.6}
.vs{margin-top:10px;display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:#FFF1EC;font-size:14px;font-weight:700;color:var(--deep);line-height:1.45}
.vs .ic{font-size:20px}
.flow{display:flex;justify-content:center;margin:6px 0 -6px;color:#F2B3A3;font-size:20px}
.colors{display:flex;gap:8px;margin-top:10px}
.colors span{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.35;padding:8px 10px;border-radius:12px;background:#FAF5F3}
.colors em{flex:none;width:26px;height:8px;border-radius:9px}
/* 关键前提:体重 */
.key{margin-top:16px;border-radius:24px;overflow:hidden;background:#F3FAF4;border:1.5px solid #CFEAD7}
.key img{width:100%;aspect-ratio:16/9;object-fit:cover}
.key .tx{padding:14px 16px 16px}
.key .pre{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#fff;background:var(--green);border-radius:99px;padding:3px 10px 3px 8px}
.key h3{font-size:19px;line-height:1.35;margin-top:8px;color:#1F5E3F}
.key .big{display:flex;gap:10px;margin-top:12px}
.key .big div{flex:1;padding:10px 8px;border-radius:16px;background:#fff;text-align:center;line-height:1.15}
.key .big em{display:block;font-style:normal;font-size:24px;font-weight:800;color:var(--green)}
.key .big em small{font-size:13px;font-weight:700;margin-left:1px}
.key .big span{display:block;margin-top:5px;font-size:12px;color:#5E7466;white-space:nowrap}
.key p{font-size:12.5px;color:#6A7E70;margin-top:10px;line-height:1.6}
.key .link{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:99px;background:var(--green);color:#fff;font-size:15px;font-weight:600;width:100%}
.key .link .ic{font-size:18px}
/* ② 分阶段:时间轴 */
.tl{position:relative;margin-top:18px;padding-left:34px}
.tl::before{content:"";position:absolute;left:14px;top:18px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(180deg,#F7A08C,var(--c2) 45%,var(--deep) 70%,var(--purple))}
.phase{position:relative;display:flex;align-items:center;gap:8px;margin:22px 0 10px}
.phase:first-child{margin-top:0}
.phase .node{position:absolute;left:-34px;top:50%;margin-top:-16px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:0 0 0 4px var(--bg)}
.phase b{margin-left:4px;font-size:16px;white-space:nowrap}
.phase span{font-size:12px;color:var(--mute);white-space:nowrap}
.stage{position:relative;margin-top:12px;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .3s,border-color .3s;scroll-margin-top:60px}
.stage.hl{border-color:var(--c);box-shadow:0 0 0 3px rgba(244,89,60,.15)}
.stage.hl::after{content:"你现在看这里";position:absolute;right:12px;top:12px;background:var(--c);color:#fff;font-size:12px;border-radius:99px;padding:2px 10px}
.stage .pic img{width:100%;aspect-ratio:16/9;object-fit:cover}
.stage .bd{padding:13px 14px 14px}
.stage .hd{display:flex;align-items:center;gap:8px}
.stage .when{flex:none;font-size:12px;color:#fff;border-radius:99px;padding:2px 10px;white-space:nowrap}
.stage h3{font-size:16px;line-height:1.35;color:var(--sub);font-weight:600}
.concl{margin-top:8px;font-size:17px;font-weight:800;line-height:1.45;color:var(--ink)}
.concl i{font-style:normal;color:var(--deep)}
.nums{display:flex;gap:8px;margin-top:10px}
.nums div{flex:1;min-width:0;padding:8px 4px 7px;border-radius:14px;background:var(--soft);text-align:center;line-height:1.1}
.nums em{display:block;font-style:normal;font-size:21px;font-weight:800;color:var(--deep)}
.nums em small{font-size:12px;font-weight:700;margin-left:1px}
.nums span{display:block;margin-top:4px;font-size:11.5px;color:var(--sub);white-space:nowrap}
.rows{margin-top:10px}
.row{display:flex;gap:10px;padding:7px 0;border-top:1px dashed #F1E2DD;font-size:13px;color:#6A5452;line-height:1.55}
.row:first-child{border-top:0}
.row .k{flex:none;width:62px;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);white-space:nowrap;height:20px}
.row .k .ic{font-size:15px;color:var(--c)}
.row .v{flex:1;min-width:0}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:12.5px;padding:2px 9px;border-radius:99px;background:#FFF0EB;color:#B23A1F;white-space:nowrap;font-weight:600}
.pill small{color:#C9826F;font-size:11px;margin-left:3px;font-weight:400}
.why{margin-top:10px;display:flex;gap:10px;padding:11px 12px;border-radius:16px;background:#FFF8E9;border:1px solid #F7E5BE}
.why .wi{flex:none;width:30px;height:30px;border-radius:10px;background:#FFE7A8;color:#B7791F;display:grid;place-items:center;font-size:18px}
.why b{display:block;font-size:13px;color:#8A5A12}
.why p{font-size:12.5px;color:#7A6343;line-height:1.6;margin-top:1px}
/* 禁用警示(时间轴之后) */
.ban{margin-top:18px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:var(--rbg);border:1.5px solid #F2A9A9}
.ban .bi{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-size:28px}
.ban b{color:var(--red);font-size:15.5px;line-height:1.4}
.ban p{font-size:12.5px;color:#8A4A4A;margin-top:3px;line-height:1.55}
/* ③ 成分速查:红绿灯 */
.legend{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 10px;border-radius:99px;white-space:nowrap;font-weight:600}
.legend i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ok{background:var(--gbg);color:var(--green)}
.warn{background:var(--abg);color:var(--amber)}
.nog{background:var(--rbg);color:var(--red)}
.grp{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:14px;font-weight:700}
.grp i{width:12px;height:12px;border-radius:50%}
.grp small{font-weight:400;font-size:12px;color:var(--mute)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ing{position:relative;padding:12px 12px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);display:flex;flex-direction:column;gap:6px}
.ing .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px}
.ing h4{font-size:14.5px;line-height:1.3}
.ing .how{position:absolute;right:10px;top:10px;font-size:11px;padding:1px 8px;border-radius:99px;background:#F5EFEE;color:var(--sub)}
.ing .pct{align-self:flex-start;font-size:13px;font-weight:800;color:var(--green);background:var(--gbg);border-radius:8px;padding:1px 7px;white-space:nowrap}
.ing .use{font-size:12px;color:var(--sub);line-height:1.45}
.ing.am{border-top-color:var(--amber)}
.ing.am .pct{color:var(--amber);background:var(--abg)}
.ing.full{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
.ing.full .ico{width:44px;height:44px}
.ing.full .bx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
/* 红灯:禁用项最显眼 */
.ing.stop{grid-column:1/-1;margin-top:10px;border:2px solid var(--red);background:var(--rbg);flex-direction:row;align-items:center;gap:12px;padding:14px}
.ing.stop .ico{width:52px;height:52px;border-radius:16px;background:var(--red);color:#fff;font-size:30px}
.ing.stop .bx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ing.stop h4{font-size:16px;color:var(--red)}
.ing.stop .flag{align-self:flex-start;font-size:13px;font-weight:800;color:#fff;background:var(--red);border-radius:8px;padding:2px 8px}
.ing.stop .use{color:#8A4A4A}
.ing.stop .how{background:#fff}
.tip{margin-top:10px;font-size:12px;color:var(--mute);padding:0 4px}
/* 误区 */
.myth{margin-top:16px;display:flex;gap:12px;align-items:center;padding:12px;border-radius:22px;background:#FFFBF2;border:1px solid #F5E6C8}
.myth img{flex:none;width:96px;height:96px;border-radius:16px;object-fit:cover}
.myth .mk{display:inline-block;font-size:11.5px;font-weight:700;color:#A0731E;background:#FCEFD2;border-radius:99px;padding:1px 8px}
.myth b{display:block;margin-top:4px;font-size:15px;line-height:1.4}
.myth p{font-size:12.5px;color:#7E6C50;margin-top:3px;line-height:1.55}
/* 来源 */
.src{margin:32px 16px 0;border-radius:18px;background:#fff;border:1px solid var(--line)}
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.src summary .ic{font-size:18px;color:var(--c)}
.src 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-search" viewBox="0 0 24 24"><circle class="f" cx="11" cy="11" r="6.5"/><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></symbol>
<symbol id="i-lotion" viewBox="0 0 24 24"><rect class="f" x="6.5" y="9" width="11" height="12" rx="3"/><rect x="6.5" y="9" width="11" height="12" rx="3"/><path d="M10 9V6h4v3M12 6V3h4M10 14h4"/></symbol>
<symbol id="i-flask" viewBox="0 0 24 24"><path class="f" d="M7.6 14.5h8.8l2.3 4.1A1.6 1.6 0 0 1 17.3 21H6.7a1.6 1.6 0 0 1-1.4-2.4z"/><path d="M9 3h6M10 3v6l-4.8 8.6A2.3 2.3 0 0 0 7.2 21h9.6a2.3 2.3 0 0 0 2-3.4L14 9V3"/></symbol>
<symbol id="i-fiber" viewBox="0 0 24 24"><path class="f" d="M2.5 9.5h7.5l-1.5 2.5 1.5 2.5H2.5zM21.5 9.5H14l1.5 2.5-1.5 2.5h7.5z"/><path d="M2.5 9.5h7.5l-1.5 2.5 1.5 2.5H2.5M21.5 9.5H14l1.5 2.5-1.5 2.5h7.5M12 4.5v2M8.5 5.5l1 1.5M15.5 5.5l-1 1.5"/></symbol>
<symbol id="i-expand" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="5"/><path d="M2 12h3M3.5 10L2 12l1.5 2M22 12h-3M20.5 10l1.5 2-1.5 2M12 2v2.5M12 19.5V22"/></symbol>
<symbol id="i-wave" viewBox="0 0 24 24"><path d="M3 8.5c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 15.5c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
<symbol id="i-scale" viewBox="0 0 24 24"><rect class="f" x="3" y="4" width="18" height="16" rx="4"/><rect x="3" y="4" width="18" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></symbol>
<symbol id="i-hourglass" viewBox="0 0 24 24"><path class="f" d="M8 21c0-3 4-4.5 4-6.5 0 2 4 3.5 4 6.5z"/><path d="M6.5 3h11M6.5 21h11M8 3c0 5 8 6 8 9s-8 4-8 9M16 3c0 5-8 6-8 9s8 4 8 9"/></symbol>
<symbol id="i-bulb" viewBox="0 0 24 24"><path class="f" d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/><path d="M9 18.5h6M10.2 21.5h3.6M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/></symbol>
<symbol id="i-bowl" viewBox="0 0 24 24"><path class="f" d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M3 11h18a9 9 0 0 1-18 0zM8 7.5c0-1.2 1.2-1.2 1.2-2.5M12 7.5c0-1.2 1.2-1.2 1.2-2.5M16 7.5c0-1.2 1.2-1.2 1.2-2.5"/></symbol>
<symbol id="i-clinic" viewBox="0 0 24 24"><rect class="f" x="4" y="4" width="16" height="17" rx="3"/><rect x="4" y="4" width="16" height="17" rx="3"/><path d="M12 8.5v7M8.5 12h7"/></symbol>
<symbol id="i-ban" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M5.7 5.7l12.6 12.6"/></symbol>
<symbol id="i-drop" viewBox="0 0 24 24"><path class="f" d="M12 3c4 5 6.5 8 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 11 8 8 12 3z"/><path d="M12 3c4 5 6.5 8 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 11 8 8 12 3zM9 15a3 3 0 0 0 3 3"/></symbol>
<symbol id="i-bricks" viewBox="0 0 24 24"><path class="f" d="M3 5h8v5H3zM13 14h8v5h-8z"/><path d="M3 5h8v5H3zM13 5h8v5h-8zM3 14h8v5H3zM13 14h8v5h-8z"/></symbol>
<symbol id="i-oil" viewBox="0 0 24 24"><ellipse class="f" cx="12" cy="13.5" rx="6" ry="7"/><ellipse cx="12" cy="13.5" rx="6" ry="7"/><path d="M12 6.5c0-2 1.5-3.5 4-3.5"/></symbol>
<symbol id="i-egg" viewBox="0 0 24 24"><path class="f" d="M12 3c3.5 0 6.5 5.5 6.5 10.5a6.5 6.5 0 0 1-13 0C5.5 8.5 8.5 3 12 3z"/><path d="M12 3c3.5 0 6.5 5.5 6.5 10.5a6.5 6.5 0 0 1-13 0C5.5 8.5 8.5 3 12 3z"/></symbol>
<symbol id="i-film" viewBox="0 0 24 24"><path class="f" d="M3 16c3-2 6-2 9 0s6 2 9 0v3c-3 2-6 2-9 0s-6-2-9 0z"/><path d="M3 16c3-2 6-2 9 0s6 2 9 0M3 19c3-2 6-2 9 0s6 2 9 0"/><circle cx="8" cy="8" r="3"/><circle cx="15.5" cy="6.5" r="2"/></symbol>
<symbol id="i-leaf" viewBox="0 0 24 24"><path class="f" d="M5 19C5 10 10 4.5 20 4.5 20 14 14.5 19 5 19z"/><path d="M5 19C5 10 10 4.5 20 4.5 20 14 14.5 19 5 19zM4 20l9-9"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path class="f" d="M5 4.5A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5z"/><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
<symbol id="i-mom" viewBox="0 0 24 24"><circle class="f" cx="15" cy="14" r="5"/><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M12 9c4 .5 8 2.5 8 5.5s-2.5 4.5-6 4.5h-2M12 21v-2"/></symbol>
<symbol id="i-sprout" viewBox="0 0 24 24"><path class="f" d="M12 13C12 8.5 9 6 4.5 6c0 4.5 3 7 7.5 7zM12 11c0-3.5 2.5-6 7-6 0 3.5-2.5 6-7 6z"/><path d="M12 21v-8M12 13C12 8.5 9 6 4.5 6c0 4.5 3 7 7.5 7zM12 11c0-3.5 2.5-6 7-6 0 3.5-2.5 6-7 6z"/></symbol>
<symbol id="i-baby" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12.5" r="8.5"/><circle cx="12" cy="12.5" r="8.5"/><circle class="s" cx="9.2" cy="11.5" r="1"/><circle class="s" cx="14.8" cy="11.5" r="1"/><path d="M9.5 15.2c1.4 1.2 3.6 1.2 5 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.8 2.8L16 9.5"/></symbol>
<symbol id="i-warn" viewBox="0 0 24 24"><path class="f" d="M12 3.5l9.5 16.5h-19z"/><path d="M12 3.5l9.5 16.5h-19zM12 10v4.5M12 17.3v.2"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v15M6.5 13.5L12 19l5.5-5.5"/></symbol>
<symbol id="i-hand" viewBox="0 0 24 24"><path class="f" d="M7 12V7a1.5 1.5 0 0 1 3 0v4V5a1.5 1.5 0 0 1 3 0v6V6.5a1.5 1.5 0 0 1 3 0V12v-2a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8z"/><path d="M10 11V5a1.5 1.5 0 0 1 3 0v6M13 10.5v-4a1.5 1.5 0 0 1 3 0V12M16 11.5v-1.5a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8L7 13.5V7a1.5 1.5 0 0 1 3 0v4"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.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>为什么会长 · 现在抹什么 · 成分怎么挑,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>≤0.5kg</em><small>每周增重</small></div></li>
<li><span class="no">2</span><div class="tx"><b>每天抹两次打底</b><span>从孕早期开始,坚持整个孕期</span></div><div class="num"><em>2 次</em><small>每天</small></div></li>
<li><span class="no">3</span><div class="tx"><b>红纹一出现立刻处理</b><span>越早越好,拖成白纹就难修</span></div><div class="num"><em>2 个月</em><small>至少坚持</small></div></li>
</ol>
<div class="core-ban"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg><b>维 A 酸 / 视黄醇:孕期、哺乳期禁用<span>买淡纹产品先翻成分表</span></b></div>
</section>
<!-- 按她的孕周 / 产后状态点亮对应阶段(拿不到身份就不显示) -->
<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-search" xlink:href="#i-search"/></svg></span>为什么会长</button>
<button data-go="s2"><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-lotion" xlink:href="#i-lotion"/></svg></span>现在抹什么</button>
<button data-go="s3"><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg></span>成分速查</button>
</nav>
<!-- ① 怎么形成 -->
<section class="sec" id="s1">
<div class="sec-h"><span class="n">1</span><h2>妊娠纹是怎么长出来的?</h2></div>
<div class="sec-key">纤维变脆 + 撑得太快 = 长纹。<br>所以预防靠<mark>养韧皮肤 + 控体重增速</mark>。</div>
<p class="sec-sub">皮肤里有像橡皮筋一样的「胶原 + 弹性纤维」,被拉断了就成了纹</p>
<div class="formula fade">
<div class="eq">
<div class="it"><svg class="ic"><use href="#i-fiber" xlink:href="#i-fiber"/></svg>纤维变脆</div>
<span class="op">+</span>
<div class="it"><svg class="ic"><use href="#i-expand" xlink:href="#i-expand"/></svg>撑得太快</div>
<span class="op">=</span>
<div class="it res"><svg class="ic"><use href="#i-wave" xlink:href="#i-wave"/></svg>长出纹路</div>
</div>
</div>
<article class="step fade">
<div class="pic"><img src="img/fiber.webp" alt="皮肤剖面里的纤维变脆" loading="lazy"><span class="badge"><b style="background:#E8476F">1</b>激素让皮肤变脆</span></div>
<div class="tx">
<h3>「橡皮筋」先变脆了</h3>
<p>孕期激素升高,皮肤里的纤维合成变少、失去韧性。</p>
<div class="vs"><svg class="ic"><use href="#i-shield" xlink:href="#i-shield"/></svg><span>对抗它:每天保湿增韧 + 吃够蛋白质和维 C</span></div>
</div>
</article>
<div class="flow"><svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></div>
<article class="step fade">
<div class="pic"><img src="img/stretch.webp" alt="孕肚一天天变大" loading="lazy"><span class="badge"><b style="background:#E39A2D">2</b>肚子被快速撑大</span></div>
<div class="tx">
<h3>拉得太快,超过了极限</h3>
<p>宝宝长大 + 体重涨太快,肚皮被往外拉,超过纤维能承受的程度。</p>
<div class="vs"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg><span>对抗它:控制体重增速,涂什么都不如慢点长肉</span></div>
</div>
</article>
<div class="flow"><svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></div>
<article class="step fade">
<div class="pic"><img src="img/snap.webp" alt="纤维被拉断出现纹路" loading="lazy"><span class="badge"><b style="background:#C2185B">3</b>纤维被拉断</span></div>
<div class="tx">
<h3>「脆 + 快」叠加,纹就出来了</h3>
<div class="colors">
<span><em style="background:linear-gradient(90deg,#E58AA5,#B65C8F)"></em>先是紫红色<br>(红纹期)</span>
<span><em style="background:linear-gradient(90deg,#EFE7E2,#D9CEC8)"></em>后变银白色<br>(白纹期)</span>
</div>
<div class="vs"><svg class="ic"><use href="#i-hourglass" xlink:href="#i-hourglass"/></svg><span>红纹期是修复黄金窗口,拖成白纹就难多了</span></div>
</div>
</article>
<div class="key fade">
<img src="img/slow.webp" alt="孕妈牵着背体重秤的小乌龟散步" loading="lazy">
<div class="tx">
<span class="pre"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>最关键、也最省钱的一步</span>
<h3>体重慢慢长,比抹什么都管用</h3>
<div class="big">
<div><em>≤0.5<small>kg</small></em><span>孕中晚期每周增重</span></div>
<div><em>看孕前<small>体重</small></em><span>整个孕期该长多少</span></div>
</div>
<p>偏瘦、正常、偏胖的人,孕期该长的总量不一样,以产检医生建议为准。</p>
<button class="link" id="goWeight"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg>算算我的增重范围<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
</div>
</div>
</section>
<!-- ② 分阶段(时间轴) -->
<section class="sec" id="s2">
<div class="sec-h"><span class="n">2</span><h2>不同阶段,抹什么、怎么用</h2></div>
<div class="sec-key">孕早期就开始打底;<mark>红纹一冒头立刻处理</mark>;白纹留到产后找医生。</div>
<p class="sec-sub">从上往下就是孕产全程,找到你现在的那一段</p>
<div class="tl">
<div class="phase"><span class="node" style="background:#F4593C"><svg class="ic"><use href="#i-sprout" xlink:href="#i-sprout"/></svg></span><b>孕早期起</b><span>预防 · 越早开始越好</span></div>
<article class="stage fade" id="stA">
<div class="pic"><img src="img/lotion.webp" alt="洗澡后和睡前涂身体乳" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#F4593C">预防</span><h3>刚怀孕起 · 抹着打底</h3></div>
<div class="concl">每天抹 2 次保湿霜,<i>坚持整个孕期</i></div>
<div class="nums">
<div><em>2<small>次</small></em><span>每天</span></div>
<div><em>全孕期</em><span>一直坚持</span></div>
<div><em>3<small>处</small></em><span>肚皮 大腿 臀部</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-lotion" xlink:href="#i-lotion"/></svg>抹什么</span><span class="v">保湿修护身体乳 / 妊娠霜</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>看成分</span><span class="v pills"><span class="pill">透明质酸<small>0.1~1%</small></span><span class="pill">神经酰胺<small>0.2~0.5%</small></span><span class="pill">角鲨烷<small>5~10%</small></span><span class="pill">维生素 E<small>1~5%</small></span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-hand" xlink:href="#i-hand"/></svg>怎么用</span><span class="v">洗澡后 + 睡前,打圈按摩到吸收</span></div>
</div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>给皮肤补水、提升延展性,让纤维没那么容易被拉断。底子养好了,就算长了纹,炎症也更轻、更好修。</p></div></div>
</div>
</article>
<article class="stage fade" id="stA2">
<div class="pic"><img src="img/food.webp" alt="鱼、蛋、奶、水果" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#E39A2D">同时吃好</span><h3>从里面给皮肤打底</h3></div>
<div class="concl">吃够蛋白质和维 C,<i>均衡饮食就够</i></div>
<div class="nums">
<div><em>约 100<small>mg</small></em><span>维 C 每天</span></div>
<div><em>每餐</em><span>有优质蛋白</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>吃什么</span><span class="v">瘦肉、鱼虾、鸡蛋、牛奶 + 猕猴桃、橙子、番茄</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>补什么</span><span class="v pills"><span class="pill">优质蛋白</span><span class="pill">维生素 C</span><span class="pill">锌</span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>怎么吃</span><span class="v">每天随餐,不用囤高价补剂</span></div>
</div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>纤维要靠蛋白质和维 C 合成,吃够了才有「原料」。但它管不了「撑得太快」,还是要配合控体重。</p></div></div>
</div>
</article>
<div class="phase"><span class="node" style="background:#C2185B"><svg class="ic"><use href="#i-hourglass" xlink:href="#i-hourglass"/></svg></span><b>冒出红纹</b><span>黄金窗口 · 越早越好</span></div>
<article class="stage fade" id="stB">
<div class="pic"><img src="img/redgel.webp" alt="在淡红色纹路上薄涂凝胶" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#C2185B">黄金窗口</span><h3>刚长出红纹 · 马上处理</h3></div>
<div class="concl">红纹一冒头就涂,<i>至少坚持 2 个月</i></div>
<div class="nums">
<div><em>2<small>次</small></em><span>每天薄涂</span></div>
<div><em>≥2<small>个月</small></em><span>至少坚持</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-lotion" xlink:href="#i-lotion"/></svg>抹什么</span><span class="v">医用硅酮凝胶(硅凝胶);积雪草类修护霜</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>看成分</span><span class="v pills"><span class="pill">硅酮<small>医用级、成膜型</small></span><span class="pill">积雪草总苷<small>按说明书,先问医生</small></span></span></div>
</div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>硅酮在皮肤表面成膜、封闭保湿,帮纹路变软变淡;积雪草抗炎、促修复。积雪草类孕期哺乳期使用前先问医生。</p></div></div>
</div>
</article>
<div class="phase"><span class="node" style="background:#8E6BB8"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span><b>白纹 / 产后</b><span>改善外观 · 找医生</span></div>
<article class="stage fade" id="stC">
<div class="pic"><img src="img/clinic.webp" alt="产后在皮肤科咨询" loading="lazy"></div>
<div class="bd">
<div class="hd"><span class="when" style="background:#8E6BB8">改善外观</span><h3>已经变成白纹 · 产后处理</h3></div>
<div class="concl">白纹涂抹难改善,<i>产后找皮肤科</i></div>
<div class="nums">
<div><em>3~5<small>次</small></em><span>激光一个疗程</span></div>
<div><em>仅产后</em><span>维 A 酸遵医嘱</span></div>
</div>
<div class="rows">
<div class="row"><span class="k"><svg class="ic"><use href="#i-clinic" xlink:href="#i-clinic"/></svg>做什么</span><span class="v">正规医院皮肤科:点阵激光、微针等</span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-flask" xlink:href="#i-flask"/></svg>可辅助</span><span class="v pills"><span class="pill">外用维 A 酸<small>处方药 · 仅产后</small></span></span></div>
<div class="row"><span class="k"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg>怎么用</span><span class="v">维 A 酸遵医嘱、晚上薄涂、从低浓度开始</span></div>
</div>
<div class="why"><span class="wi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><div><b>为什么这样做</b><p>白纹已经是愈合后的「疤」,光靠涂抹改善有限,需要医生用激光、微针刺激皮肤重新长出胶原。</p></div></div>
</div>
</article>
</div>
<div class="ban fade">
<span class="bi"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg></span>
<div><b>维 A 酸 / 视黄醇:孕期、哺乳期禁用</b><p>成分表里看到「维 A 酸、视黄醇、视黄醛」就先放下,产后不哺乳了再遵医嘱用。</p></div>
</div>
</section>
<!-- ③ 成分速查(红绿灯) -->
<section class="sec" id="s3">
<div class="sec-h"><span class="n">3</span><h2>成分速查:买之前对一对</h2></div>
<div class="sec-key">绿灯放心用,橙灯先问医生,<mark>红灯孕期别碰</mark>。</div>
<p class="sec-sub">翻到产品背面的成分表,对着看含量和能不能用</p>
<div class="legend"><span class="ok"><i></i>孕期可用</span><span class="warn"><i></i>先问医生</span><span class="nog"><i></i>孕期禁用</span></div>
<!-- 红灯放最前、最大 -->
<div class="ing stop fade">
<span class="how">涂</span>
<div class="ico"><svg class="ic"><use href="#i-ban" xlink:href="#i-ban"/></svg></div>
<div class="bx">
<h4>维 A 酸 / 视黄醇 / 视黄醛</h4>
<span class="flag">孕期哺乳期禁用</span>
<div class="use">可能影响胎儿发育。产后不哺乳时作为处方药(0.025%~0.1%)遵医嘱用于改善白纹。</div>
</div>
</div>
<div class="grp"><i style="background:var(--green)"></i>孕期可用<small>按含量挑</small></div>
<div class="grid">
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#E8F2FD;color:#3B7DD8"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></div><h4>透明质酸</h4><span class="pct">0.1% ~ 1%</span><div class="use">补水增韧,扛住拉扯</div></div>
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#FFF2E0;color:#D9822B"><svg class="ic"><use href="#i-bricks" xlink:href="#i-bricks"/></svg></div><h4>神经酰胺</h4><span class="pct">0.2% ~ 0.5%</span><div class="use">修护屏障、锁住水分</div></div>
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#F3F6DC;color:#7C8F2A"><svg class="ic"><use href="#i-oil" xlink:href="#i-oil"/></svg></div><h4>角鲨烷 / 维 E</h4><span class="pct">5~10% / 1~5%</span><div class="use">滋润,缓解干痒紧绷</div></div>
<div class="ing fade"><span class="how">吃</span><div class="ico" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-egg" xlink:href="#i-egg"/></svg></div><h4>蛋白质 + 维 C</h4><span class="pct">维 C 约 100mg/天</span><div class="use">给纤维合成供原料</div></div>
<div class="ing full fade"><span class="how">涂</span><div class="ico" style="background:#EEF0FF;color:#5B63C9"><svg class="ic"><use href="#i-film" xlink:href="#i-film"/></svg></div><div class="bx"><h4>硅酮(孕期哺乳期可用)</h4><span class="pct">医用级、成膜型</span><div class="use">封闭保湿,淡化红纹</div></div></div>
</div>
<div class="grp"><i style="background:var(--amber)"></i>先问医生<small>再决定用不用</small></div>
<div class="grid">
<div class="ing am full fade"><span class="how">涂</span><div class="ico" style="background:#E9F6E6;color:#3E9A4A"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></div><div class="bx"><h4>积雪草总苷</h4><span class="pct">按说明书,先问医生</span><div class="use">抗炎促修复,帮红纹转淡</div></div></div>
</div>
<p class="tip">含量是常见起效区间,以产品成分表为准;处方药请以皮肤科医生面诊为准。</p>
<div class="myth fade">
<img src="img/myth.webp" alt="可可脂和橄榄油" loading="lazy">
<div><span class="mk">常见误区</span><b>可可脂、橄榄油:润肤可以,防纹别指望</b><p>对照研究里,涂和不涂长纹的比例差不多,别把它当主力。</p></div>
</div>
</section>
<details class="src">
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>循证来源与说明</summary>
<ul>
<li><b>维 A 酸:</b>0.1% 维 A 酸涂早期红纹 6 个月,10 人中 8 人明显改善,对照组 12 人中 1 人(Arch Dermatol 1996,小样本,研究对象为早期红纹)</li>
<li><b>医用硅酮:</b>1522 人连用 2 个月以上,颜色、柔软度改善约 70%~85%(研究对象为<u>疤痕</u>,非专门针对妊娠纹,仅作参考)</li>
<li><b>透明质酸复方凝胶:</b>约 50 人连用 12 周,红纹深度和颜色明显减轻,但不会完全消失</li>
<li><b>点阵激光:</b>小样本临床研究显示对妊娠纹总有效率较高;联合强脉冲光的 60 人研究中纹路面积平均缩小约 37%,满意度较高,但约 25% 有不良反应</li>
<li><b>可可脂:</b>210 人随机对照研究,用可可脂 45% 长纹、安慰剂 49%,无明显差异</li>
<li><b>橄榄油:</b>70 人随机对照研究,涂 45.7% vs 不涂 62.9% 长纹,差异未达统计学意义</li>
<li><b>体重:</b>孕期增重范围按孕前体重(BMI)分档,以产检医生建议为准</li>
</ul>
</details>
<p class="foot">本页为科普参考,不能代替医生诊断。<br>孕期用药、用护肤品有疑问,请咨询产检医生或皮肤科医生。</p>
</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; });
/* 按孕周点亮阶段;ic 为图标 symbol 名(mom / sprout / baby),切换 <use> 的引用 */
function mark(stage, ic, t, d) {
var el = document.getElementById(stage); if (el) el.classList.add('hl');
var u = $('#meIc'), ref = '#i-' + ic;
u.setAttribute('href', ref); u.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', ref);
$('#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) return;
if (p.postpartum) mark('stB', 'baby', '宝宝出生了,重点看修复', '红纹趁早处理,白纹产后找皮肤科');
else if (p.week != null && !p.empty) {
var w = p.week;
if (w >= 20) mark('stA', 'mom', '孕 ' + w + ' 周 · 肚子长得最快', '坚持打底,每天看看有没有冒红纹');
else mark('stA', 'sprout', '孕 ' + 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>