孕期专题·妊娠纹 (v26103103)：新增 topic/wen/ 专题页（10 张插画，按孕周点亮阶段），首页小知识孕 12 周起加专题入口
只写成分和品类、不点名品牌；效果百分比只在页底循证来源注明研究对象和人数。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
22
index.html
22
index.html
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26103101 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26103103 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<link rel="stylesheet" href="night.css">
|
||||
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
|
||||
@@ -359,6 +359,24 @@
|
||||
<button type="button" class="pt-chip pc-eat" data-pt="eat"><i aria-hidden="true">🥗</i><span>吃点什么</span></button>
|
||||
<button type="button" class="pt-chip pc-care" data-pt="care"><i aria-hidden="true">📋</i><span>这周留心</span></button>
|
||||
</div>
|
||||
<!-- 2026-10-31 用户定：孕期专题入口（第一篇妊娠纹，topic/wen/）。孕 12 周起显示，20 周起换「肚子长得最快」文案，见 app.js renderTips -->
|
||||
<a class="pt-topic hide" id="ptTopic" href="topic/wen/">
|
||||
<img src="topic/wen/img/hero.webp" alt="" loading="lazy">
|
||||
<span class="ptt-tx"><em>孕期专题</em><b>妊娠纹：为什么会长、现在抹什么</b><span id="ptTopicD">3 分钟看懂，从现在开始打底</span></span>
|
||||
<i class="ptt-go">›</i>
|
||||
</a>
|
||||
<style>
|
||||
.pt-topic{display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:8px 12px 8px 8px;border-radius:16px;background:linear-gradient(110deg,#FFEDE6,#FFF8F4);text-decoration:none;color:inherit}
|
||||
.pt-topic.hide{display:none}
|
||||
.pt-topic img{flex:none;width:62px;height:62px;border-radius:12px;object-fit:cover}
|
||||
.ptt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
|
||||
.ptt-tx em{font-style:normal;font-size:11px;color:#F4593C;font-weight:600}
|
||||
.ptt-tx b{font-size:14px;line-height:1.35;color:#3B2A2A}
|
||||
.ptt-tx span{font-size:12px;color:#8A7471}
|
||||
.ptt-go{font-style:normal;font-size:20px;color:#E4A595}
|
||||
html.night .pt-topic{background:linear-gradient(110deg,#3a2a2a,#2c2222)}
|
||||
html.night .ptt-tx b{color:#f3e6e2}
|
||||
</style>
|
||||
<p class="pt-foot">仅供参考，身体有任何不适请以医生意见为准</p>
|
||||
</section>
|
||||
|
||||
@@ -2050,7 +2068,7 @@
|
||||
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
|
||||
<script src="js/baby-limbs.js?v=26101201"></script>
|
||||
<script src="js/coach.js?v=26101211"></script>
|
||||
<script src="js/birth-flow.js?v=26103101"></script>
|
||||
<script src="js/birth-flow.js?v=26103103"></script>
|
||||
|
||||
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
|
||||
<script>
|
||||
|
||||
10
js/app.js
10
js/app.js
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26103101';
|
||||
var VER = '26103103';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -5022,6 +5022,14 @@
|
||||
const today = Math.max(0, Math.min(6, state.day || 0));
|
||||
const size = babySize(w);
|
||||
$('#ptWk').textContent = '孕 ' + state.week + ' 周';
|
||||
/* 孕期专题入口：12 周起显示；20 周起肚子长得最快，换提醒文案。专题页自己按 openid 点亮对应阶段，链接带上身份 */
|
||||
const _tp = $('#ptTopic');
|
||||
if (_tp) {
|
||||
_tp.classList.toggle('hide', !(state.week >= 12));
|
||||
_tp.setAttribute('href', 'topic/wen/' + location.search + location.hash);
|
||||
const _td = $('#ptTopicD');
|
||||
if (_td) _td.textContent = state.week >= 20 ? '肚子长得最快的时候，该开始护理肚皮了' : '3 分钟看懂，从现在开始打底';
|
||||
}
|
||||
$('#ptWhen').textContent = '本周第 ' + (today + 1) + ' 天';
|
||||
/* 2026-10-12 用户：小知识里的 emoji 换成兜爸手绘图标库（/_bridge/hand-icons.js，小程序后台 375797cf 维护）；
|
||||
图标按孕周从 handIcons.week() 取，SIZE 表只管文字；库没加载 / 图片挂了 → 退回原来的 emoji，位置不空 */
|
||||
|
||||
BIN
topic/wen/img/clinic.webp
Normal file
BIN
topic/wen/img/clinic.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
topic/wen/img/fiber.webp
Normal file
BIN
topic/wen/img/fiber.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
topic/wen/img/food.webp
Normal file
BIN
topic/wen/img/food.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
topic/wen/img/hero.webp
Normal file
BIN
topic/wen/img/hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
topic/wen/img/lotion.webp
Normal file
BIN
topic/wen/img/lotion.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
topic/wen/img/myth.webp
Normal file
BIN
topic/wen/img/myth.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
topic/wen/img/redgel.webp
Normal file
BIN
topic/wen/img/redgel.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
topic/wen/img/slow.webp
Normal file
BIN
topic/wen/img/slow.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
topic/wen/img/snap.webp
Normal file
BIN
topic/wen/img/snap.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
topic/wen/img/stretch.webp
Normal file
BIN
topic/wen/img/stretch.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
399
topic/wen/index.html
Normal file
399
topic/wen/index.html
Normal file
@@ -0,0 +1,399 @@
|
||||
<!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 用户定：首页「今日孕期小知识」加专题入口；只写成分和品类、不点名品牌；
|
||||
效果百分比不放显眼处，只在页底「循证来源」注明研究对象和人数；多插画、少大段文字）。
|
||||
插画 img/*.webp 由 AI 生成（画面不含文字），文案全部在本页排版。
|
||||
自成一页：不引 app.js；回首页走相对路径 ../../（预览 /mama-box-preview/、正式 /mama-box-v2/ 都对）。 -->
|
||||
<style>
|
||||
:root{--c:#F4593C;--c2:#E8476F;--deep:#C2185B;--ink:#3B2A2A;--sub:#8A7471;--bg:#FFF8F5;--card:#fff;--line:#F6E3DD;--green:#2F8A5E;--gbg:#E7F5EC;--amber:#D9822B;--abg:#FFF1DE;--red:#D93B3B;--rbg:#FDE8E8}
|
||||
*{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}
|
||||
|
||||
/* 顶栏 */
|
||||
.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:44px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.96) 46%)}
|
||||
.hero h1{font-size:26px;line-height:1.25;color:var(--deep);letter-spacing:.5px}
|
||||
.hero p{margin-top:4px;font-size:13px;color:var(--sub)}
|
||||
|
||||
/* 个性化：你现在该看哪段 */
|
||||
.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:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#FFE9E2;font-size:20px}
|
||||
.me b{display:block;font-size:15px}
|
||||
.me span{font-size:12.5px;color:var(--sub)}
|
||||
.me .go{margin-left:auto;flex:none;font-size:13px;color:#fff;background:var(--c);border-radius:99px;padding:6px 12px}
|
||||
|
||||
/* 目录 */
|
||||
.toc{display:flex;gap:8px;margin:14px 16px 0}
|
||||
.toc button{flex:1;padding:10px 4px 9px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px}
|
||||
.toc i{font-style:normal;font-size:20px}
|
||||
|
||||
/* 核心公式 */
|
||||
.formula{margin:16px 16px 0;padding:16px 14px;border-radius:20px;background:linear-gradient(135deg,#FFEDE6,#FFF8F4);text-align:center}
|
||||
.formula .lab{font-size:12px;color:var(--c);font-weight:600;letter-spacing:2px}
|
||||
.eq{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px}
|
||||
.eq .it{width:84px;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}
|
||||
.eq .it i{display:block;font-style:normal;font-size:24px;margin-bottom:3px}
|
||||
.eq .op{font-size:20px;color:var(--c);font-weight:700}
|
||||
.eq .res{background:var(--deep);color:#fff}
|
||||
.formula p{margin-top:12px;font-size:13px;color:var(--ink)}
|
||||
.formula p b{color:var(--deep)}
|
||||
|
||||
/* 段标题 */
|
||||
.sec{margin:30px 16px 0;scroll-margin-top:56px}
|
||||
.sec-h{display:flex;align-items:center;gap:10px}
|
||||
.sec-h .n{flex:none;width:30px;height:30px;border-radius:10px;background:var(--c);color:#fff;font-weight:700;display:grid;place-items:center;font-size:15px}
|
||||
.sec-h h2{font-size:20px;line-height:1.3}
|
||||
.sec-sub{margin:4px 0 0 40px;font-size:13px;color:var(--sub)}
|
||||
|
||||
/* ① 形成三步 */
|
||||
.step{margin-top:14px;border-radius:22px;background:var(--card);overflow:hidden;border:1px solid var(--line)}
|
||||
.step .pic{position:relative;background:#FFF6F2}
|
||||
.step .pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
|
||||
.step .pic.wide img{aspect-ratio:16/9}
|
||||
.step .badge{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;padding:3px 12px 3px 4px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
|
||||
.step .badge b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px}
|
||||
.step .tx{padding:12px 16px 14px}
|
||||
.step h3{font-size:17px}
|
||||
.step p{margin-top:4px;font-size:14px;color:#5E4B49}
|
||||
.vs{margin-top:10px;display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:14px;background:#FFF1EC;font-size:13px;color:var(--deep)}
|
||||
.vs i{font-style:normal;flex:none}
|
||||
.flow{display:flex;justify-content:center;margin:6px 0 -6px;color:#F2B3A3;font-size:18px}
|
||||
.colors{display:flex;gap:8px;margin-top:10px}
|
||||
.colors span{flex:1;display:flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 10px;border-radius:12px;background:#FAF5F3}
|
||||
.colors em{flex:none;width:28px;height:6px;border-radius:9px}
|
||||
|
||||
/* 关键前提 */
|
||||
.key{margin-top:16px;border-radius:22px;overflow:hidden;background:#F3FAF4;border:1px solid #D6EEDC}
|
||||
.key img{width:100%;aspect-ratio:16/9;object-fit:cover}
|
||||
.key .tx{padding:12px 16px 14px}
|
||||
.key .pre{font-size:12px;font-weight:600;color:var(--green);letter-spacing:1px}
|
||||
.key h3{font-size:17px;margin-top:2px}
|
||||
.key p{font-size:13.5px;color:#4D5E52;margin-top:4px}
|
||||
.key .link{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:4px;height:40px;border-radius:99px;background:var(--green);color:#fff;font-size:14px;width:100%}
|
||||
|
||||
/* ② 分阶段 */
|
||||
.stages{position:relative;margin-top:14px}
|
||||
.stage{position:relative;margin-top:14px;border-radius:22px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .3s,border-color .3s}
|
||||
.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 .hd{display:flex;align-items:center;gap:8px;padding:12px 16px 0}
|
||||
.stage .when{font-size:12px;color:#fff;border-radius:99px;padding:2px 10px}
|
||||
.stage h3{font-size:17px}
|
||||
.rows{padding:8px 16px 4px}
|
||||
.row{display:flex;gap:10px;padding:7px 0;border-top:1px dashed #F1E2DD;font-size:14px}
|
||||
.row:first-child{border-top:0}
|
||||
.row .k{flex:none;width:64px;display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--sub);white-space:nowrap}
|
||||
.row .k i{font-style:normal;font-size:16px}
|
||||
.row .v{flex:1}
|
||||
.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}
|
||||
.pill small{color:#C9826F;font-size:11.5px;margin-left:3px}
|
||||
.why{margin:4px 16px 14px;border-radius:14px;background:#FFF6F3;overflow:hidden}
|
||||
.why summary{list-style:none;padding:9px 12px;font-size:13px;color:var(--deep);display:flex;align-items:center;gap:6px}
|
||||
.why summary::-webkit-details-marker{display:none}
|
||||
.why summary::after{content:"›";margin-left:auto;transition:transform .2s;font-size:16px}
|
||||
.why[open] summary::after{transform:rotate(90deg)}
|
||||
.why p{padding:0 12px 10px;font-size:13px;color:#6A5452}
|
||||
|
||||
/* 禁用警示 */
|
||||
.ban{margin-top:16px;display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:var(--rbg);border:1.5px solid #F7C3C3}
|
||||
.ban .ic{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:24px;position:relative}
|
||||
.ban .ic::after{content:"";position:absolute;inset:7px;border:3px solid var(--red);border-radius:50%;background:linear-gradient(45deg,transparent 45%,var(--red) 45%,var(--red) 55%,transparent 55%)}
|
||||
.ban b{color:var(--red);font-size:15px}
|
||||
.ban p{font-size:13px;color:#7A3B3B;margin-top:2px}
|
||||
|
||||
/* ③ 成分速查 */
|
||||
.legend{display:flex;gap:6px;margin:10px 0 0 40px;flex-wrap:wrap}
|
||||
.legend span{font-size:12px;padding:2px 9px;border-radius:99px}
|
||||
.ok{background:var(--gbg);color:var(--green)}
|
||||
.warn{background:var(--abg);color:var(--amber)}
|
||||
.no{background:var(--rbg);color:var(--red)}
|
||||
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
|
||||
.ing{position:relative;padding:12px 12px 11px;border-radius:18px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
|
||||
.ing .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:20px}
|
||||
.ing h4{font-size:14.5px;line-height:1.3}
|
||||
.ing .how{position:absolute;right:10px;top:10px;font-size:11.5px;padding:1px 7px;border-radius:99px;background:#F5EFEE;color:var(--sub)}
|
||||
.ing .pct{font-size:13px;font-weight:600;color:#B23A1F}
|
||||
.ing .use{font-size:12.5px;color:var(--sub);line-height:1.45}
|
||||
.ing .safe{align-self:flex-start;font-size:11.5px;padding:1px 8px;border-radius:99px;margin-top:2px}
|
||||
.ing.full{grid-column:1/-1}
|
||||
.tip{margin-top:10px;font-size:12px;color:var(--sub);padding:0 4px}
|
||||
|
||||
/* 误区 */
|
||||
.myth{margin-top:14px;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 b{font-size:15px}
|
||||
.myth p{font-size:13px;color:#6E5C3F;margin-top:2px}
|
||||
|
||||
/* 来源 */
|
||||
.src{margin:30px 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:6px}
|
||||
.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>
|
||||
<div id="scroll">
|
||||
<header class="bar">
|
||||
<button class="back" id="back" aria-label="返回">‹</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>
|
||||
|
||||
<!-- 按她的孕周 / 产后状态点亮对应阶段（拿不到身份就不显示） -->
|
||||
<div class="me" id="me">
|
||||
<div class="dot" id="meIc">🤰</div>
|
||||
<div><b id="meT"></b><span id="meD"></span></div>
|
||||
<button class="go" id="meGo">去看看</button>
|
||||
</div>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1"><i>🔍</i>为什么会长</button>
|
||||
<button data-go="s2"><i>🧴</i>现在抹什么</button>
|
||||
<button data-go="s3"><i>🧪</i>成分速查</button>
|
||||
</nav>
|
||||
|
||||
<div class="formula fade">
|
||||
<div class="lab">一句话看懂</div>
|
||||
<div class="eq">
|
||||
<div class="it"><i>🥀</i>纤维变脆</div>
|
||||
<span class="op">+</span>
|
||||
<div class="it"><i>🎈</i>撑得太快</div>
|
||||
<span class="op">=</span>
|
||||
<div class="it res"><i>〰️</i>长出纹路</div>
|
||||
</div>
|
||||
<p>所以预防靠 <b>养韧皮肤 + 控体重增速</b>；修复要 <b>趁红纹期，越早越好</b></p>
|
||||
</div>
|
||||
|
||||
<!-- ① 怎么形成 -->
|
||||
<section class="sec" id="s1">
|
||||
<div class="sec-h"><span class="n">1</span><h2>妊娠纹是怎么长出来的？</h2></div>
|
||||
<p class="sec-sub">皮肤里有像橡皮筋一样的「胶原 + 弹性纤维」，被拉断了就成了纹</p>
|
||||
|
||||
<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">
|
||||
<p>孕期激素升高，皮肤里的纤维合成变少、失去韧性 —— 「橡皮筋」先变脆了。</p>
|
||||
<div class="vs"><i>🛡️</i><span>对抗它：每天保湿增韧 + 吃够蛋白质和维 C</span></div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="flow">↓</div>
|
||||
<article class="step fade">
|
||||
<div class="pic wide"><img src="img/stretch.webp" alt="孕肚一天天变大" loading="lazy"><span class="badge"><b style="background:#E39A2D">2</b>肚子被快速撑大</span></div>
|
||||
<div class="tx">
|
||||
<p>宝宝长大 + 体重涨太快，肚皮被往外拉，超过了纤维能承受的极限。</p>
|
||||
<div class="vs"><i>🐢</i><span>对抗它：控制体重增速 —— 这一步涂什么都不如慢点长肉</span></div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="flow">↓</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">
|
||||
<p>「脆 + 快」叠在一起，纤维断开，表面就出现了纹路：</p>
|
||||
<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"><i>⏰</i><span>红纹期是修复黄金窗口，拖成白纹就难多了</span></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="key fade">
|
||||
<img src="img/slow.webp" alt="孕妈牵着背体重秤的小乌龟散步" loading="lazy">
|
||||
<div class="tx">
|
||||
<div class="pre">⚠️ 最关键、也最省钱的一步</div>
|
||||
<h3>体重慢慢长，比抹什么都管用</h3>
|
||||
<p>孕中晚期每周增重尽量别超过 0.5 公斤。整个孕期该长多少要看孕前体重 —— 偏瘦、正常、偏胖的人不一样。</p>
|
||||
<button class="link" id="goWeight">算算我的增重范围 ›</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ② 分阶段 -->
|
||||
<section class="sec" id="s2">
|
||||
<div class="sec-h"><span class="n">2</span><h2>不同阶段，抹什么、怎么用</h2></div>
|
||||
<p class="sec-sub">从上往下就是孕产全程，找到你现在的那一段</p>
|
||||
|
||||
<div class="stages">
|
||||
<article class="stage fade" id="stA">
|
||||
<div class="pic"><img src="img/lotion.webp" alt="洗澡后和睡前涂身体乳" loading="lazy"></div>
|
||||
<div class="hd"><span class="when" style="background:#E8476F">预防</span><h3>刚怀孕起 · 抹着打底</h3></div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><i>🧴</i>抹什么</span><span class="v">保湿修护身体乳 / 妊娠霜</span></div>
|
||||
<div class="row"><span class="k"><i>🧪</i>看成分</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"><i>⏰</i>怎么用</span><span class="v">每天 2 次（洗澡后 + 睡前），肚皮、大腿、臀部打圈按摩到吸收，坚持整个孕期</span></div>
|
||||
</div>
|
||||
<details class="why"><summary>💡 为什么这样做</summary><p>给皮肤补水、提升延展性，让纤维没那么容易被拉断。底子养好了，就算长了纹，炎症也更轻、更好修。</p></details>
|
||||
</article>
|
||||
|
||||
<article class="stage fade" id="stA2">
|
||||
<div class="pic"><img src="img/food.webp" alt="鱼、蛋、奶、水果" loading="lazy"></div>
|
||||
<div class="hd"><span class="when" style="background:#E39A2D">吃</span><h3>同时 · 吃好打底</h3></div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><i>🍽️</i>吃什么</span><span class="v">瘦肉、鱼虾、鸡蛋、牛奶 + 猕猴桃、橙子、番茄</span></div>
|
||||
<div class="row"><span class="k"><i>🧪</i>补什么</span><span class="v pills"><span class="pill">优质蛋白</span><span class="pill">维生素 C<small>约 100mg/天</small></span><span class="pill">锌</span></span></div>
|
||||
<div class="row"><span class="k"><i>⏰</i>怎么吃</span><span class="v">每天随餐，均衡饮食就够，不用囤高价补剂</span></div>
|
||||
</div>
|
||||
<details class="why"><summary>💡 为什么这样做</summary><p>纤维要靠蛋白质和维 C 合成，吃够了才有「原料」。但它管不了「撑得太快」，还是要配合控体重。</p></details>
|
||||
</article>
|
||||
|
||||
<article class="stage fade" id="stB">
|
||||
<div class="pic"><img src="img/redgel.webp" alt="在淡红色纹路上薄涂凝胶" loading="lazy"></div>
|
||||
<div class="hd"><span class="when" style="background:#C2185B">黄金窗口</span><h3>刚长出红纹 · 越早越好</h3></div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><i>🧴</i>抹什么</span><span class="v">医用硅酮凝胶（硅凝胶）；积雪草类修护霜</span></div>
|
||||
<div class="row"><span class="k"><i>🧪</i>看成分</span><span class="v pills"><span class="pill">医用级硅酮<small>看纯度、选成膜型</small></span><span class="pill">积雪草总苷<small>按说明书</small></span></span></div>
|
||||
<div class="row"><span class="k"><i>⏰</i>怎么用</span><span class="v">红纹一冒头就开始，每天薄涂 2 次，至少坚持 2 个月</span></div>
|
||||
</div>
|
||||
<details class="why"><summary>💡 为什么这样做</summary><p>硅酮在皮肤表面成膜、封闭保湿，帮纹路变软变淡；积雪草抗炎、促修复。积雪草类孕期哺乳期使用前先问医生。</p></details>
|
||||
</article>
|
||||
|
||||
<article class="stage fade" id="stC">
|
||||
<div class="pic"><img src="img/clinic.webp" alt="产后在皮肤科咨询" loading="lazy"></div>
|
||||
<div class="hd"><span class="when" style="background:#8E6BB8">改善外观</span><h3>已经变成白纹 · 产后找医生</h3></div>
|
||||
<div class="rows">
|
||||
<div class="row"><span class="k"><i>🏥</i>做什么</span><span class="v">正规医院皮肤科：点阵激光、微针等</span></div>
|
||||
<div class="row"><span class="k"><i>🧪</i>可辅助</span><span class="v pills"><span class="pill">外用维 A 酸<small>处方药 · 仅产后</small></span></span></div>
|
||||
<div class="row"><span class="k"><i>⏰</i>怎么做</span><span class="v">激光一般 3~5 次一个疗程；维 A 酸遵医嘱、晚上薄涂、从低浓度开始</span></div>
|
||||
</div>
|
||||
<details class="why"><summary>💡 为什么这样做</summary><p>白纹已经是愈合后的「疤」，光靠涂抹改善有限，需要医生用激光、微针刺激皮肤重新长出胶原。</p></details>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="ban fade">
|
||||
<div class="ic"></div>
|
||||
<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>
|
||||
<p class="sec-sub">翻到产品背面的成分表，对着看含量和能不能用</p>
|
||||
<div class="legend"><span class="ok">孕期可用</span><span class="warn">先问医生</span><span class="no">孕期禁用</span></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#E8F2FD">💧</div><h4>透明质酸</h4><div class="pct">0.1% ~ 1%</div><div class="use">补水增韧，扛住拉扯</div><span class="safe ok">孕期可用</span></div>
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#FFF2E0">🧱</div><h4>神经酰胺</h4><div class="pct">0.2% ~ 0.5%</div><div class="use">修护屏障、锁住水分</div><span class="safe ok">孕期可用</span></div>
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#FDF6D8">🫒</div><h4>角鲨烷 / 维 E</h4><div class="pct">5~10% / 1~5%</div><div class="use">滋润，缓解干痒紧绷</div><span class="safe ok">孕期可用</span></div>
|
||||
<div class="ing fade"><span class="how">吃</span><div class="ico" style="background:#FFEDE6">🥚</div><h4>蛋白质 + 维 C</h4><div class="pct">维 C 约 100mg/天</div><div class="use">给纤维合成供原料</div><span class="safe ok">孕期可用</span></div>
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#EEF0FF">🫧</div><h4>医用硅酮</h4><div class="pct">医用级 · 成膜型</div><div class="use">封闭保湿，淡化红纹</div><span class="safe ok">孕期哺乳期可用</span></div>
|
||||
<div class="ing fade"><span class="how">涂</span><div class="ico" style="background:#E9F6E6">🌿</div><h4>积雪草总苷</h4><div class="pct">按说明书用量</div><div class="use">抗炎促修复，帮红纹转淡</div><span class="safe warn">先问医生</span></div>
|
||||
<div class="ing full fade"><span class="how">涂</span><div class="ico" style="background:#FDE8E8">🚫</div><h4>维 A 酸 / 视黄醇</h4><div class="pct">0.025% ~ 0.1%（处方药）</div><div class="use">刺激胶原新生、改善白纹纹理，但可能影响胎儿发育</div><span class="safe no">孕期哺乳期禁用 · 仅产后遵医嘱</span></div>
|
||||
</div>
|
||||
<p class="tip">含量是常见起效区间，以产品成分表为准；处方药请以皮肤科医生面诊为准。</p>
|
||||
|
||||
<div class="myth fade">
|
||||
<img src="img/myth.webp" alt="可可脂和橄榄油" loading="lazy">
|
||||
<div><b>可可脂、橄榄油：润肤可以，防纹别指望</b><p>对照研究里，涂和不涂长纹的比例差不多。当润肤用没问题，别把它当主力。</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details class="src">
|
||||
<summary>📚 循证来源与说明</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) sc.scrollTo({ top: el.offsetTop - 52, behavior: 'smooth' }); }
|
||||
[].forEach.call(document.querySelectorAll('[data-go]'), function (b) { b.addEventListener('click', function () { go(b.dataset.go); }); });
|
||||
|
||||
/* 体重管理：同源相对路径，带身份 */
|
||||
$('#goWeight').addEventListener('click', function () { location.href = '/yunqi-tizhong/' + location.search + location.hash; });
|
||||
|
||||
/* 按孕周点亮阶段 */
|
||||
function mark(stage, ic, t, d) {
|
||||
var el = document.getElementById(stage); if (el) el.classList.add('hl');
|
||||
$('#meIc').textContent = ic; $('#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', '👶', '宝宝出生了，重点看修复', '红纹趁早处理，白纹产后找皮肤科');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w >= 20) mark('stA', '🤰', '孕 ' + w + ' 周 · 肚子长得最快', '坚持打底，每天看看有没有冒红纹');
|
||||
else mark('stA', '🌱', '孕 ' + 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>
|
||||
Reference in New Issue
Block a user