jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6个专题页重设计：清新简洁一句话答案；测一测扩到16题；生娃计算器改7步选择+生下来/1/2/3岁分阶段花费

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 13:49:24 +00:00
parent a3cccb109b
commit 1761067777
6 changed files with 1429 additions and 2956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

593
topic/ceshi/index.html
View File

@@ -5,273 +5,205 @@
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测你是什么样的妈妈？</title>
<!-- 孕期专题 · 趣味测试（2026-10-31：孕期首页「其他妈妈也在搜」第 2 条入口）。
视觉沿用 topic/wen（妊娠纹专题）：暖粉色系、圆角卡、扁平双色 SVG 图标（页内 symbol 复用，不用 emoji）。
一页三屏：开始 / 答题（一题一屏）/ 结果；结果存 localStorage「mmbox.ceshi.v1」，再进直接看上次结果。
插画 img/*.webp 由 AI 生成（画面不含文字）。自成一页：不引 app.js；回首页走相对路径 ../../，跳工具走 /<slug>/ 并带 search + hash。
<!-- 孕期专题 · 趣味测试（孕期首页「其他妈妈也在搜」第 2 条入口）。
2026-10-31 按《孕期专题页统一设计规范 v2》重做：主色 #7C5CFC、白底、单色线性图标、16 道题。
一页三屏：开始 / 答题（一题一屏）/ 结果；结果存 localStorage「mmbox.ceshi.v2」（题目已换，不复用 v1）。
插画复用 img/*.webp。自成一页：不引 app.js；返回走 history 或相对路径 ../../，跳工具走 /<slug>/ 并带 search + hash。
纯娱乐，不采集、不上报答题数据。 -->
<style>
:root{--c:#F4593C;--c2:#E8476F;--deep:#C2185B;--ink:#3B2A2A;--sub:#8A7471;--mute:#A8928E;--bg:#FFF8F5;--card:#fff;--line:#F6E3DD;--soft:#FFF0EA;--k:#E8476F;--kbg:#FDE7EE}
:root{--c:#7C5CFC;--cbg:#F1EDFF;--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:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
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))}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.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}
/* 顶栏 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:rgba(255,248,245,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink)}
.bar .t{font-weight:600;font-size:16px}
.bar .tag{margin-left:auto;margin-right:6px;font-size:12px;color:var(--c);background:#FFE9E2;border-radius:99px;padding:2px 10px}
.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 .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}
.view.on{display:block;animation:vin .45s ease both}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 三屏 */
.view{display:none;padding:0 20px}
.view.on{display:block;animation:vin .35s ease both}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 头图 */
.hero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
.hero img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:56px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.96) 46%)}
.hero h1{font-size:27px;line-height:1.25;color:var(--deep);letter-spacing:.5px}
.hero p{margin-top:4px;font-size:13px;color:var(--sub)}
.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.sec{background:#fff;color:var(--c);border:1px solid var(--c)}
.btn:active{opacity:.85}
/* 开始页 */
.meta{display:flex;gap:8px;margin:14px 16px 0}
.meta div{flex:1;padding:12px 4px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center;line-height:1.15}
.meta .ib{width:36px;height:36px;margin:0 auto 6px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.meta em{display:block;font-style:normal;font-size:18px;font-weight:800;color:var(--deep)}
.meta span{display:block;margin-top:4px;font-size:12px;color:var(--sub);white-space:nowrap}
.types{margin:14px 16px 0;padding:16px;border-radius:24px;background:#fff;box-shadow:0 6px 24px rgba(194,24,91,.08);border:1px solid #FBE0D8}
.types h2{display:flex;align-items:center;gap:8px;font-size:17px;line-height:1.3}
.types h2 .ic{font-size:20px;color:var(--c)}
.types ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.types li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;font-size:13.5px;font-weight:600;white-space:nowrap}
.types li .ic{font-size:18px}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);height:52px;margin:18px 16px 0;border-radius:99px;background:linear-gradient(90deg,var(--c),var(--c2));color:#fff;font-size:17px;font-weight:700;box-shadow:0 8px 20px rgba(232,71,111,.28)}
.cta .ic{font-size:20px}
.cta:active{transform:scale(.98)}
.note{margin:10px 16px 0;text-align:center;font-size:12px;color:var(--mute)}
/* 开始 */
#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)}
/* 答题 */
.prog{margin:6px 16px 0}
.prog .row{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--sub)}
.prog .row b{font-size:22px;color:var(--deep);font-weight:800;margin-right:2px}
.prog .track{margin-top:8px;height:8px;border-radius:9px;background:#F8E1DA;overflow:hidden}
.prog .fill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--c),var(--c2));transition:width .45s cubic-bezier(.4,0,.2,1)}
.dots{display:flex;gap:6px;margin-top:8px}
.dots i{flex:1;height:3px;border-radius:3px;background:#F3DDD6;transition:background .3s}
.dots i.d{background:#F7A08C}
.qcard{margin:16px 16px 0;padding:20px 16px 16px;border-radius:24px;background:#fff;border:1px solid #FBE0D8;box-shadow:0 6px 24px rgba(194,24,91,.08);transition:opacity .26s ease,transform .26s ease}
.qcard.out{opacity:0;transform:translateX(-28px)}
.qcard.out.rev{transform:translateX(28px)}
.qcard.pre{opacity:0;transform:translateX(28px);transition:none}
.qcard.pre.rev{transform:translateX(-28px)}
.qh{display:flex;align-items:center;gap:12px}
.qh .qi{flex:none;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:#FFEDE6;color:var(--c)}
.qh small{display:block;font-size:12px;color:var(--mute)}
.qh h2{font-size:19px;line-height:1.4}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px 10px 10px;border-radius:18px;background:linear-gradient(120deg,#FFF5F1,#FFFAF8);border:1.5px solid #F8E4DD;text-align:left;font-size:15px;line-height:1.45;transition:border-color .2s,background .2s,transform .15s}
.opt .l{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--c);font-weight:800;font-size:15px;box-shadow:0 2px 6px rgba(194,24,91,.08);transition:background .2s,color .2s;font-family:Georgia,"Times New Roman",serif}
.opt .ok{margin-left:auto;font-size:20px;color:var(--c2);opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--c2);background:#FFF0F3}
.opt.sel .l{background:var(--c2);color:#fff}
.opt.sel .ok{opacity:1;transform:none}
.qnav{display:flex;align-items:center;justify-content:space-between;margin:14px 20px 0}
.qnav button{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--sub);padding:8px 4px}
.qnav button:disabled{opacity:.35}
.qnav span{font-size:12px;color:var(--mute)}
#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}
.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}
.opt.sel .l{background:var(--c);color:#fff}
.qtip{margin-top:18px;text-align:center;font-size:12.5px;color:var(--sub)}
/* 结果 */
.rhero{position:relative;margin:4px 16px 0;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#FFE7DE,#FFF6F1)}
.rhero img{width:100%;aspect-ratio:1/1;object-fit:cover}
.rhero .last{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);border-radius:99px;padding:3px 12px;font-size:12px;color:var(--sub);display:none}
.rhero .last.on{display:block}
.rhero .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 16px;background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.97) 42%)}
.rhero .you{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#fff;background:var(--k);border-radius:99px;padding:3px 11px 3px 8px}
.rhero .you .ic{font-size:14px}
.rhero h1{margin-top:6px;font-size:30px;line-height:1.2;color:var(--k);letter-spacing:1px}
.rhero p{margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.55}
.rsec{margin:16px 16px 0;padding:16px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.rsec-h{display:flex;align-items:center;gap:8px}
.rsec-h .hi{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--kbg);color:var(--k)}
.rsec-h h2{font-size:17px;line-height:1.3}
.rsec-h small{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap}
.adv{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.adv li{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 10px;border-radius:18px;background:linear-gradient(120deg,var(--kbg),#FFFAF8)}
.adv .ai{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#fff;color:var(--k);box-shadow:0 2px 8px rgba(194,24,91,.06)}
.adv b{display:block;font-size:15px;line-height:1.35}
.adv span{display:block;margin-top:1px;font-size:12.5px;color:var(--sub);line-height:1.45}
.tips{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.tipc{display:flex;gap:10px;padding:11px 12px;border-radius:16px;background:#FFF8E9;border:1px solid #F7E5BE}
.tipc .wi{flex:none;width:30px;height:30px;border-radius:10px;background:#FFE7A8;color:#B7791F;display:grid;place-items:center;font-size:18px}
.tipc b{display:block;font-size:14px;color:#8A5A12;line-height:1.4}
.tipc p{font-size:12.5px;color:#7A6343;line-height:1.6;margin-top:2px}
.tool{margin:16px 16px 0;display:flex;align-items:center;gap:12px;width:calc(100% - 32px);padding:14px;border-radius:22px;background:var(--kbg);border:1.5px solid var(--k);text-align:left}
.tool .ti{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:var(--k);color:#fff}
#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}
.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:12px;color:var(--sub)}
.tool b{display:block;font-size:16.5px;line-height:1.35}
.tool span{display:block;font-size:12.5px;color:var(--sub);line-height:1.45}
.tool .go{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13px;color:#fff;background:var(--k);border-radius:99px;padding:6px 10px 6px 12px;white-space:nowrap}
.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}
.dist{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.dr .dl{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
.dr .dl .ic{font-size:16px}
.dr .dl em{margin-left:auto;font-style:normal;font-size:13px;font-weight:800}
.dr .dl .me{font-size:11px;font-weight:700;color:#fff;border-radius:99px;padding:0 7px;line-height:18px}
.dr .tr{margin-top:5px;height:10px;border-radius:9px;background:#F6ECE9;overflow:hidden}
.dr .tr i{display:block;height:100%;width:0;border-radius:9px;transition:width .9s cubic-bezier(.3,.7,.2,1)}
.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.on{opacity:1;transform:translate(-50%,0)}
.again{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);height:48px;margin:18px 16px 0;border-radius:99px;background:#fff;border:1.5px solid #F5C9BC;color:var(--c);font-size:16px;font-weight:700}
.again .ic{font-size:18px}
.foot{margin:18px 20px 0;font-size:11.5px;color:#B09C98;text-align:center;line-height:1.7}
.fade{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.qcard,.view.on{opacity:1;transform:none;transition:none;animation:none}}
@media (prefers-reduced-motion:reduce){.fade,.qbody,.view.on{opacity:1;transform:none;transition:none;animation:none}}
</style>
</head>
<body>
<!-- 图标库：扁平双色（线条 + 同色浅面），统一 24 栅格 / 2px 圆角线条 -->
<!-- 单色线性图标 -->
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<defs><style>.f{fill:currentColor;fill-opacity:.2;stroke:none}.s{fill:currentColor;stroke:none}</style></defs>
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
<symbol id="i-right" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24"><path class="f" d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/></symbol>
<symbol id="i-heart" viewBox="0 0 24 24"><path class="f" d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path class="f" d="M5 4.5A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5z"/><path d="M5 19.5v-15A1.5 1.5 0 0 1 6.5 3H19v15H6.5A1.5 1.5 0 0 0 5 19.5 1.5 1.5 0 0 0 6.5 21H19M9 7.5h6"/></symbol>
<symbol id="i-leaf" viewBox="0 0 24 24"><path class="f" d="M5 19C5 10 10 4.5 20 4.5 20 14 14.5 19 5 19z"/><path d="M5 19C5 10 10 4.5 20 4.5 20 14 14.5 19 5 19zM4 20l9-9"/></symbol>
<symbol id="i-chat" viewBox="0 0 24 24"><path class="f" d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 4v-4A1.5 1.5 0 0 1 4 14.5z"/><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 4v-4A1.5 1.5 0 0 1 4 14.5zM8.5 9.5h.01M12 9.5h.01M15.5 9.5h.01"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path class="f" d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></symbol>
<symbol id="i-hand" viewBox="0 0 24 24"><path class="f" d="M7 12V7a1.5 1.5 0 0 1 3 0v4V5a1.5 1.5 0 0 1 3 0v6V6.5a1.5 1.5 0 0 1 3 0V12v-2a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8z"/><path d="M10 11V5a1.5 1.5 0 0 1 3 0v6M13 10.5v-4a1.5 1.5 0 0 1 3 0V12M16 11.5v-1.5a1.5 1.5 0 0 1 3 0v4a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-2.7L4 14.5a1.5 1.5 0 0 1 2.4-1.8L7 13.5V7a1.5 1.5 0 0 1 3 0v4"/></symbol>
<symbol id="i-home" viewBox="0 0 24 24"><path class="f" d="M5 10.5L12 4.5l7 6V20H5z"/><path d="M3.5 11.5L12 4.5l8.5 7M5.5 10v10h13V10M10 20v-5h4v5"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle class="f" cx="11" cy="11" r="6.5"/><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></symbol>
<symbol id="i-list" viewBox="0 0 24 24"><rect class="f" x="4" y="3.5" width="16" height="17" rx="3"/><rect x="4" y="3.5" width="16" height="17" rx="3"/><path d="M8 9l1.3 1.3L11.5 8M8 14.5l1.3 1.3 2.2-2.3M14 9.2h2.5M14 14.7h2.5"/></symbol>
<symbol id="i-bulb" viewBox="0 0 24 24"><path class="f" d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/><path d="M9 18.5h6M10.2 21.5h3.6M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/></symbol>
<symbol id="i-cup" viewBox="0 0 24 24"><path class="f" d="M4.5 9h12v5.5a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5z"/><path d="M4.5 9h12v5.5a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5zM16.5 10.5h1.5a2.5 2.5 0 0 1 0 5h-1.8M8.5 3.5c-.8 1 .8 2-.1 3M12.5 3.5c-.8 1 .8 2-.1 3"/></symbol>
<symbol id="i-sun" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></symbol>
<symbol id="i-gift" viewBox="0 0 24 24"><rect class="f" x="4" y="10" width="16" height="10.5" rx="2"/><rect x="3" y="7" width="18" height="4" rx="1.5"/><path d="M4.5 11v8a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-8M12 7v13.5M12 7c-1-2.5-4.5-3.5-4.5-1.2C7.5 7 10 7 12 7zM12 7c1-2.5 4.5-3.5 4.5-1.2C16.5 7 14 7 12 7z"/></symbol>
<symbol id="i-spark" viewBox="0 0 24 24"><path class="f" d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM18.5 16.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z"/></symbol>
<symbol id="i-cal" viewBox="0 0 24 24"><rect class="f" x="3.5" y="5" width="17" height="15.5" rx="3"/><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-moon" viewBox="0 0 24 24"><path class="f" d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10zM16 4l.5 1.5L18 6l-1.5.5L16 8l-.5-1.5L14 6l1.5-.5z"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><rect class="f" x="6" y="2.5" width="12" height="19" rx="3"/><rect x="6" y="2.5" width="12" height="19" rx="3"/><path d="M10.5 18.5h3M9 8h6M9 11.5h4"/></symbol>
<symbol id="i-bag" viewBox="0 0 24 24"><rect class="f" x="3.5" y="8" width="17" height="12.5" rx="3"/><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="i-users" viewBox="0 0 24 24"><circle class="f" cx="9" cy="8" r="3.5"/><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.8a3.4 3.4 0 0 1 0 6.4M18 14a6 6 0 0 1 3.5 6"/></symbol>
<symbol id="i-camera" viewBox="0 0 24 24"><rect class="f" x="3" y="7" width="18" height="13" rx="3"/><path d="M3 10a3 3 0 0 1 3-3h1.5L9 4.5h6L16.5 7H18a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/><circle cx="12" cy="13.5" r="3.5"/></symbol>
<symbol id="i-baby" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12.5" r="8.5"/><circle cx="12" cy="12.5" r="8.5"/><circle class="s" cx="9.2" cy="11.5" r="1"/><circle class="s" cx="14.8" cy="11.5" r="1"/><path d="M9.5 15.2c1.4 1.2 3.6 1.2 5 0M12 4c-1.2 0-1.6 1.2-.8 2"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><circle class="f" cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="9"/><path d="M8 12.2l2.8 2.8L16 9.5"/></symbol>
<symbol id="i-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-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-scale" viewBox="0 0 24 24"><rect class="f" x="3" y="4" width="18" height="16" rx="4"/><rect x="3" y="4" width="18" height="16" rx="4"/><path d="M8 11a4 4 0 0 1 8 0M12 11l2-2.2"/></symbol>
<symbol id="i-kick" viewBox="0 0 24 24"><path class="f" d="M8.5 21c-2.5 0-4-2-3.6-4.8.4-2.6 1.4-5.2 1.6-7.2.3-2.4 2-3.5 3.9-3.2 2.2.3 3.1 2.3 2.8 4.7-.3 2.5-1.2 4.5-1.3 6.6-.1 2.4-.9 3.9-3.4 3.9z"/><path d="M8.5 21c-2.5 0-4-2-3.6-4.8.4-2.6 1.4-5.2 1.6-7.2.3-2.4 2-3.5 3.9-3.2 2.2.3 3.1 2.3 2.8 4.7-.3 2.5-1.2 4.5-1.3 6.6-.1 2.4-.9 3.9-3.4 3.9z"/><circle class="s" cx="15.2" cy="5.2" r="1.5"/><circle class="s" cx="17.8" cy="8" r="1.2"/><circle class="s" cx="18.8" cy="11.3" r="1"/><circle class="s" cx="18.6" cy="14.4" r=".9"/></symbol>
<symbol id="i-chart" viewBox="0 0 24 24"><rect class="f" x="3.5" y="3.5" width="17" height="17" rx="3"/><rect x="3.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 16v-3M12 16V8M16 16v-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>
</svg>
<div id="scroll">
<header class="bar">
<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>
<span class="tag">趣味测试</span>
</header>
<!-- ① 开始页 -->
<!-- ① 开始 -->
<main class="view" id="vStart">
<section class="hero">
<img src="img/hero.webp" alt="孕妈拿着小测试卡片微笑">
<div class="cap">
<h1>测一测<br>你是什么样的妈妈？</h1>
<p>8 道题，1 分钟 · 发现你的带娃超能力</p>
</div>
</section>
<div class="meta fade">
<div><span class="ib" style="background:#FFEDE6;color:#F4593C"><svg class="ic"><use href="#i-list" xlink:href="#i-list"/></svg></span><em>8 道</em><span>轻松小题</span></div>
<div><span class="ib" style="background:#FDE7EE;color:#C2185B"><svg class="ic"><use href="#i-clock" xlink:href="#i-clock"/></svg></span><em>1 分钟</em><span>凭直觉选</span></div>
<div><span class="ib" style="background:#E7F5EC;color:#2F8A5E"><svg class="ic"><use href="#i-spark" xlink:href="#i-spark"/></svg></span><em>4 种</em><span>妈妈类型</span></div>
</div>
<section class="types fade">
<h2><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg>你会是哪一种？</h2>
<ul id="typeList"></ul>
</section>
<button class="cta" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
<p class="note">没有对错，选最像你的那一个就好</p>
<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>
</main>
<!-- ② 答题（一题一屏） -->
<!-- ② 答题 -->
<main class="view" id="vQuiz">
<div class="prog">
<div class="row"><span><b id="qNo">1</b>/ 8</span><span id="qLeft">还剩 7 题</span></div>
<div class="track"><div class="fill" id="qFill"></div></div>
</div>
<article class="qcard" id="qCard">
<div class="qh">
<span class="qi" id="qIco"><svg class="ic"><use id="qIcoUse" href="#i-heart" xlink:href="#i-heart"/></svg></span>
<div><small id="qTag">第 1 题</small><h2 id="qTitle"></h2></div>
</div>
<div class="opts" id="qOpts"></div>
</article>
<div class="qnav">
<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>选完自动进入下一题</span>
</div>
<div class="track"><i id="qFill"></i></div>
<div class="qbody" id="qBody">
<h2 id="qTitle"></h2>
<div class="opts" id="qOpts"></div>
</div>
<p class="qtip">选完自动进入下一题</p>
</main>
<!-- ③ 结果 -->
<main class="view" id="vResult">
<section class="rhero">
<img id="rImg" src="" alt="">
<div class="rhead">
<img class="pic" id="rImg" src="" alt="">
<span class="last" id="rLast"></span>
<div class="cap">
<span class="you"><svg class="ic"><use id="rYouIc" href="#i-heart" xlink:href="#i-heart"/></svg>你是</span>
<h1 id="rName"></h1>
<p id="rLine"></p>
</div>
<p class="you">你是</p>
<h1><em id="rName"></em></h1>
<p id="rLine"></p>
</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>
</section>
<section class="rsec fade">
<div class="rsec-h"><span class="hi"><svg class="ic"><use href="#i-star" xlink:href="#i-star"/></svg></span><h2>你的带娃优势</h2></div>
<ul class="adv" id="rAdv"></ul>
<section class="blk fade">
<h2><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg>给你一句建议</h2>
<p class="tip" id="rTip"></p>
</section>
<section class="rsec fade">
<div class="rsec-h"><span class="hi"><svg class="ic"><use href="#i-bulb" xlink:href="#i-bulb"/></svg></span><h2>给你的小建议</h2></div>
<div class="tips" id="rTips"></div>
</section>
<button class="tool fade" id="rTool">
<span class="ti"><svg class="ic"><use id="rToolIc" href="#i-kick" xlink:href="#i-kick"/></svg></span>
<span class="tx"><small>适合你的工具</small><b id="rToolName"></b><span id="rToolDesc"></span></span>
<span class="go">去用<svg class="ic"><use href="#i-right" xlink:href="#i-right"/></svg></span>
</button>
<section class="rsec fade">
<div class="rsec-h"><span class="hi"><svg class="ic"><use href="#i-chart" xlink:href="#i-chart"/></svg></span><h2>你的类型分布</h2><small>8 道题的选择</small></div>
<section class="blk fade">
<h2><svg class="ic"><use href="#i-chart" xlink:href="#i-chart"/></svg>你的类型占比</h2>
<div class="dist" id="rDist"></div>
</section>
<button class="again" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>再测一次</button>
<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 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>
</main>
<p class="foot">趣味测试，仅供娱乐<br>每一种妈妈都是好妈妈，孕期健康问题请以产检医生意见为准。</p>
<p class="foot">趣味测试，仅供娱乐</p>
</div>
<div class="toast" id="toast"></div>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var sc = $('#scroll');
var KEY = 'mmbox.ceshi.v1';
var KEY = 'mmbox.ceshi.v2';
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 svg(id) { return '<svg class="ic"><use href="#i-' + id + '" xlink:href="#i-' + id + '"/></svg>'; }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回同目录的首页，身份 hash 原样带回 */
@@ -279,100 +211,74 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
else location.href = '../../' + location.search + location.hash;
});
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('sh', sc.scrollTop > 4); }, { passive: true });
/* 4 种类型（顺序即平分时的优先级） */
/* 4 种类型（ORDER 顺序即平分时的优先级） */
var TYPES = {
nuan: {
name: '温柔守护型', short: '温柔守护', ic: 'heart', c: '#E8476F', bg: '#FDE7EE', img: 'img/nuan.webp', alt: '妈妈温柔地抱着襁褓中的宝宝',
line: '你的爱细腻又安稳，宝宝在你身边，就像被柔软的云朵包住。',
adv: [
['heart', '共情力超强', '总能第一时间读懂宝宝的小情绪'],
['hand', '细心又周到', '再小的事也照顾得妥妥帖帖'],
['shield', '安全感满满', '是宝宝和全家最温暖的依靠']
],
tips: [
['担心是爱，但别一个人扛', '胎动、身体不适拿不准时，及时问产检医生，比自己反复琢磨更安心。'],
['先照顾好自己', '累了就让家人搭把手，适当求助不丢人，妈妈状态好，宝宝才更好。']
],
tool: { name: '数胎动', path: '/taidong/', ic: 'baby', desc: '每天数一数，把牵挂变成安心' }
},
xue: {
name: '理性研究型', short: '理性研究', ic: 'book', c: '#3B7DD8', bg: '#E8F2FD', img: 'img/xue.webp', alt: '孕妈戴着眼镜认真看书做笔记',
line: '你相信知识就是底气，每一个决定背后，都有认真做过的功课。',
adv: [
['search', '信息甄别力强', '能从各种说法里找到靠谱答案'],
['list', '计划井井有条', '产检、待产、月子都提前安排好'],
['bulb', '遇事冷静', '关键时刻能稳住自己也稳住全家']
],
tips: [
['别越查越焦虑', '网上信息真假混杂，看到吓人的说法先打个问号，一切以产检医生的意见为准。'],
['给计划留点弹性', '宝宝不会照着教科书长大，偶尔不按计划来也没关系。']
],
tool: { name: '孕期体重', path: '/yunqi-tizhong/', ic: 'scale', desc: '体重曲线一目了然，用数据安心' }
},
song: {
name: '松弛自在型', short: '松弛自在', ic: 'leaf', c: '#2F8A5E', bg: '#E7F5EC', img: 'img/song.webp', alt: '孕妈靠在软垫上悠闲地喝茶',
line: '你情绪稳定、心态在线，好心情就是送给宝宝最好的胎教。',
adv: [
['leaf', '情绪稳定', '不容易被焦虑和比较带着走'],
['sun', '抓大放小', '懂得取舍，不在小事上内耗'],
['cup', '自带快乐能量', '家里的氛围总是轻松又愉快']
],
tips: [
['松弛也别错过产检', '按时产检，唐筛、大排畸、糖耐这些重要检查记得提前预约。'],
['身体信号别硬扛', '出血、腹痛、胎动明显减少时别想着「应该没事」，要及时就医。']
],
tool: { name: '孕检日历', path: '/chanjian-rili/', ic: 'cal', desc: '设好产检提醒，松弛也不掉链子' }
},
re: {
name: '元气分享型', short: '元气分享', ic: 'chat', c: '#F4593C', bg: '#FFEDE6', img: 'img/re.webp', alt: '孕妈和朋友们开心地聊天',
line: '你热情开朗、乐于连接，身边总有一群人陪你一起期待宝宝到来。',
adv: [
['users', '社交力满分', '总能找到同路的孕妈伙伴'],
['gift', '乐于分享', '把经验和快乐传递给身边的人'],
['spark', '行动力超强', '想到就去做，从不拖泥带水']
],
tips: [
['经验只作参考', '群里每个人情况不同，涉及身体和用药的问题，以产检医生的意见为准。'],
['热闹之余多休息', '给自己留点安静时间，睡够觉，也多和宝宝说说悄悄话。']
],
tool: { name: '待产清单', path: '/daichan-qingdan/', ic: 'bag', desc: '和家人一起勾清单，待产不慌张' }
}
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' } }
};
var ORDER = ['nuan', 'xue', 'song', 're'];
/* 8 道题：每个选项对应一种类型，选项顺序打散 */
/* 16 道题：每个选项对应一种类型，顺序已打散 */
var QS = [
{ ic: 'spark', q: '刚知道怀孕的那一刻，你第一件事是？', o: [
['nuan', '摸摸肚子，悄悄跟宝宝打个招呼'], ['xue', '马上搜一搜孕早期注意事项'],
['re', '迫不及待告诉最亲的人'], ['song', '先深呼吸，吃顿好的庆祝一下'] ] },
{ ic: 'cal', q: '明天要产检了，今晚你会？', o: [
['xue', '把要问医生的问题列成小清单'], ['song', '定好闹钟早早睡，明天再说'],
['nuan', '有点忐忑，睡前多摸摸肚子'], ['re', '去妈妈群问问大家都查了啥'] ] },
{ ic: 'moon', q: '半夜宝宝在肚子里拳打脚踢，你会？', o: [
['nuan', '轻轻拍拍：宝贝，妈妈在呢'], ['re', '赶紧叫醒老公一起感受'],
['song', '翻个身接着睡，他精神足挺好'], ['xue', '看看时间，顺手记一下胎动'] ] },
{ ic: 'phone', q: '刷到一条「孕期千万别吃 XX」，你的反应是？', o: [
['re', '转给姐妹们，一起讨论讨论'], ['xue', '先查查权威说法，看有没有依据'],
['nuan', '宁可信其有，先不吃了'], ['song', '适量就好，不太当回事'] ] },
{ ic: 'bag', q: '准备待产包，你的风格更像？', o: [
['song', '买齐必需品，其他缺啥再补'], ['nuan', '小衣服都洗好晒好，叠得整整齐齐'],
['xue', '按清单逐项打勾，一样不落'], ['re', '拉上闺蜜一起逛，顺手拍照分享'] ] },
{ ic: 'cup', q: '理想的孕期周末是？', o: [
['xue', '去上一节孕妈课，或看本育儿书'], ['re', '约朋友喝个下午茶聊聊天'],
['song', '窝在家追剧、睡个自然醒'], ['nuan', '给宝宝写写日记、整理小衣柜'] ] },
{ ic: 'users', q: '家里人对带娃方式有不同意见时，你会？', o: [
['nuan', '先照顾大家情绪，慢慢沟通'], ['song', '不纠结，大方向对就行'],
['re', '拉上全家开个小会，摊开聊'], ['xue', '拿出资料，讲讲科学依据'] ] },
{ ic: 'camera', q: '想象宝宝出生后的第一张照片，你希望是？', o: [
['re', '全家人围着宝宝笑成一团'], ['nuan', '宝宝小手紧紧握着你的手指'],
['xue', '宝宝和他的身长体重出生卡'], ['song', '宝宝睡得四仰八叉的样子'] ] }
{ 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', '视频问问有经验的妈妈'] ] }
];
$('#qTotal').textContent = QS.length;
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: .12 }) : null;
}, { root: sc, threshold: .1 }) : null;
function show(name) {
Object.keys(views).forEach(function (k) { views[k].classList.toggle('on', k === name); });
@@ -383,66 +289,53 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
});
}
/* 开始页：4 种类型预览 */
$('#typeList').innerHTML = ORDER.map(function (k) {
var t = TYPES[k];
return '<li style="background:' + t.bg + ';color:' + t.c + '">' + svg(t.ic) + '<span style="color:#3B2A2A">' + t.name + '</span></li>';
}).join('');
/* 答题 */
var cur = 0, ans = [], busy = false;
var card = $('#qCard');
var body = $('#qBody');
function paint() {
var q = QS[cur];
$('#qNo').textContent = cur + 1;
$('#qLeft').textContent = cur === QS.length - 1 ? '最后一题' : '还剩 ' + (QS.length - 1 - cur) + ' 题';
$('#qFill').style.width = ((cur + 1) / QS.length * 100) + '%';
$('#qTag').textContent = '第 ' + (cur + 1) + ' 题';
$('#qTitle').textContent = q.q;
useRef($('#qIcoUse'), q.ic);
$('#qOpts').innerHTML = q.o.map(function (o, i) {
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) + '</span>' +
'<svg class="ic ok"><use href="#i-check" xlink:href="#i-check"/></svg></button>';
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>';
}).join('');
$('#prevBtn').disabled = cur === 0;
}
/* 卡片切换：旧卡滑出 → 换内容 → 新卡从另一侧滑入；dir=-1 为返回上一题 */
function swap(dir, after) {
/* 轻柔切换：淡出上移 → 换内容 → 自下淡入 */
function swap(after) {
busy = true;
var rev = dir < 0;
card.classList.toggle('rev', rev);
card.classList.add('out');
body.classList.add('out');
setTimeout(function () {
after();
card.classList.remove('out');
card.classList.add('pre');
void card.offsetWidth;
card.classList.remove('pre', 'rev');
setTimeout(function () { busy = false; }, 260);
}, 260);
body.classList.remove('out');
body.classList.add('pre');
void body.offsetWidth;
body.classList.remove('pre');
setTimeout(function () { busy = false; }, 200);
}, 200);
}
$('#qOpts').addEventListener('click', function (e) {
var b = e.target.closest('.opt'); if (!b || busy) return;
busy = true;
var i = +b.dataset.i;
ans[cur] = i;
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(1, function () { cur++; paint(); });
if (cur < QS.length - 1) swap(function () { cur++; paint(); });
else { busy = false; finish(); }
}, 320);
}, 250);
});
$('#prevBtn').addEventListener('click', function () {
if (busy || cur === 0) return;
swap(-1, function () { cur--; paint(); });
swap(function () { cur--; paint(); });
});
function startQuiz() {
cur = 0; ans = []; busy = false;
card.classList.remove('out', 'pre', 'rev');
body.classList.remove('out', 'pre');
paint();
show('quiz');
}
@@ -450,60 +343,78 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
$('#againBtn').addEventListener('click', startQuiz);
function finish() {
var sc_ = { nuan: 0, xue: 0, song: 0, re: 0 };
ans.forEach(function (i, qi) { sc_[QS[qi].o[i][0]]++; });
var top = ORDER.reduce(function (a, k) { return sc_[k] > sc_[a] ? k : a; }, ORDER[0]);
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 (sc_[last] === sc_[top]) top = last;
var rec = { type: top, scores: sc_, at: Date.now() };
if (s[last] === s[top]) top = last;
var rec = { type: top, scores: s, at: Date.now() };
try { localStorage.setItem(KEY, JSON.stringify(rec)); } catch (e) {}
render(rec, false);
}
var curType = null;
function render(rec, fromCache) {
var t = TYPES[rec.type];
var root = views.result;
root.style.setProperty('--k', t.c);
root.style.setProperty('--kbg', t.bg);
curType = t;
$('#rImg').src = t.img; $('#rImg').alt = t.alt;
$('#rName').textContent = t.name;
$('#rName').textContent = t.name + '妈妈';
$('#rLine').textContent = t.line;
useRef($('#rYouIc'), t.ic);
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 '<li><span class="ai">' + svg(a[0]) + '</span><div><b>' + esc(a[1]) + '</b><span>' + esc(a[2]) + '</span></div></li>';
}).join('');
$('#rTips').innerHTML = t.tips.map(function (a) {
return '<div class="tipc"><span class="wi">' + svg('bulb') + '</span><div><b>' + esc(a[0]) + '</b><p>' + esc(a[1]) + '</p></div></div>';
}).join('');
$('#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;
$('#rToolDesc').textContent = t.tool.desc;
$('#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;
$('#rDist').innerHTML = ORDER.map(function (k) {
var x = TYPES[k], n = rec.scores[k] || 0, pct = Math.round(n / total * 100);
return '<div class="dr"><div class="dl" style="color:' + x.c + '">' + svg(x.ic) + '<span style="color:#3B2A2A">' + x.name + '</span>' +
(k === rec.type ? '<span class="me" style="background:' + x.c + '">你的类型</span>' : '') +
'<em>' + pct + '%</em></div><div class="tr"><i data-w="' + pct + '" style="background:' + x.c + '"></i></div></div>';
/* 占比按四舍五入后补差，保证合计 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>';
}).join('');
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, 150); bo.disconnect(); } }, { root: sc, threshold: .2 });
var bo = new IntersectionObserver(function (es) { if (es[0].isIntersecting) { setTimeout(grow, 120); bo.disconnect(); } }, { root: sc, threshold: .2 });
bo.observe($('#rDist'));
} else grow();
}
/* 分享：复制一段文字（链接不带身份 hash），复制不了就提示截图 */
var tt;
function toast(msg) {
var el = $('#toast'); el.textContent = msg; el.classList.add('on');
clearTimeout(tt); tt = setTimeout(function () { el.classList.remove('on'); }, 2400);
}
function copy(text) {
function legacy() { return new Promise(function (ok, no) {
var ta = document.createElement('textarea');
ta.value = text; ta.setAttribute('readonly', ''); ta.style.cssText = 'position:fixed;top:-999px;opacity:0';
document.body.appendChild(ta); ta.select();
var r = false; try { r = document.execCommand('copy'); } catch (e) {}
document.body.removeChild(ta);
r ? ok() : no();
}); }
if (navigator.clipboard && window.isSecureContext) return navigator.clipboard.writeText(text).catch(legacy);
return legacy();
}
$('#shareBtn').addEventListener('click', function () {
if (!curType) return;
var text = '老公，我测出来是「' + curType.name + '妈妈」：' + curType.line + '。你觉得像吗？';
copy(text).then(function () { toast('已复制，发给老公看看吧'); }, function () { toast('截个图发给老公看看吧'); });
});
/* 入口：有上次结果直接看结果，否则开始页 */
var saved = null;
try { saved = JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) {}