首页宫格换正式应用图标;其他妈妈也在搜6问各配专题页(花费计算器/测一测/营养/补剂/职场维权)+热度设计 v26103111

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 13:22:15 +00:00
parent a56ce8c366
commit a3cccb109b
36 changed files with 3384 additions and 98 deletions

BIN
topic/ceshi/img/hero.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
topic/ceshi/img/nuan.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
topic/ceshi/img/re.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
topic/ceshi/img/song.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
topic/ceshi/img/xue.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

524
topic/ceshi/index.html Normal file
View File

@@ -0,0 +1,524 @@
<!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>