572 lines
46 KiB
HTML
572 lines
46 KiB
HTML
<!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>
|