专题页 v3：加设计感+每页推荐工具（共用 _shared/tools.js）；生娃计算器扩到15项+快速/详细估算；测一测改成妈妈类型卡+按类型推荐工具
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
47
topic/_shared/tools.js
Normal file
47
topic/_shared/tools.js
Normal file
@@ -0,0 +1,47 @@
|
||||
/* 孕期专题页共用：推荐工具卡（2026-10-31）
|
||||
* 工具清单与 /api/mp/apps?isPublished=1 的「孕期工具」一致；跳转一律同源相对路径，带上 search + hash（openid）。
|
||||
* 用法：TopicTools.render(el, [{id:'taidong', why:'一句推荐理由'}...], {title:'用得上的工具', color:'#18A058', wk:当前孕周})
|
||||
*/
|
||||
(function () {
|
||||
var T = {
|
||||
taidong: { n: '数胎动', u: '/taidong/', l: '/taidong/logo/logo-foot.svg', gate: 16 },
|
||||
gongsuopinlv: { n: '数宫缩', u: '/gongsuo-pinlv/', l: '/upload/picture/1c02d720e4d23b09c996e859703b8b5e.svg', gate: 20 },
|
||||
taierguzhong: { n: '胎儿估重', u: '/taier-guzhong/', l: '/upload/picture/715333a69fb67d8812ab093f342fa00f.png', gate: 15 },
|
||||
chanjianrili: { n: '孕检日历', u: '/chanjian-rili/', l: '/chanjian-rili/logo/logo-7-dots.svg' },
|
||||
yunqitizhong: { n: '孕期体重管理', u: '/yunqi-tizhong/', l: '/upload/picture/a6d7e61edee2ff0395cf00587a7c4036.svg' },
|
||||
yunqixuetang: { n: '孕期血糖记录', u: '/yunqi-xuetang/', l: '/upload/picture/fde3c920fae453f2642731e4135b88f5.png' },
|
||||
yunqinengbuchi: { n: '孕期能不能吃', u: '/yunqi-nengbuchi/', l: '/upload/picture/cf8750e19250caacd703b9d074211488.png' },
|
||||
daichanqingdan: { n: '待产清单', u: '/daichan-qingdan/', l: '/upload/picture/f2da62ce728d3a7e85b4440ece6f26e5.svg' },
|
||||
bushui: { n: '孕期补水补剂', u: '/yunqi-bushui/yindao/', l: '/upload/picture/ca30770e30bc2270c4aea0d382b872b0.svg' },
|
||||
yun: { n: '孕期血压记录', u: '/yunqi-xueya/intro/', l: '/upload/picture/816227e3933211145bb8fc774ee32e82.svg' },
|
||||
yundujinian: { n: '宝宝相册', u: '/yundu-jinian/', l: '/yundu-jinian/logo.svg' }
|
||||
};
|
||||
var css = '.tt-wrap{margin:28px 0 8px}.tt-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 12px}' +
|
||||
'.tt-h b{font-size:18px;font-weight:800;color:#1F2329}.tt-h span{font-size:12.5px;color:#86909C}' +
|
||||
'.tt-list{display:flex;flex-direction:column;gap:10px}' +
|
||||
'.tt-it{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid #EEF0F3;border-radius:18px;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s}' +
|
||||
'.tt-it:active{transform:scale(.98)}.tt-ic{flex:0 0 44px;width:44px;height:44px;border-radius:13px;background:var(--tt-bg,#F7F8FA);display:flex;align-items:center;justify-content:center}' +
|
||||
'.tt-ic img{width:34px;height:34px;object-fit:contain}.tt-tx{flex:1;min-width:0}.tt-n{font-size:15px;font-weight:700;color:#1F2329;display:flex;align-items:center;gap:6px}' +
|
||||
'.tt-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:#F2F3F5;color:#86909C}' +
|
||||
'.tt-w{font-size:12.5px;color:#4E5969;margin-top:2px;line-height:1.5}.tt-go{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--tt-c,#18A058);padding:6px 12px;border-radius:99px;background:var(--tt-bg,#F7F8FA)}';
|
||||
function href(u) { return u + (location.search || '') + (location.hash || ''); }
|
||||
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||||
function render(el, list, opt) {
|
||||
if (!el) return;
|
||||
opt = opt || {};
|
||||
if (!document.getElementById('tt-css')) { var s = document.createElement('style'); s.id = 'tt-css'; s.textContent = css; document.head.appendChild(s); }
|
||||
var wk = +opt.wk || 0, html = '';
|
||||
list.forEach(function (x) {
|
||||
var t = T[x.id]; if (!t) return;
|
||||
var lock = t.gate && wk && wk < t.gate;
|
||||
html += '<a class="tt-it" href="' + esc(href(t.u)) + '"><span class="tt-ic"><img src="' + esc(t.l) + '" alt=""></span>' +
|
||||
'<span class="tt-tx"><span class="tt-n">' + esc(t.n) + (lock ? '<span class="tt-tag">孕' + t.gate + '周开放</span>' : (x.tag ? '<span class="tt-tag">' + esc(x.tag) + '</span>' : '')) + '</span>' +
|
||||
'<span class="tt-w">' + esc(x.why) + '</span></span><span class="tt-go">' + esc(x.btn || '去用') + '</span></a>';
|
||||
});
|
||||
el.classList.add('tt-wrap');
|
||||
if (opt.color) el.style.setProperty('--tt-c', opt.color);
|
||||
if (opt.bg) el.style.setProperty('--tt-bg', opt.bg);
|
||||
el.innerHTML = '<div class="tt-h"><b>' + esc(opt.title || '用得上的工具') + '</b><span>' + esc(opt.sub || '都在兜爸心选，免费用') + '</span></div><div class="tt-list">' + html + '</div>';
|
||||
}
|
||||
window.TopicTools = { render: render, list: T, href: href };
|
||||
})();
|
||||
@@ -6,17 +6,19 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>叶酸、DHA、铁、钙要不要补？</title>
|
||||
<!-- 孕期专题 · 孕期补剂（孕期首页「其他妈妈也在搜」第 4 条）。
|
||||
2026-10-31 按 /tmp/pl/topic-spec.md v2 重做：清新、简洁、核心明确；主色 #2E7CF6。
|
||||
2026-10-31 v3（/tmp/pl/topic-spec-v3.md）：在 v2 简洁基础上加设计感——渐变 hero、结论卡、描边数字卡、
|
||||
营养素卡片矩阵、按孕周横向条、食补 vs 补剂对照；推荐工具走 ../_shared/tools.js。主色 #2E7CF6。
|
||||
只写营养成分，不写品牌和药品名；百分比只出现在页底来源。
|
||||
自成一页：不引 app.js；返回回 ../../；跳补水补剂走同源 /yunqi-bushui/yindao/，带 search + hash。 -->
|
||||
自成一页：不引 app.js；返回回 ../../；工具跳转由 TopicTools 走同源路径并带 search + hash。 -->
|
||||
<style>
|
||||
:root{--c:#2E7CF6;--cb:#EAF2FF;--h:#1F2329;--t:#4E5969;--s:#86909C;--bg2:#F7F8FA;--ln:#EEF0F3}
|
||||
:root{--c:#2E7CF6;--cb:#EAF2FF;--c4:rgba(46,124,246,.04);--h:#1F2329;--t:#4E5969;--s:#86909C;--bg2:#F7F8FA;--ln:#EEF0F3}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--t);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
img{display:block;max-width:100%}
|
||||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
b{color:var(--h)}
|
||||
.num{font-variant-numeric:tabular-nums;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
|
||||
@@ -27,70 +29,112 @@ b{color:var(--h)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
|
||||
|
||||
/* Hero */
|
||||
.hero{padding:4px 16px 0}
|
||||
.hero img{width:100%;height:180px;object-fit:cover;border-radius:20px;background:var(--cb)}
|
||||
.hero h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.answer{margin-top:14px;padding:13px 14px 13px 16px;border-radius:14px;background:var(--cb);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
/* Hero：浅渐变 + 大圆装饰 + 插画右侧出血 + 结论卡压在插画上 */
|
||||
.top{position:relative;overflow:hidden;margin-top:-48px;padding-top:48px;background:linear-gradient(160deg,var(--cb) 0%,#fff 70%)}
|
||||
.top::before,.top::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
|
||||
.top::before{width:260px;height:260px;right:-90px;top:-70px;background:rgba(46,124,246,.08)}
|
||||
.top::after{width:150px;height:150px;left:-60px;top:250px;background:rgba(46,124,246,.06)}
|
||||
.hero{position:relative;z-index:1;padding:8px 20px 0}
|
||||
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--c)}
|
||||
.hero h1{margin-top:6px;font-size:28px;font-weight:800;line-height:1.32;color:var(--h);letter-spacing:-.3px}
|
||||
.hl{background:linear-gradient(transparent 62%,rgba(46,124,246,.2) 0);padding:0 2px}
|
||||
.hero .sub{margin-top:6px;font-size:13.5px;color:var(--s)}
|
||||
.pic{position:relative;z-index:1;margin:16px -1px 0 22%;height:190px;border-radius:24px 0 0 24px;overflow:hidden;background:var(--cb)}
|
||||
.pic img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
|
||||
.answer{position:relative;z-index:2;margin:-40px 16px 0;padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(46,124,246,.10)}
|
||||
.pill{display:inline-block;font-size:12px;font-weight:600;line-height:22px;padding:0 10px;border-radius:99px;background:var(--cb);color:var(--c)}
|
||||
.answer p{margin-top:8px;font-size:17px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
.answer em{font-style:normal;color:var(--c)}
|
||||
|
||||
/* 区块通用 */
|
||||
.blk{margin:32px 16px 0}
|
||||
.blk h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--h)}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c)}
|
||||
.card{margin-top:12px;background:#fff;border:1px solid var(--ln);border-radius:18px}
|
||||
.blk{margin:40px 16px 0}
|
||||
.blk.tint{padding:22px 16px;border-radius:24px;background:var(--bg2)}
|
||||
.blk.blue{padding:22px 16px;border-radius:24px;background:var(--c4);border:1px solid rgba(46,124,246,.08)}
|
||||
.sh{display:flex;align-items:baseline;gap:8px}
|
||||
.sh .no{font-size:13px;font-weight:800;color:var(--c);letter-spacing:.5px}
|
||||
.sh .en{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:1.2px;color:#C2C8D0}
|
||||
.sh h2{font-size:19px;font-weight:800;line-height:1.4;color:var(--h)}
|
||||
.key{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--c)}
|
||||
|
||||
/* 记住这 3 点 */
|
||||
.three{margin:28px 16px 0;padding:16px;border-radius:18px;background:var(--bg2)}
|
||||
.three h2{font-size:18px;font-weight:700;color:var(--h)}
|
||||
.three ol{list-style:none;margin-top:6px}
|
||||
.three li{display:flex;gap:14px;align-items:flex-start;padding:10px 0}
|
||||
.three li+li{border-top:1px solid var(--ln)}
|
||||
.three .no{flex:none;width:24px;font-size:26px;font-weight:800;line-height:1.1;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.three b{display:block;font-size:16px;line-height:1.45}
|
||||
.three span{display:block;font-size:13px;color:var(--s);line-height:1.6}
|
||||
/* 记住这 3 点：描边数字卡 */
|
||||
.three{margin:36px 16px 0}
|
||||
.three h2{font-size:19px;font-weight:800;color:var(--h)}
|
||||
.nc{display:grid;gap:10px;margin-top:12px}
|
||||
.nc li{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--ln)}
|
||||
.nc .n{flex:none;width:34px;font-size:38px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c);text-align:center}
|
||||
.nc b{display:block;font-size:16px;line-height:1.45}
|
||||
.nc span{display:block;font-size:13px;color:var(--s);line-height:1.55}
|
||||
|
||||
/* 1 对照表 */
|
||||
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.5;table-layout:fixed}
|
||||
.tbl th{padding:10px 8px;text-align:left;font-size:12.5px;font-weight:500;color:var(--s);background:var(--bg2)}
|
||||
.tbl th:first-child{border-top-left-radius:17px}
|
||||
.tbl th:last-child{border-top-right-radius:17px}
|
||||
.tbl td{padding:11px 8px;border-top:1px solid var(--ln);vertical-align:top;color:var(--t)}
|
||||
.tbl td:first-child{font-weight:700;color:var(--h)}
|
||||
.tbl .y{color:var(--c);font-weight:700}
|
||||
.tbl col.c1{width:15%}.tbl col.c2{width:24%}.tbl col.c3{width:26%}
|
||||
.why{margin-top:10px}
|
||||
.why summary{list-style:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--c);cursor:pointer}
|
||||
/* 01 卡片矩阵 */
|
||||
.mx{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
|
||||
.nu{position:relative;padding:14px 13px 13px;border-radius:18px;background:#fff;border:1px solid var(--ln);overflow:hidden}
|
||||
.nu.must{border-color:rgba(46,124,246,.35);box-shadow:0 6px 18px rgba(46,124,246,.10)}
|
||||
.nu-h{display:flex;align-items:center;justify-content:space-between;gap:4px}
|
||||
.nu-h b{font-size:17px;font-weight:800}
|
||||
.vd{font-size:11.5px;font-weight:700;line-height:20px;padding:0 8px;border-radius:99px;background:var(--bg2);color:var(--t);white-space:nowrap}
|
||||
.must .vd{background:var(--c);color:#fff}
|
||||
.nu .lb{display:block;margin-top:10px;font-size:11.5px;color:var(--s);line-height:1.4}
|
||||
.nu .amt{display:block;font-size:22px;font-weight:800;line-height:1.25;color:var(--h);white-space:nowrap}
|
||||
.nu .amt small{font-size:12px;font-weight:600;color:var(--s);margin-left:2px}
|
||||
.must .amt{color:var(--c)}
|
||||
.nu .when{display:flex;align-items:flex-start;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--ln);font-size:12.5px;line-height:1.5;color:var(--t)}
|
||||
.nu .when .ic{width:14px;height:14px;margin-top:3px;color:var(--c)}
|
||||
.why{margin-top:12px}
|
||||
.why summary{list-style:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--c);cursor:pointer}
|
||||
.why summary::-webkit-details-marker{display:none}
|
||||
.why summary .ic{width:16px;height:16px;transition:transform .2s}
|
||||
.why summary .ic{width:16px;height:16px;transition:transform .25s}
|
||||
.why[open] summary .ic{transform:rotate(180deg)}
|
||||
.why p{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--t)}
|
||||
|
||||
/* 2 横向时间轴 */
|
||||
.me{display:none;margin-top:10px;font-size:12.5px;color:var(--c);background:var(--cb);border-radius:99px;padding:4px 12px;width:max-content;max-width:100%}
|
||||
/* 02 按孕周横向条 */
|
||||
.me{display:none;margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--c);background:var(--cb);border-radius:12px;padding:6px 12px}
|
||||
.me.on{display:block}
|
||||
.tl{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
|
||||
.tl::before{content:"";position:absolute;left:12%;right:12%;top:7px;height:2px;background:var(--ln)}
|
||||
.st{position:relative;text-align:center}
|
||||
.st .dot{position:relative;display:block;width:16px;height:16px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid #D5DAE1}
|
||||
.st b{display:block;margin-top:8px;font-size:13.5px;line-height:1.35;white-space:nowrap;letter-spacing:-.2px}
|
||||
.st p{margin-top:4px;padding:8px 6px;border-radius:12px;background:var(--bg2);font-size:12.5px;line-height:1.5;color:var(--t);min-height:62px}
|
||||
.st.hl .dot{border-color:var(--c);background:var(--c);box-shadow:0 0 0 4px var(--cb)}
|
||||
.st.hl b{color:var(--c)}
|
||||
.st.hl p{background:var(--cb);color:var(--h)}
|
||||
.gt{position:relative;margin-top:14px;padding:12px 10px 10px;border-radius:20px;background:#fff;border:1px solid var(--ln)}
|
||||
.gr{display:grid;grid-template-columns:40px repeat(4,1fr);align-items:center;column-gap:0}
|
||||
.gr+.gr{margin-top:10px}
|
||||
.gr.hd{margin-bottom:2px}
|
||||
.gr.hd span{text-align:center;font-size:12px;font-weight:600;color:var(--s);line-height:1.3;white-space:nowrap}
|
||||
.gr .nm{font-size:13px;font-weight:700;color:var(--h)}
|
||||
.bars{grid-column:2/6;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:26px}
|
||||
.bars i{display:flex;align-items:center;justify-content:center;border-radius:8px;font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:var(--c);white-space:nowrap;font-variant-numeric:tabular-nums}
|
||||
.bars i.lt{background:var(--cb);color:var(--c)}
|
||||
.bars i.dash{background:transparent;border:1.5px dashed rgba(46,124,246,.4);color:var(--c);font-weight:600}
|
||||
.bars i.o1{background:rgba(46,124,246,.55)}.bars i.o2{background:rgba(46,124,246,.78)}
|
||||
.s2{grid-column:span 2}
|
||||
.col-hl{position:absolute;top:6px;bottom:6px;border-radius:14px;background:rgba(46,124,246,.07);border:1px solid rgba(46,124,246,.18);pointer-events:none;display:none}
|
||||
.col-hl.on{display:block}
|
||||
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--s)}
|
||||
.legend span{display:inline-flex;align-items:center;gap:5px}
|
||||
.legend i{width:14px;height:8px;border-radius:3px;background:var(--c)}
|
||||
.legend i.lt{background:var(--cb)}
|
||||
.legend i.dash{background:transparent;border:1.5px dashed rgba(46,124,246,.5)}
|
||||
|
||||
/* 3 标签云 */
|
||||
.doc{display:flex;gap:12px;align-items:center;margin-top:12px}
|
||||
.doc img{flex:none;width:76px;height:76px;border-radius:16px;object-fit:cover}
|
||||
.doc p{font-size:14px;color:var(--t);line-height:1.65}
|
||||
/* 03 食补 vs 补剂 */
|
||||
.vs{margin-top:14px;border-radius:20px;background:#fff;border:1px solid var(--ln);overflow:hidden}
|
||||
.vs-h{display:grid;grid-template-columns:40px 1.15fr 1fr;gap:6px;align-items:center;padding:10px 10px 8px;background:var(--bg2)}
|
||||
.vs-h span{display:flex;padding-left:8px;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--h)}
|
||||
.vs-h .ic{width:18px;height:18px;color:var(--c)}
|
||||
.vr{display:grid;grid-template-columns:40px 1.15fr 1fr;gap:6px;align-items:stretch;padding:8px 8px 8px 10px}
|
||||
.vr+.vr{border-top:1px solid var(--ln)}
|
||||
.vr .nm{align-self:center;font-size:13px;font-weight:800;color:var(--h)}
|
||||
.vr .cl{padding:7px 8px;border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--s);background:transparent}
|
||||
.vr .cl.win{background:var(--cb);color:var(--h);font-weight:600}
|
||||
.vr .cl.win::before{content:"";display:inline-block;width:6px;height:6px;margin:0 5px 2px 0;border-radius:50%;background:var(--c);vertical-align:middle}
|
||||
.doc{display:flex;gap:12px;align-items:center;margin-top:18px}
|
||||
.doc img{flex:none;width:64px;height:64px;border-radius:16px;object-fit:cover}
|
||||
.doc b{display:block;font-size:15px;line-height:1.4}
|
||||
.doc span{display:block;font-size:12.5px;color:var(--s);line-height:1.55}
|
||||
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
|
||||
.tags span{font-size:13.5px;line-height:1.4;padding:6px 12px;border-radius:99px;background:var(--bg2);color:var(--h);white-space:nowrap}
|
||||
.tags span{font-size:13px;line-height:1.4;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--ln);color:var(--h);white-space:nowrap}
|
||||
|
||||
/* 自查 */
|
||||
.tool{padding:16px 14px}
|
||||
/* 04 自查 */
|
||||
.tool{margin-top:14px;padding:16px 14px;border-radius:20px;background:#fff;border:1px solid var(--ln)}
|
||||
.q+.q{margin-top:14px}
|
||||
.q-t{font-size:14.5px;font-weight:700;color:var(--h)}
|
||||
.q-t .num{color:var(--c);margin-right:6px}
|
||||
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
|
||||
.opt{padding:6px 13px;border-radius:99px;background:var(--bg2);border:1px solid transparent;font-size:13.5px;line-height:1.5;color:var(--t);white-space:nowrap;transition:all .15s}
|
||||
.opt:active{transform:scale(.97)}
|
||||
.opt.on{background:var(--cb);border-color:var(--c);color:var(--c);font-weight:600}
|
||||
.hint{margin-top:14px;font-size:12.5px;color:var(--s)}
|
||||
.res{display:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--ln)}
|
||||
@@ -105,30 +149,27 @@ b{color:var(--h)}
|
||||
.res li span{display:block;font-size:12.5px;color:var(--s);line-height:1.55}
|
||||
.res-note{margin-top:6px;font-size:12px;color:var(--s)}
|
||||
|
||||
/* 工具入口 */
|
||||
.go{display:flex;gap:12px;align-items:center;padding:14px}
|
||||
.go .gi{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--cb);color:var(--c)}
|
||||
.go .gi .ic{width:22px;height:22px}
|
||||
.go .gt{flex:1;min-width:0}
|
||||
.go b{display:block;font-size:15px;line-height:1.4}
|
||||
.go span{display:block;font-size:12.5px;color:var(--s);line-height:1.5}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;background:var(--c);color:#fff;font-size:15.5px;font-weight:600}
|
||||
.btn .ic{width:18px;height:18px}
|
||||
.go-wrap{padding:0 14px 14px}
|
||||
/* 推荐工具 */
|
||||
#tools{margin:40px 16px 0}
|
||||
#tools.tt-wrap{margin:40px 16px 0}
|
||||
@media (max-width:370px){.blk.tint,.blk.blue{padding:20px 12px}.vr .cl{font-size:12px}}
|
||||
|
||||
/* 来源 */
|
||||
.src{margin:32px 16px 0;border-radius:18px;background:var(--bg2)}
|
||||
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--h);display:flex;align-items:center}
|
||||
.src{margin:28px 16px 0;border-radius:18px;background:var(--bg2)}
|
||||
.src summary{list-style:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--h);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(--s)}
|
||||
.src[open] summary::after{content:"收起"}
|
||||
.src summary .ic{margin-left:auto;width:16px;height:16px;color:var(--s);transition:transform .25s}
|
||||
.src[open] summary .ic{transform:rotate(180deg)}
|
||||
.src ul{list-style:none;padding:0 16px 12px}
|
||||
.src li{padding:8px 0;border-top:1px solid var(--ln);font-size:12.5px;line-height:1.65;color:var(--t)}
|
||||
.foot{margin:14px 20px 0;font-size:12px;color:var(--s);text-align:center;line-height:1.7}
|
||||
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
|
||||
/* 进场 fade-up，子项 60ms 错开 */
|
||||
.fade,.fade .fi{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
|
||||
.fade.in,.fade.in .fi{opacity:1;transform:none}
|
||||
.fade .fi{opacity:0}
|
||||
.nu:active,.nc li:active{transform:scale(.98)}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.fade .fi{opacity:1;transform:none;transition:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -136,8 +177,9 @@ b{color:var(--h)}
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
||||
<symbol id="i-cup" viewBox="0 0 24 24"><path d="M5 8h11v7a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 10h1.5a2.5 2.5 0 0 1 0 5H16M8.5 3.5c0 1.5 1 1.5 1 3M12 3.5c0 1.5 1 1.5 1 3"/></symbol>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
|
||||
<symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3.5 11h17a8.5 8.5 0 0 1-17 0zM9 20h6M8 7.5c.8-1 2-1.5 3-1M13 4c1 .7 1.5 1.8 1.5 3"/></symbol>
|
||||
<symbol id="i-pill" viewBox="0 0 24 24"><rect x="3" y="8.5" width="18" height="7" rx="3.5" transform="rotate(-40 12 12)"/><path d="M10.1 9.7l3.8 4.6"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
@@ -146,84 +188,111 @@ b{color:var(--h)}
|
||||
<span class="t">孕期专题</span>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈妈坐在窗边，桌上有牛奶、绿叶菜和鱼">
|
||||
<h1>叶酸、DHA、铁、钙<br>要不要补？</h1>
|
||||
<div class="answer">叶酸要补；钙、铁、DHA 先靠吃，不够再按医生建议补。</div>
|
||||
</section>
|
||||
<div class="top">
|
||||
<section class="hero">
|
||||
<span class="eyebrow">孕期营养 · 补剂</span>
|
||||
<h1>叶酸、DHA、铁、钙<br><span class="hl">要不要补</span>？</h1>
|
||||
<p class="sub">一张卡看懂：补不补、补多少、从几周开始</p>
|
||||
</section>
|
||||
<div class="pic"><img src="img/hero.webp" alt="孕妈妈坐在窗边，桌上有牛奶、绿叶菜和鱼"></div>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<span class="pill">一句话答案</span>
|
||||
<p><em>叶酸要补</em>；钙、铁、DHA 先靠吃，不够再按医生建议补。</p>
|
||||
</div>
|
||||
|
||||
<section class="three fade">
|
||||
<h2>记住这 3 点</h2>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div><b>叶酸 0.4mg/天</b><span>备孕前 3 个月开始，至少吃到孕 12 周</span></div></li>
|
||||
<li><span class="no">2</span><div><b>钙铁错开 2 小时</b><span>一起吃会抢吸收，比如铁早上、钙睡前</span></div></li>
|
||||
<li><span class="no">3</span><div><b>补剂不是越多越好</b><span>复合维生素和单补别叠加，先算总量</span></div></li>
|
||||
<ol class="nc">
|
||||
<li class="fi"><span class="n num">1</span><div><b>叶酸 0.4mg/天</b><span>备孕前 3 个月开始，至少吃到孕 12 周</span></div></li>
|
||||
<li class="fi"><span class="n num">2</span><div><b>钙铁错开 2 小时</b><span>一起吃会抢吸收，比如铁早上、钙睡前</span></div></li>
|
||||
<li class="fi"><span class="n num">3</span><div><b>补剂不是越多越好</b><span>复合维生素和单补别叠加，先算总量</span></div></li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- 1 四种营养一张表 -->
|
||||
<section class="blk fade" id="s1">
|
||||
<h2>四种营养一张表</h2>
|
||||
<!-- 01 卡片矩阵 -->
|
||||
<section class="blk tint fade" id="s1">
|
||||
<div class="sh"><span class="no num">01</span><h2>四种营养，一眼看懂</h2><span class="en">AT A GLANCE</span></div>
|
||||
<p class="key">只有叶酸人人要补，其余三样先吃够。</p>
|
||||
<div class="card">
|
||||
<table class="tbl">
|
||||
<colgroup><col class="c1"><col class="c2"><col class="c3"><col></colgroup>
|
||||
<thead><tr><th>营养</th><th>要不要补</th><th>每天多少</th><th>先吃什么</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>叶酸</td><td class="y">要补</td><td>0.4mg</td><td>深绿叶菜、豆类</td></tr>
|
||||
<tr><td>钙</td><td>先食补</td><td>孕中晚期约 1000mg</td><td>奶、酸奶、豆腐</td></tr>
|
||||
<tr><td>铁</td><td>先食补，贫血听医生</td><td>20~29mg，越往后越多</td><td>红肉、动物血，配维 C 果蔬</td></tr>
|
||||
<tr><td>DHA</td><td>常吃鱼就不用</td><td>约 200mg</td><td>低汞鱼，每周 2~3 次</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="mx">
|
||||
<div class="nu must fi">
|
||||
<div class="nu-h"><b>叶酸</b><span class="vd">要补</span></div>
|
||||
<span class="lb">每天</span><span class="amt num">0.4<small>mg</small></span>
|
||||
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>孕前 3 个月起 → 至少孕 12 周</span></div>
|
||||
</div>
|
||||
<div class="nu fi">
|
||||
<div class="nu-h"><b>钙</b><span class="vd">先食补</span></div>
|
||||
<span class="lb">每天（孕中晚期）</span><span class="amt num">1000<small>mg</small></span>
|
||||
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>孕中期起要加量</span></div>
|
||||
</div>
|
||||
<div class="nu fi">
|
||||
<div class="nu-h"><b>铁</b><span class="vd">先食补</span></div>
|
||||
<span class="lb">每天</span><span class="amt num">20→29<small>mg</small></span>
|
||||
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>越往后越多，贫血听医生</span></div>
|
||||
</div>
|
||||
<div class="nu fi">
|
||||
<div class="nu-h"><b>DHA</b><span class="vd">吃鱼就够</span></div>
|
||||
<span class="lb">每天</span><span class="amt num">200<small>mg</small></span>
|
||||
<div class="when"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg><span>孕中期到哺乳期</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<details class="why">
|
||||
<summary>为什么？<svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<p>宝宝神经管在怀孕 3~4 周就闭合，那时很多人还不知道怀孕，而食物里的叶酸怕热易流失，所以要提前补。钙、铁、DHA 从奶、红肉、鱼里吃更全面；植物里的铁吸收差，鲨鱼、旗鱼等大型鱼汞高要少吃。</p>
|
||||
<summary>为什么叶酸要提前补？<svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<p>宝宝神经管在怀孕 3~4 周就闭合，那时很多人还不知道怀孕；食物里的叶酸怕热、易流失，光靠吃不够，所以要提前补。</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- 2 按孕周怎么补 -->
|
||||
<!-- 02 按孕周横向条 -->
|
||||
<section class="blk fade" id="s2">
|
||||
<h2>按孕周怎么补</h2>
|
||||
<div class="sh"><span class="no num">02</span><h2>按孕周怎么补</h2><span class="en">TIMELINE</span></div>
|
||||
<p class="key">早期抓叶酸，中期起加上钙、铁、DHA。</p>
|
||||
<div class="me" id="me"></div>
|
||||
<div class="tl">
|
||||
<div class="st" id="stPre"><span class="dot"></span><b>备孕</b><p>开始每天 0.4mg 叶酸</p></div>
|
||||
<div class="st" id="stE"><span class="dot"></span><b>孕早期</b><p>叶酸别断，孕吐别硬吃</p></div>
|
||||
<div class="st" id="stM"><span class="dot"></span><b>孕中期</b><p>奶加量，常吃鱼和红肉</p></div>
|
||||
<div class="st" id="stL"><span class="dot"></span><b>孕晚期·哺乳</b><p>铁需要最多，奶和鱼别断</p></div>
|
||||
<div class="gt" id="gt">
|
||||
<div class="col-hl" id="colHl"></div>
|
||||
<div class="gr hd"><span></span><span data-c="0">备孕</span><span data-c="1">孕早期</span><span data-c="2">孕中期</span><span data-c="3">孕晚·哺乳</span></div>
|
||||
<div class="gr fi"><span class="nm">叶酸</span><div class="bars"><i class="s2">0.4mg</i><i class="dash s2">按医嘱</i></div></div>
|
||||
<div class="gr fi"><span class="nm">钙</span><div class="bars"><i class="lt s2">800mg</i><i class="s2">1000mg</i></div></div>
|
||||
<div class="gr fi"><span class="nm">铁</span><div class="bars"><i class="lt num">18</i><i class="lt num">20</i><i class="o1 num">24</i><i class="o2 num">29mg</i></div></div>
|
||||
<div class="gr fi"><span class="nm">DHA</span><div class="bars"><i class="lt s2">吃鱼即可</i><i class="s2">200mg</i></div></div>
|
||||
</div>
|
||||
<div class="legend"><span><i></i>重点</span><span><i class="lt"></i>日常吃够</span><span><i class="dash"></i>听医生</span></div>
|
||||
</section>
|
||||
|
||||
<!-- 3 这些情况先问医生 -->
|
||||
<section class="blk fade" id="s3">
|
||||
<h2>这些情况先问医生</h2>
|
||||
<p class="key">符合任一条，补什么、补多少听医生的。</p>
|
||||
<!-- 03 食补 vs 补剂 -->
|
||||
<section class="blk tint fade" id="s3">
|
||||
<div class="sh"><span class="no num">03</span><h2>靠吃，还是吃补剂？</h2><span class="en">FOOD VS PILL</span></div>
|
||||
<p class="key">蓝底那一栏，就是更推荐的方式。</p>
|
||||
<div class="vs">
|
||||
<div class="vs-h"><span></span><span><svg class="ic"><use href="#i-bowl" xlink:href="#i-bowl"/></svg>靠吃</span><span><svg class="ic"><use href="#i-pill" xlink:href="#i-pill"/></svg>补剂</span></div>
|
||||
<div class="vr fi"><span class="nm">叶酸</span><span class="cl">深绿叶菜、豆类，怕热易流失</span><span class="cl win">必须补，每天 0.4mg</span></div>
|
||||
<div class="vr fi"><span class="nm">钙</span><span class="cl win">奶 300~500ml + 豆腐</span><span class="cl">不喝奶时问医生</span></div>
|
||||
<div class="vr fi"><span class="nm">铁</span><span class="cl win">红肉、动物血 + 维 C 果蔬</span><span class="cl">查出贫血按医嘱</span></div>
|
||||
<div class="vr fi"><span class="nm">DHA</span><span class="cl win">低汞鱼每周 2~3 次</span><span class="cl">不吃鱼时问医生</span></div>
|
||||
</div>
|
||||
<div class="doc">
|
||||
<img src="img/doctor.webp" alt="孕妈妈和医生面对面交谈" loading="lazy">
|
||||
<p>上面的量只适合一般情况。下面这些人需要量不同，产检时带着问。</p>
|
||||
<div><b>这些情况，补多少听医生的</b><span>上面的量只适合一般情况，产检时带着问。</span></div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span>贫血</span><span>甲状腺问题</span><span>素食 / 不吃鱼</span><span>双胎 / 多胎</span><span>生过神经管缺陷宝宝</span><span>糖尿病</span><span>长期用药</span><span>在吃复合维生素</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 我的补剂自查 -->
|
||||
<!-- 04 我的补剂自查 -->
|
||||
<section class="blk fade" id="s4">
|
||||
<h2>我的补剂自查</h2>
|
||||
<div class="sh"><span class="no num">04</span><h2>我的补剂自查</h2><span class="en">SELF CHECK</span></div>
|
||||
<p class="key">选 3 个问题，看看该注意什么。</p>
|
||||
<div class="card tool" id="tool">
|
||||
<div class="tool" id="tool">
|
||||
<div class="q" data-q="stage">
|
||||
<div class="q-t">我现在处于</div>
|
||||
<div class="q-t"><span class="num">Q1</span>我现在处于</div>
|
||||
<div class="opts"><button class="opt" data-v="pre">备孕</button><button class="opt" data-v="e">孕早期</button><button class="opt" data-v="m">孕中期</button><button class="opt" data-v="l">孕晚期</button><button class="opt" data-v="b">哺乳期</button></div>
|
||||
</div>
|
||||
<div class="q" data-q="milk">
|
||||
<div class="q-t">每天喝奶（或酸奶）吗</div>
|
||||
<div class="q-t"><span class="num">Q2</span>每天喝奶（或酸奶）吗</div>
|
||||
<div class="opts"><button class="opt" data-v="2">每天 1~2 杯</button><button class="opt" data-v="1">偶尔喝</button><button class="opt" data-v="0">基本不喝</button></div>
|
||||
</div>
|
||||
<div class="q" data-q="fish">
|
||||
<div class="q-t">每周吃鱼虾几次</div>
|
||||
<div class="q-t"><span class="num">Q3</span>每周吃鱼虾几次</div>
|
||||
<div class="opts"><button class="opt" data-v="2">2 次以上</button><button class="opt" data-v="1">1 次左右</button><button class="opt" data-v="0">几乎不吃</button></div>
|
||||
</div>
|
||||
<p class="hint" id="hint">3 题选完自动出结果，只在本机计算</p>
|
||||
@@ -235,30 +304,23 @@ b{color:var(--h)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 工具入口 -->
|
||||
<section class="blk fade">
|
||||
<div class="card">
|
||||
<div class="go">
|
||||
<span class="gi"><svg class="ic"><use href="#i-cup" xlink:href="#i-cup"/></svg></span>
|
||||
<div class="gt"><b>补水补剂打卡</b><span>每天吃了没记一笔，不漏吃也不重复</span></div>
|
||||
</div>
|
||||
<div class="go-wrap"><button class="btn" id="goBushui">去记录<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 推荐工具（共用组件，含原「补水补剂打卡」入口） -->
|
||||
<div id="tools" class="fade"></div>
|
||||
|
||||
<details class="src">
|
||||
<summary>参考来源</summary>
|
||||
<summary>参考来源<svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<ul>
|
||||
<li>《围受孕期增补叶酸预防神经管缺陷指南（2017）》：无高危因素者从孕前至少 3 个月起每天增补 0.4mg 或 0.8mg 叶酸至孕满 3 个月；高危者由医生定剂量。研究汇总显示可使神经管缺陷风险降低约 50%~70%</li>
|
||||
<li>《中国居民膳食指南（2022）》备孕和孕期妇女膳食指南；《中国居民膳食营养素参考摄入量》：孕早、中、晚期铁约 20、24、29mg/天，孕中晚期钙约 1000mg/天；孕期和哺乳期 DHA 约 200mg/天</li>
|
||||
<li>《中国居民膳食指南（2022）》备孕和孕期妇女膳食指南；《中国居民膳食营养素参考摄入量》：成年女性铁约 18mg/天，孕早、中、晚期约 20、24、29mg/天；成年女性及孕早期钙约 800mg/天、孕中晚期约 1000mg/天；孕期和哺乳期 DHA 约 200mg/天</li>
|
||||
<li>中华医学会围产医学分会《妊娠期铁缺乏和缺铁性贫血诊治指南》</li>
|
||||
<li>WHO《孕期保健建议：积极的妊娠体验》（2016）</li>
|
||||
<li>钙会影响非血红素铁吸收，同时补充建议分开服用；孕期食鱼宜选低汞鱼</li>
|
||||
<li>钙会影响非血红素铁吸收，同时补充建议分开服用；孕期食鱼宜选低汞鱼，少吃鲨鱼、旗鱼等大型鱼</li>
|
||||
</ul>
|
||||
</details>
|
||||
<p class="foot">本页为科普参考，不能代替医生诊断。</p>
|
||||
</div>
|
||||
|
||||
<script src="../_shared/tools.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -283,8 +345,17 @@ b{color:var(--h)}
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
/* 补水补剂记录：同源相对路径，带身份 */
|
||||
$('#goBushui').addEventListener('click', function () { location.href = '/yunqi-bushui/yindao/' + location.search + location.hash; });
|
||||
/* ---------- 推荐工具（原补水补剂入口已并入） ---------- */
|
||||
function renderTools(wk) {
|
||||
if (!window.TopicTools) return;
|
||||
var el = $('#tools'); el.className = 'fade in';
|
||||
TopicTools.render(el, [
|
||||
{ id: 'bushui', why: '每天打卡，叶酸钙铁不漏服', btn: '去打卡' },
|
||||
{ id: 'yunqinengbuchi', why: '食补前先查这样东西能不能吃', btn: '去查' },
|
||||
{ id: 'chanjianrili', why: '按产检查血结果调整补剂', btn: '去看' }
|
||||
], { title: '补剂用得上的工具', color: '#2E7CF6', bg: '#EAF2FF', wk: wk || 0 });
|
||||
}
|
||||
renderTools(0);
|
||||
|
||||
/* ---------- 我的补剂自查：3 题，最多 3 条建议 ---------- */
|
||||
var ans = { stage: '', milk: '', fish: '' };
|
||||
@@ -336,10 +407,23 @@ b{color:var(--h)}
|
||||
$('#res').classList.add('on');
|
||||
}
|
||||
|
||||
/* 按孕周点亮时间轴，并预选自查的阶段 */
|
||||
function mark(stage, txt, v) {
|
||||
var el = document.getElementById(stage); if (el) el.classList.add('hl');
|
||||
var me = $('#me'); me.textContent = txt; me.classList.add('on');
|
||||
/* ---------- 按孕周点亮横向条的那一列，并预选自查阶段 ---------- */
|
||||
var TIP = ['开始每天 0.4mg 叶酸', '叶酸别断，孕吐别硬吃', '奶加量，常吃鱼和红肉', '铁需要最多，奶和鱼别断'];
|
||||
var hlCol = -1;
|
||||
function placeCol() {
|
||||
if (hlCol < 0) return;
|
||||
var h = $('.gr.hd [data-c="' + hlCol + '"]'), gt = $('#gt'), box = $('#colHl');
|
||||
if (!h) return;
|
||||
var a = h.getBoundingClientRect(), g = gt.getBoundingClientRect();
|
||||
box.style.left = (a.left - g.left - 1) + 'px';
|
||||
box.style.width = (a.width + 2) + 'px';
|
||||
box.classList.add('on');
|
||||
$$('.gr.hd span').forEach(function (s) { s.style.color = s === h ? '#2E7CF6' : ''; });
|
||||
}
|
||||
window.addEventListener('resize', placeCol);
|
||||
function mark(col, txt, v) {
|
||||
hlCol = col; placeCol();
|
||||
var me = $('#me'); me.textContent = txt + '：' + TIP[col]; me.classList.add('on');
|
||||
if (v && !ans.stage) pick('stage', v);
|
||||
}
|
||||
if (openid) {
|
||||
@@ -347,17 +431,19 @@ b{color:var(--h)}
|
||||
.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('stL', '宝宝出生了 · 你在哺乳期', 'b');
|
||||
if (p.postpartum) mark(3, '宝宝出生了 · 你在哺乳期', 'b');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w >= 28) mark('stL', '你在孕 ' + w + ' 周 · 孕晚期', 'l');
|
||||
else if (w >= 13) mark('stM', '你在孕 ' + w + ' 周 · 孕中期', 'm');
|
||||
else mark('stE', '你在孕 ' + w + ' 周 · 孕早期', 'e');
|
||||
if (w >= 28) mark(3, '你在孕 ' + w + ' 周 · 孕晚期', 'l');
|
||||
else if (w >= 13) mark(2, '你在孕 ' + w + ' 周 · 孕中期', 'm');
|
||||
else mark(1, '你在孕 ' + w + ' 周 · 孕早期', 'e');
|
||||
renderTools(w);
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* 进场动画（轻） */
|
||||
/* 进场 fade-up：区块整体淡入，内部 .fi 按顺序 60ms 错开 */
|
||||
$$('.fade').forEach(function (el) { $$('.fi', el).forEach(function (c, i) { c.style.transitionDelay = (i * 60 + 80) + 'ms'; }); });
|
||||
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: .08 });
|
||||
$$('.fade').forEach(function (el) { io.observe(el); });
|
||||
|
||||
@@ -6,12 +6,14 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>测一测你是什么样的妈妈？</title>
|
||||
<!-- 孕期专题 · 趣味测试（孕期首页「其他妈妈也在搜」第 2 条入口）。
|
||||
2026-10-31 按《孕期专题页统一设计规范 v2》重做：主色 #7C5CFC、白底、单色线性图标、16 道题。
|
||||
一页三屏：开始 / 答题（一题一屏）/ 结果；结果存 localStorage「mmbox.ceshi.v2」（题目已换，不复用 v1）。
|
||||
插画复用 img/*.webp。自成一页：不引 app.js；返回走 history 或相对路径 ../../，跳工具走 /<slug>/ 并带 search + hash。
|
||||
纯娱乐，不采集、不上报答题数据。 -->
|
||||
2026-10-31 v3：按《孕期专题页设计规范 v3》重做成「妈妈类型卡」——主色 #7C5CFC、浅底 #F1EDFF。
|
||||
一页三屏：开始 / 答题（一题一屏，左右滑动）/ 结果（类型卡 + 雷达 + 结合作答的解读 + 按类型推荐工具 + 保存结果卡）。
|
||||
结果存 localStorage「mmbox.ceshi.v3」（含每题作答，刷新后解读可复现；题目已重写，不复用 v2）。
|
||||
插画复用 img/*.webp（hero + 4 种类型同一画风）。自成一页：不引 app.js；返回走 history 或相对路径 ../../，
|
||||
推荐工具走 ../_shared/tools.js（同源 /<slug>/，带 search + hash）。
|
||||
纯娱乐，不采集、不上报答题数据。「已有 N 位妈妈测过」没有真实数据源，按 AGENTS.md 第 2/12 条不造数字：TESTED_COUNT=0 时不显示。 -->
|
||||
<style>
|
||||
:root{--c:#7C5CFC;--cbg:#F1EDFF;--ink:#1F2329;--txt:#4E5969;--sub:#86909C;--line:#EEF0F3;--soft:#F7F8FA}
|
||||
:root{--c:#7C5CFC;--cbg:#F1EDFF;--c06:rgba(124,92,252,.06);--c10:rgba(124,92,252,.10);--c20:rgba(124,92,252,.20);--ink:#1F2329;--txt:#4E5969;--sub:#86909C;--line:#EEF0F3;--soft:#F7F8FA}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--txt);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
|
||||
@@ -19,111 +21,191 @@ img{display:block;max-width:100%}
|
||||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
[hidden]{display:none !important}
|
||||
.num{font-variant-numeric:tabular-nums}
|
||||
mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padding:0 1px}
|
||||
|
||||
/* 顶栏 */
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:#fff;border-bottom:1px solid transparent;transition:border-color .2s}
|
||||
.bar.sh{border-bottom-color:var(--line)}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:transparent;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.sh{background:#fff;border-bottom-color:var(--line)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--ink)}
|
||||
|
||||
/* 三屏 */
|
||||
.view{display:none;padding:0 20px}
|
||||
.view{display:none}
|
||||
.view.on{display:block;animation:vin .35s ease both}
|
||||
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||||
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
||||
.wrap{padding:0 20px}
|
||||
|
||||
.pic{width:100%;height:200px;object-fit:cover;object-position:center 40%;border-radius:20px;background:var(--soft)}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;font-size:16px;font-weight:700}
|
||||
.btn.pri{background:var(--c);color:#fff}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;font-size:16px;font-weight:700;transition:transform .15s,opacity .15s}
|
||||
.btn.pri{background:var(--c);color:#fff;box-shadow:0 6px 16px rgba(124,92,252,.28)}
|
||||
.btn.sec{background:#fff;color:var(--c);border:1px solid var(--c)}
|
||||
.btn:active{opacity:.85}
|
||||
.btn:active,.tap:active{transform:scale(.98)}
|
||||
|
||||
/* 开始 */
|
||||
#vStart{padding-top:12px;text-align:center}
|
||||
#vStart h1{margin-top:22px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
#vStart .meta{margin-top:10px;font-size:14px;color:var(--sub)}
|
||||
#vStart .meta b{color:var(--c);font-weight:700}
|
||||
#vStart .btn{margin-top:28px}
|
||||
#vStart .note{margin-top:12px;font-size:12.5px;color:var(--sub)}
|
||||
/* 区块标题：小号序号 + 标题 */
|
||||
.sh2{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
|
||||
.sh2 i{font-style:normal;font-size:13px;font-weight:800;color:var(--c);letter-spacing:.5px}
|
||||
.sh2 b{font-size:18px;font-weight:800;color:var(--ink);line-height:1.4}
|
||||
.sh2 span{margin-left:auto;font-size:12.5px;color:var(--sub)}
|
||||
|
||||
/* 答题 */
|
||||
#vQuiz{padding-top:8px}
|
||||
.qtop{display:flex;align-items:center;justify-content:space-between;height:32px}
|
||||
.qtop .no{font-size:13px;color:var(--sub)}
|
||||
.qtop .no b{font-size:15px;color:var(--c);font-weight:700}
|
||||
.qtop button{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;color:var(--sub);padding:4px 0 4px 8px}
|
||||
/* ---------- ① 开始 ---------- */
|
||||
#vStart{margin-top:-48px}
|
||||
.hero{position:relative;overflow:hidden;min-height:430px;padding:72px 20px 0;background:linear-gradient(160deg,var(--cbg) 0%,#fff 72%)}
|
||||
.hero .o1,.hero .o2{position:absolute;border-radius:50%;background:var(--c10);pointer-events:none}
|
||||
.hero .o1{width:260px;height:260px;right:-90px;top:-70px}
|
||||
.hero .o2{width:150px;height:150px;left:-60px;bottom:40px;background:var(--c06)}
|
||||
.hero .eb{position:relative;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:99px;background:#fff;color:var(--c);font-size:12.5px;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 8px var(--c10)}
|
||||
.hero h1{position:relative;margin-top:16px;font-size:30px;font-weight:800;line-height:1.32;color:var(--ink);letter-spacing:.5px}
|
||||
.hero .meta{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:18px;width:150px}
|
||||
.hero .meta span{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--txt);line-height:1.4}
|
||||
.hero .meta .ic{width:18px;height:18px;color:var(--c)}
|
||||
.hero .meta b{color:var(--ink);font-weight:800}
|
||||
.hero .pic{position:absolute;right:-18px;bottom:0;width:min(228px,calc(100vw - 162px));height:min(228px,calc(100vw - 162px));object-fit:cover;object-position:center 30%;border-radius:28px 0 0 0;box-shadow:0 8px 24px var(--c10)}
|
||||
.types{margin-top:28px}
|
||||
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||||
.tcard{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:var(--soft)}
|
||||
.tcard img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 22%;border:2px solid #fff;box-shadow:0 2px 8px var(--c10)}
|
||||
.tcard b{display:block;font-size:14.5px;color:var(--ink);line-height:1.35}
|
||||
.tcard small{display:block;font-size:12px;color:var(--sub);line-height:1.4}
|
||||
.startbox{margin-top:28px;text-align:center}
|
||||
.startbox .note{margin-top:10px;font-size:12.5px;color:var(--sub)}
|
||||
|
||||
/* ---------- ② 答题 ---------- */
|
||||
#vQuiz{padding-top:4px}
|
||||
.qtop{display:flex;align-items:center;justify-content:space-between;height:34px}
|
||||
.qtop button{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;color:var(--sub);padding:4px 8px 4px 0}
|
||||
.qtop button .ic{width:16px;height:16px}
|
||||
.qtop button:disabled{visibility:hidden}
|
||||
.track{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
|
||||
.track i{display:block;height:100%;width:0;border-radius:4px;background:var(--c);transition:width .35s ease}
|
||||
.qbody{margin-top:28px;transition:opacity .2s ease,transform .2s ease}
|
||||
.qbody.out{opacity:0;transform:translateY(-8px)}
|
||||
.qbody.pre{opacity:0;transform:translateY(8px);transition:none}
|
||||
.qbody h2{font-size:22px;font-weight:700;line-height:1.45;color:var(--ink);min-height:64px}
|
||||
.opts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
|
||||
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:left;font-size:16px;line-height:1.45;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
|
||||
.opt .l{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--sub);font-size:13px;font-weight:700;transition:background .2s,color .2s}
|
||||
.opt.sel{border-color:var(--c);background:var(--cbg);color:var(--c);font-weight:600}
|
||||
.qtop .no{font-size:13px;color:var(--sub)}
|
||||
.qtop .no b{font-size:18px;color:var(--c);font-weight:800}
|
||||
.feet{display:flex;justify-content:space-between;align-items:center;height:30px;margin-top:4px;padding:0 2px}
|
||||
.feet svg{width:15px;height:15px;fill:#E4DDFD;transition:fill .3s,transform .3s}
|
||||
.feet svg:nth-child(odd){transform:translateY(-4px) rotate(-12deg)}
|
||||
.feet svg:nth-child(even){transform:translateY(4px) rotate(12deg) scaleX(-1)}
|
||||
.feet svg.done{fill:var(--c)}
|
||||
.feet svg.cur{fill:var(--c)}
|
||||
.feet svg.cur:nth-child(odd){transform:translateY(-4px) rotate(-12deg) scale(1.35)}
|
||||
.feet svg.cur:nth-child(even){transform:translateY(4px) rotate(12deg) scaleX(-1) scale(1.35)}
|
||||
.stage{margin-top:14px;transition:opacity .22s ease,transform .22s ease}
|
||||
.stage.outL{opacity:0;transform:translateX(-36px)}
|
||||
.stage.outR{opacity:0;transform:translateX(36px)}
|
||||
.stage.inR{opacity:0;transform:translateX(36px);transition:none}
|
||||
.stage.inL{opacity:0;transform:translateX(-36px);transition:none}
|
||||
.qcard{position:relative;overflow:hidden;padding:20px 20px 18px;border-radius:24px;background:linear-gradient(160deg,var(--cbg),#fff 78%);box-shadow:0 8px 24px var(--c10)}
|
||||
.qcard:after{content:"";position:absolute;width:120px;height:120px;right:-40px;top:-40px;border-radius:50%;background:var(--c10)}
|
||||
.qcard .hd{position:relative;display:flex;align-items:center;justify-content:space-between}
|
||||
.qcard .qi{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 4px 12px var(--c10)}
|
||||
.qcard .qi .ic{width:30px;height:30px;stroke-width:1.6}
|
||||
.qcard .cat{position:relative;z-index:1;height:24px;padding:0 10px;border-radius:99px;background:#fff;color:var(--c);font-size:12px;font-weight:700;line-height:24px}
|
||||
.qcard h2{position:relative;margin-top:16px;font-size:21px;font-weight:800;line-height:1.45;color:var(--ink);min-height:61px;text-wrap:balance}
|
||||
.opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
|
||||
.opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:11px 46px 11px 14px;border-radius:18px;background:#fff;border:1.5px solid var(--line);text-align:left;font-size:15.5px;line-height:1.45;color:var(--ink);transition:border-color .2s,background .2s,transform .15s}
|
||||
.opt:active{transform:scale(.98)}
|
||||
.opt .l{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--sub);font-size:13px;font-weight:800;transition:background .2s,color .2s}
|
||||
.opt .ck{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
|
||||
.opt .ck .ic{width:14px;height:14px;stroke-width:2.6}
|
||||
.opt.sel{border-color:var(--c);background:#FBFAFF;font-weight:600}
|
||||
.opt.sel .l{background:var(--c);color:#fff}
|
||||
.qtip{margin-top:18px;text-align:center;font-size:12.5px;color:var(--sub)}
|
||||
.opt.sel .ck{transform:scale(1)}
|
||||
.qtip{margin-top:16px;text-align:center;font-size:12.5px;color:var(--sub)}
|
||||
|
||||
/* 结果 */
|
||||
#vResult{padding-top:12px}
|
||||
.rhead{position:relative;text-align:center}
|
||||
.rhead .last{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);border-radius:99px;padding:0 10px;font-size:12px;line-height:24px;color:var(--sub);display:none}
|
||||
.rhead .last.on{display:block}
|
||||
.rhead .you{margin-top:18px;font-size:14px;color:var(--sub)}
|
||||
.rhead h1{margin-top:2px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
.rhead h1 em{font-style:normal;color:var(--c)}
|
||||
.rhead p{margin-top:6px;font-size:15px;color:var(--txt)}
|
||||
.blk{margin-top:24px}
|
||||
.blk h2{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.4}
|
||||
.blk h2 .ic{color:var(--c)}
|
||||
.tags{display:flex;gap:8px;margin-top:12px}
|
||||
.tags span{flex:1;text-align:center;padding:8px 4px;border-radius:12px;background:var(--cbg);color:var(--c);font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap}
|
||||
.tip{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.7}
|
||||
.dist{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:10px}
|
||||
.dr{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--txt)}
|
||||
.dr .n{flex:none;width:68px;white-space:nowrap}
|
||||
.dr .tr{flex:1;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
|
||||
.dr .tr i{display:block;height:100%;width:0;border-radius:6px;background:#D6CCFE;transition:width .8s cubic-bezier(.3,.7,.2,1)}
|
||||
.dr .p{flex:none;width:36px;text-align:right;color:var(--sub)}
|
||||
.dr.me .n{color:var(--c);font-weight:700}
|
||||
/* ---------- ③ 结果 ---------- */
|
||||
#vResult{padding-top:6px}
|
||||
.rcard{position:relative;overflow:hidden;padding:22px 20px 18px;border-radius:28px;background:linear-gradient(170deg,#E9E2FF 0%,#F6F3FF 44%,#fff 100%);box-shadow:0 8px 24px var(--c10);text-align:center}
|
||||
.rcard .o1,.rcard .o2{position:absolute;border-radius:50%;pointer-events:none}
|
||||
.rcard .o1{width:220px;height:220px;right:-80px;top:-60px;background:rgba(255,255,255,.55)}
|
||||
.rcard .o2{width:140px;height:140px;left:-50px;top:150px;background:var(--c06)}
|
||||
.rcard .top{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:24px}
|
||||
.rcard .top b{padding:0 10px;border-radius:99px;background:#fff;color:var(--c);font-weight:700}
|
||||
.rcard .top span{color:var(--sub)}
|
||||
.rcard .ava{position:relative;width:172px;height:172px;margin:14px auto 0;border-radius:32px;overflow:hidden;border:5px solid #fff;box-shadow:0 8px 24px var(--c10)}
|
||||
.rcard .ava img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
|
||||
.rcard .you{position:relative;margin-top:14px;font-size:13px;color:var(--sub);letter-spacing:2px}
|
||||
.rcard h1{position:relative;font-size:28px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
.rcard .slo{position:relative;margin-top:6px;font-size:14.5px;color:var(--txt);line-height:1.6}
|
||||
.rtags{position:relative;display:flex;justify-content:center;gap:8px;margin-top:14px}
|
||||
.rtags span{height:30px;padding:0 12px;border-radius:99px;background:#fff;color:var(--c);font-size:13.5px;font-weight:700;line-height:30px;white-space:nowrap;box-shadow:0 2px 8px var(--c10)}
|
||||
.dims{position:relative;display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 14px 14px 8px;border-radius:20px;background:rgba(255,255,255,.85);text-align:left}
|
||||
.dims svg{flex:none;width:146px;height:128px}
|
||||
.dl{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
|
||||
.dr{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:3px;font-size:12.5px;color:var(--txt);line-height:1.3}
|
||||
.dr .p{font-weight:700;color:var(--ink)}
|
||||
.dr .tr{grid-column:1/3;height:5px;border-radius:5px;background:#EFEAFF;overflow:hidden}
|
||||
.dr .tr i{display:block;height:100%;width:0;border-radius:5px;background:#C7B9FE;transition:width .8s cubic-bezier(.3,.7,.2,1)}
|
||||
.dr.me{color:var(--c);font-weight:700}
|
||||
.dr.me .p{color:var(--c)}
|
||||
.dr.me .tr i{background:var(--c)}
|
||||
.dr.me .p{color:var(--c);font-weight:700}
|
||||
.tool{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;gap:12px}
|
||||
.tool .ti{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--cbg);color:var(--c)}
|
||||
.tool .ti .ic{width:22px;height:22px}
|
||||
.tool .tx{flex:1;min-width:0}
|
||||
.tool small{display:block;font-size:12.5px;color:var(--sub);line-height:1.5}
|
||||
.tool b{display:block;font-size:16px;color:var(--ink);line-height:1.4}
|
||||
.tool .go{flex:none;height:34px;padding:0 16px;border-radius:99px;background:var(--c);color:#fff;font-size:14px;font-weight:600}
|
||||
.acts{display:flex;gap:10px;margin-top:20px}
|
||||
.acts .btn{flex:1;font-size:15px}
|
||||
.rcard .brand{position:relative;margin-top:14px;font-size:11.5px;color:var(--sub);letter-spacing:.5px}
|
||||
|
||||
.racts{display:flex;gap:10px;margin-top:16px}
|
||||
.racts .btn{flex:1;font-size:15px}
|
||||
.blk{margin-top:36px}
|
||||
.read{padding:18px;border-radius:24px;background:var(--soft)}
|
||||
.read p{font-size:15px;line-height:1.8;color:var(--txt)}
|
||||
.read p+p{margin-top:10px}
|
||||
.read b{color:var(--ink)}
|
||||
.read q{quotes:"「" "」";color:var(--c);font-weight:700}
|
||||
.tips{display:flex;flex-direction:column;gap:10px}
|
||||
.tp{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.tp .n{flex:none;width:30px;font-size:30px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c);font-variant-numeric:tabular-nums}
|
||||
.tp p{font-size:14.5px;line-height:1.65;color:var(--ink)}
|
||||
.mate{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:linear-gradient(110deg,var(--cbg),#fff 80%)}
|
||||
.mate img{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center 22%;border:3px solid #fff;box-shadow:0 4px 12px var(--c10)}
|
||||
.mate small{display:block;font-size:12px;color:var(--sub);line-height:1.5}
|
||||
.mate b{display:block;font-size:16px;color:var(--ink);line-height:1.4}
|
||||
.mate p{margin-top:2px;font-size:13.5px;color:var(--txt);line-height:1.55}
|
||||
#tools{margin-top:36px !important}
|
||||
.again{margin-top:24px}
|
||||
|
||||
.foot{margin:28px 20px 0;font-size:12px;color:var(--sub);text-align:center}
|
||||
.toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translate(-50%,8px);max-width:300px;padding:10px 16px;border-radius:12px;background:rgba(31,35,41,.88);color:#fff;font-size:13.5px;line-height:1.6;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
|
||||
.toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translate(-50%,8px);max-width:300px;padding:10px 16px;border-radius:12px;background:rgba(31,35,41,.88);color:#fff;font-size:13.5px;line-height:1.6;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
|
||||
.toast.on{opacity:1;transform:translate(-50%,0)}
|
||||
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
/* 保存结果卡弹层 */
|
||||
.mask{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px 28px calc(24px + env(safe-area-inset-bottom));background:rgba(20,16,40,.82)}
|
||||
.mask.on{display:flex;animation:vin .25s ease both}
|
||||
.mask img{max-width:100%;max-height:calc(100% - 96px);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.25);-webkit-touch-callout:default;user-select:auto}
|
||||
.mask p{margin-top:14px;color:#fff;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px}
|
||||
.mask .row{display:flex;gap:16px;margin-top:10px}
|
||||
.mask .row button,.mask .row a{height:34px;padding:0 18px;border-radius:99px;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:13.5px;line-height:32px;text-decoration:none}
|
||||
|
||||
.fade{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.qbody,.view.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标 -->
|
||||
<!-- 单色线性图标（每题一个场景图标 q-*） -->
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-star" viewBox="0 0 24 24"><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-bulb" viewBox="0 0 24 24"><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-chart" viewBox="0 0 24 24"><path d="M4 20h16M7 16v-4M12 16V7M17 16v-6"/></symbol>
|
||||
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></symbol>
|
||||
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
|
||||
<symbol id="i-list" viewBox="0 0 24 24"><path d="M9 6.5h10M9 12h10M9 17.5h10M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01"/></symbol>
|
||||
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="10.5" width="14" height="10" rx="3"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v11M7.5 11l4.5 4.5 4.5-4.5M5 19.5h14"/></symbol>
|
||||
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="8.5" y="8.5" width="11.5" height="11.5" rx="2.5"/><path d="M15.5 8.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7.5a2 2 0 0 0 2 2h2.5"/></symbol>
|
||||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.4-5.7M20 4v4.5h-4.5"/></symbol>
|
||||
<symbol id="i-share" viewBox="0 0 24 24"><path d="M12 15V4M8 7.5L12 3.5l4 4M5 12v6.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V12"/></symbol>
|
||||
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.5h.01M14.8 11.5h.01M9.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-scale" viewBox="0 0 24 24"><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-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17.2h2"/></symbol>
|
||||
<symbol id="i-bag" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2M3.5 13h17"/></symbol>
|
||||
<symbol id="i-hand" viewBox="0 0 24 24"><path d="M9 11V5.5a1.5 1.5 0 0 1 3 0V10M12 9.5V4.5a1.5 1.5 0 0 1 3 0V10M15 9.5V6a1.5 1.5 0 0 1 3 0v8a6.5 6.5 0 0 1-6.5 6.5h-.6a6 6 0 0 1-4.6-2.2L4 15.5a1.6 1.6 0 0 1 2.4-2.1L9 15.5V11"/></symbol>
|
||||
<symbol id="i-foot" viewBox="0 0 24 24"><path d="M12 9c3 0 4.6 2.7 4.6 6.3S14.8 22 12 22s-4.6-3.1-4.6-6.7S9 9 12 9z"/><circle cx="7.6" cy="6.6" r="1.6"/><circle cx="10.6" cy="4.4" r="1.75"/><circle cx="14" cy="4.6" r="1.6"/><circle cx="16.8" cy="6.8" r="1.35"/></symbol>
|
||||
<!-- 题目场景 -->
|
||||
<symbol id="q-test" viewBox="0 0 24 24"><rect x="9" y="2.5" width="6" height="19" rx="3"/><path d="M9 9h6M9 15.5h6M11 11.5v2M13 11.5v2"/></symbol>
|
||||
<symbol id="q-board" viewBox="0 0 24 24"><rect x="5" y="4.5" width="14" height="17" rx="2.5"/><path d="M9 3h6v3H9zM8.5 11l1.5 1.5 3-3M8.5 16.5h7"/></symbol>
|
||||
<symbol id="q-wait" viewBox="0 0 24 24"><path d="M7 3h10M7 21h10M8 3c0 4.5 4 5.5 4 9s-4 4.5-4 9M16 3c0 4.5-4 5.5-4 9s4 4.5 4 9M10 18.5h4"/></symbol>
|
||||
<symbol id="q-moon" viewBox="0 0 24 24"><path d="M19.5 14.5A8 8 0 1 1 9.5 4.5a6.5 6.5 0 0 0 10 10z"/><path d="M16 4v3M14.5 5.5h3"/></symbol>
|
||||
<symbol id="q-scale" viewBox="0 0 24 24"><rect x="3.5" y="4" width="17" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></symbol>
|
||||
<symbol id="q-phone" viewBox="0 0 24 24"><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3M12 7v4.5M12 14h.01"/></symbol>
|
||||
<symbol id="q-bowl" viewBox="0 0 24 24"><path d="M3.5 11.5h17a8.5 8.5 0 0 1-17 0zM9 20h6M14 8.5l5-5M17 8.5l3-3"/></symbol>
|
||||
<symbol id="q-pot" viewBox="0 0 24 24"><path d="M4.5 10h15v6a4.5 4.5 0 0 1-4.5 4.5H9A4.5 4.5 0 0 1 4.5 16zM2.5 12h2M19.5 12h2M9 3.5c-.8 1 .8 2 0 3M12 3c-.8 1 .8 2 0 3M15 3.5c-.8 1 .8 2 0 3"/></symbol>
|
||||
<symbol id="q-rain" viewBox="0 0 24 24"><path d="M7 15.5a4 4 0 0 1-.4-8A5.5 5.5 0 0 1 17.2 8a3.8 3.8 0 0 1-.2 7.5z"/><path d="M8.5 18.5l-.8 2M12.5 18.5l-.8 2M16.5 18.5l-.8 2"/></symbol>
|
||||
<symbol id="q-chat" viewBox="0 0 24 24"><path d="M4 5.5h11a2 2 0 0 1 2 2V13a2 2 0 0 1-2 2H9l-4 3.5V15H4a2 2 0 0 1-2-2V7.5a2 2 0 0 1 2-2z"/><path d="M17 9h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1v2.5L16 18h-2"/></symbol>
|
||||
<symbol id="q-heart" viewBox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
|
||||
<symbol id="q-family" viewBox="0 0 24 24"><circle cx="8" cy="7" r="2.8"/><circle cx="16.5" cy="8" r="2.3"/><path d="M3 20v-1.5A5 5 0 0 1 8 13.5a5 5 0 0 1 5 5V20M13.5 14.2a4.2 4.2 0 0 1 7 3.1V20"/></symbol>
|
||||
<symbol id="q-bag" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2M3.5 13h17M11 13v2h2v-2"/></symbol>
|
||||
<symbol id="q-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4M14 15.2l1.4 1.4 2.6-2.6"/></symbol>
|
||||
<symbol id="q-camera" viewBox="0 0 24 24"><path d="M4.5 7.5h3l1.5-2.5h6l1.5 2.5h3a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V9.5a2 2 0 0 1 2-2z"/><circle cx="12" cy="13.5" r="3.5"/></symbol>
|
||||
<symbol id="q-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.2h.01M14.8 11.2h.01M10 16a2.6 2.6 0 0 1 4 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
@@ -134,77 +216,117 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
|
||||
<!-- ① 开始 -->
|
||||
<main class="view" id="vStart">
|
||||
<img class="pic" src="img/hero.webp" alt="孕妈拿着小测试卡片微笑">
|
||||
<h1>测一测<br>你是什么样的妈妈？</h1>
|
||||
<p class="meta"><b>16</b> 道题 · 约 <b>2</b> 分钟</p>
|
||||
<button class="btn pri" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
<p class="note">没有对错，凭第一感觉选就好</p>
|
||||
<section class="hero">
|
||||
<i class="o1"></i><i class="o2"></i>
|
||||
<span class="eb">孕期趣味测试 · MAMA TYPE</span>
|
||||
<h1>测一测<br>你是<mark>什么样</mark>的妈妈？</h1>
|
||||
<div class="meta">
|
||||
<span><svg class="ic"><use href="#i-list" xlink:href="#i-list"/></svg><b class="num">16</b>题 · 约<b class="num">2</b>分钟</span>
|
||||
<span><svg class="ic"><use href="#i-lock" xlink:href="#i-lock"/></svg>只在本机算，不上传</span>
|
||||
<span id="tested" hidden><svg class="ic"><use href="#q-heart" xlink:href="#q-heart"/></svg>已有<b class="num" id="testedN"></b>位妈妈测过</span>
|
||||
</div>
|
||||
<img class="pic" src="img/hero.webp" alt="孕妈拿着小测试卡片微笑">
|
||||
</section>
|
||||
|
||||
<div class="wrap">
|
||||
<section class="types fade">
|
||||
<div class="sh2"><i>4 TYPES</i><b>4 种妈妈，你是哪一种？</b></div>
|
||||
<div class="tgrid" id="tgrid"></div>
|
||||
</section>
|
||||
<div class="startbox fade">
|
||||
<button class="btn pri" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
<p class="note">没有对错，凭第一感觉选就好</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ② 答题 -->
|
||||
<main class="view" id="vQuiz">
|
||||
<main class="view wrap" id="vQuiz">
|
||||
<div class="qtop">
|
||||
<span class="no">第 <b id="qNo">1</b> / <span id="qTotal">16</span> 题</span>
|
||||
<button id="prevBtn"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一题</button>
|
||||
<span class="no num"><b id="qNo">1</b> / <span id="qTotal">16</span></span>
|
||||
</div>
|
||||
<div class="track"><i id="qFill"></i></div>
|
||||
<div class="qbody" id="qBody">
|
||||
<h2 id="qTitle"></h2>
|
||||
<div class="feet" id="feet" aria-hidden="true"></div>
|
||||
<div class="stage" id="stage">
|
||||
<div class="qcard">
|
||||
<div class="hd">
|
||||
<span class="qi"><svg class="ic"><use id="qIc" href="#q-test" xlink:href="#q-test"/></svg></span>
|
||||
<span class="cat" id="qCat"></span>
|
||||
</div>
|
||||
<h2 id="qTitle"></h2>
|
||||
</div>
|
||||
<div class="opts" id="qOpts"></div>
|
||||
</div>
|
||||
<p class="qtip">选完自动进入下一题</p>
|
||||
</main>
|
||||
|
||||
<!-- ③ 结果 -->
|
||||
<main class="view" id="vResult">
|
||||
<div class="rhead">
|
||||
<img class="pic" id="rImg" src="" alt="">
|
||||
<span class="last" id="rLast"></span>
|
||||
<main class="view wrap" id="vResult">
|
||||
<article class="rcard" id="rCard">
|
||||
<i class="o1"></i><i class="o2"></i>
|
||||
<div class="top"><b>我的妈妈类型卡</b><span id="rLast"></span></div>
|
||||
<div class="ava"><img id="rImg" src="" alt=""></div>
|
||||
<p class="you">你是</p>
|
||||
<h1><em id="rName"></em></h1>
|
||||
<p id="rLine"></p>
|
||||
<h1><mark id="rName"></mark></h1>
|
||||
<p class="slo" id="rLine"></p>
|
||||
<div class="rtags" id="rTags"></div>
|
||||
<div class="dims">
|
||||
<svg id="rRadar" viewBox="-16 -2 168 146" role="img" aria-label="4 个维度占比雷达图"></svg>
|
||||
<div class="dl" id="rDims"></div>
|
||||
</div>
|
||||
<p class="brand">兜爸心选 · 孕期专题 · 测一测你是什么样的妈妈</p>
|
||||
</article>
|
||||
|
||||
<div class="racts">
|
||||
<button class="btn pri" id="saveBtn"><svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg>保存结果卡</button>
|
||||
<button class="btn sec" id="shareBtn"><svg class="ic"><use href="#i-copy" xlink:href="#i-copy"/></svg>复制给老公</button>
|
||||
</div>
|
||||
|
||||
<section class="blk fade">
|
||||
<h2><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>你的优势</h2>
|
||||
<div class="tags" id="rAdv"></div>
|
||||
<div class="sh2"><i>01</i><b>你是这样的妈妈</b></div>
|
||||
<div class="read" id="rRead"></div>
|
||||
</section>
|
||||
|
||||
<section class="blk fade">
|
||||
<h2><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>给你一句建议</h2>
|
||||
<p class="tip" id="rTip"></p>
|
||||
<div class="sh2"><i>02</i><b>给你的小建议</b></div>
|
||||
<div class="tips" id="rTips"></div>
|
||||
</section>
|
||||
|
||||
<section class="blk fade">
|
||||
<h2><svg class="ic"><use href="#i-chart" xlink:href="#i-chart"/></svg>你的类型占比</h2>
|
||||
<div class="dist" id="rDist"></div>
|
||||
<div class="sh2"><i>03</i><b>和你最搭的队友</b></div>
|
||||
<div class="mate" id="rMate"></div>
|
||||
</section>
|
||||
|
||||
<div class="tool fade">
|
||||
<span class="ti"><svg class="ic"><use id="rToolIc" href="#i-baby" xlink:href="#i-baby"/></svg></span>
|
||||
<span class="tx"><small>适合你的工具</small><b id="rToolName"></b></span>
|
||||
<button class="go" id="rTool">去用</button>
|
||||
</div>
|
||||
<div id="tools" class="fade"></div>
|
||||
|
||||
<div class="acts fade">
|
||||
<button class="btn sec" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>再测一次</button>
|
||||
<button class="btn pri" id="shareBtn"><svg class="ic"><use href="#i-share" xlink:href="#i-share"/></svg>分享给老公看看</button>
|
||||
</div>
|
||||
<button class="btn sec again" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>重新测试</button>
|
||||
</main>
|
||||
|
||||
<p class="foot">趣味测试，仅供娱乐</p>
|
||||
<p class="foot">趣味测试，仅供娱乐；身体相关问题以产检医生意见为准</p>
|
||||
</div>
|
||||
|
||||
<div class="mask" id="mask">
|
||||
<img id="maskImg" alt="我的妈妈类型卡">
|
||||
<p><svg class="ic"><use href="#i-hand" xlink:href="#i-hand"/></svg>长按图片，保存到相册</p>
|
||||
<div class="row"><a id="dlBtn" download="妈妈类型卡.png" hidden>下载图片</a><button id="maskClose">关闭</button></div>
|
||||
</div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script src="../_shared/tools.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
var $ = function (s) { return document.querySelector(s); };
|
||||
var sc = $('#scroll');
|
||||
var KEY = 'mmbox.ceshi.v2';
|
||||
var KEY = 'mmbox.ceshi.v3';
|
||||
var TESTED_COUNT = 0; /* 「已有 N 位妈妈测过」：只有接上真实统计后才填，0 = 不显示（不造数字） */
|
||||
var XL = 'http://www.w3.org/1999/xlink';
|
||||
function useRef(el, id) { el.setAttribute('href', '#i-' + id); el.setAttributeNS(XL, 'xlink:href', '#i-' + id); }
|
||||
function useRef(el, id) { el.setAttribute('href', '#' + id); el.setAttributeNS(XL, 'xlink:href', '#' + id); }
|
||||
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||||
var openid = (function () {
|
||||
var m = (location.hash + '&' + location.search).match(/[#?&]openid=([^&#]+)/);
|
||||
return m ? decodeURIComponent(m[1]) : '';
|
||||
})();
|
||||
|
||||
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回同目录的首页，身份 hash 原样带回 */
|
||||
$('#back').addEventListener('click', function () {
|
||||
@@ -213,73 +335,113 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
});
|
||||
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('sh', sc.scrollTop > 4); }, { passive: true });
|
||||
|
||||
/* 4 种类型（ORDER 顺序即平分时的优先级） */
|
||||
/* ================= 4 个维度 = 4 种类型 =================
|
||||
* ORDER 顺序 = 雷达图顺时针（上/右/下/左）。
|
||||
* dim：维度名；tools：按类型推荐的工具（理由贴合性格，≤18 字）；mate：最搭的队友类型。 */
|
||||
var TYPES = {
|
||||
nuan: { name: '温柔守护型', img: 'img/nuan.webp', alt: '妈妈温柔地抱着宝宝',
|
||||
line: '你的爱细腻又安稳，是宝宝最软的依靠',
|
||||
adv: ['共情力强', '细心周到', '安全感满满'],
|
||||
tip: '担心时别一个人扛，拿不准就问产检医生；累了就让家人搭把手。',
|
||||
tool: { name: '数胎动', path: '/taidong/', ic: 'baby' } },
|
||||
xue: { name: '理性研究型', img: 'img/xue.webp', alt: '孕妈认真看书做笔记',
|
||||
line: '知识是你的底气，每个决定都做过功课',
|
||||
adv: ['会甄别信息', '计划周全', '遇事冷静'],
|
||||
tip: '网上说法真假混杂，看到吓人的先打个问号，一切以产检医生意见为准。',
|
||||
tool: { name: '孕期体重', path: '/yunqi-tizhong/', ic: 'scale' } },
|
||||
song: { name: '松弛自在型', img: 'img/song.webp', alt: '孕妈靠在软垫上悠闲喝茶',
|
||||
line: '情绪稳定心态好，好心情就是最好的胎教',
|
||||
adv: ['情绪稳定', '抓大放小', '快乐能量'],
|
||||
tip: '松弛也别错过产检，唐筛、大排畸、糖耐记得提前预约。',
|
||||
tool: { name: '孕检日历', path: '/chanjian-rili/', ic: 'cal' } },
|
||||
re: { name: '元气分享型', img: 'img/re.webp', alt: '孕妈和朋友们开心聊天',
|
||||
line: '热情开朗爱连接，总有人陪你期待宝宝',
|
||||
adv: ['社交满分', '乐于分享', '行动力强'],
|
||||
tip: '群里的经验只作参考，涉及身体和用药，以产检医生意见为准。',
|
||||
tool: { name: '待产清单', path: '/daichan-qingdan/', ic: 'bag' } }
|
||||
nuan: { name: '温柔守护型', dim: '细心守护', ax: '守护', img: 'img/nuan.webp', alt: '妈妈温柔地抱着宝宝',
|
||||
line: '你的爱细腻又安稳，是宝宝最软的依靠', tags: ['共情力强', '细心周到', '安全感满满'],
|
||||
desc: '你把宝宝的每一点动静都放在心上，爱得细腻，也容易替他多操一份心。',
|
||||
side: '那份柔软一直都在。',
|
||||
tips: ['担心的事随手记下来，产检时一次问清，别一个人反复琢磨。', '胎动、血压这些交给工具记，看得见数据，心里更踏实。'],
|
||||
low: '偶尔停下来摸摸肚子、跟宝宝说说话，这份连接很珍贵。',
|
||||
mate: 'song', mateWhy: '你替宝宝想得多，TA 帮你把担心放一放，一起把日子过得轻松些。',
|
||||
tools: [
|
||||
{ id: 'taidong', why: '每天数一数，宝宝动静看得见' },
|
||||
{ id: 'taierguzhong', why: '对照 B 超看宝宝长得好不好' },
|
||||
{ id: 'yun', why: '血压记下来，心里更有底' } ] },
|
||||
xue: { name: '理性计划型', dim: '规划研究', ax: '规划', img: 'img/xue.webp', alt: '孕妈认真看书做笔记',
|
||||
line: '知识是你的底气，每一步都提前想好', tags: ['计划周全', '会甄别信息', '遇事冷静'],
|
||||
desc: '遇到事情你先查、先记、先排计划，什么都要心里有数才安心。',
|
||||
side: '遇事先想清楚，是你的底气。',
|
||||
tips: ['网上说法真假混杂，吓人的先打个问号，以产检医生意见为准。', '计划赶不上变化很正常，给自己和宝宝都留一点弹性。'],
|
||||
low: '关键节点提前排一排：产检、待产包、入院路线，到时就不慌。',
|
||||
mate: 're', mateWhy: '你负责把计划排好，TA 负责把气氛带热，全家都愿意跟着你行动。',
|
||||
tools: [
|
||||
{ id: 'chanjianrili', why: '产检时间一次排好，提前准备' },
|
||||
{ id: 'yunqitizhong', why: '体重画成曲线，涨多涨少一目了然' },
|
||||
{ id: 'yunqixuetang', why: '按餐记血糖，数据控最安心' } ] },
|
||||
song: { name: '松弛自在型', dim: '松弛乐观', ax: '松弛', img: 'img/song.webp', alt: '孕妈靠在软垫上悠闲喝茶',
|
||||
line: '情绪稳定心态好，好心情就是最好的胎教', tags: ['情绪稳定', '抓大放小', '快乐能量'],
|
||||
desc: '你抓大放小、不内耗，身边的人跟你待在一起都会放松下来。',
|
||||
side: '该放下时你也放得下。',
|
||||
tips: ['松弛也别错过关键产检：唐筛、大排畸、糖耐提前约好。', '拿不准能不能吃的，花 10 秒查一下，再放心大口吃。'],
|
||||
low: '给自己留点「什么都不做」的时间，妈妈放松，宝宝也舒服。',
|
||||
mate: 'nuan', mateWhy: '你心大不内耗，TA 细心会提醒，大事小事都不落下。',
|
||||
tools: [
|
||||
{ id: 'yunqinengbuchi', why: '想吃先查 10 秒，吃得更放心' },
|
||||
{ id: 'daichanqingdan', why: '照清单买齐必需品，不费心' },
|
||||
{ id: 'chanjianrili', why: '关键产检到点提醒，不怕忘' } ] },
|
||||
re: { name: '元气分享型', dim: '分享连接', ax: '分享', img: 'img/re.webp', alt: '孕妈和朋友们开心聊天',
|
||||
line: '热情开朗爱连接，总有人陪你期待宝宝', tags: ['社交满分', '乐于分享', '行动力强'],
|
||||
desc: '开心和担心你都愿意说出来，身边总围着一群陪你期待宝宝的人。',
|
||||
side: '有人陪着，你会更有力量。',
|
||||
tips: ['群里的经验只作参考，涉及用药和检查，以医生意见为准。', '孕肚照、胎动瞬间都存下来，以后都是全家的宝贵回忆。'],
|
||||
low: '心里的事别憋着，说给老公或闺蜜听，有人分担会轻松很多。',
|
||||
mate: 'xue', mateWhy: '你消息多、朋友多，TA 帮你把信息筛一筛，靠谱的留下来。',
|
||||
tools: [
|
||||
{ id: 'yundujinian', why: '孕肚照、B 超照存一起，随时分享' },
|
||||
{ id: 'taidong', why: '叫上老公一起数，感受宝宝在动' },
|
||||
{ id: 'daichanqingdan', why: '清单发给家人，分工一起准备' } ] }
|
||||
};
|
||||
var ORDER = ['nuan', 'xue', 'song', 're'];
|
||||
|
||||
/* 16 道题：每个选项对应一种类型，顺序已打散 */
|
||||
/* ================= 16 道题 · 计分表 =================
|
||||
* 每个选项 = [维度, 文案]，选中即该维度 +1，共 16 分；选项顺序已人工打散。
|
||||
* c：题目所属场景（解读里引用）；s：场景短语（「X 时，你选了…」）；ic：题目场景图标。 */
|
||||
var QS = [
|
||||
{ q: '刚知道怀孕的那一刻，你第一件事是？', o: [
|
||||
['nuan', '摸摸肚子，跟宝宝打招呼'], ['xue', '马上搜孕早期注意事项'], ['re', '第一时间告诉最亲的人'], ['song', '先吃顿好的庆祝一下'] ] },
|
||||
{ q: '明天要产检了，今晚你会？', o: [
|
||||
['xue', '把要问医生的问题列好'], ['song', '早早睡觉，明天再说'], ['nuan', '有点忐忑，多摸摸肚子'], ['re', '去妈妈群问问要查啥'] ] },
|
||||
{ q: '产检排队等了一个多小时，你在干嘛？', o: [
|
||||
['re', '和旁边孕妈聊成了朋友'], ['xue', '翻看之前的检查报告'], ['song', '刷剧玩手机，不着急'], ['nuan', '和肚里宝宝说悄悄话'] ] },
|
||||
{ q: '半夜宝宝在肚子里拳打脚踢，你会？', o: [
|
||||
['song', '翻个身接着睡'], ['nuan', '轻轻拍拍：妈妈在呢'], ['xue', '看看时间，记一下胎动'], ['re', '叫醒老公一起感受'] ] },
|
||||
{ q: '刷到一条「孕期千万别吃 XX」，你会？', o: [
|
||||
['re', '转给姐妹们一起讨论'], ['nuan', '宁可信其有，先不吃'], ['song', '适量就好，不太在意'], ['xue', '先查查权威说法'] ] },
|
||||
{ q: '突然特别想吃一样东西，你会？', o: [
|
||||
['xue', '先查查孕妇能不能吃'], ['song', '想吃就吃，开心最重要'], ['nuan', '自己做一份，吃得放心'], ['re', '发朋友圈求推荐好店'] ] },
|
||||
{ q: '婆婆端来一大锅补汤，你会？', o: [
|
||||
['re', '拍照发群：被宠到了'], ['xue', '先问问汤里放了什么'], ['nuan', '笑着喝两口，谢谢婆婆'], ['song', '喝一碗，剩下全家分'] ] },
|
||||
{ q: '莫名其妙想哭的时候，你会？', o: [
|
||||
['song', '睡一觉，醒来就好了'], ['re', '打电话找闺蜜倾诉'], ['xue', '查查是不是激素在作怪'], ['nuan', '抱抱自己，允许情绪来'] ] },
|
||||
{ q: '家里人对带娃方式意见不同时，你会？', o: [
|
||||
['nuan', '先照顾大家情绪再沟通'], ['song', '大方向对就行，不纠结'], ['re', '全家开个小会摊开聊'], ['xue', '拿出资料讲科学依据'] ] },
|
||||
{ q: '老公说「我也想参与孕期」，你会让他？', o: [
|
||||
['xue', '学会看懂产检报告'], ['nuan', '每晚给宝宝讲个故事'], ['song', '负责每天逗你开心'], ['re', '陪你去上孕妈课'] ] },
|
||||
{ q: '理想的孕期周末是？', o: [
|
||||
['re', '约朋友喝个下午茶'], ['song', '窝在家睡到自然醒'], ['xue', '上节孕妈课或看本书'], ['nuan', '给宝宝写日记、理衣柜'] ] },
|
||||
{ q: '给宝宝取名，你的方式是？', o: [
|
||||
['song', '小名先叫着，大名不急'], ['xue', '查字义、读音和寓意'], ['re', '发起全家投票'], ['nuan', '选一个念着最温柔的'] ] },
|
||||
{ q: '准备待产包，你的风格更像？', o: [
|
||||
['nuan', '小衣服洗好晒好叠整齐'], ['re', '拉闺蜜一起逛，顺手分享'], ['song', '买齐必需品，缺啥再补'], ['xue', '按清单逐项打勾'] ] },
|
||||
{ q: '离预产期还有一个月，你在？', o: [
|
||||
['xue', '反复熟悉入院流程路线'], ['re', '和孕妈群约好互报喜讯'], ['nuan', '每天跟宝宝说慢慢来'], ['song', '该吃吃该睡睡，等发动'] ] },
|
||||
{ q: '想象宝宝出生后的第一张照片，你希望是？', o: [
|
||||
['re', '全家围着宝宝笑成一团'], ['song', '宝宝睡得四仰八叉'], ['nuan', '小手紧紧握着你的手指'], ['xue', '宝宝和身长体重出生卡'] ] },
|
||||
{ q: '想象宝宝第一次大哭不止，你会？', o: [
|
||||
['song', '先稳住自己，别慌'], ['nuan', '抱在怀里轻轻哼歌'], ['xue', '逐项排查：饿了还是尿了'], ['re', '视频问问有经验的妈妈'] ] }
|
||||
{ c: '情绪时刻', ic: 'q-test', s: '看到验孕棒两道杠', q: '验孕棒出现两道杠的那一刻，你的第一反应是？', o: [
|
||||
['nuan', '手不自觉放到肚子上，眼眶有点热'], ['xue', '马上算预产期，开始列待办清单'], ['re', '立刻拍照发给老公'], ['song', '先淡定，去医院确认了再说'] ] },
|
||||
{ c: '身体与产检', ic: 'q-board', s: '大排畸前一晚', q: '明天要做大排畸了，今晚的你？', o: [
|
||||
['xue', '把想问医生的问题一条条写下来'], ['song', '照常追剧，早点睡就好'], ['nuan', '有点睡不着，一遍遍摸肚子'], ['re', '去孕妈群看看大家都怎么准备'] ] },
|
||||
{ c: '身体与产检', ic: 'q-wait', s: '产检排长队', q: '产检排队等了一个多小时，你在？', o: [
|
||||
['re', '和旁边的孕妈聊成了朋友'], ['xue', '翻看上次报告，对比各项数值'], ['nuan', '悄悄跟宝宝说「快轮到我们啦」'], ['song', '刷刷手机打个盹，不着急'] ] },
|
||||
{ c: '身体与产检', ic: 'q-moon', s: '半夜宝宝拳打脚踢', q: '半夜宝宝在肚子里拳打脚踢，你会？', o: [
|
||||
['song', '翻个身，跟着节奏又睡着了'], ['nuan', '轻轻拍拍肚子：妈妈在呢'], ['re', '推醒老公：快来摸，他在踢'], ['xue', '看看时间，顺手记一笔胎动'] ] },
|
||||
{ c: '身体与产检', ic: 'q-scale', s: '体重涨得有点快', q: '这个月体重涨得有点快，你会？', o: [
|
||||
['xue', '开始每天称重，画条曲线看看'], ['re', '拉上姐妹一起饭后散步'], ['song', '下顿少吃点主食，不焦虑'], ['nuan', '担心影响宝宝，赶紧问问医生'] ] },
|
||||
{ c: '吃喝日常', ic: 'q-phone', s: '刷到「孕期千万别吃」', q: '刷到一条「孕期千万别吃 XX」，你会？', o: [
|
||||
['nuan', '宁可信其有，先不吃了'], ['re', '转给姐妹：你们看到这个没'], ['xue', '先查权威说法，再决定'], ['song', '适量就好，不太往心里去'] ] },
|
||||
{ c: '吃喝日常', ic: 'q-bowl', s: '半夜嘴馋', q: '半夜突然特别想吃酸辣粉，你会？', o: [
|
||||
['song', '想吃就吃，开心最重要'], ['xue', '先查查孕妇能不能吃、吃多少'], ['nuan', '忍一忍，明天自己做份干净的'], ['re', '发条朋友圈：谁懂这种馋'] ] },
|
||||
{ c: '家人相处', ic: 'q-pot', s: '婆婆端来补汤', q: '婆婆端来一大锅补汤，你会？', o: [
|
||||
['re', '拍照发群：被宠到了'], ['nuan', '笑着喝两口，谢谢婆婆的心意'], ['song', '喝一碗，剩下全家分着喝'], ['xue', '先问问汤里放了什么药材'] ] },
|
||||
{ c: '情绪时刻', ic: 'q-rain', s: '没来由想哭', q: '没来由地想哭的时候，你会？', o: [
|
||||
['xue', '想到是激素在作怪，就释然了'], ['nuan', '抱抱自己，允许情绪来一会儿'], ['re', '打给闺蜜，聊完就好了'], ['song', '睡一觉，醒来又是好心情'] ] },
|
||||
{ c: '情绪时刻', ic: 'q-chat', s: '被问「怀孕辛苦吗」', q: '朋友问你「怀孕辛苦吗」，你的回答是？', o: [
|
||||
['song', '还好呀，能吃能睡挺快乐'], ['re', '辛苦！来，听我细细说'], ['nuan', '辛苦，但每次胎动都觉得值'], ['xue', '还行，每个阶段我都提前了解过'] ] },
|
||||
{ c: '家人相处', ic: 'q-heart', s: '老公想多参与', q: '老公说「我也想多参与孕期」，你会让他？', o: [
|
||||
['nuan', '每晚给宝宝讲个睡前故事'], ['xue', '学会看懂产检报告'], ['re', '陪你去上孕妈课，认识新朋友'], ['song', '负责每天逗你开心就够了'] ] },
|
||||
{ c: '家人相处', ic: 'q-family', s: '家里带娃意见不一', q: '家里人对以后怎么带娃意见不一，你会？', o: [
|
||||
['song', '大方向对就行，细节不纠结'], ['re', '全家开个小会，摊开来聊'], ['xue', '找资料，用科学依据说话'], ['nuan', '先照顾大家情绪，再慢慢沟通'] ] },
|
||||
{ c: '待产准备', ic: 'q-bag', s: '收拾待产包', q: '准备待产包，你的风格更像？', o: [
|
||||
['xue', '按清单逐项打勾，一样不落'], ['re', '拉闺蜜一起逛，顺手分享心得'], ['nuan', '小衣服洗好晒好，叠得整整齐齐'], ['song', '买齐必需品，缺啥再补'] ] },
|
||||
{ c: '待产准备', ic: 'q-cal', s: '离预产期还剩一个月', q: '离预产期还剩一个月，你在？', o: [
|
||||
['re', '和同月孕妈约好互报喜讯'], ['song', '该吃吃该睡睡，等着发动'], ['xue', '把去医院的路线和流程走一遍'], ['nuan', '每天跟宝宝说：慢慢来，不着急'] ] },
|
||||
{ c: '想象宝宝', ic: 'q-camera', s: '想象宝宝第一张照片', q: '想象宝宝的第一张照片，你希望是？', o: [
|
||||
['nuan', '小手紧紧攥着你的手指'], ['song', '宝宝睡得四仰八叉'], ['xue', '配上身长体重的出生卡'], ['re', '全家围着宝宝笑成一团'] ] },
|
||||
{ c: '想象宝宝', ic: 'q-baby', s: '想象宝宝哭个不停', q: '想象宝宝第一次哭个不停，你会？', o: [
|
||||
['xue', '逐项排查：饿了、尿了还是困了'], ['nuan', '抱在怀里，轻轻哼歌'], ['song', '先稳住自己，深呼吸'], ['re', '视频问问有经验的妈妈'] ] }
|
||||
];
|
||||
$('#qTotal').textContent = QS.length;
|
||||
|
||||
/* 开始页：4 种类型小卡 + 测过人数（仅真实数据） */
|
||||
$('#tgrid').innerHTML = ORDER.map(function (k) {
|
||||
var t = TYPES[k];
|
||||
return '<div class="tcard"><img src="' + t.img + '" alt=""><span><b>' + t.name + '</b><small>' + t.tags[0] + '</small></span></div>';
|
||||
}).join('');
|
||||
if (TESTED_COUNT > 0) { $('#testedN').textContent = TESTED_COUNT.toLocaleString('zh-CN'); $('#tested').hidden = false; }
|
||||
|
||||
/* 进场动画：按顺序 60ms 错开 */
|
||||
var views = { start: $('#vStart'), quiz: $('#vQuiz'), result: $('#vResult') };
|
||||
var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (es) {
|
||||
es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
|
||||
}, { root: sc, threshold: .1 }) : null;
|
||||
|
||||
var n = 0;
|
||||
es.forEach(function (e) {
|
||||
if (!e.isIntersecting) return;
|
||||
var el = e.target; io.unobserve(el);
|
||||
setTimeout(function () { el.classList.add('in'); }, 60 * n++);
|
||||
});
|
||||
}, { root: sc, threshold: .08 }) : null;
|
||||
function show(name) {
|
||||
Object.keys(views).forEach(function (k) { views[k].classList.toggle('on', k === name); });
|
||||
sc.scrollTop = 0;
|
||||
@@ -289,33 +451,38 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
});
|
||||
}
|
||||
|
||||
/* 答题 */
|
||||
/* ================= 答题 ================= */
|
||||
var cur = 0, ans = [], busy = false;
|
||||
var body = $('#qBody');
|
||||
var stage = $('#stage');
|
||||
$('#feet').innerHTML = QS.map(function () { return '<svg viewBox="0 0 24 24"><use href="#i-foot" xlink:href="#i-foot"/></svg>'; }).join('');
|
||||
var feet = document.querySelectorAll('#feet svg');
|
||||
|
||||
function paint() {
|
||||
var q = QS[cur];
|
||||
$('#qNo').textContent = cur + 1;
|
||||
$('#qFill').style.width = ((cur + 1) / QS.length * 100) + '%';
|
||||
[].forEach.call(feet, function (f, i) { f.setAttribute('class', i < cur ? 'done' : i === cur ? 'cur' : ''); });
|
||||
useRef($('#qIc'), q.ic);
|
||||
$('#qCat').textContent = q.c;
|
||||
$('#qTitle').textContent = q.q;
|
||||
$('#qOpts').innerHTML = q.o.map(function (o, i) {
|
||||
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '" data-t="' + o[0] + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) + '</span></button>';
|
||||
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) +
|
||||
'</span><span class="ck"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg></span></button>';
|
||||
}).join('');
|
||||
$('#prevBtn').disabled = cur === 0;
|
||||
}
|
||||
|
||||
/* 轻柔切换：淡出上移 → 换内容 → 自下淡入 */
|
||||
function swap(after) {
|
||||
/* 左右滑动：前进 → 当前向左滑出、新题从右滑入；上一题反过来 */
|
||||
function swap(dir, after) {
|
||||
busy = true;
|
||||
body.classList.add('out');
|
||||
stage.classList.add(dir > 0 ? 'outL' : 'outR');
|
||||
setTimeout(function () {
|
||||
after();
|
||||
body.classList.remove('out');
|
||||
body.classList.add('pre');
|
||||
void body.offsetWidth;
|
||||
body.classList.remove('pre');
|
||||
setTimeout(function () { busy = false; }, 200);
|
||||
}, 200);
|
||||
stage.classList.remove('outL', 'outR');
|
||||
stage.classList.add(dir > 0 ? 'inR' : 'inL');
|
||||
void stage.offsetWidth;
|
||||
stage.classList.remove('inR', 'inL');
|
||||
setTimeout(function () { busy = false; }, 220);
|
||||
}, 220);
|
||||
}
|
||||
|
||||
$('#qOpts').addEventListener('click', function (e) {
|
||||
@@ -324,74 +491,153 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
ans[cur] = +b.dataset.i;
|
||||
[].forEach.call(document.querySelectorAll('#qOpts .opt'), function (x) { x.classList.toggle('sel', x === b); });
|
||||
setTimeout(function () {
|
||||
if (cur < QS.length - 1) swap(function () { cur++; paint(); });
|
||||
if (cur < QS.length - 1) swap(1, function () { cur++; paint(); });
|
||||
else { busy = false; finish(); }
|
||||
}, 250);
|
||||
}, 380);
|
||||
});
|
||||
$('#prevBtn').addEventListener('click', function () {
|
||||
if (busy || cur === 0) return;
|
||||
swap(function () { cur--; paint(); });
|
||||
swap(-1, function () { cur--; paint(); });
|
||||
});
|
||||
|
||||
function startQuiz() {
|
||||
cur = 0; ans = []; busy = false;
|
||||
body.classList.remove('out', 'pre');
|
||||
stage.classList.remove('outL', 'outR', 'inL', 'inR');
|
||||
paint();
|
||||
show('quiz');
|
||||
}
|
||||
$('#startBtn').addEventListener('click', startQuiz);
|
||||
$('#againBtn').addEventListener('click', startQuiz);
|
||||
|
||||
function finish() {
|
||||
/* ================= 计分 ================= */
|
||||
function score(answers) {
|
||||
var s = { nuan: 0, xue: 0, song: 0, re: 0 };
|
||||
ans.forEach(function (i, qi) { s[QS[qi].o[i][0]]++; });
|
||||
var top = ORDER.reduce(function (a, k) { return s[k] > s[a] ? k : a; }, ORDER[0]);
|
||||
/* 平分时以最后一题的选择打破平局（如果它属于并列第一） */
|
||||
var last = QS[QS.length - 1].o[ans[QS.length - 1]][0];
|
||||
if (s[last] === s[top]) top = last;
|
||||
var rec = { type: top, scores: s, at: Date.now() };
|
||||
answers.forEach(function (i, qi) { s[QS[qi].o[i][0]]++; });
|
||||
/* 最高分为主类型；并列时取「最近一次选过」的那个（越靠后的题越接近真实状态） */
|
||||
var max = Math.max.apply(null, ORDER.map(function (k) { return s[k]; }));
|
||||
var tied = ORDER.filter(function (k) { return s[k] === max; });
|
||||
var top = tied[0];
|
||||
if (tied.length > 1) for (var qi = answers.length - 1; qi >= 0; qi--) {
|
||||
var t = QS[qi].o[answers[qi]][0];
|
||||
if (tied.indexOf(t) >= 0) { top = t; break; }
|
||||
}
|
||||
return { s: s, top: top };
|
||||
}
|
||||
function pcts(s, top) {
|
||||
var total = 0; ORDER.forEach(function (k) { total += s[k]; }); total = total || 1;
|
||||
var p = {}; ORDER.forEach(function (k) { p[k] = Math.round(s[k] / total * 100); });
|
||||
var diff = 100; ORDER.forEach(function (k) { diff -= p[k]; });
|
||||
p[top] += diff; /* 四舍五入补差，合计 100% */
|
||||
return p;
|
||||
}
|
||||
|
||||
function finish() {
|
||||
var r = score(ans);
|
||||
var rec = { type: r.top, scores: r.s, ans: ans.slice(), at: Date.now() };
|
||||
try { localStorage.setItem(KEY, JSON.stringify(rec)); } catch (e) {}
|
||||
render(rec, false);
|
||||
}
|
||||
|
||||
var curType = null;
|
||||
function render(rec, fromCache) {
|
||||
/* ================= 解读：引用作答 ================= */
|
||||
function reading(rec, p) {
|
||||
var t = TYPES[rec.type], a = rec.ans;
|
||||
var picks = function (k) { var r = []; a.forEach(function (i, qi) { if (QS[qi].o[i][0] === k) r.push(qi); }); return r; };
|
||||
var mine = picks(rec.type);
|
||||
/* 主类型最集中的场景 */
|
||||
var byCat = {};
|
||||
QS.forEach(function (q, qi) { var c = byCat[q.c] || (byCat[q.c] = { n: 0, hit: [] }); c.n++; if (QS[qi].o[a[qi]][0] === rec.type) c.hit.push(qi); });
|
||||
var best = null;
|
||||
Object.keys(byCat).forEach(function (c) {
|
||||
var x = byCat[c]; if (!x.hit.length) return;
|
||||
var sc_ = x.hit.length / x.n + x.hit.length * .01;
|
||||
if (!best || sc_ > best.sc) best = { c: c, sc: sc_, x: x };
|
||||
});
|
||||
var ex = QS[best.x.hit[best.x.hit.length - 1]];
|
||||
var exOpt = ex.o[a[QS.indexOf(ex)]][1];
|
||||
var html = '<p>16 道题里，你有 <b class="num">' + mine.length + '</b> 次选了「' + t.dim + '」的答案。' + esc(t.desc) + '</p>';
|
||||
html += '<p>' + (best.x.hit.length === best.x.n ? '在「' + best.c + '」的 ' + best.x.n + ' 道题里，你每次都这样选' : '尤其在「' + best.c + '」的题里，你 ' + best.x.n + ' 次有 ' + best.x.hit.length + ' 次这样选') +
|
||||
'：比如' + ex.s + '，你选了<q>' + esc(exOpt) + '</q>。</p>';
|
||||
/* 第二维度 */
|
||||
var rest = ORDER.filter(function (k) { return k !== rec.type; }).sort(function (x, y) { return rec.scores[y] - rec.scores[x]; });
|
||||
var sec = rest[0];
|
||||
if (rec.scores[sec] > 0) {
|
||||
var sp = picks(sec), sq = QS[sp[sp.length - 1]];
|
||||
html += '<p>你的另一面是「' + TYPES[sec].dim + '」（<span class="num">' + p[sec] + '%</span>）：' + sq.s + '时，你选了<q>' + esc(sq.o[a[QS.indexOf(sq)]][1]) + '</q>，' + TYPES[sec].side + '</p>';
|
||||
} else {
|
||||
html += '<p>16 道题你全选了同一类，是非常纯粹的' + t.name + '妈妈。</p>';
|
||||
}
|
||||
return html;
|
||||
}
|
||||
function tips(rec, p) {
|
||||
var t = TYPES[rec.type];
|
||||
curType = t;
|
||||
var low = ORDER.filter(function (k) { return k !== rec.type; }).sort(function (x, y) { return rec.scores[x] - rec.scores[y]; })[0];
|
||||
return t.tips.concat(['你在「' + TYPES[low].dim + '」上只占 ' + p[low] + '%，' + TYPES[low].low]);
|
||||
}
|
||||
|
||||
/* ================= 雷达图（SVG 手写，单系列） ================= */
|
||||
function radarPts(p, cx, cy, R, M) {
|
||||
/* 上、右、下、左 */
|
||||
var d = [[0, -1], [1, 0], [0, 1], [-1, 0]];
|
||||
return ORDER.map(function (k, i) { var r = Math.max(p[k] / M, .06) * R; return [cx + d[i][0] * r, cy + d[i][1] * r]; });
|
||||
}
|
||||
function radarScale(p) { var m = 0; ORDER.forEach(function (k) { m = Math.max(m, p[k]); }); return Math.max(50, Math.ceil(m / 10) * 10); }
|
||||
function radarSVG(p, top) {
|
||||
var cx = 68, cy = 68, R = 44, M = radarScale(p), g = '';
|
||||
[1 / 3, 2 / 3, 1].forEach(function (f) {
|
||||
var r = R * f; g += '<polygon points="' + [cx, cy - r, cx + r, cy, cx, cy + r, cx - r, cy].join(',') + '" fill="none" stroke="#E4DDFD" stroke-width="1"/>';
|
||||
});
|
||||
g += '<path d="M' + cx + ' ' + (cy - R) + 'V' + (cy + R) + 'M' + (cx - R) + ' ' + cy + 'H' + (cx + R) + '" stroke="#E4DDFD" stroke-width="1"/>';
|
||||
var pts = radarPts(p, cx, cy, R, M);
|
||||
g += '<polygon points="' + pts.map(function (x) { return x.join(','); }).join(' ') + '" fill="rgba(124,92,252,.18)" stroke="#7C5CFC" stroke-width="2" stroke-linejoin="round"/>';
|
||||
pts.forEach(function (x, i) { g += '<circle cx="' + x[0] + '" cy="' + x[1] + '" r="' + (ORDER[i] === top ? 4.5 : 3.2) + '" fill="#7C5CFC" stroke="#fff" stroke-width="1.5"/>'; });
|
||||
var L = [[cx, 12, 'middle'], [cx + R + 6, cy + 4, 'start'], [cx, cy + R + 18, 'middle'], [cx - R - 6, cy + 4, 'end']];
|
||||
ORDER.forEach(function (k, i) {
|
||||
g += '<text x="' + L[i][0] + '" y="' + L[i][1] + '" text-anchor="' + L[i][2] + '" font-size="11" font-weight="' + (k === top ? 800 : 500) + '" fill="' + (k === top ? '#7C5CFC' : '#86909C') + '">' + TYPES[k].ax + '</text>';
|
||||
});
|
||||
return g;
|
||||
}
|
||||
|
||||
/* ================= 渲染结果 ================= */
|
||||
var curRec = null, curP = null, wk = 0;
|
||||
function render(rec, fromCache) {
|
||||
var t = TYPES[rec.type], p = pcts(rec.scores, rec.type);
|
||||
curRec = rec; curP = p;
|
||||
$('#rImg').src = t.img; $('#rImg').alt = t.alt;
|
||||
$('#rName').textContent = t.name + '妈妈';
|
||||
$('#rLine').textContent = t.line;
|
||||
var last = $('#rLast');
|
||||
if (fromCache && rec.at) {
|
||||
var d = new Date(rec.at);
|
||||
last.textContent = '上次测试 · ' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
|
||||
last.classList.add('on');
|
||||
} else last.classList.remove('on');
|
||||
$('#rAdv').innerHTML = t.adv.map(function (a) { return '<span>' + esc(a) + '</span>'; }).join('');
|
||||
$('#rTip').textContent = t.tip;
|
||||
useRef($('#rToolIc'), t.tool.ic);
|
||||
$('#rToolName').textContent = t.tool.name;
|
||||
$('#rTool').onclick = function () { location.href = t.tool.path + location.search + location.hash; };
|
||||
var total = 0; ORDER.forEach(function (k) { total += rec.scores[k] || 0; });
|
||||
total = total || 1;
|
||||
/* 占比按四舍五入后补差，保证合计 100% */
|
||||
var pcts = ORDER.map(function (k) { return Math.round((rec.scores[k] || 0) / total * 100); });
|
||||
var diff = 100 - pcts.reduce(function (a, b) { return a + b; }, 0);
|
||||
pcts[ORDER.indexOf(rec.type)] += diff;
|
||||
$('#rDist').innerHTML = ORDER.map(function (k, i) {
|
||||
return '<div class="dr' + (k === rec.type ? ' me' : '') + '"><span class="n">' + TYPES[k].name.slice(0, 4) + '</span>' +
|
||||
'<span class="tr"><i data-w="' + pcts[i] + '"></i></span><span class="p">' + pcts[i] + '%</span></div>';
|
||||
var d = new Date(rec.at || Date.now());
|
||||
$('#rLast').textContent = (fromCache ? '上次测试 · ' : '') + (d.getMonth() + 1) + '月' + d.getDate() + '日';
|
||||
$('#rTags').innerHTML = t.tags.map(function (a) { return '<span>' + esc(a) + '</span>'; }).join('');
|
||||
$('#rRadar').innerHTML = radarSVG(p, rec.type);
|
||||
var sorted = ORDER.slice().sort(function (x, y) { return (y === rec.type) - (x === rec.type) || p[y] - p[x]; });
|
||||
$('#rDims').innerHTML = sorted.map(function (k) {
|
||||
return '<div class="dr' + (k === rec.type ? ' me' : '') + '"><span>' + TYPES[k].dim + '</span><span class="p num">' + p[k] + '%</span><span class="tr"><i data-w="' + p[k] + '"></i></span></div>';
|
||||
}).join('');
|
||||
$('#rRead').innerHTML = reading(rec, p);
|
||||
$('#rTips').innerHTML = tips(rec, p).map(function (x, i) { return '<div class="tp"><span class="n">' + (i + 1) + '</span><p>' + esc(x) + '</p></div>'; }).join('');
|
||||
var m = TYPES[t.mate];
|
||||
$('#rMate').innerHTML = '<img src="' + m.img + '" alt=""><span><small>队友（老公 / 家人）是这一型最合拍</small><b>' + m.name + '</b><p>' + esc(t.mateWhy) + '</p></span>';
|
||||
renderTools();
|
||||
show('result');
|
||||
var bars = document.querySelectorAll('#rDist i');
|
||||
function grow() { [].forEach.call(bars, function (b) { b.style.width = b.dataset.w + '%'; }); }
|
||||
if (io) {
|
||||
var bo = new IntersectionObserver(function (es) { if (es[0].isIntersecting) { setTimeout(grow, 120); bo.disconnect(); } }, { root: sc, threshold: .2 });
|
||||
bo.observe($('#rDist'));
|
||||
} else grow();
|
||||
setTimeout(function () { [].forEach.call(document.querySelectorAll('#rDims i'), function (b) { b.style.width = b.dataset.w + '%'; }); }, 250);
|
||||
}
|
||||
function renderTools() {
|
||||
if (!curRec || !window.TopicTools) return;
|
||||
var el = $('#tools'); el.className = 'fade in';
|
||||
TopicTools.render(el, TYPES[curRec.type].tools, { title: TYPES[curRec.type].name + '妈妈用得上', color: '#7C5CFC', bg: '#F1EDFF', wk: wk });
|
||||
}
|
||||
|
||||
/* 分享：复制一段文字（链接不带身份 hash），复制不了就提示截图 */
|
||||
/* 孕周：只用来给推荐工具打「孕N周开放」标签 */
|
||||
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 && !p.postpartum && !p.empty && p.week != null) { wk = +p.week || 0; renderTools(); }
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* ================= 分享：复制文案 ================= */
|
||||
var tt;
|
||||
function toast(msg) {
|
||||
var el = $('#toast'); el.textContent = msg; el.classList.add('on');
|
||||
@@ -410,15 +656,105 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
return legacy();
|
||||
}
|
||||
$('#shareBtn').addEventListener('click', function () {
|
||||
if (!curType) return;
|
||||
var text = '老公，我测出来是「' + curType.name + '妈妈」：' + curType.line + '。你觉得像吗？';
|
||||
copy(text).then(function () { toast('已复制，发给老公看看吧'); }, function () { toast('截个图发给老公看看吧'); });
|
||||
if (!curRec) return;
|
||||
var t = TYPES[curRec.type];
|
||||
var text = '老公，我测出来是「' + t.name + '妈妈」：' + t.line + '。关键词：' + t.tags.join('、') + '。你觉得像吗？';
|
||||
copy(text).then(function () { toast('已复制，发给老公看看吧'); }, function () { toast('点「保存结果卡」，发图给老公看看吧'); });
|
||||
});
|
||||
|
||||
/* ================= 保存结果卡：canvas 画图 → <img> 长按保存 ================= */
|
||||
var FONT = '-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif';
|
||||
function rr(ctx, x, y, w, h, r) {
|
||||
ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r);
|
||||
ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath();
|
||||
}
|
||||
function loadImg(src) { return new Promise(function (ok, no) { var im = new Image(); im.onload = function () { ok(im); }; im.onerror = no; im.src = src; }); }
|
||||
function drawCard(im) {
|
||||
var t = TYPES[curRec.type], p = curP, W = 750, H = 1200;
|
||||
var cv = document.createElement('canvas'); cv.width = W; cv.height = H;
|
||||
var ctx = cv.getContext('2d');
|
||||
var g = ctx.createLinearGradient(0, 0, W * .3, H);
|
||||
g.addColorStop(0, '#E9E2FF'); g.addColorStop(.45, '#F6F3FF'); g.addColorStop(1, '#FFFFFF');
|
||||
ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
|
||||
ctx.fillStyle = 'rgba(255,255,255,.55)'; ctx.beginPath(); ctx.arc(660, 90, 230, 0, 7); ctx.fill();
|
||||
ctx.fillStyle = 'rgba(124,92,252,.06)'; ctx.beginPath(); ctx.arc(40, 470, 150, 0, 7); ctx.fill();
|
||||
ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic';
|
||||
/* 顶部胶囊 */
|
||||
ctx.font = '700 24px ' + FONT;
|
||||
var lb = '我的妈妈类型卡', lw = ctx.measureText(lb).width + 44;
|
||||
ctx.fillStyle = '#fff'; rr(ctx, (W - lw) / 2, 52, lw, 48, 24); ctx.fill();
|
||||
ctx.fillStyle = '#7C5CFC'; ctx.fillText(lb, W / 2, 84);
|
||||
/* 插画 */
|
||||
var S = 320, ix = (W - S) / 2, iy = 132;
|
||||
ctx.save(); ctx.shadowColor = 'rgba(124,92,252,.18)'; ctx.shadowBlur = 36; ctx.shadowOffsetY = 12;
|
||||
ctx.fillStyle = '#fff'; rr(ctx, ix - 10, iy - 10, S + 20, S + 20, 60); ctx.fill(); ctx.restore();
|
||||
ctx.save(); rr(ctx, ix, iy, S, S, 52); ctx.clip();
|
||||
var sw = im.naturalWidth, sh = im.naturalHeight, side = Math.min(sw, sh);
|
||||
ctx.drawImage(im, (sw - side) / 2, (sh - side) * .3, side, side, ix, iy, S, S); ctx.restore();
|
||||
/* 类型名 */
|
||||
ctx.fillStyle = '#86909C'; ctx.font = '400 26px ' + FONT; ctx.fillText('你 是', W / 2, 520);
|
||||
ctx.font = '800 60px ' + FONT;
|
||||
var nm = t.name + '妈妈', nw = ctx.measureText(nm).width;
|
||||
ctx.fillStyle = 'rgba(124,92,252,.20)'; ctx.fillRect((W - nw) / 2 - 4, 566, nw + 8, 24);
|
||||
ctx.fillStyle = '#1F2329'; ctx.fillText(nm, W / 2, 588);
|
||||
ctx.fillStyle = '#4E5969'; ctx.font = '400 28px ' + FONT; ctx.fillText(t.line, W / 2, 640);
|
||||
/* 关键词 */
|
||||
ctx.font = '700 26px ' + FONT;
|
||||
var ws = t.tags.map(function (s) { return ctx.measureText(s).width + 44; }), gap = 16;
|
||||
var tx = (W - ws.reduce(function (a, b) { return a + b; }, 0) - gap * 2) / 2;
|
||||
t.tags.forEach(function (s, i) {
|
||||
ctx.save(); ctx.shadowColor = 'rgba(124,92,252,.12)'; ctx.shadowBlur = 14; ctx.shadowOffsetY = 4;
|
||||
ctx.fillStyle = '#fff'; rr(ctx, tx, 680, ws[i], 56, 28); ctx.fill(); ctx.restore();
|
||||
ctx.fillStyle = '#7C5CFC'; ctx.fillText(s, tx + ws[i] / 2, 717); tx += ws[i] + gap;
|
||||
});
|
||||
/* 维度面板 */
|
||||
ctx.fillStyle = 'rgba(255,255,255,.9)'; rr(ctx, 40, 776, 670, 300, 36); ctx.fill();
|
||||
var cx = 205, cy = 926, R = 88, M = radarScale(p);
|
||||
ctx.strokeStyle = '#E4DDFD'; ctx.lineWidth = 2;
|
||||
[1 / 3, 2 / 3, 1].forEach(function (f) { var r = R * f; ctx.beginPath(); ctx.moveTo(cx, cy - r); ctx.lineTo(cx + r, cy); ctx.lineTo(cx, cy + r); ctx.lineTo(cx - r, cy); ctx.closePath(); ctx.stroke(); });
|
||||
ctx.beginPath(); ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R); ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy); ctx.stroke();
|
||||
var pts = radarPts(p, cx, cy, R, M);
|
||||
ctx.beginPath(); pts.forEach(function (x, i) { i ? ctx.lineTo(x[0], x[1]) : ctx.moveTo(x[0], x[1]); }); ctx.closePath();
|
||||
ctx.fillStyle = 'rgba(124,92,252,.18)'; ctx.fill(); ctx.strokeStyle = '#7C5CFC'; ctx.lineWidth = 4; ctx.lineJoin = 'round'; ctx.stroke();
|
||||
pts.forEach(function (x, i) { ctx.beginPath(); ctx.arc(x[0], x[1], ORDER[i] === curRec.type ? 9 : 6.5, 0, 7); ctx.fillStyle = '#7C5CFC'; ctx.fill(); ctx.lineWidth = 3; ctx.strokeStyle = '#fff'; ctx.stroke(); });
|
||||
var L = [[cx, cy - R - 16, 'center'], [cx + R + 12, cy + 8, 'left'], [cx, cy + R + 34, 'center'], [cx - R - 12, cy + 8, 'right']];
|
||||
ORDER.forEach(function (k, i) {
|
||||
ctx.textAlign = L[i][2]; ctx.font = (k === curRec.type ? '800' : '500') + ' 22px ' + FONT;
|
||||
ctx.fillStyle = k === curRec.type ? '#7C5CFC' : '#86909C'; ctx.fillText(TYPES[k].ax, L[i][0], L[i][1]);
|
||||
});
|
||||
var sorted = ORDER.slice().sort(function (x, y) { return (y === curRec.type) - (x === curRec.type) || p[y] - p[x]; });
|
||||
sorted.forEach(function (k, i) {
|
||||
var y = 838 + i * 64, me = k === curRec.type;
|
||||
ctx.textAlign = 'left'; ctx.font = (me ? '700' : '400') + ' 25px ' + FONT; ctx.fillStyle = me ? '#7C5CFC' : '#4E5969'; ctx.fillText(TYPES[k].dim, 388, y + 10);
|
||||
ctx.textAlign = 'right'; ctx.font = '700 25px ' + FONT; ctx.fillStyle = me ? '#7C5CFC' : '#1F2329'; ctx.fillText(p[k] + '%', 674, y + 10);
|
||||
ctx.fillStyle = '#EFEAFF'; rr(ctx, 388, y + 24, 286, 10, 5); ctx.fill();
|
||||
ctx.fillStyle = me ? '#7C5CFC' : '#C7B9FE'; rr(ctx, 388, y + 24, Math.max(10, 286 * p[k] / 100), 10, 5); ctx.fill();
|
||||
});
|
||||
/* 底部 */
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = '#1F2329'; ctx.font = '700 26px ' + FONT; ctx.fillText('测一测你是什么样的妈妈？', W / 2, 1128);
|
||||
ctx.fillStyle = '#86909C'; ctx.font = '400 21px ' + FONT; ctx.fillText('兜爸心选 · 孕期专题 · 趣味测试，仅供娱乐', W / 2, 1164);
|
||||
return cv.toDataURL('image/png');
|
||||
}
|
||||
var isWx = /MicroMessenger/i.test(navigator.userAgent);
|
||||
$('#saveBtn').addEventListener('click', function () {
|
||||
if (!curRec) return;
|
||||
toast('正在生成结果卡…');
|
||||
loadImg(TYPES[curRec.type].img).then(function (im) {
|
||||
var url = drawCard(im);
|
||||
$('#maskImg').src = url;
|
||||
var dl = $('#dlBtn'); dl.href = url; dl.hidden = isWx;
|
||||
$('#toast').classList.remove('on');
|
||||
$('#mask').classList.add('on');
|
||||
}).catch(function () { toast('生成失败，截个图保存也可以'); });
|
||||
});
|
||||
$('#maskClose').addEventListener('click', function () { $('#mask').classList.remove('on'); });
|
||||
$('#mask').addEventListener('click', function (e) { if (e.target === this) this.classList.remove('on'); });
|
||||
|
||||
/* 入口：有上次结果直接看结果，否则开始页 */
|
||||
var saved = null;
|
||||
try { saved = JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) {}
|
||||
if (saved && TYPES[saved.type] && saved.scores) render(saved, true);
|
||||
if (saved && TYPES[saved.type] && saved.scores && saved.ans && saved.ans.length === QS.length) render(saved, true);
|
||||
else show('start');
|
||||
|
||||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -6,20 +6,22 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>妊娠纹，与体重管理</title>
|
||||
<!-- 孕期专题 · 妊娠纹与体重管理（孕期首页「其他妈妈也在搜」第 6 条）。
|
||||
2026-10-31 v2 按 /tmp/pl/topic-spec.md 统一规范重做：清新、简洁、核心明确；主色 #F25C78。
|
||||
体重管理是核心之一（第 1 节 + 增重简表 + #goWeight 跳 /yunqi-tizhong/）；
|
||||
「为什么这样做」本页例外：可见的一句话（≤30 字）。只写成分和品类、不点名品牌；百分比只出现在页底「参考来源」。
|
||||
2026-10-31 v3 按 /tmp/pl/topic-spec-v3.md（在 v2 /tmp/pl/topic-spec.md 基础上加设计感）重做；主色 #F25C78，浅底 #FFEFF2。
|
||||
01 体重：按孕周的增重推荐区间曲线（SVG）+ 按孕前 BMI 分组卡（点卡切换曲线，有孕周时标出「你在这里」）；
|
||||
02 阶段时间轴（按 openid 读孕周点亮，逻辑同 v2）；「为什么这样做」本页例外：可见的一句话（≤30 字）；
|
||||
03 成分对照两栏。推荐工具走 ../_shared/tools.js（原 #goWeight 跳 /yunqi-tizhong/ 已并入组件，不再单独放按钮）。
|
||||
只写成分和品类、不点名品牌；百分比只出现在页底「参考来源」。
|
||||
自成一页：不引 app.js；回首页走相对路径 ../../，站内跳转带 location.search + location.hash。
|
||||
旧版备份 /tmp/pl/wen-v2-backup.html。 -->
|
||||
v2 备份 /tmp/pl/wen-v2-before-v3.html；更早 /tmp/pl/wen-v2-backup.html。 -->
|
||||
<style>
|
||||
:root{--c:#F25C78;--cs:#FFEFF2;--ink:#1F2329;--tx:#4E5969;--sub:#86909C;--line:#EEF0F3;--sec:#F7F8FA;
|
||||
--green:#18A058;--gbg:#EAF7F0;--amber:#E08A1E;--abg:#FFF4E5;--red:#E5484D;--rbg:#FFEDEE}
|
||||
:root{--c:#F25C78;--cs:#FFEFF2;--c4:#FFF8F9;--ink:#1F2329;--tx:#4E5969;--sub:#86909C;--line:#EEF0F3;--sec:#F7F8FA}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--tx);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
img{display:block;max-width:100%}
|
||||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
b,strong{color:var(--ink)}
|
||||
.num{font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
|
||||
@@ -32,104 +34,146 @@ b,strong{color:var(--ink)}
|
||||
|
||||
.wrap{padding:0 20px}
|
||||
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;object-position:50% 40%;border-radius:20px;background:var(--cs)}
|
||||
h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--ink)}
|
||||
.ans{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--cs);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--ink)}
|
||||
/* Hero：主色浅渐变 + 柔和大圆 + 插画压右下出血 */
|
||||
.hero-bg{position:absolute;left:0;right:0;top:0;height:470px;background:linear-gradient(160deg,var(--cs) 0%,#fff 72%);overflow:hidden;pointer-events:none}
|
||||
.hero-bg i{position:absolute;border-radius:50%;background:rgba(242,92,120,.08)}
|
||||
.hero-bg i:nth-child(1){width:260px;height:260px;right:-90px;top:-70px}
|
||||
.hero-bg i:nth-child(2){width:120px;height:120px;left:-46px;top:210px;background:rgba(242,92,120,.06)}
|
||||
.hero{position:relative;min-height:346px;padding-top:8px}
|
||||
.eye{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--c)}
|
||||
h1{position:relative;z-index:1;margin-top:6px;font-size:28px;font-weight:800;line-height:1.32;color:var(--ink)}
|
||||
.mk{background:linear-gradient(transparent 62%,rgba(242,92,120,.22) 0)}
|
||||
.lede{position:relative;z-index:1;margin-top:8px;font-size:14px;color:var(--sub);line-height:1.6}
|
||||
.hero img{position:absolute;right:-20px;top:116px;width:76%;height:200px;object-fit:cover;object-position:30% 45%;border-radius:24px 0 0 24px;background:var(--cs)}
|
||||
|
||||
/* 结论卡 */
|
||||
.ans{position:relative;z-index:2;margin-top:-34px;padding:16px 18px 18px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(242,92,120,.10)}
|
||||
.tag{display:inline-block;font-size:12px;font-weight:600;line-height:22px;padding:0 10px;border-radius:99px;background:var(--cs);color:var(--c)}
|
||||
.ans p{margin-top:8px;font-size:17px;font-weight:700;line-height:1.6;color:var(--ink)}
|
||||
|
||||
/* 个性化提示条 */
|
||||
.me{display:none;margin-top:14px;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);font-size:13.5px;line-height:1.5}
|
||||
.me{display:none;margin-top:14px;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;font-size:13.5px;line-height:1.5}
|
||||
.me.on{display:flex}
|
||||
.me .mt{flex:1;min-width:0}
|
||||
.me b{display:block;font-size:14px}
|
||||
.me span{color:var(--sub);font-size:12.5px}
|
||||
.me .go{flex:none;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--c);color:var(--c);font-size:13px;white-space:nowrap}
|
||||
.me .go{flex:none;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--c);color:var(--c);font-size:13px;white-space:nowrap;transition:transform .15s}
|
||||
.me .go:active{transform:scale(.96)}
|
||||
|
||||
/* 记住这 3 点 */
|
||||
.pts{margin-top:28px}
|
||||
/* 记住这 3 点：数字卡 */
|
||||
h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
|
||||
.pts ol{list-style:none;margin-top:8px}
|
||||
.pts li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
|
||||
.pts li:first-child{border-top:0}
|
||||
.pts .no{flex:none;width:26px;font-size:26px;font-weight:800;line-height:1.1;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.pts b{display:block;font-size:15.5px;line-height:1.5}
|
||||
.pts span{display:block;font-size:13px;color:var(--sub);line-height:1.5}
|
||||
|
||||
/* 目录 */
|
||||
.toc{display:flex;gap:8px;margin-top:16px}
|
||||
.toc button{flex:1;min-width:0;height:36px;border-radius:99px;background:var(--sec);font-size:13px;color:var(--tx);white-space:nowrap}
|
||||
.pts{margin-top:40px}
|
||||
.pts-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
|
||||
.pt{padding:12px 10px 14px;border-radius:18px;background:var(--c4);border:1px solid #FBE3E8}
|
||||
.pt .no{display:block;font-size:34px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c)}
|
||||
.pt b{display:block;margin-top:10px;font-size:14px;line-height:1.45}
|
||||
.pt span{display:block;margin-top:4px;font-size:12px;color:var(--sub);line-height:1.5}
|
||||
|
||||
/* 节 */
|
||||
.sec{margin-top:36px;scroll-margin-top:56px}
|
||||
.sec-h{display:flex;align-items:center;gap:8px}
|
||||
.sec-h .n{flex:none;font-size:18px;font-weight:800;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c)}
|
||||
.card{margin-top:14px;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
|
||||
.sec{margin-top:40px;scroll-margin-top:56px}
|
||||
.sec-h{display:flex;align-items:baseline;gap:8px}
|
||||
.sec-h .n{flex:none;font-size:13px;font-weight:800;color:var(--c);letter-spacing:.04em}
|
||||
.sec-h small{margin-left:auto;font-size:11px;letter-spacing:.14em;color:#C9CDD4;font-weight:600}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
.panel{margin:16px -6px 0;padding:18px 16px;border-radius:24px;background:var(--sec)}
|
||||
.panel.pink{background:var(--c4)}
|
||||
|
||||
/* 1 体重 */
|
||||
.wpic{width:100%;height:120px;object-fit:cover;object-position:60% 55%}
|
||||
table{width:100%;border-collapse:collapse;font-size:14px}
|
||||
th{font-size:12.5px;font-weight:500;color:var(--sub);text-align:left;padding:10px 14px 6px}
|
||||
td{padding:9px 14px;border-top:1px solid var(--line);color:var(--tx);white-space:nowrap}
|
||||
td:first-child b{font-weight:600}
|
||||
td small{display:block;font-size:12px;color:var(--sub);line-height:1.3}
|
||||
td.v{font-weight:700;color:var(--ink)}
|
||||
.note{padding:8px 14px 12px;font-size:12.5px;color:var(--sub);line-height:1.6}
|
||||
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;margin-top:14px;border-radius:99px;background:var(--c);color:#fff;font-size:15px;font-weight:600}
|
||||
.btn .ic{stroke:#fff}
|
||||
/* 01 曲线 */
|
||||
.chart{background:#fff;border-radius:18px;padding:12px 10px 8px;border:1px solid var(--line)}
|
||||
.chart-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
|
||||
.chart-h b{font-size:14px}
|
||||
.chart-h span{font-size:12px;color:var(--sub)}
|
||||
.chart svg{display:block;width:100%;height:auto;margin-top:4px}
|
||||
.chart .gl{stroke:#F0F1F4;stroke-width:1}
|
||||
.chart .ax{font-size:10px;fill:#A9AEB8}
|
||||
.chart .band{fill:rgba(242,92,120,.16);transition:d .4s}
|
||||
.chart .ln{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.chart .ln.lo{stroke-dasharray:4 4;stroke-width:1.6}
|
||||
.chart-h span b{color:var(--c);font-size:13px}
|
||||
.chart .nowl{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
|
||||
.chart .nowt{font-size:10.5px;font-weight:700;fill:var(--ink)}
|
||||
.cap{padding:6px 4px 2px;font-size:12.5px;color:var(--sub);line-height:1.6}
|
||||
.cap b{color:var(--c)}
|
||||
.bmi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
|
||||
.bm{text-align:left;padding:10px 10px 12px;border-radius:16px;background:#fff;border:1.5px solid transparent;transition:border-color .2s,background .2s,transform .15s}
|
||||
.bm:active{transform:scale(.98)}
|
||||
.bm.on{border-color:var(--c);background:#fff}
|
||||
.bm .l{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
|
||||
.bm .r{display:block;font-size:11px;color:var(--sub);line-height:1.4}
|
||||
.bm .v{display:block;margin-top:6px;font-size:20px;font-weight:800;line-height:1.1;color:var(--ink)}
|
||||
.bm .v em{font-style:normal;font-size:11px;font-weight:600;color:var(--sub);margin-left:2px}
|
||||
.bm .rul{position:relative;display:block;height:5px;margin-top:8px;border-radius:9px;background:#F0F1F4}
|
||||
.bm .rul i{position:absolute;top:0;bottom:0;border-radius:9px;background:#E3B5BF}
|
||||
.bm.on .rul i{background:var(--c)}
|
||||
.bm .w{display:block;margin-top:7px;font-size:11px;color:var(--sub);line-height:1.4}
|
||||
.bm .w b{font-weight:700;color:var(--tx)}
|
||||
.bm.on .v{color:var(--c)}
|
||||
.note{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.6}
|
||||
|
||||
/* 2 时间轴 */
|
||||
.tl{margin-top:16px;position:relative;padding-left:22px}
|
||||
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line)}
|
||||
.st{position:relative;padding:14px 14px 12px;margin-top:10px;border:1px solid var(--line);border-radius:18px;background:#fff;scroll-margin-top:60px;transition:border-color .3s,background .3s}
|
||||
/* 02 时间轴 */
|
||||
.tl{position:relative;padding-left:34px}
|
||||
.tl::before{content:"";position:absolute;left:12px;top:14px;bottom:24px;width:2px;background:linear-gradient(var(--c),rgba(242,92,120,.12))}
|
||||
.st{position:relative;padding:12px 14px 12px;margin-top:12px;border-radius:18px;background:#fff;border:1.5px solid transparent;scroll-margin-top:60px;transition:border-color .3s}
|
||||
.st:first-child{margin-top:0}
|
||||
.st::before{content:"";position:absolute;left:-22px;top:20px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #D5D9E0}
|
||||
.st.hl{border-color:var(--c);background:var(--cs)}
|
||||
.st.hl::before{border-color:var(--c);background:var(--c)}
|
||||
.st .dot{position:absolute;left:-34px;top:12px;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid var(--c);color:var(--c);font-size:12px;font-weight:800;line-height:23px;text-align:center}
|
||||
.st.hl{border-color:var(--c)}
|
||||
.st.hl .dot{background:var(--c);color:#fff}
|
||||
.st .when{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--c)}
|
||||
.st .hd{display:flex;align-items:center;gap:8px}
|
||||
.st .hd b{font-size:15.5px}
|
||||
.st .now{display:none;margin-left:auto;font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;background:var(--c);color:#fff;white-space:nowrap}
|
||||
.st .now{display:none;margin-left:auto;font-size:11.5px;line-height:20px;padding:0 8px;border-radius:99px;background:var(--c);color:#fff;white-space:nowrap}
|
||||
.st.hl .now{display:inline-block}
|
||||
.st p{margin-top:4px;font-size:14.5px;line-height:1.7}
|
||||
.st .why{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--sub)}
|
||||
.st .why em{font-style:normal;color:var(--c);margin-right:4px}
|
||||
.st p{margin-top:4px;font-size:14px;line-height:1.7}
|
||||
.st .why{margin-top:8px;padding-top:8px;border-top:1px dashed #F3D3DA;font-size:12.5px;line-height:1.6;color:var(--sub)}
|
||||
.st .why em{margin-right:6px;font-style:normal;font-weight:600;color:var(--c)}
|
||||
|
||||
/* 3 成分速查 */
|
||||
.ing{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-top:1px solid var(--line)}
|
||||
.ing:first-child{border-top:0}
|
||||
.ing .lt{flex:none;margin-top:3px;width:52px;text-align:center;font-size:12px;font-weight:700;line-height:22px;border-radius:99px;white-space:nowrap}
|
||||
.ing .r{background:var(--rbg);color:var(--red)}
|
||||
.ing .g{background:var(--gbg);color:var(--green)}
|
||||
.ing .a{background:var(--abg);color:var(--amber)}
|
||||
.ing b{display:block;font-size:15px;line-height:1.5}
|
||||
.ing span{display:block;font-size:13px;color:var(--sub);line-height:1.55}
|
||||
/* 03 成分对照 */
|
||||
.vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
|
||||
.vs .col{padding:14px 12px;border-radius:18px;border:1px solid var(--line);background:#fff}
|
||||
.vs .col.ok{background:var(--c4);border-color:#FBE3E8}
|
||||
.vs .ch{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink)}
|
||||
.vs .ch .ic{width:18px;height:18px}
|
||||
.vs .no .ic{stroke:var(--ink)}
|
||||
.vs ul{list-style:none;margin-top:8px}
|
||||
.vs li{padding:6px 0;border-top:1px solid rgba(0,0,0,.05);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
|
||||
.vs li:first-child{border-top:0}
|
||||
.vs li span{display:block;font-size:11.5px;font-weight:400;color:var(--sub)}
|
||||
.vs .no li{text-decoration:line-through;text-decoration-color:rgba(31,35,41,.35)}
|
||||
.vs .no li span{text-decoration:none;display:block}
|
||||
.vs .no p{margin-top:8px;font-size:12px;color:var(--sub);line-height:1.55}
|
||||
.ask{display:flex;align-items:center;gap:10px;margin-top:8px;padding:12px 14px;border-radius:18px;border:1px dashed #E5E6EB;font-size:13px;line-height:1.5}
|
||||
.ask .tag{flex:none;background:var(--sec);color:var(--tx)}
|
||||
.ask b{font-size:13.5px}
|
||||
|
||||
/* 来源 + 免责 */
|
||||
.src{margin-top:36px;border-radius:18px;background:var(--sec)}
|
||||
.src summary{list-style:none;display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:14px;font-weight:600;color:var(--ink)}
|
||||
.src summary::-webkit-details-marker{display:none}
|
||||
.src summary::after{content:"展开";margin-left:auto;font-size:12.5px;font-weight:400;color:var(--sub)}
|
||||
.src[open] summary::after{content:"收起"}
|
||||
.src summary .arr{margin-left:auto;width:16px;height:16px;stroke:var(--sub);transition:transform .25s}
|
||||
.src[open] summary .arr{transform:rotate(180deg)}
|
||||
.src ul{list-style:none;padding:0 16px 12px}
|
||||
.src li{padding:8px 0;border-top:1px solid #E9ECF0;font-size:12.5px;line-height:1.65;color:var(--tx)}
|
||||
.foot{margin-top:14px;font-size:12px;line-height:1.7;color:var(--sub);text-align:center}
|
||||
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.fade{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
|
||||
@media (max-width:370px){h1{font-size:26px}.pt b{font-size:13.5px}.bm{padding:9px 8px 11px}.bm .v{font-size:18px}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 单色线性图标：stroke 1.8，颜色走 .ic（主色） -->
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-scale" viewBox="0 0 24 24"><rect x="3.5" y="4" width="17" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></symbol>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
|
||||
<symbol id="i-mom" viewBox="0 0 24 24"><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M12 9c4 .5 8 2.5 8 5.5s-2.5 4.5-6 4.5h-2M12 21v-2"/></symbol>
|
||||
<symbol id="i-ok" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.7 2.7L16 9.6"/></symbol>
|
||||
<symbol id="i-no" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M5.8 5.8l12.4 12.4"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
<div class="hero-bg" aria-hidden="true"><i></i><i></i></div>
|
||||
<header class="bar" id="bar">
|
||||
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
|
||||
<span class="t">孕期专题</span>
|
||||
@@ -137,11 +181,17 @@ td.v{font-weight:700;color:var(--ink)}
|
||||
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<div class="eye">STRETCH MARKS · 皮肤与体重</div>
|
||||
<h1>妊娠纹，与<br><span class="mk">体重管理</span></h1>
|
||||
<p class="lede">长不长纹，<br>一半看体重。</p>
|
||||
<img src="img/hero.webp" alt="孕妈坐在沙发上轻抚孕肚">
|
||||
<h1>妊娠纹，与体重管理</h1>
|
||||
<div class="ans">控制体重慢慢长、每天抹两次打底，红纹一出现就处理。</div>
|
||||
</section>
|
||||
|
||||
<div class="ans">
|
||||
<span class="tag">一句话答案</span>
|
||||
<p>控制体重慢慢长、每天抹两次打底，红纹一出现就处理。</p>
|
||||
</div>
|
||||
|
||||
<!-- 按 openid 读孕周 / 产后状态点亮对应阶段（拿不到身份就不显示） -->
|
||||
<div class="me" id="me">
|
||||
<svg class="ic"><use href="#i-mom" xlink:href="#i-mom"/></svg>
|
||||
@@ -151,77 +201,93 @@ td.v{font-weight:700;color:var(--ink)}
|
||||
|
||||
<section class="pts">
|
||||
<h2>记住这 3 点</h2>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div><b>每周增重不超过 0.5kg</b><span>孕中晚期起，长得慢纹就少</span></div></li>
|
||||
<li><span class="no">2</span><div><b>早晚各抹一次</b><span>从孕早期开始，坚持整个孕期</span></div></li>
|
||||
<li><span class="no">3</span><div><b>维 A 酸类孕期禁用</b><span>含视黄醇、视黄醛的也别用</span></div></li>
|
||||
</ol>
|
||||
<div class="pts-g">
|
||||
<div class="pt fade"><span class="no num">1</span><b>每周增重<br>不超 0.5kg</b><span>孕中晚期起算</span></div>
|
||||
<div class="pt fade"><span class="no num">2</span><b>早晚<br>各抹一次</b><span>坚持整个孕期</span></div>
|
||||
<div class="pt fade"><span class="no num">3</span><b>维 A 酸类<br>孕期禁用</b><span>视黄醇也别用</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="toc">
|
||||
<button data-go="s1">体重和妊娠纹</button>
|
||||
<button data-go="s2">不同阶段</button>
|
||||
<button data-go="s3">成分速查</button>
|
||||
</nav>
|
||||
|
||||
<!-- 1 体重 -->
|
||||
<!-- 01 体重：曲线 + BMI 分组卡 -->
|
||||
<section class="sec" id="s1">
|
||||
<div class="sec-h"><span class="n">01</span><h2>体重和妊娠纹</h2></div>
|
||||
<p class="key">肚皮撑得越快越容易长纹，控体重是最省钱的预防。</p>
|
||||
<div class="card fade">
|
||||
<img class="wpic" src="img/slow.webp" alt="孕妈牵着背体重秤的小乌龟散步" loading="lazy">
|
||||
<table>
|
||||
<thead><tr><th>孕前体重</th><th>整个孕期</th><th>孕中晚期每周</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>偏瘦</b><small>BMI < 18.5</small></td><td class="v">11~16 kg</td><td>约 0.46 kg</td></tr>
|
||||
<tr><td><b>正常</b><small>BMI 18.5~23.9</small></td><td class="v">8~14 kg</td><td>约 0.37 kg</td></tr>
|
||||
<tr><td><b>偏胖</b><small>BMI ≥ 24</small></td><td class="v">5~11 kg</td><td>约 0.22~0.30 kg</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="sec-h"><span class="n num">01</span><h2>体重和妊娠纹</h2><small>WEIGHT</small></div>
|
||||
<p class="key">长得越快越易长纹，控体重是最省钱的预防。</p>
|
||||
<div class="panel fade">
|
||||
<div class="chart">
|
||||
<div class="chart-h"><b>累计增重推荐区间</b><span id="chG"></span></div>
|
||||
<svg id="curve" viewBox="0 0 320 172" role="img" aria-label="按孕周的累计增重推荐区间">
|
||||
<g id="grid"></g>
|
||||
<path class="band" id="band"/>
|
||||
<path class="ln" id="hiL"/>
|
||||
<path class="ln lo" id="loL"/>
|
||||
<g id="nowG"></g>
|
||||
</svg>
|
||||
<p class="cap" id="cap">孕早期只长 0~2kg，13 周后进入匀速增长。</p>
|
||||
</div>
|
||||
<div class="bmi" id="bmi"></div>
|
||||
<p class="note">BMI = 体重(kg) ÷ 身高(m)²。双胎或有并发症，以产检医生建议为准。</p>
|
||||
</div>
|
||||
<button class="btn" 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>
|
||||
</section>
|
||||
|
||||
<!-- 2 时间轴：当前阶段按孕周高亮 -->
|
||||
<!-- 02 时间轴：当前阶段按孕周高亮 -->
|
||||
<section class="sec" id="s2">
|
||||
<div class="sec-h"><span class="n">02</span><h2>不同阶段怎么做</h2></div>
|
||||
<div class="sec-h"><span class="n num">02</span><h2>不同阶段怎么做</h2><small>CARE</small></div>
|
||||
<p class="key">早打底，红纹趁早处理，白纹留到产后。</p>
|
||||
<div class="tl">
|
||||
<article class="st fade" id="stA">
|
||||
<div class="hd"><b>孕早期起 · 预防</b><span class="now">你在这里</span></div>
|
||||
<p>洗澡后和睡前，肚皮、大腿、臀部抹保湿霜，按摩到吸收。<span id="stA2">饮食吃够蛋白质和维 C。</span></p>
|
||||
<div class="why"><em>为什么这样做</em>皮肤水润有弹性，纤维不易拉断。</div>
|
||||
</article>
|
||||
<article class="st fade" id="stB">
|
||||
<div class="hd"><b>冒出红纹 · 马上处理</b><span class="now">你在这里</span></div>
|
||||
<p>红纹处每天薄涂 2 次医用硅酮凝胶，至少坚持 2 个月。</p>
|
||||
<div class="why"><em>为什么这样做</em>红纹期还在修复，最容易变淡。</div>
|
||||
</article>
|
||||
<article class="st fade" id="stC">
|
||||
<div class="hd"><b>白纹 · 产后</b><span class="now">你在这里</span></div>
|
||||
<p>涂抹作用有限，产后去正规医院皮肤科，评估激光、微针等。</p>
|
||||
<div class="why"><em>为什么这样做</em>白纹已是疤，要靠刺激长新胶原。</div>
|
||||
</article>
|
||||
<div class="panel pink">
|
||||
<div class="tl">
|
||||
<article class="st fade" id="stA">
|
||||
<span class="dot num">1</span>
|
||||
<div class="when">孕早期起</div>
|
||||
<div class="hd"><b>每天打底预防</b><span class="now">你在这里</span></div>
|
||||
<p>洗澡后和睡前，肚皮、大腿、臀部抹保湿霜，按摩到吸收；吃够蛋白质和维 C。</p>
|
||||
<div class="why"><em>为什么这样做</em>皮肤水润有弹性，纤维不易拉断。</div>
|
||||
</article>
|
||||
<article class="st fade" id="stB">
|
||||
<span class="dot num">2</span>
|
||||
<div class="when">冒出红纹</div>
|
||||
<div class="hd"><b>马上处理</b><span class="now">你在这里</span></div>
|
||||
<p>红纹处每天薄涂 2 次医用硅酮凝胶，至少坚持 2 个月。</p>
|
||||
<div class="why"><em>为什么这样做</em>红纹期还在修复，最容易变淡。</div>
|
||||
</article>
|
||||
<article class="st fade" id="stC">
|
||||
<span class="dot num">3</span>
|
||||
<div class="when">白纹 · 产后</div>
|
||||
<div class="hd"><b>找皮肤科</b><span class="now">你在这里</span></div>
|
||||
<p>涂抹作用有限，产后去正规医院皮肤科，评估激光、微针等。</p>
|
||||
<div class="why"><em>为什么这样做</em>白纹已是疤，要靠刺激长新胶原。</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 成分速查 -->
|
||||
<!-- 03 成分对照 -->
|
||||
<section class="sec" id="s3">
|
||||
<div class="sec-h"><span class="n">03</span><h2>成分速查</h2></div>
|
||||
<p class="key">买之前翻成分表，红色的孕期别碰。</p>
|
||||
<div class="card fade">
|
||||
<div class="ing"><span class="lt r">禁用</span><div><b>维 A 酸 / 视黄醇 / 视黄醛</b><span>可能影响胎儿，孕期哺乳期都别用</span></div></div>
|
||||
<div class="ing"><span class="lt g">可用</span><div><b>透明质酸、神经酰胺、角鲨烷</b><span>补水修护，日常打底用</span></div></div>
|
||||
<div class="ing"><span class="lt g">可用</span><div><b>医用硅酮凝胶</b><span>成膜保湿，帮红纹变淡</span></div></div>
|
||||
<div class="ing"><span class="lt a">先问医生</span><div><b>积雪草类修护霜</b><span>抗炎促修复，用前问产检医生</span></div></div>
|
||||
<div class="sec-h"><span class="n num">03</span><h2>成分速查</h2><small>INGREDIENTS</small></div>
|
||||
<p class="key">买之前翻成分表，左边这栏孕期别碰。</p>
|
||||
<div class="vs fade">
|
||||
<div class="col no">
|
||||
<div class="ch"><svg class="ic"><use href="#i-no" xlink:href="#i-no"/></svg>孕期别碰</div>
|
||||
<ul><li>维 A 酸</li><li>视黄醇</li><li>视黄醛</li></ul>
|
||||
<p>可能影响胎儿<br>哺乳期也别用</p>
|
||||
</div>
|
||||
<div class="col ok">
|
||||
<div class="ch"><svg class="ic"><use href="#i-ok" xlink:href="#i-ok"/></svg>放心用</div>
|
||||
<ul>
|
||||
<li>透明质酸<span>补水，日常打底</span></li>
|
||||
<li>神经酰胺、角鲨烷<span>修护屏障</span></li>
|
||||
<li>医用硅酮凝胶<span>成膜保湿，帮红纹变淡</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ask fade"><span class="tag">先问医生</span><div><b>积雪草类修护霜</b><br>抗炎促修复，用前问产检医生</div></div>
|
||||
</section>
|
||||
|
||||
<div id="tools"></div>
|
||||
|
||||
<details class="src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源</summary>
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<ul>
|
||||
<li><b>增重范围：</b>中国营养学会《中国妇女妊娠期体重监测与评价》（T/CNSS 009-2021）及 WS/T 801-2022，按孕前 BMI 分档；偏胖档含超重 7~11kg、肥胖（BMI≥28）5~9kg。</li>
|
||||
<li><b>增重范围：</b>中国营养学会《中国妇女妊娠期体重监测与评价》（T/CNSS 009-2021）及 WS/T 801-2022，按孕前 BMI 分档；孕早期增重 0~2kg；偏胖档含超重 7~11kg、肥胖（BMI≥28）5~9kg。曲线为按总增重区间线性示意。</li>
|
||||
<li><b>维 A 酸：</b>0.1% 维 A 酸涂早期红纹 6 个月，10 人中 8 人明显改善，对照组 12 人中 1 人（Arch Dermatol 1996，小样本）。孕期哺乳期禁用，产后不哺乳时遵医嘱使用。</li>
|
||||
<li><b>医用硅酮：</b>1522 人连用 2 个月以上，颜色、柔软度改善约 70%~85%（研究对象为疤痕，非专门针对妊娠纹，仅作参考）。</li>
|
||||
<li><b>透明质酸复方凝胶：</b>约 50 人连用 12 周，红纹深度和颜色明显减轻，但不会完全消失。</li>
|
||||
@@ -233,6 +299,7 @@ td.v{font-weight:700;color:var(--ink)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../_shared/tools.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -255,14 +322,67 @@ td.v{font-weight:700;color:var(--ink)}
|
||||
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; });
|
||||
/* ===== 01 增重区间曲线 + BMI 分组卡 =====
|
||||
区间：孕早期（≤13 周）0~2kg，之后线性到足月总增重区间（示意，标准见参考来源） */
|
||||
var G = [
|
||||
{ k: 'lean', n: '偏瘦', r: 'BMI < 18.5', lo: 11, hi: 16, w: '0.46' },
|
||||
{ k: 'normal', n: '正常', r: 'BMI 18.5~23.9', lo: 8, hi: 14, w: '0.37' },
|
||||
{ k: 'heavy', n: '偏胖', r: 'BMI ≥ 24', lo: 5, hi: 11, w: '0.22~0.30' }
|
||||
];
|
||||
var X0 = 30, X1 = 304, Y0 = 150, KG = 16, YK = 8.4; // 0~40 周、0~16kg
|
||||
function x(w) { return (X0 + (X1 - X0) * w / 40).toFixed(1); }
|
||||
function y(k) { return (Y0 - k * YK).toFixed(1); }
|
||||
function rng(g, w) { return w <= 13 ? [0, 2 * w / 13] : [g.lo * (w - 13) / 27, 2 + (g.hi - 2) * (w - 13) / 27]; }
|
||||
var wk = 0, cur = 1;
|
||||
(function grid() {
|
||||
var s = '';
|
||||
[0, 4, 8, 12, 16].forEach(function (k) { s += '<line class="gl" x1="' + X0 + '" x2="' + X1 + '" y1="' + y(k) + '" y2="' + y(k) + '"/><text class="ax num" x="' + (X0 - 6) + '" y="' + (+y(k) + 3.5) + '" text-anchor="end">' + k + (k === 16 ? 'kg' : '') + '</text>'; });
|
||||
[[0, '0'], [13, '13周'], [28, '28周'], [40, '40周']].forEach(function (t) { s += '<text class="ax num" x="' + x(t[0]) + '" y="166" text-anchor="' + (t[0] === 40 ? 'end' : t[0] === 0 ? 'start' : 'middle') + '">' + t[1] + '</text>'; });
|
||||
$('#grid').innerHTML = s;
|
||||
})();
|
||||
function draw() {
|
||||
var g = G[cur];
|
||||
var hi = 'M' + x(0) + ' ' + y(0) + ' L' + x(13) + ' ' + y(2) + ' L' + x(40) + ' ' + y(g.hi);
|
||||
var lo = 'M' + x(13) + ' ' + y(0) + ' L' + x(40) + ' ' + y(g.lo);
|
||||
$('#hiL').setAttribute('d', hi);
|
||||
$('#loL').setAttribute('d', lo);
|
||||
$('#band').setAttribute('d', hi + ' L' + x(40) + ' ' + y(g.lo) + ' L' + x(13) + ' ' + y(0) + ' Z');
|
||||
$('#chG').innerHTML = g.n + ' · 足月 <b class="num">' + g.lo + '~' + g.hi + '</b> kg';
|
||||
var ng = '';
|
||||
if (wk > 0 && wk <= 40) {
|
||||
var r = rng(g, wk), xx = x(wk);
|
||||
var anchor = wk > 30 ? 'end' : wk < 8 ? 'start' : 'middle';
|
||||
ng = '<line class="nowl" x1="' + xx + '" x2="' + xx + '" y1="20" y2="' + Y0 + '"/>' +
|
||||
'<circle cx="' + xx + '" cy="' + y((r[0] + r[1]) / 2) + '" r="4" fill="#fff" stroke="#1F2329" stroke-width="1.6"/>' +
|
||||
'<text class="nowt" x="' + xx + '" y="16" text-anchor="' + anchor + '">你在这里 · ' + wk + '周</text>';
|
||||
$('#cap').innerHTML = '孕 ' + wk + ' 周，建议累计增重 <b class="num">' + r[0].toFixed(1) + '~' + r[1].toFixed(1) + ' kg</b>（' + g.n + '）。';
|
||||
}
|
||||
$('#nowG').innerHTML = ng;
|
||||
[].forEach.call(document.querySelectorAll('.bm'), function (b, i) { b.classList.toggle('on', i === cur); b.setAttribute('aria-pressed', i === cur); });
|
||||
}
|
||||
$('#bmi').innerHTML = G.map(function (g, i) {
|
||||
return '<button class="bm" data-i="' + i + '"><span class="l">' + g.n + '</span><span class="r num">' + g.r + '</span>' +
|
||||
'<span class="v num">' + g.lo + '~' + g.hi + '<em>kg</em></span>' +
|
||||
'<span class="rul"><i style="left:' + (g.lo / KG * 100) + '%;width:' + ((g.hi - g.lo) / KG * 100) + '%"></i></span>' +
|
||||
'<span class="w">中晚期每周<br><b class="num">' + g.w + '</b> kg</span></button>';
|
||||
}).join('');
|
||||
[].forEach.call(document.querySelectorAll('.bm'), function (b) { b.addEventListener('click', function () { cur = +b.dataset.i; draw(); }); });
|
||||
draw();
|
||||
|
||||
/* 按孕周点亮阶段（stA 预防 / stA2 饮食并在 stA 内 / stB 红纹 / stC 白纹产后） */
|
||||
function mark(stage, t, d) {
|
||||
var id = stage === 'stA2' ? 'stA' : stage;
|
||||
/* ===== 推荐工具 ===== */
|
||||
function tools() {
|
||||
if (!window.TopicTools) return;
|
||||
TopicTools.render(document.getElementById('tools'), [
|
||||
{ id: 'yunqitizhong', why: '每周称一次，不超标防纹', btn: '去称重' },
|
||||
{ id: 'bushui', why: '皮肤水润，先要喝够水' },
|
||||
{ id: 'yunqinengbuchi', why: '控体重先管住嘴，吃前查', btn: '去查' }
|
||||
], { title: '用得上的工具', color: '#F25C78', bg: '#FFEFF2', wk: wk });
|
||||
}
|
||||
tools();
|
||||
|
||||
/* ===== 按孕周点亮阶段（stA 预防 / stB 红纹 / stC 白纹产后），同时标到曲线上 ===== */
|
||||
function mark(id, t, d) {
|
||||
var el = document.getElementById(id); if (el) el.classList.add('hl');
|
||||
$('#meT').textContent = t; $('#meD').textContent = d;
|
||||
$('#meGo').onclick = function () { go(id); };
|
||||
@@ -275,18 +395,23 @@ td.v{font-weight:700;color:var(--ink)}
|
||||
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;
|
||||
var w = +p.week;
|
||||
if (w >= 20) mark('stA', '孕 ' + w + ' 周 · 肚子长得最快', '坚持打底，留意有没有冒红纹');
|
||||
else mark('stA', '孕 ' + w + ' 周 · 正是打底好时候', '现在开始抹，比长了再补管用');
|
||||
wk = w; draw(); tools();
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* 进场动画（轻） */
|
||||
/* 进场 fade-up：按批次 60ms 错开 */
|
||||
var fades = document.querySelectorAll('.fade');
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { root: sc, threshold: .1 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
var io = new IntersectionObserver(function (es) {
|
||||
var n = 0;
|
||||
es.forEach(function (e) { if (e.isIntersecting) { e.target.style.transitionDelay = (n++ * 60) + 'ms'; e.target.classList.add('in'); io.unobserve(e.target); } });
|
||||
}, { root: sc, threshold: .1 });
|
||||
[].forEach.call(fades, function (el) { io.observe(el); });
|
||||
} else [].forEach.call(fades, function (el) { el.classList.add('in'); });
|
||||
|
||||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
var y0 = 0;
|
||||
|
||||
@@ -6,91 +6,143 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>孕期营养影响孩子智商吗？</title>
|
||||
<!-- 孕期专题 · 营养与智力（孕期首页「其他妈妈也在搜」第 3 条进入）。
|
||||
2026-10-31 按《孕期专题统一设计规范 v2》重做：清新、简洁、核心明确。主色 #F08A24。
|
||||
自成一页：不引 app.js；回首页走相对路径 ../../；体重工具 /yunqi-tizhong/ 同源 + 带身份。 -->
|
||||
2026-10-31 v3：在 v2「清新简洁」基础上加设计感（渐变 hero + 结论卡 + 数字卡 + 营养素网格 + 孕周时间轴 + 误区对照两栏 + 推荐工具）。主色 #F08A24。
|
||||
自成一页：不引 app.js；回首页走相对路径 ../../；工具入口走 ../_shared/tools.js（同源 + 带身份）。 -->
|
||||
<style>
|
||||
:root{--c:#F08A24;--cbg:#FFF3E6;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--soft:#F7F8FA}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--t);font:15px/1.75 -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))}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
img{display:block;max-width:100%}
|
||||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
b,strong{color:var(--h)}
|
||||
.num{font-variant-numeric:tabular-nums;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
|
||||
/* 背景装饰：浅橙渐变 + 两个柔和大圆，只在首屏，不挡字 */
|
||||
.deco{position:absolute;left:0;right:0;top:0;height:560px;overflow:hidden;pointer-events:none;background:linear-gradient(160deg,var(--cbg) 0%,#fff 70%)}
|
||||
.deco i{position:absolute;border-radius:50%;background:rgba(240,138,36,.08)}
|
||||
.deco .c1{width:240px;height:240px;right:-90px;top:-70px}
|
||||
.deco .c2{width:120px;height:120px;left:-50px;top:250px;background:rgba(240,138,36,.06)}
|
||||
|
||||
/* 顶栏 */
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.on{background:#fff;border-bottom-color:var(--line)}
|
||||
.bar .back{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--h)}
|
||||
.bar .back:active{background:rgba(0,0,0,.04)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
|
||||
|
||||
.wrap{padding:0 20px}
|
||||
.wrap{position:relative;padding:0 20px}
|
||||
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;border-radius:20px;background:var(--cbg)}
|
||||
h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.ans{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.65;color:var(--h)}
|
||||
/* Hero：标题在上，插画右侧出血，结论卡压在插画下沿 */
|
||||
.eyebrow{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--c)}
|
||||
h1{margin-top:6px;font-size:28px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(240,138,36,.22) 0)}
|
||||
.hpic{margin:18px -20px 0 44px}
|
||||
.hpic img{width:100%;height:190px;object-fit:cover;object-position:50% 40%;border-radius:24px 0 0 24px;background:var(--cbg)}
|
||||
.ans{position:relative;margin:-44px 28px 0 0;padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(240,138,36,.12)}
|
||||
.ans .tag{display:inline-block;padding:1px 10px;border-radius:99px;background:var(--cbg);color:var(--c);font-size:12px;font-weight:700;line-height:20px}
|
||||
.ans p{margin-top:8px;font-size:17px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
.ans p span{color:var(--c)}
|
||||
|
||||
/* 孕周提示条 */
|
||||
.me{display:none;margin-top:12px;width:100%;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);font-size:13.5px;text-align:left;color:var(--t)}
|
||||
.me{display:none;margin-top:14px;width:100%;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13.5px;text-align:left;color:var(--t);transition:transform .15s}
|
||||
.me.on{display:flex}
|
||||
.me:active{transform:scale(.98)}
|
||||
.me .ic{color:var(--c);width:20px;height:20px}
|
||||
.me b{color:var(--c);margin-right:4px}
|
||||
.me b{color:var(--c);margin-right:6px}
|
||||
.me span{flex:1;min-width:0}
|
||||
|
||||
/* 记住这 3 点 */
|
||||
.three{margin-top:28px;padding:18px 18px 6px;border-radius:18px;border:1px solid var(--line)}
|
||||
.three h2{font-size:18px;font-weight:700;color:var(--h);margin-bottom:6px}
|
||||
.pt{display:flex;gap:14px;padding:10px 0 12px}
|
||||
.pt+.pt{border-top:1px solid var(--line)}
|
||||
.pt .n{flex:none;width:24px;font-size:26px;font-weight:800;line-height:1.1;color:var(--c);font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
|
||||
.pt b{display:block;font-size:16px;line-height:1.5}
|
||||
.pt small{display:block;font-size:12.5px;color:var(--m);line-height:1.6;margin-top:2px}
|
||||
/* 记住这 3 点：三张数字卡 */
|
||||
.lbl{display:flex;align-items:baseline;gap:8px;font-size:18px;font-weight:800;color:var(--h)}
|
||||
.lbl small{font-size:11px;font-weight:700;letter-spacing:.1em;color:#C9CDD4}
|
||||
.three{margin-top:40px}
|
||||
.cards3{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
||||
.c3{padding:12px 10px 14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.c3 .n{display:block;font-size:34px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c)}
|
||||
.c3 b{display:block;margin-top:10px;font-size:14.5px;font-weight:800;line-height:1.45}
|
||||
.c3 small{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--m)}
|
||||
|
||||
/* 节 */
|
||||
.sec{margin-top:36px}
|
||||
.sec h2{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--h)}
|
||||
.sec h2 i{font-style:normal;font-size:13px;font-weight:700;color:var(--c);background:var(--cbg);border-radius:99px;width:22px;height:22px;display:grid;place-items:center}
|
||||
.key{margin-top:6px;font-weight:700;color:var(--c)}
|
||||
.items{margin-top:12px;border-radius:18px;border:1px solid var(--line);padding:2px 16px}
|
||||
.it{display:flex;gap:12px;padding:13px 0}
|
||||
.it+.it{border-top:1px solid var(--line)}
|
||||
.it .ib{flex:none;width:36px;height:36px;border-radius:12px;background:var(--cbg);color:var(--c);display:grid;place-items:center}
|
||||
.it p{flex:1;min-width:0;line-height:1.65}
|
||||
.it p b{margin-right:6px}
|
||||
.more{margin-top:10px;font-size:13.5px;color:var(--m);padding-left:2px}
|
||||
.more b{color:var(--t);font-weight:600}
|
||||
.sec{margin-top:40px}
|
||||
.sec.box{padding:22px 16px 18px;margin-left:-6px;margin-right:-6px;border-radius:24px;background:var(--soft)}
|
||||
.sh{display:flex;align-items:center;gap:10px}
|
||||
.sh .no{font-size:13px;font-weight:800;color:var(--c);letter-spacing:.04em}
|
||||
.sh h2{font-size:18px;font-weight:800;color:var(--h)}
|
||||
.key{margin-top:6px;font-size:14.5px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
|
||||
/* 01 营养素网格 */
|
||||
.grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||||
.nu{padding:14px 14px 12px;border-radius:18px;background:#fff;transition:transform .15s}
|
||||
.nu:active{transform:scale(.98)}
|
||||
.nu .ib{width:34px;height:34px;border-radius:11px;background:var(--cbg);color:var(--c);display:grid;place-items:center}
|
||||
.nu .ib .ic{width:19px;height:19px}
|
||||
.nu b{display:block;margin-top:10px;font-size:18px;font-weight:800;line-height:1.3}
|
||||
.nu .r{display:block;font-size:13px;color:var(--t);line-height:1.5}
|
||||
.nu .f{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
.more{margin-top:12px;font-size:12.5px;color:var(--m)}
|
||||
.more b{color:var(--t);font-weight:700}
|
||||
.pic{margin-top:14px}
|
||||
.pic img{width:100%;height:120px;object-fit:cover;border-radius:18px}
|
||||
.pic img{width:100%;height:104px;object-fit:cover;border-radius:18px}
|
||||
|
||||
/* 阶段表 */
|
||||
.tbl{margin-top:12px;border-radius:18px;border:1px solid var(--line);overflow:hidden}
|
||||
.tr{display:grid;grid-template-columns:76px 70px 1fr;gap:8px;align-items:center;padding:12px 14px;font-size:14px;line-height:1.55}
|
||||
.tr+.tr{border-top:1px solid var(--line)}
|
||||
.tr.hd{background:var(--soft);font-size:12.5px;color:var(--m);padding:8px 14px}
|
||||
.tr .s b{display:block;font-size:15px}
|
||||
.tr .s small{font-size:12px;color:var(--m)}
|
||||
.tr .f{font-weight:700;color:var(--c)}
|
||||
.tr.hl{background:var(--cbg);box-shadow:inset 3px 0 0 var(--c)}
|
||||
/* 为什么？折叠 */
|
||||
.why{margin-top:12px;border-radius:14px;background:#fff}
|
||||
.why summary{list-style:none;display:flex;align-items:center;gap:6px;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--h);cursor:pointer}
|
||||
.why summary::-webkit-details-marker{display:none}
|
||||
.why summary .ar{margin-left:auto;width:16px;height:16px;color:var(--m);transition:transform .2s}
|
||||
.why[open] summary .ar{transform:rotate(180deg)}
|
||||
.why p{padding:0 14px 12px;font-size:13.5px;line-height:1.7}
|
||||
|
||||
/* 误区 */
|
||||
.my{display:flex;gap:12px;padding:13px 0}
|
||||
.my+.my{border-top:1px solid var(--line)}
|
||||
.my .x{flex:none;width:22px;height:22px;margin-top:2px;color:#C9CDD4}
|
||||
.my .q{display:block;font-size:14px;color:var(--m);text-decoration:line-through;text-decoration-color:#C9CDD4}
|
||||
.my p{line-height:1.65}
|
||||
/* 02 孕周刻度尺 + 时间轴 */
|
||||
.ruler{margin-top:16px;position:relative;padding-top:26px}
|
||||
.rbar{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:3px}
|
||||
.rbar i{display:block;height:100%}
|
||||
.rbar .e{flex:13;background:rgba(240,138,36,.25)}
|
||||
.rbar .m{flex:14;background:rgba(240,138,36,.55)}
|
||||
.rbar .l{flex:13;background:var(--c)}
|
||||
.rtk{position:relative;height:18px;margin-top:4px;font-size:11.5px;color:var(--m)}
|
||||
.rtk span{position:absolute;transform:translateX(-50%);white-space:nowrap}
|
||||
.rtk span:first-child{transform:none}
|
||||
.rtk span:last-child{transform:translateX(-100%)}
|
||||
.you{display:none;position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;background:var(--h);border-radius:99px;padding:0 8px;line-height:19px;white-space:nowrap}
|
||||
.you:after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:var(--h)}
|
||||
.you.on{display:block}
|
||||
|
||||
/* 体重卡 */
|
||||
.wt{margin-top:36px;padding:18px;border-radius:18px;background:var(--soft)}
|
||||
.wt .hd{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--h)}
|
||||
.wt .hd .ic{color:var(--c)}
|
||||
.wt p{margin-top:6px;font-size:14px}
|
||||
.btn{margin-top:14px;width:100%;height:46px;border-radius:99px;background:var(--c);color:#fff;font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
|
||||
.btn .ic{width:18px;height:18px}
|
||||
.tl{margin-top:14px;position:relative;padding-left:22px}
|
||||
.tl:before{content:"";position:absolute;left:6px;top:10px;bottom:22px;width:2px;background:var(--line);border-radius:2px}
|
||||
.st{position:relative;padding:12px 14px 14px;border-radius:18px;border:1px solid var(--line);background:#fff}
|
||||
.st+.st{margin-top:10px}
|
||||
.st:before{content:"";position:absolute;left:-22px;top:17px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--c)}
|
||||
.st.hl{border-color:rgba(240,138,36,.45);background:var(--cbg)}
|
||||
.st.hl:before{background:var(--c);box-shadow:0 0 0 4px rgba(240,138,36,.18)}
|
||||
.st .hd{display:flex;align-items:center;gap:8px}
|
||||
.st .hd b{font-size:16px;font-weight:800}
|
||||
.st .hd .wk{font-size:12px;color:var(--m)}
|
||||
.st .hd .fo{margin-left:auto;padding:1px 9px;border-radius:99px;background:var(--cbg);color:var(--c);font-size:12px;font-weight:700;line-height:20px}
|
||||
.st.hl .hd .fo{background:#fff}
|
||||
.st p{margin-top:4px;font-size:14px;line-height:1.6}
|
||||
.amt{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--m)}
|
||||
.amt .tr{flex:1;height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
|
||||
.st.hl .amt .tr{background:#fff}
|
||||
.amt .tr i{display:block;height:100%;border-radius:99px;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.3,1) .2s}
|
||||
.in .amt .tr i,.amt.in .tr i{transform:scaleX(1)}
|
||||
.amt em{flex:none;width:72px;font-style:normal;text-align:right;color:var(--t)}
|
||||
|
||||
/* 03 误区：错 / 对 两栏 */
|
||||
.vs{margin-top:14px}
|
||||
.vh{display:grid;grid-template-columns:1fr 1.2fr;gap:8px;padding:0 4px 8px;font-size:12px;font-weight:700}
|
||||
.vh span{display:flex;align-items:center;gap:4px}
|
||||
.vh .ic{width:16px;height:16px}
|
||||
.vh .no{color:var(--m)}
|
||||
.vh .ok{color:var(--c)}
|
||||
.vr{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}
|
||||
.vr+.vr{margin-top:8px}
|
||||
.vr .x{padding:12px;border-radius:14px;border:1px dashed #DDE0E5;font-size:13.5px;line-height:1.55;color:var(--m);text-decoration:line-through;text-decoration-color:#C9CDD4}
|
||||
.vr .y{padding:12px;border-radius:14px;background:#fff;box-shadow:inset 3px 0 0 var(--c);font-size:13.5px;line-height:1.55;font-weight:600;color:var(--h)}
|
||||
|
||||
/* 来源 + 免责 */
|
||||
.src{margin-top:32px;border-top:1px solid var(--line);padding-top:6px}
|
||||
.src{margin-top:28px;border-top:1px solid var(--line);padding-top:6px}
|
||||
.src summary{list-style:none;display:flex;align-items:center;gap:6px;padding:10px 0;font-size:13.5px;color:var(--m);cursor:pointer}
|
||||
.src summary::-webkit-details-marker{display:none}
|
||||
.src summary .ic{width:18px;height:18px}
|
||||
@@ -100,9 +152,10 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
.src li+li{margin-top:6px}
|
||||
.foot{margin-top:10px;font-size:12px;line-height:1.7;color:var(--m)}
|
||||
|
||||
/* 进场 */
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
|
||||
/* 进场：fade-up 12px，同批 60ms 错开 */
|
||||
.fade{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}.amt .tr i{transform:none;transition:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -113,7 +166,7 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
<symbol id="i-fish" viewBox="0 0 24 24"><path d="M3 12c3-4.5 8-6 12-3.5L20 6v12l-5-2.5C11 18 6 16.5 3 12z"/><path d="M8 11.5h.01"/></symbol>
|
||||
<symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 3.5c3.5 4.5 6 7.8 6 10.5a6 6 0 0 1-12 0c0-2.7 2.5-6 6-10.5z"/></symbol>
|
||||
<symbol id="i-x" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></symbol>
|
||||
<symbol id="i-scale" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="M8 9.5a5.5 5.5 0 0 1 8 0M12 9.5l1.2-1.8"/></symbol>
|
||||
<symbol id="i-ok" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.8 2.8L16 10"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="3"/><path d="M4 10h16M9 3v4M15 3v4"/></symbol>
|
||||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5zM20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z"/></symbol>
|
||||
@@ -121,6 +174,7 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
<div class="deco" aria-hidden="true"><i class="c1"></i><i class="c2"></i></div>
|
||||
<header class="bar" id="bar">
|
||||
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
|
||||
<span class="t">孕期专题</span>
|
||||
@@ -128,59 +182,82 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="孕妈坐在餐桌前，桌上有鱼、青菜、鸡蛋和牛奶">
|
||||
<h1>孕期营养<br>影响孩子智商吗？</h1>
|
||||
<div class="ans">会影响大脑发育，但关键是别缺，没有吃了变聪明的食物。</div>
|
||||
<button class="me" id="me" type="button"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg><span><b id="meT"></b><em id="meD" style="font-style:normal"></em></span><svg class="ic" style="color:#C9CDD4;width:16px;height:16px"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
</section>
|
||||
|
||||
<section class="three fade">
|
||||
<h2>记住这 3 点</h2>
|
||||
<div class="pt"><span class="n">1</span><div><b>叶酸每天 0.4mg</b><small>孕前 3 个月开始，至少吃到孕 3 个月</small></div></div>
|
||||
<div class="pt"><span class="n">2</span><div><b>炒菜用加碘盐</b><small>缺碘会影响宝宝大脑发育</small></div></div>
|
||||
<div class="pt"><span class="n">3</span><div><b>每周 2～3 次鱼</b><small>补 DHA，选刺少、汞低的鱼</small></div></div>
|
||||
</section>
|
||||
|
||||
<section class="sec fade" id="s1">
|
||||
<h2><i>1</i>大脑最需要的 4 种营养</h2>
|
||||
<p class="key">这 4 样别缺，比任何「补脑品」都管用。</p>
|
||||
<div class="items">
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><p><b>叶酸</b>预防神经管缺陷。多吃绿叶菜，再加每天一片叶酸。</p></div>
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-salt" xlink:href="#i-salt"/></svg></span><p><b>碘</b>帮宝宝大脑正常发育。用加碘盐，常吃海带、紫菜。</p></div>
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></span><p><b>DHA</b>大脑和视力的原料。主要靠吃鱼，不爱吃鱼再问医生。</p></div>
|
||||
<div class="it"><span class="ib"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span><p><b>铁</b>缺铁贫血，宝宝供氧受影响。吃红肉、动物血，配蔬果。</p></div>
|
||||
<p class="eyebrow">NUTRITION · 孕期营养</p>
|
||||
<h1>孕期营养<br>影响孩子<em>智商</em>吗？</h1>
|
||||
<div class="hpic"><img src="img/hero.webp" alt="孕妈坐在餐桌前，桌上有鱼、青菜、鸡蛋和牛奶"></div>
|
||||
<div class="ans">
|
||||
<span class="tag">一句话答案</span>
|
||||
<p>会影响大脑发育，但关键是<span>别缺</span>，没有吃了变聪明的食物。</p>
|
||||
</div>
|
||||
<p class="more"><b>另外：</b>蛋白质、胆碱、维生素 D，靠鸡蛋、奶、晒太阳。</p>
|
||||
<div class="pic"><img src="img/foods.webp" alt="鸡蛋、三文鱼、菠菜、紫菜、红肉、牛奶、豆腐" loading="lazy"></div>
|
||||
<button class="me" id="me" type="button"><svg class="ic"><use href="#i-cal" xlink:href="#i-cal"/></svg><span><b id="meT" class="num"></b><em id="meD" style="font-style:normal"></em></span><svg class="ic" style="color:#C9CDD4;width:16px;height:16px"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
</section>
|
||||
|
||||
<section class="sec fade" id="s2">
|
||||
<h2><i>2</i>孕早中晚期各吃什么</h2>
|
||||
<p class="key">孕早期不用多吃，之后每天也只多一点。</p>
|
||||
<div class="tbl">
|
||||
<div class="tr hd"><span>阶段</span><span>重点</span><span>一句话</span></div>
|
||||
<div class="tr" id="stE"><span class="s"><b>孕早期</b><small>1～13 周</small></span><span class="f">叶酸</span><span>吃得下就好，不用加量</span></div>
|
||||
<div class="tr" id="stM"><span class="s"><b>孕中期</b><small>14～27 周</small></span><span class="f">奶、肉蛋</span><span>每天多一杯奶、一份肉蛋</span></div>
|
||||
<div class="tr" id="stL"><span class="s"><b>孕晚期</b><small>28 周起</small></span><span class="f">铁、DHA</span><span>多吃红肉和鱼，管住体重</span></div>
|
||||
<section class="three">
|
||||
<h2 class="lbl fade">记住这 3 点<small>KEY POINTS</small></h2>
|
||||
<div class="cards3">
|
||||
<div class="c3 fade"><span class="n num">01</span><b>叶酸每天<br><span class="num">0.4mg</span></b><small>孕前 3 月起<br>吃到孕 3 月</small></div>
|
||||
<div class="c3 fade"><span class="n num">02</span><b>炒菜用<br>加碘盐</b><small>缺碘会影响<br>大脑发育</small></div>
|
||||
<div class="c3 fade"><span class="n num">03</span><b>每周吃鱼<br><span class="num">2～3</span> 次</b><small>补 DHA<br>选低汞的鱼</small></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sec fade" id="s3">
|
||||
<h2><i>3</i>3 个误区</h2>
|
||||
<p class="key">「补脑」食物和贵价补剂，替代不了均衡饮食。</p>
|
||||
<div class="items">
|
||||
<div class="my"><svg class="ic x"><use href="#i-x" xlink:href="#i-x"/></svg><div><span class="q">多吃核桃，宝宝更聪明</span><p>形似大脑不等于补脑，一天一小把。</p></div></div>
|
||||
<div class="my"><svg class="ic x"><use href="#i-x" xlink:href="#i-x"/></svg><div><span class="q">补剂越贵越好</span><p>看成分含量，几种同吃易超量。</p></div></div>
|
||||
<div class="my"><svg class="ic x"><use href="#i-x" xlink:href="#i-x"/></svg><div><span class="q">一人吃，两人补</span><p>孕中晚期每天只多一杯奶、一个蛋的量。</p></div></div>
|
||||
<section class="sec box" id="s1">
|
||||
<div class="sh fade"><span class="no num">01</span><h2>大脑最需要的 4 种营养</h2></div>
|
||||
<p class="key fade">这 4 样别缺，比任何「补脑品」都管用。</p>
|
||||
<div class="grid">
|
||||
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-leaf" xlink:href="#i-leaf"/></svg></span><b>叶酸</b><span class="r">预防神经管缺陷</span><span class="f">绿叶菜 + 每天一片</span></div>
|
||||
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-salt" xlink:href="#i-salt"/></svg></span><b>碘</b><span class="r">帮大脑正常发育</span><span class="f">加碘盐、海带紫菜</span></div>
|
||||
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-fish" xlink:href="#i-fish"/></svg></span><b>DHA</b><span class="r">大脑和视力的原料</span><span class="f">主要靠吃鱼</span></div>
|
||||
<div class="nu fade"><span class="ib"><svg class="ic"><use href="#i-drop" xlink:href="#i-drop"/></svg></span><b>铁</b><span class="r">缺了宝宝供氧少</span><span class="f">红肉、动物血 + 蔬果</span></div>
|
||||
</div>
|
||||
<p class="more fade"><b>另外：</b>蛋白质、胆碱、维生素 D 靠蛋、奶、晒太阳。</p>
|
||||
<details class="why fade">
|
||||
<summary>为什么「别缺」比「多补」重要？<svg class="ic ar"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<p>大脑发育需要足量原料，缺了会受影响；够了以后再多吃，并不会更聪明，补剂叠加反而可能超量。不爱吃鱼、贫血，再请医生判断要不要补。</p>
|
||||
</details>
|
||||
<div class="pic fade"><img src="img/foods.webp" alt="鸡蛋、三文鱼、菠菜、紫菜、红肉、牛奶、豆腐" loading="lazy"></div>
|
||||
</section>
|
||||
|
||||
<section class="sec" id="s2">
|
||||
<div class="sh fade"><span class="no num">02</span><h2>孕早中晚期各吃什么</h2></div>
|
||||
<p class="key fade">孕早期不用多吃，之后每天也只多一点。</p>
|
||||
<div class="ruler fade" aria-hidden="true">
|
||||
<span class="you num" id="you"></span>
|
||||
<div class="rbar"><i class="e"></i><i class="m"></i><i class="l"></i></div>
|
||||
<div class="rtk num"><span style="left:0">1 周</span><span style="left:32.5%">13</span><span style="left:67.5%">27</span><span style="left:100%">40 周</span></div>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<div class="st fade" id="stE">
|
||||
<div class="hd"><b>孕早期</b><span class="wk num">1～13 周</span><span class="fo">叶酸</span></div>
|
||||
<p>吃得下就好，不用加量。</p>
|
||||
<div class="amt"><span>加量</span><span class="tr"><i style="width:4%"></i></span><em>不用加</em></div>
|
||||
</div>
|
||||
<div class="st fade" id="stM">
|
||||
<div class="hd"><b>孕中期</b><span class="wk num">14～27 周</span><span class="fo">奶、肉蛋</span></div>
|
||||
<p>每天多一杯奶、一份肉蛋。</p>
|
||||
<div class="amt"><span>加量</span><span class="tr"><i style="width:50%"></i></span><em>一点点</em></div>
|
||||
</div>
|
||||
<div class="st fade" id="stL">
|
||||
<div class="hd"><b>孕晚期</b><span class="wk num">28 周起</span><span class="fo">铁、DHA</span></div>
|
||||
<p>再加一份鱼或红肉，管住体重。</p>
|
||||
<div class="amt"><span>加量</span><span class="tr"><i style="width:78%"></i></span><em>再多一点</em></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wt fade">
|
||||
<div class="hd"><svg class="ic"><use href="#i-scale" xlink:href="#i-scale"/></svg>体重长得合理，宝宝才长得好</div>
|
||||
<p>孕前偏瘦、正常、偏胖，该长的不一样。每周固定时间称一次。</p>
|
||||
<button class="btn" id="goWeight" type="button">算算我的增重范围<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
|
||||
<section class="sec box" id="s3">
|
||||
<div class="sh fade"><span class="no num">03</span><h2>3 个误区</h2></div>
|
||||
<p class="key fade">补脑食物、贵价补剂，都替代不了均衡饮食。</p>
|
||||
<div class="vs">
|
||||
<div class="vh fade"><span class="no"><svg class="ic"><use href="#i-x" xlink:href="#i-x"/></svg>常听说</span><span class="ok"><svg class="ic"><use href="#i-ok" xlink:href="#i-ok"/></svg>其实是</span></div>
|
||||
<div class="vr fade"><span class="x">多吃核桃，宝宝更聪明</span><span class="y">形似大脑不等于补脑，一天一小把就够</span></div>
|
||||
<div class="vr fade"><span class="x">补剂越贵越好</span><span class="y">看成分含量，几种同吃容易超量</span></div>
|
||||
<div class="vr fade"><span class="x">一人吃，两人补</span><span class="y">孕中晚期每天只多一杯奶、一个蛋的量</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="tools" class="fade"></div>
|
||||
|
||||
<details class="src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源<svg class="ic ar"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<ul>
|
||||
@@ -196,6 +273,7 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="../_shared/tools.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -220,13 +298,28 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
/* 体重管理：同源相对路径，带身份 */
|
||||
$('#goWeight').addEventListener('click', function () { location.href = '/yunqi-tizhong/' + location.search + location.hash; });
|
||||
/* 推荐工具（共用组件，同源 + 带身份）；拿到孕周后重渲染一次 */
|
||||
var TOOLS = [
|
||||
{ id: 'yunqinengbuchi', why: '拿不准的食物，吃之前查一下', btn: '去查' },
|
||||
{ id: 'bushui', why: '叶酸、DHA、铁按需补，不重复' },
|
||||
{ id: 'yunqitizhong', why: '营养要够，体重别超，看增重范围' },
|
||||
{ id: 'yunqixuetang', why: '控糖也是营养管理，记下血糖' }
|
||||
];
|
||||
function renderTools(wk) {
|
||||
var el = document.getElementById('tools');
|
||||
if (!el || !window.TopicTools) return;
|
||||
TopicTools.render(el, TOOLS, { title: '用得上的工具', color: '#F08A24', bg: '#FFF3E6', wk: wk || 0 });
|
||||
}
|
||||
renderTools(0);
|
||||
|
||||
/* 按孕周点亮阶段表对应行 + 一条小提示 */
|
||||
function mark(row, t, d) {
|
||||
/* 按孕周点亮时间轴对应阶段 + 刻度尺定位 + 一条小提示 */
|
||||
function mark(row, w, d) {
|
||||
var el = document.getElementById(row); if (el) el.classList.add('hl');
|
||||
$('#meT').textContent = t; $('#meD').textContent = d;
|
||||
var you = $('#you');
|
||||
you.textContent = '你在孕 ' + w + ' 周';
|
||||
you.style.left = Math.min(92, Math.max(8, w / 40 * 100)) + '%';
|
||||
you.classList.add('on');
|
||||
$('#meT').textContent = '孕 ' + w + ' 周'; $('#meD').textContent = d;
|
||||
$('#me').onclick = function () { go('s2'); };
|
||||
$('#me').classList.add('on');
|
||||
}
|
||||
@@ -237,18 +330,28 @@ h1{margin-top:20px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)
|
||||
var p = j && j.code === 200 && j.result; if (!p || p.postpartum) return;
|
||||
if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
if (w < 14) mark('stE', '孕 ' + w + ' 周', '叶酸别断，吃得下就好');
|
||||
else if (w < 28) mark('stM', '孕 ' + w + ' 周', '每天多一杯奶、一份肉蛋');
|
||||
else mark('stL', '孕 ' + w + ' 周', '补铁、吃鱼，管住体重');
|
||||
if (w < 14) mark('stE', w, '叶酸别断，吃得下就好');
|
||||
else if (w < 28) mark('stM', w, '每天多一杯奶、一份肉蛋');
|
||||
else mark('stL', w, '补铁、吃鱼，管住体重');
|
||||
renderTools(w);
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* 进场动画（轻） */
|
||||
/* 进场：同一批进入视口的元素按顺序错开 60ms */
|
||||
var fades = document.querySelectorAll('.fade');
|
||||
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: .1 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
var io = new IntersectionObserver(function (es) {
|
||||
var i = 0;
|
||||
es.forEach(function (e) {
|
||||
if (!e.isIntersecting) return;
|
||||
e.target.style.transitionDelay = (i++ * 60) + 'ms';
|
||||
e.target.classList.add('in');
|
||||
io.unobserve(e.target);
|
||||
});
|
||||
}, { root: sc, threshold: .1 });
|
||||
[].forEach.call(fades, function (el) { io.observe(el); });
|
||||
} else [].forEach.call(fades, function (el) { el.classList.add('in'); });
|
||||
|
||||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
var y0 = 0;
|
||||
|
||||
@@ -6,18 +6,19 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>孕妈产后复工 · 职场维权指南</title>
|
||||
<!-- 孕期专题 · 职场维权（孕期首页「其他妈妈也在搜」第 5 条）。
|
||||
2026-10-31 按《孕期专题页统一设计规范 v2》重做：清新、简洁、核心明确；主色 #5B6CFF。
|
||||
2026-10-31 v3：在 v2「清新简洁」基础上加设计感——渐变 hero + 结论卡、描边数字卡、三段权益时间轴、产假刻度条、编号步骤卡、推荐工具（_shared/tools.js）。主色 #5B6CFF。
|
||||
只写全国通用法条（《女职工劳动保护特别规定》《劳动合同法》《妇女权益保障法》《社会保险法》《劳动争议调解仲裁法》），
|
||||
地方差异一律写「以当地规定为准」。自成一页：不引 app.js；返回兜底走相对路径 ../../ 并带回 search + hash。 -->
|
||||
<style>
|
||||
:root{--c:#5B6CFF;--cbg:#EEF0FF;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--sec:#F7F8FA}
|
||||
:root{--c:#5B6CFF;--cbg:#EEF0FF;--c4:#F8F9FF;--h:#1F2329;--t:#4E5969;--m:#86909C;--line:#EEF0F3;--sec:#F7F8FA}
|
||||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||||
html,body{height:100%;overflow:hidden;background:#fff;color:var(--t);font:15px/1.75 -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))}
|
||||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||||
img{display:block;max-width:100%}
|
||||
button,input{font:inherit;border:0;background:none;color:inherit}
|
||||
button{cursor:pointer}
|
||||
b{color:var(--h)}
|
||||
.num{font-variant-numeric:tabular-nums}
|
||||
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.hide{position:absolute;width:0;height:0;overflow:hidden}
|
||||
|
||||
@@ -25,125 +26,179 @@ b{color:var(--h)}
|
||||
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
|
||||
.bar.on{background:#fff;border-bottom-color:var(--line)}
|
||||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--h)}
|
||||
.bar .back:active{transform:scale(.94)}
|
||||
.bar .back .ic{width:22px;height:22px}
|
||||
.bar .t{font-weight:600;font-size:16px;color:var(--h)}
|
||||
|
||||
.wrap{padding:0 20px}
|
||||
/* Hero */
|
||||
.hero img{width:100%;height:190px;object-fit:cover;object-position:center 30%;border-radius:20px;margin-top:4px}
|
||||
h1{margin-top:18px;font-size:26px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.ans{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--cbg);border-left:4px solid var(--c);font-size:16px;font-weight:700;line-height:1.6;color:var(--h)}
|
||||
.hero{position:relative;overflow:hidden;margin-top:-48px;padding:62px 20px 24px;background:linear-gradient(160deg,var(--cbg) 0%,#fff 70%)}
|
||||
.blob{position:absolute;border-radius:50%;background:var(--c);pointer-events:none}
|
||||
.blob.b1{width:220px;height:220px;right:-70px;top:-60px;opacity:.08}
|
||||
.blob.b2{width:120px;height:120px;left:-50px;top:210px;opacity:.06}
|
||||
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--c);letter-spacing:.06em}
|
||||
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--c)}
|
||||
h1{position:relative;margin-top:8px;font-size:28px;font-weight:800;line-height:1.3;color:var(--h)}
|
||||
.mk{background:linear-gradient(transparent 62%,rgba(91,108,255,.2) 0)}
|
||||
.pic{position:relative;margin:14px -20px 0 auto;width:80%;height:176px;border-radius:24px 0 0 24px;overflow:hidden}
|
||||
.pic img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
|
||||
.ans{position:relative;margin:-40px 28px 0 0;padding:14px 16px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(91,108,255,.10)}
|
||||
.tag{display:inline-block;font-size:11.5px;font-weight:600;line-height:20px;padding:0 9px;border-radius:99px;background:var(--cbg);color:var(--c)}
|
||||
.ans p{margin-top:6px;font-size:17px;font-weight:700;line-height:1.55;color:var(--h)}
|
||||
|
||||
/* 个性化提示条 */
|
||||
.me{display:none;margin-top:12px;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--sec);font-size:13px;line-height:1.5;color:var(--t)}
|
||||
.me{display:none;margin:12px 20px 0;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:var(--sec);font-size:13px;line-height:1.5;color:var(--t)}
|
||||
.me.on{display:flex}
|
||||
.me .ic{color:var(--c);width:18px;height:18px}
|
||||
.me span{flex:1;min-width:0}
|
||||
.me button{flex:none;font-size:13px;color:var(--c);font-weight:600}
|
||||
|
||||
/* 记住这 3 点 */
|
||||
.key{margin-top:28px}
|
||||
/* 节标题 */
|
||||
.sh{display:flex;align-items:baseline;gap:8px}
|
||||
.sh i{font-style:normal;font-size:13px;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums;letter-spacing:.04em}
|
||||
.sh small{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:#B8BEFF}
|
||||
h2{font-size:18px;font-weight:700;line-height:1.4;color:var(--h)}
|
||||
.key ol{list-style:none;margin-top:6px}
|
||||
.key li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
|
||||
.key li:last-child{border-bottom:0}
|
||||
.key .no{flex:none;width:26px;font-size:28px;line-height:1.1;font-weight:800;color:var(--c);font-family:Georgia,"Times New Roman",serif}
|
||||
.key b{display:block;font-size:16px;line-height:1.45}
|
||||
.key span{display:block;font-size:13px;color:var(--m);line-height:1.5;margin-top:1px}
|
||||
.lead{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
|
||||
/* 分节 */
|
||||
.sec{margin-top:28px;padding:24px 20px;background:var(--sec);scroll-margin-top:48px}
|
||||
.sec.w{background:#fff}
|
||||
.sec+.sec{margin-top:0}
|
||||
.lead{margin-top:4px;font-size:15px;font-weight:700;color:var(--c);line-height:1.6}
|
||||
/* 记住这 3 点 */
|
||||
.key{margin:36px 20px 0}
|
||||
.kgrid{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
|
||||
.kc{padding:12px 10px 14px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
.kc .n{display:flex;align-items:baseline;gap:3px;font-size:34px;line-height:1;font-weight:800;color:transparent;-webkit-text-stroke:1.4px var(--c);font-variant-numeric:tabular-nums;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}
|
||||
.kc .n small{font-size:13px;font-weight:700;color:var(--c);-webkit-text-stroke:0;font-family:inherit}
|
||||
.kc b{display:block;margin-top:10px;font-size:14.5px;line-height:1.4}
|
||||
.kc span{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--m)}
|
||||
|
||||
/* 三阶段卡 */
|
||||
.stg{margin-top:12px;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
|
||||
.stg.hl{border-color:var(--c);box-shadow:0 0 0 3px rgba(91,108,255,.12)}
|
||||
.stg .hd{display:flex;align-items:center;gap:8px}
|
||||
.stg .hd .ic{color:var(--c);width:22px;height:22px}
|
||||
.stg .hd b{font-size:16px}
|
||||
.stg .hd small{margin-left:auto;font-size:12.5px;color:var(--m)}
|
||||
.stg .hd .now{display:none;margin-left:6px;font-size:11.5px;color:#fff;background:var(--c);border-radius:99px;padding:0 8px;line-height:20px}
|
||||
.stg.hl .hd .now{display:inline-block}
|
||||
.stg ul{list-style:none;margin-top:6px}
|
||||
.stg li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.7}
|
||||
.stg li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.55}
|
||||
.stg li b{font-weight:600}
|
||||
/* 分节大卡 */
|
||||
.sec{margin:36px 12px 0;padding:24px 16px;border-radius:24px;background:var(--sec);scroll-margin-top:56px}
|
||||
.sec.w{background:#fff;padding:0 8px}
|
||||
.sec.p{background:var(--c4)}
|
||||
|
||||
/* 01 时间轴 */
|
||||
.tl{list-style:none;margin-top:18px;position:relative}
|
||||
.tl>li:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:-22px;width:2px;background:linear-gradient(rgba(91,108,255,.55),rgba(91,108,255,.18))}
|
||||
.tl>li{position:relative;padding-left:48px}
|
||||
.tl>li+li{margin-top:22px}
|
||||
.tl .dot{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 0 0 1px #DDE1FF}
|
||||
.tl .dot .ic{width:20px;height:20px}
|
||||
.tl .row{display:flex;align-items:center;gap:8px;min-height:36px}
|
||||
.tl .row b{font-size:16px}
|
||||
.tl .row small{margin-left:auto;font-size:12px;font-weight:600;color:var(--c);background:var(--cbg);border-radius:99px;padding:0 8px;line-height:22px;white-space:nowrap}
|
||||
.tl .now{display:none;font-size:11px;font-weight:600;color:#fff;background:var(--c);border-radius:99px;padding:0 7px;line-height:19px}
|
||||
.tl .card{margin-top:6px;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
|
||||
.tl ul{list-style:none}
|
||||
.tl ul li{position:relative;padding-left:13px;font-size:14px;line-height:1.75}
|
||||
.tl ul li::before{content:"";position:absolute;left:1px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.5}
|
||||
.tl ul li b{font-weight:600}
|
||||
.tl>li.hl .dot{background:var(--c);color:#fff;box-shadow:0 0 0 5px rgba(91,108,255,.16)}
|
||||
.tl>li.hl .now{display:inline-block}
|
||||
.tl>li.hl .card{border-color:#C9CFFF;box-shadow:0 6px 18px rgba(91,108,255,.10)}
|
||||
|
||||
/* 折叠 */
|
||||
details.fold{margin-top:12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
|
||||
details.fold summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--h)}
|
||||
details.fold{margin-top:16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
|
||||
details.fold summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--h);cursor:pointer}
|
||||
details.fold summary::-webkit-details-marker{display:none}
|
||||
details.fold summary .ic{width:18px;height:18px;color:var(--c)}
|
||||
details.fold summary::after{content:"展开";margin-left:auto;font-size:12.5px;font-weight:400;color:var(--m)}
|
||||
details.fold[open] summary::after{content:"收起"}
|
||||
details.fold summary>.ic{width:18px;height:18px;color:var(--c)}
|
||||
details.fold summary .arr{margin-left:auto;width:16px;height:16px;color:var(--m);transition:transform .25s}
|
||||
details.fold[open] summary .arr{transform:rotate(180deg)}
|
||||
details.fold .bd{padding:0 14px 12px;font-size:13.5px;line-height:1.7}
|
||||
details.fold .bd p+p{margin-top:6px}
|
||||
|
||||
/* 计算器 */
|
||||
.calc{margin-top:12px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
|
||||
/* 02 计算器 + 刻度条 */
|
||||
.calc{margin-top:14px;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--line)}
|
||||
.fld+.fld{margin-top:14px}
|
||||
.lb{display:block;font-size:13.5px;font-weight:600;color:var(--h)}
|
||||
.hint{display:block;margin-top:4px;font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
.hint{display:block;margin-top:4px;font-size:12px;color:var(--m);line-height:1.5}
|
||||
.inp{margin-top:6px;display:block;width:100%;height:44px;padding:0 14px;border-radius:12px;background:var(--sec);border:1px solid var(--line);font-size:15px;color:var(--h);-webkit-appearance:none;appearance:none}
|
||||
.inp:focus{outline:none;border-color:var(--c)}
|
||||
.seg{margin-top:6px;display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--sec)}
|
||||
.seg button{flex:1;min-width:0;height:36px;border-radius:10px;font-size:14px;color:var(--t);white-space:nowrap}
|
||||
.seg button{flex:1;min-width:0;height:36px;border-radius:10px;font-size:14px;color:var(--t);white-space:nowrap;transition:transform .15s}
|
||||
.seg button:active{transform:scale(.98)}
|
||||
.seg button.on{background:#fff;color:var(--c);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}
|
||||
.stp{margin-top:6px;display:flex;align-items:center;gap:8px}
|
||||
.stp button{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--c);color:var(--c);font-size:20px;font-weight:600;display:grid;place-items:center}
|
||||
.stp .inp{margin-top:0;flex:1;min-width:0;text-align:center;font-weight:700}
|
||||
.stp button:active{transform:scale(.96)}
|
||||
.stp .inp{margin-top:0;flex:1;min-width:0;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
|
||||
.stp em{flex:none;font-style:normal;font-size:14px;color:var(--t)}
|
||||
.res{margin-top:16px;padding:14px;border-radius:14px;background:var(--cbg)}
|
||||
.res .empty{font-size:14px;color:var(--t);text-align:center}
|
||||
.res .tot{display:flex;align-items:baseline;gap:6px;color:var(--c)}
|
||||
.res .tot em{font-style:normal;font-size:36px;line-height:1.1;font-weight:800}
|
||||
.res .tot span{font-size:15px;font-weight:700}
|
||||
.res .tot small{margin-left:auto;font-size:12.5px;color:var(--m)}
|
||||
.res .dt{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.res .dt div{padding:8px 10px;border-radius:12px;background:#fff;line-height:1.35}
|
||||
.res .dt small{display:block;font-size:12.5px;color:var(--m)}
|
||||
.res .dt b{display:block;margin-top:2px;font-size:15px;white-space:nowrap}
|
||||
.res .note{margin-top:8px;font-size:12.5px;color:var(--m);line-height:1.5}
|
||||
|
||||
/* 维权四步 */
|
||||
.flow{list-style:none;margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
|
||||
.flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;background:#D5DAFF}
|
||||
.flow li{position:relative;text-align:center}
|
||||
.flow .n{display:grid;place-items:center;width:32px;height:32px;margin:0 auto;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:15px;box-shadow:0 0 0 4px var(--sec)}
|
||||
.flow b{display:block;margin-top:8px;font-size:14px;line-height:1.4}
|
||||
.flow span{display:block;margin-top:3px;font-size:12px;color:var(--m);line-height:1.45}
|
||||
.flow .lim{color:var(--c);font-weight:600}
|
||||
.hot{margin-top:16px;display:flex;gap:8px}
|
||||
.hot a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--t);font-size:12.5px;line-height:1.35}
|
||||
.res{margin-top:16px;padding:16px 14px 14px;border-radius:16px;background:var(--cbg)}
|
||||
.tot{display:flex;align-items:baseline;gap:6px;color:var(--c)}
|
||||
.tot em{font-style:normal;font-size:40px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
|
||||
.tot span{font-size:15px;font-weight:700}
|
||||
.tot small{margin-left:auto;font-size:12px;color:var(--m)}
|
||||
.ruler{position:relative;margin-top:16px;padding-top:18px}
|
||||
.track{position:relative;display:flex;height:14px;border-radius:7px;background:#fff;overflow:hidden}
|
||||
.track i{display:block;height:100%;transition:width .35s ease}
|
||||
.track .s0{background:var(--c)}
|
||||
.track .s1{background:rgba(91,108,255,.62)}
|
||||
.track .s2{background:rgba(91,108,255,.40)}
|
||||
.track .s3{background:repeating-linear-gradient(-45deg,rgba(91,108,255,.38) 0 3px,rgba(91,108,255,.14) 3px 6px)}
|
||||
.due{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--c);white-space:nowrap;line-height:14px}
|
||||
.due::after{content:"";position:absolute;left:50%;top:15px;width:2px;height:20px;margin-left:-1px;border-radius:1px;background:var(--h)}
|
||||
.ticks{position:relative;height:22px;margin-top:2px}
|
||||
.ticks span{position:absolute;top:0;transform:translateX(-50%);font-size:10.5px;color:var(--m);font-variant-numeric:tabular-nums;line-height:1}
|
||||
.ticks span::before{content:"";display:block;width:1px;height:5px;margin:0 auto 3px;background:#C3C8D6}
|
||||
.ticks span:first-child{transform:none}
|
||||
.ticks span:first-child::before{margin-left:0}
|
||||
.ticks span:last-child{transform:translateX(-100%)}
|
||||
.ticks span:last-child::before{margin-right:0}
|
||||
.lgd{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--t);font-variant-numeric:tabular-nums}
|
||||
.lgd span{display:inline-flex;align-items:center;gap:5px}
|
||||
.lgd i{width:10px;height:10px;border-radius:3px}
|
||||
.dt{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.dt div{padding:9px 10px;border-radius:12px;background:#fff;line-height:1.35}
|
||||
.dt small{display:block;font-size:12px;color:var(--m)}
|
||||
.dt b{display:block;margin-top:3px;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
|
||||
.res .empty{margin-top:12px;font-size:13px;color:var(--t);text-align:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.6)}
|
||||
.res .note{margin-top:8px;font-size:12px;color:var(--m);line-height:1.5}
|
||||
|
||||
/* 03 维权步骤卡 */
|
||||
.warn{margin-top:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:#fff;border:1px dashed #BFC6FF;font-size:13.5px;line-height:1.5;color:var(--t)}
|
||||
.warn .ic{color:var(--c)}
|
||||
.warn b{font-weight:700}
|
||||
.steps{list-style:none;margin-top:14px;position:relative}
|
||||
.steps::before{content:"";position:absolute;left:29px;top:24px;bottom:24px;border-left:2px dashed #D3D8FF}
|
||||
.st{position:relative;display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .15s}
|
||||
.st+.st{margin-top:10px}
|
||||
.st:active{transform:scale(.98)}
|
||||
.st .n{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
|
||||
.st div{flex:1;min-width:0}
|
||||
.st b{display:block;font-size:15.5px;line-height:1.4}
|
||||
.st span{display:block;font-size:12.5px;color:var(--m);line-height:1.5;margin-top:1px}
|
||||
.st .lim{flex:none;align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--c);background:var(--cbg);border-radius:99px;padding:0 8px;line-height:22px}
|
||||
.hot{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
.hot a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--m);font-size:12px;line-height:1.35;transition:transform .15s}
|
||||
.hot a:active{transform:scale(.98)}
|
||||
.hot a .ic{color:var(--c)}
|
||||
.hot a b{display:block;font-size:16px;color:var(--h)}
|
||||
.hot a b{display:block;font-size:17px;color:var(--h);font-variant-numeric:tabular-nums;letter-spacing:.02em}
|
||||
|
||||
/* 推荐工具 */
|
||||
#tools{margin:36px 20px 0}
|
||||
|
||||
/* 页底 */
|
||||
.src{margin:24px 20px 0}
|
||||
.src{margin:28px 20px 0}
|
||||
.src ul{list-style:none}
|
||||
.src li{padding:6px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--t)}
|
||||
.src li:first-child{border-top:0}
|
||||
.foot{margin:14px 20px 0;font-size:12px;color:var(--m);text-align:center;line-height:1.6}
|
||||
|
||||
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
|
||||
.fade{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
|
||||
.fade.in{opacity:1;transform:none}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}
|
||||
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}.track i{transition:none}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
|
||||
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
||||
<symbol id="i-preg" viewBox="0 0 24 24"><circle cx="11" cy="4.5" r="2"/><path d="M10 8.5c-1.5 1.5-2 3.5-2 6V21M11 9.5c3.5 0 6 2 6 4.5s-2 4-5 4h-1M11 21v-3"/></symbol>
|
||||
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12.5" r="8.5"/><path d="M9.2 11.5h.01M14.8 11.5h.01M9.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-bottle" viewBox="0 0 24 24"><path d="M8 10h8v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zM9 10V7.5h6V10M10.5 7.5L11 4h2l.5 3.5M8 14h3M8 17h3"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
|
||||
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></symbol>
|
||||
<symbol id="i-plus" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></symbol>
|
||||
<symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 8l3 4 3-4M12 12v5M9 13h6M9 15.5h6"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
|
||||
<symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.5-6.5-11a6.5 6.5 0 0 1 13 0c0 5.5-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.3"/></symbol>
|
||||
<symbol id="i-alert" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.5M12 16.3h.01"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div id="scroll">
|
||||
@@ -152,56 +207,64 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<span class="t">孕期专题</span>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
<section class="hero">
|
||||
<img src="img/hero.webp" alt="职场妈妈抱着宝宝站在办公室窗前">
|
||||
<h1>孕妈产后复工，<br>职场维权指南</h1>
|
||||
<div class="ans">孕期、产期、哺乳期，单位不能因此辞退你、降你工资。</div>
|
||||
<div class="me" id="me"><svg class="ic"><use href="#i-pin" xlink:href="#i-pin"/></svg><span id="meT"></span><button id="meGo">去看</button></div>
|
||||
</section>
|
||||
<section class="hero">
|
||||
<i class="blob b1"></i><i class="blob b2"></i>
|
||||
<p class="eyebrow">孕期专题 · 职场篇</p>
|
||||
<h1>孕妈产后复工，<br><span class="mk">职场维权</span>指南</h1>
|
||||
<div class="pic"><img src="img/hero.webp" alt="职场妈妈抱着宝宝站在办公室窗前"></div>
|
||||
<div class="ans">
|
||||
<span class="tag">一句话答案</span>
|
||||
<p>孕期、产期、哺乳期，<br>单位不能因此辞退你、降你工资。</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="me" id="me"><svg class="ic"><use href="#i-pin" xlink:href="#i-pin"/></svg><span id="meT"></span><button id="meGo">去看</button></div>
|
||||
|
||||
<section class="key">
|
||||
<h2>记住这 3 点</h2>
|
||||
<ol>
|
||||
<li><span class="no">1</span><div><b>产假不少于 98 天</b><span>难产、多胞胎另加，各省还有奖励假</span></div></li>
|
||||
<li><span class="no">2</span><div><b>产检算上班时间</b><span>不扣工资，也不算请假</span></div></li>
|
||||
<li><span class="no">3</span><div><b>每天 1 小时哺乳时间</b><span>宝宝 1 岁内，多 1 个宝宝多 1 小时</span></div></li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
<section class="key">
|
||||
<h2>记住这 3 点</h2>
|
||||
<div class="kgrid">
|
||||
<div class="kc fade"><span class="n">98<small>天</small></span><b>产假底线</b><span>难产多胎另加</span></div>
|
||||
<div class="kc fade"><span class="n">0<small>扣薪</small></span><b>产检算上班</b><span>也不算请假</span></div>
|
||||
<div class="kc fade"><span class="n">1<small>小时</small></span><b>每天哺乳</b><span>到宝宝 1 岁</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1 三个阶段 -->
|
||||
<!-- 01 三段权益时间轴 -->
|
||||
<section class="sec" id="s1">
|
||||
<h2>三个阶段的保护</h2>
|
||||
<div class="sh"><i>01</i><h2>三个阶段的保护</h2><small>TIMELINE</small></div>
|
||||
<p class="lead">不得降薪、不得辞退，合同到期也要顺延。</p>
|
||||
|
||||
<article class="stg fade" id="stA">
|
||||
<div class="hd"><svg class="ic"><use href="#i-preg" xlink:href="#i-preg"/></svg><b>孕期</b><span class="now">你在这里</span><small>怀孕上班</small></div>
|
||||
<ul>
|
||||
<li>产检时间<b>计入劳动时间</b></li>
|
||||
<li>干不了原岗位，凭医院证明可减量或调岗</li>
|
||||
<li>满 7 个月，<b>不加班、不排夜班</b></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="stg fade" id="stB">
|
||||
<div class="hd"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg><b>产假</b><span class="now">你在这里</span><small>至少 98 天</small></div>
|
||||
<ul>
|
||||
<li>98 天，其中<b>产前可休 15 天</b></li>
|
||||
<li>难产 +15 天，每多 1 个宝宝 +15 天</li>
|
||||
<li>各省奖励假另加，以当地规定为准</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="stg fade" id="stC">
|
||||
<div class="hd"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg><b>哺乳期</b><span class="now">你在这里</span><small>宝宝 1 岁内</small></div>
|
||||
<ul>
|
||||
<li>每天<b>1 小时哺乳时间</b>，在上班时间内</li>
|
||||
<li>不加班、不排夜班</li>
|
||||
<li>合同到期，<b>顺延到哺乳期结束</b></li>
|
||||
</ul>
|
||||
</article>
|
||||
<ol class="tl">
|
||||
<li class="fade" id="stA">
|
||||
<span class="dot"><svg class="ic"><use href="#i-preg" xlink:href="#i-preg"/></svg></span>
|
||||
<div class="row"><b>孕期</b><span class="now">你在这里</span><small>怀孕上班</small></div>
|
||||
<div class="card"><ul>
|
||||
<li>产检时间<b>计入劳动时间</b></li>
|
||||
<li>凭医院证明，可减工作量或调岗</li>
|
||||
<li>满 7 个月，<b>不加班、不排夜班</b></li>
|
||||
</ul></div>
|
||||
</li>
|
||||
<li class="fade" id="stB">
|
||||
<span class="dot"><svg class="ic"><use href="#i-baby" xlink:href="#i-baby"/></svg></span>
|
||||
<div class="row"><b>产假</b><span class="now">你在这里</span><small class="num">至少 98 天</small></div>
|
||||
<div class="card"><ul>
|
||||
<li>其中<b>产前可休 15 天</b></li>
|
||||
<li>难产、多胞胎各加 15 天</li>
|
||||
<li>本省奖励假另加，以当地规定为准</li>
|
||||
</ul></div>
|
||||
</li>
|
||||
<li class="fade" id="stC">
|
||||
<span class="dot"><svg class="ic"><use href="#i-bottle" xlink:href="#i-bottle"/></svg></span>
|
||||
<div class="row"><b>哺乳期</b><span class="now">你在这里</span><small>到宝宝 1 岁</small></div>
|
||||
<div class="card"><ul>
|
||||
<li>每天<b>1 小时哺乳</b>，算在上班时间内</li>
|
||||
<li>不加班、不排夜班</li>
|
||||
<li>合同到期，<b>顺延到哺乳期结束</b></li>
|
||||
</ul></div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg>还有这些也受保护</summary>
|
||||
<summary><svg class="ic"><use href="#i-plus" xlink:href="#i-plus"/></svg>还有这些也受保护<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<div class="bd">
|
||||
<p><b>流产假：</b>怀孕未满 4 个月 15 天，满 4 个月 42 天。</p>
|
||||
<p><b>晋升：</b>不得因怀孕、生育、哺乳限制晋职、晋级、评职称。</p>
|
||||
@@ -211,9 +274,9 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- 2 产假计算器 -->
|
||||
<!-- 02 产假刻度条 + 计算器 -->
|
||||
<section class="sec w" id="s2">
|
||||
<h2>我的产假怎么算</h2>
|
||||
<div class="sh"><i>02</i><h2>我的产假怎么算</h2><small>CALCULATOR</small></div>
|
||||
<p class="lead">98 天是底线，加上本省天数才是你能休的。</p>
|
||||
|
||||
<div class="calc fade">
|
||||
@@ -234,20 +297,30 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<div class="stp"><button id="cMinus" aria-label="减少">-</button><input class="inp" id="cLocal" type="number" inputmode="numeric" min="0" max="365" value="0"><em>天</em><button id="cPlus" aria-label="增加">+</button></div>
|
||||
<span class="hint">各省不同，可问单位人事或当地人社；不确定先填 0</span>
|
||||
</div>
|
||||
<div class="res" id="cRes"></div>
|
||||
<div class="res" id="cRes">
|
||||
<div class="tot"><em id="rTotal">98</em><span>天产假</span><small id="rNat">国家规定 98 天</small></div>
|
||||
<div class="ruler" aria-hidden="true">
|
||||
<span class="due" id="rDue">预产期</span>
|
||||
<div class="track"><i class="s0" id="b0"></i><i class="s1" id="b1"></i><i class="s2" id="b2"></i><i class="s3" id="b3"></i></div>
|
||||
<div class="ticks" id="rTicks"></div>
|
||||
</div>
|
||||
<div class="lgd" id="rLgd"></div>
|
||||
<div id="rDates"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 维权 -->
|
||||
<section class="sec" id="s3">
|
||||
<h2>被劝退、降薪怎么办</h2>
|
||||
<p class="lead">别签「自愿离职」，先留证据。</p>
|
||||
<!-- 03 维权步骤卡 -->
|
||||
<section class="sec p" id="s3">
|
||||
<div class="sh"><i>03</i><h2>被劝退、降薪怎么办</h2><small>STEPS</small></div>
|
||||
<p class="lead">先留证据，按这 4 步走。</p>
|
||||
|
||||
<ol class="flow fade">
|
||||
<li><span class="n">1</span><b>留证据</b><span>聊天、工资条截图备份</span></li>
|
||||
<li><span class="n">2</span><b>书面沟通</b><span>邮件写明诉求</span></li>
|
||||
<li><span class="n">3</span><b>监察投诉</b><span>找当地人社劳动监察</span></li>
|
||||
<li><span class="n">4</span><b>劳动仲裁</b><span class="lim">时效 1 年</span><span>不收费</span></li>
|
||||
<div class="warn fade"><svg class="ic"><use href="#i-alert" xlink:href="#i-alert"/></svg><span>被要求签字时，<b>别签「自愿离职」</b>，先带回去想清楚。</span></div>
|
||||
<ol class="steps">
|
||||
<li class="st fade"><span class="n">1</span><div><b>留证据</b><span>聊天记录、工资条、通知截图备份</span></div></li>
|
||||
<li class="st fade"><span class="n">2</span><div><b>书面沟通</b><span>发邮件写明诉求，保留回复</span></div></li>
|
||||
<li class="st fade"><span class="n">3</span><div><b>劳动监察投诉</b><span>找当地人社局劳动监察大队</span></div></li>
|
||||
<li class="st fade"><span class="n">4</span><div><b>申请劳动仲裁</b><span>不收费，自知道被侵权起算</span></div><span class="lim">时效 1 年</span></li>
|
||||
</ol>
|
||||
<div class="hot">
|
||||
<a href="tel:12333"><svg class="ic"><use href="#i-phone" xlink:href="#i-phone"/></svg><div><b>12333</b>人社热线</div></a>
|
||||
@@ -255,7 +328,7 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</div>
|
||||
|
||||
<details class="fold">
|
||||
<summary><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>产假期间，钱怎么发？</summary>
|
||||
<summary><svg class="ic"><use href="#i-coin" xlink:href="#i-coin"/></svg>产假期间，钱怎么发？<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<div class="bd">
|
||||
<p><b>交了生育保险：</b>由生育保险基金发生育津贴，按单位上年度职工月平均工资计发。</p>
|
||||
<p><b>没交：</b>单位按你产假前的工资发。</p>
|
||||
@@ -264,8 +337,10 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<div id="tools"></div>
|
||||
|
||||
<details class="fold src">
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源</summary>
|
||||
<summary><svg class="ic"><use href="#i-book" xlink:href="#i-book"/></svg>参考来源<svg class="ic arr"><use href="#i-down" xlink:href="#i-down"/></svg></summary>
|
||||
<div class="bd"><ul>
|
||||
<li>《女职工劳动保护特别规定》第 5～10 条：不得因三期降薪辞退；孕期减量、产检计入劳动时间、7 个月以上不加班不排夜班；98 天产假及难产、多胞胎、流产假；生育津贴；哺乳时间与设施</li>
|
||||
<li>《劳动合同法》第 35、42、45、48、87 条：变更合同须书面协商；三期内不得依第 40、41 条解除；合同期满顺延至三期结束；违法解除继续履行或 2 倍赔偿金</li>
|
||||
@@ -278,6 +353,7 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<p class="foot">本页为法律常识整理，不构成法律意见。</p>
|
||||
</div>
|
||||
|
||||
<script src="../_shared/tools.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -302,7 +378,20 @@ details.fold .bd p+p{margin-top:6px}
|
||||
sc.scrollTo({ top: top, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
/* ---------- 产假计算器 ---------- */
|
||||
/* ---------- 推荐工具（孕周拿到后重画一次，好显示「孕N周开放」） ---------- */
|
||||
var toolsEl = $('#tools');
|
||||
function tools(wk) {
|
||||
if (!window.TopicTools) return;
|
||||
toolsEl.className = '';
|
||||
TopicTools.render(toolsEl, [
|
||||
{ id: 'chanjianrili', why: '排好产检时间，请产检假有依据' },
|
||||
{ id: 'daichanqingdan', why: '休产假前，把待产包一次备齐' },
|
||||
{ id: 'taidong', why: '上班间隙，也别忘了数胎动' }
|
||||
], { title: '用得上的工具', color: '#5B6CFF', bg: '#EEF0FF', wk: wk || 0 });
|
||||
}
|
||||
tools(0);
|
||||
|
||||
/* ---------- 产假计算器 + 刻度条 ---------- */
|
||||
function pad(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function iso(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
|
||||
function parseDay(s) { var m = /^(\d{4})-(\d{1,2})-(\d{1,2})/.exec(s || ''); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
|
||||
@@ -336,15 +425,30 @@ details.fold .bd p+p{margin-top:6px}
|
||||
}
|
||||
window.__leaveCalc = compute; /* 自查用 */
|
||||
|
||||
var C = ['var(--c)', 'rgba(91,108,255,.62)', 'rgba(91,108,255,.40)', 'repeating-linear-gradient(-45deg,rgba(91,108,255,.38) 0 3px,rgba(91,108,255,.14) 3px 6px)'];
|
||||
function calc() {
|
||||
var box = $('#cRes'), due = parseDay($('#cDue').value);
|
||||
if (!due) { box.innerHTML = '<div class="empty">填上预产期，马上帮你算</div>'; return; }
|
||||
var r = compute(due, segVal('cHard'), segVal('cMulti') || 1, localDays(), 1);
|
||||
box.innerHTML =
|
||||
'<div class="tot"><em id="rTotal">' + r.total + '</em><span>天产假</span><small>国家规定 ' + r.nat + ' 天</small></div>' +
|
||||
'<div class="dt"><div><small>开始休</small><b id="rStart">' + cn(r.start) + '</b></div>' +
|
||||
'<div><small>返岗日</small><b id="rBack">' + cn(r.back) + '</b></div></div>' +
|
||||
'<p class="note">按预产期前 15 天起休估算，以实际分娩日为准。</p>';
|
||||
var hard = segVal('cHard'), multi = segVal('cMulti') || 1, local = localDays();
|
||||
var due = parseDay($('#cDue').value);
|
||||
var r = compute(due || new Date(), hard, multi, local, 1);
|
||||
var parts = [98, hard ? 15 : 0, (multi - 1) * 15, local];
|
||||
var names = ['国家 98', '难产 +15', '多胞胎 +' + parts[2], '本省 +' + local];
|
||||
/* 刻度：满格取 ≥ 合计、步长 30 的整数倍，最少 150 天 */
|
||||
var max = Math.max(150, Math.ceil(r.total / 30) * 30), step = max > 240 ? 60 : 30;
|
||||
$('#rTotal').textContent = r.total;
|
||||
$('#rNat').textContent = '国家规定 ' + r.nat + ' 天';
|
||||
['b0', 'b1', 'b2', 'b3'].forEach(function (id, i) { document.getElementById(id).style.width = (parts[i] / max * 100) + '%'; });
|
||||
$('#rDue').style.left = (15 / max * 100) + '%';
|
||||
var tk = '';
|
||||
for (var v = 0; v <= max; v += step) tk += '<span style="left:' + (v / max * 100) + '%">' + v + '</span>';
|
||||
$('#rTicks').innerHTML = tk;
|
||||
var lg = '';
|
||||
parts.forEach(function (p, i) { if (p) lg += '<span><i style="background:' + C[i] + '"></i>' + names[i] + '</span>'; });
|
||||
$('#rLgd').innerHTML = lg;
|
||||
$('#rDates').innerHTML = due
|
||||
? '<div class="dt"><div><small>开始休</small><b id="rStart">' + cn(r.start) + '</b></div>' +
|
||||
'<div><small>返岗日</small><b id="rBack">' + cn(r.back) + '</b></div></div>' +
|
||||
'<p class="note">按预产期前 15 天起休估算，以实际为准。</p>'
|
||||
: '<div class="empty">填上预产期，算出起休和返岗日</div>';
|
||||
}
|
||||
calc();
|
||||
|
||||
@@ -372,17 +476,27 @@ details.fold .bd p+p{margin-top:6px}
|
||||
if (p.postpartum) mark('stC', '宝宝出生了，重点看哺乳期的保护');
|
||||
else if (p.week != null && !p.empty) {
|
||||
var w = p.week;
|
||||
tools(w);
|
||||
if (w >= 28) mark('stA', '孕 ' + w + ' 周，已满 7 个月：不加班，算算产假', 's2');
|
||||
else mark('stA', '孕 ' + w + ' 周，先看孕期的保护');
|
||||
}
|
||||
}).catch(function () {});
|
||||
}
|
||||
|
||||
/* 进场动画（轻） */
|
||||
/* 进场动画：同一批进入视口的按顺序错开 60ms */
|
||||
var fades = document.querySelectorAll('.fade');
|
||||
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: .1 });
|
||||
[].forEach.call(document.querySelectorAll('.fade'), function (el) { io.observe(el); });
|
||||
} else [].forEach.call(document.querySelectorAll('.fade'), function (el) { el.classList.add('in'); });
|
||||
var io = new IntersectionObserver(function (es) {
|
||||
var k = 0;
|
||||
es.forEach(function (e) {
|
||||
if (!e.isIntersecting) return;
|
||||
e.target.style.transitionDelay = (k++ * 60) + 'ms';
|
||||
e.target.classList.add('in');
|
||||
io.unobserve(e.target);
|
||||
});
|
||||
}, { root: sc, threshold: .1 });
|
||||
[].forEach.call(fades, function (el) { io.observe(el); });
|
||||
} else [].forEach.call(fades, function (el) { el.classList.add('in'); });
|
||||
|
||||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
|
||||
var y0 = 0;
|
||||
|
||||
Reference in New Issue
Block a user