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

525 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测你是什么样的妈妈?</title>
<!-- 孕期专题 · 趣味测试(2026-10-31:孕期首页「其他妈妈也在搜」第 2 条入口)。
视觉沿用 topic/wen(妊娠纹专题):暖粉色系、圆角卡、扁平双色 SVG 图标(页内 symbol 复用,不用 emoji)。
一页三屏:开始 / 答题(一题一屏)/ 结果;结果存 localStorage「mmbox.ceshi.v1」,再进直接看上次结果。
插画 img/*.webp 由 AI 生成(画面不含文字)。自成一页:不引 app.js;回首页走相对路径 ../../,跳工具走 /<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}
*{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))}
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}
.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}
/* 三屏切换 */
.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}}
/* 头图 */
.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)}
/* 开始页 */
.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)}
/* 答题 */
.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)}
/* 结果 */
.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}
.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}
.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)}
.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.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.qcard,.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-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>
</svg>
<div id="scroll">
<header class="bar">
<button class="back" id="back" aria-label="返回"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg></button>
<span class="t">孕期专题</span>
<span class="tag">趣味测试</span>
</header>
<!-- ① 开始页 -->
<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>
</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">
<button id="prevBtn"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一题</button>
<span>选完自动进入下一题</span>
</div>
</main>
<!-- ③ 结果 -->
<main class="view" id="vResult">
<section class="rhero">
<img 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>
</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>
<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>
<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>
</main>
<p class="foot">趣味测试,仅供娱乐<br>每一种妈妈都是好妈妈,孕期健康问题请以产检医生意见为准。</p>
</div>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var sc = $('#scroll');
var KEY = 'mmbox.ceshi.v1';
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 原样带回 */
$('#back').addEventListener('click', function () {
if (document.referrer && document.referrer.indexOf(location.host) >= 0 && history.length > 1) history.back();
else location.href = '../../' + location.search + location.hash;
});
/* 4 种类型(顺序即平分时的优先级) */
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: '和家人一起勾清单,待产不慌张' }
}
};
var ORDER = ['nuan', 'xue', 'song', 're'];
/* 8 道题:每个选项对应一种类型,选项顺序打散 */
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', '宝宝睡得四仰八叉的样子'] ] }
];
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;
function show(name) {
Object.keys(views).forEach(function (k) { views[k].classList.toggle('on', k === name); });
sc.scrollTop = 0;
[].forEach.call(views[name].querySelectorAll('.fade'), function (el) {
el.classList.remove('in');
if (io) { io.unobserve(el); io.observe(el); } else el.classList.add('in');
});
}
/* 开始页: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');
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>';
}).join('');
$('#prevBtn').disabled = cur === 0;
}
/* 卡片切换:旧卡滑出 → 换内容 → 新卡从另一侧滑入;dir=-1 为返回上一题 */
function swap(dir, after) {
busy = true;
var rev = dir < 0;
card.classList.toggle('rev', rev);
card.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);
}
$('#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;
[].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(); });
else { busy = false; finish(); }
}, 320);
});
$('#prevBtn').addEventListener('click', function () {
if (busy || cur === 0) return;
swap(-1, function () { cur--; paint(); });
});
function startQuiz() {
cur = 0; ans = []; busy = false;
card.classList.remove('out', 'pre', 'rev');
paint();
show('quiz');
}
$('#startBtn').addEventListener('click', startQuiz);
$('#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 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() };
try { localStorage.setItem(KEY, JSON.stringify(rec)); } catch (e) {}
render(rec, false);
}
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);
$('#rImg').src = t.img; $('#rImg').alt = t.alt;
$('#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('');
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>';
}).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 });
bo.observe($('#rDist'));
} else grow();
}
/* 入口:有上次结果直接看结果,否则开始页 */
var saved = null;
try { saved = JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) {}
if (saved && TYPES[saved.type] && saved.scores) render(saved, true);
else show('start');
/* 禁止下拉回弹:固定外壳 + 容器滚动 + 到顶/到底时拦 touchmove */
var y0 = 0;
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
sc.addEventListener('touchmove', function (e) {
var dy = e.touches[0].clientY - y0;
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) e.preventDefault();
}, { passive: false });
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target)) e.preventDefault(); }, { passive: false });
})();
</script>
</body>
</html>