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

807 lines
57 KiB
HTML
Raw Permalink 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>
<!-- 孕期专题 · 趣味测试 3:「你的孕期饮食能打几分?」(2026-11-02 新建)。
结构 / 交互 / 视觉完全照 ../ceshi/、../duiyou/,只换内容与主色:主色橄榄嫩绿 #6BAA3C、浅底 #F0F7E8。
孕妈自答,12 道情景题(早餐、蔬菜、水果、奶、豆和坚果、肉蛋鱼、主食粗细、喝水、零食甜饮、外卖、生冷、补充剂),
每个选项 0~3 分,合计折算成 100 分,分 4 档:营养满分 ≥85 / 基本在线 70~84 / 还差一点 50~69 / 要补补课 <50。
4 个维度(蔬果 / 蛋白 / 主食饮水 / 饮食习惯)按得分率画雷达。
结果:成绩卡 + 一句话评价 + 做得好的地方(满分题)+ 最该改的 3 件小事(得分最低的题,具体到吃什么吃多少)+ 一天参考量 + 推荐工具 + 保存结果卡。
建议数值依据《中国居民膳食指南(2022)》孕期妇女膳食指南(孕中晚期),不提品牌。
按用户要求:结果页不放「复制发给 xx」类按钮,只保留「保存结果卡」。
结果存 localStorage「mmbox.yinshi.v1」(每题作答 + 时间)。插画 img/*.webp(hero + 4 档同一画风)。
自成一页:不引 app.js;返回走 history 或相对路径 ../../,推荐工具走 ../_shared/tools.js。
只做生活层面的自查,不采集、不上报答题数据;不造「已有 N 人测过」数字(TESTED_COUNT=0 不显示)。 -->
<style>
:root{--c:#6BAA3C;--cbg:#F0F7E8;--c06:rgba(107,170,60,.06);--c10:rgba(107,170,60,.10);--c20:rgba(107,170,60,.22);--ink:#1F2329;--txt:#4E5969;--sub:#86909C;--line:#EEF0F3;--soft:#F7F8FA}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#fff;color:var(--txt);font:15px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hide{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none !important}
.num{font-variant-numeric:tabular-nums}
mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padding:0 1px}
/* 顶栏 */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;padding-top:env(safe-area-inset-top);background:transparent;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.bar.sh{background:#fff;border-bottom-color:var(--line)}
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.bar .back .ic{width:22px;height:22px}
.bar .t{font-weight:600;font-size:16px;color:var(--ink)}
/* 三屏 */
.view{display:none}
.view.on{display:block;animation:vin .35s ease both}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap{padding:0 20px}
.btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border-radius:99px;font-size:16px;font-weight:700;transition:transform .15s,opacity .15s}
.btn.pri{background:var(--c);color:#fff;box-shadow:0 6px 16px rgba(107,170,60,.28)}
.btn.sec{background:#fff;color:var(--c);border:1px solid var(--c)}
.btn:active,.tap:active{transform:scale(.98)}
/* 区块标题:小号序号 + 标题 */
.sh2{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.sh2 i{font-style:normal;font-size:13px;font-weight:800;color:var(--c);letter-spacing:.5px}
.sh2 b{font-size:18px;font-weight:800;color:var(--ink);line-height:1.4}
.sh2 span{margin-left:auto;font-size:12.5px;color:var(--sub)}
/* ---------- ① 开始 ---------- */
#vStart{margin-top:-48px}
.hero{position:relative;overflow:hidden;min-height:430px;padding:72px 20px 0;background:linear-gradient(160deg,var(--cbg) 0%,#fff 72%)}
.hero .o1,.hero .o2{position:absolute;border-radius:50%;background:var(--c10);pointer-events:none}
.hero .o1{width:260px;height:260px;right:-90px;top:-70px}
.hero .o2{width:150px;height:150px;left:-60px;bottom:40px;background:var(--c06)}
.hero .eb{position:relative;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:99px;background:#fff;color:var(--c);font-size:12.5px;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 8px var(--c10)}
.hero h1{position:relative;margin-top:16px;font-size:30px;font-weight:800;line-height:1.32;color:var(--ink);letter-spacing:.5px}
.hero .meta{position:relative;display:flex;flex-direction:column;gap:8px;margin-top:18px;width:150px}
.hero .meta span{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--txt);line-height:1.4}
.hero .meta .ic{width:18px;height:18px;color:var(--c)}
.hero .meta b{color:var(--ink);font-weight:800}
.hero .pic{position:absolute;right:-18px;bottom:0;width:min(228px,calc(100vw - 162px));height:min(228px,calc(100vw - 162px));object-fit:cover;object-position:center 30%;border-radius:28px 0 0 0;box-shadow:0 8px 24px var(--c10)}
.types{margin-top:28px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcard{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:var(--soft)}
.tcard img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 22%;border:2px solid #fff;box-shadow:0 2px 8px var(--c10)}
.tcard b{display:block;font-size:14.5px;color:var(--ink);line-height:1.35}
.tcard small{display:block;font-size:12px;color:var(--sub);line-height:1.4}
.startbox{margin-top:28px;text-align:center}
.startbox .note{margin-top:10px;font-size:12.5px;color:var(--sub)}
/* ---------- ② 答题 ---------- */
#vQuiz{padding-top:4px}
.qtop{display:flex;align-items:center;justify-content:space-between;height:34px}
.qtop button{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;color:var(--sub);padding:4px 8px 4px 0}
.qtop button .ic{width:16px;height:16px}
.qtop button:disabled{visibility:hidden}
.qtop .no{font-size:13px;color:var(--sub)}
.qtop .no b{font-size:18px;color:var(--c);font-weight:800}
.feet{display:flex;justify-content:space-between;align-items:center;height:30px;margin-top:4px;padding:0 2px}
.feet svg{width:15px;height:15px;fill:#CFE5BA;transition:fill .3s,transform .3s}
.feet svg:nth-child(odd){transform:translateY(-4px) rotate(-12deg)}
.feet svg:nth-child(even){transform:translateY(4px) rotate(12deg) scaleX(-1)}
.feet svg.done{fill:var(--c)}
.feet svg.cur{fill:var(--c)}
.feet svg.cur:nth-child(odd){transform:translateY(-4px) rotate(-12deg) scale(1.35)}
.feet svg.cur:nth-child(even){transform:translateY(4px) rotate(12deg) scaleX(-1) scale(1.35)}
.stage{margin-top:14px;transition:opacity .22s ease,transform .22s ease}
.stage.outL{opacity:0;transform:translateX(-36px)}
.stage.outR{opacity:0;transform:translateX(36px)}
.stage.inR{opacity:0;transform:translateX(36px);transition:none}
.stage.inL{opacity:0;transform:translateX(-36px);transition:none}
.qcard{position:relative;overflow:hidden;padding:20px 20px 18px;border-radius:24px;background:linear-gradient(160deg,var(--cbg),#fff 78%);box-shadow:0 8px 24px var(--c10)}
.qcard:after{content:"";position:absolute;width:120px;height:120px;right:-40px;top:-40px;border-radius:50%;background:var(--c10)}
.qcard .hd{position:relative;display:flex;align-items:center;justify-content:space-between}
.qcard .qi{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 4px 12px var(--c10)}
.qcard .qi .ic{width:30px;height:30px;stroke-width:1.6}
.qcard .cat{position:relative;z-index:1;height:24px;padding:0 10px;border-radius:99px;background:#fff;color:var(--c);font-size:12px;font-weight:700;line-height:24px}
.qcard h2{position:relative;margin-top:16px;font-size:21px;font-weight:800;line-height:1.45;color:var(--ink);min-height:61px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:11px 46px 11px 14px;border-radius:18px;background:#fff;border:1.5px solid var(--line);text-align:left;font-size:15.5px;line-height:1.45;color:var(--ink);transition:border-color .2s,background .2s,transform .15s}
.opt:active{transform:scale(.98)}
.opt .l{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--sub);font-size:13px;font-weight:800;transition:background .2s,color .2s}
.opt .ck{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.opt .ck .ic{width:14px;height:14px;stroke-width:2.6}
.opt.sel{border-color:var(--c);background:#F8FCF4;font-weight:600}
.opt.sel .l{background:var(--c);color:#fff}
.opt.sel .ck{transform:scale(1)}
.qtip{margin-top:16px;text-align:center;font-size:12.5px;color:var(--sub)}
/* ---------- ③ 结果 ---------- */
#vResult{padding-top:6px}
.rcard{position:relative;overflow:hidden;padding:22px 20px 18px;border-radius:28px;background:linear-gradient(170deg,#DDEFCB 0%,#F2F9EA 44%,#fff 100%);box-shadow:0 8px 24px var(--c10);text-align:center}
.rcard .o1,.rcard .o2{position:absolute;border-radius:50%;pointer-events:none}
.rcard .o1{width:220px;height:220px;right:-80px;top:-60px;background:rgba(255,255,255,.55)}
.rcard .o2{width:140px;height:140px;left:-50px;top:150px;background:var(--c06)}
.rcard .top{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:24px}
.rcard .top b{padding:0 10px;border-radius:99px;background:#fff;color:var(--c);font-weight:700}
.rcard .top span{color:var(--sub)}
.rcard .ava{position:relative;width:172px;height:172px;margin:14px auto 0;border-radius:32px;overflow:hidden;border:5px solid #fff;box-shadow:0 8px 24px var(--c10)}
.rcard .ava img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.rcard .you{position:relative;margin-top:14px;font-size:13px;color:var(--sub);letter-spacing:2px}
.rcard h1{position:relative;font-size:28px;font-weight:800;line-height:1.3;color:var(--ink)}
.rcard .slo{position:relative;margin-top:6px;font-size:14.5px;color:var(--txt);line-height:1.6}
.rtags{position:relative;display:flex;justify-content:center;gap:8px;margin-top:14px}
.rtags span{height:30px;padding:0 12px;border-radius:99px;background:#fff;color:var(--c);font-size:13.5px;font-weight:700;line-height:30px;white-space:nowrap;box-shadow:0 2px 8px var(--c10)}
.dims{position:relative;display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 14px 14px 8px;border-radius:20px;background:rgba(255,255,255,.85);text-align:left}
.dims svg{flex:none;width:146px;height:128px}
.dl{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.dr{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:3px;font-size:12.5px;color:var(--txt);line-height:1.3}
.dr .p{font-weight:700;color:var(--ink)}
.dr .tr{grid-column:1/3;height:5px;border-radius:5px;background:#E8F3DD;overflow:hidden}
.dr .tr i{display:block;height:100%;width:0;border-radius:5px;background:#B5D896;transition:width .8s cubic-bezier(.3,.7,.2,1)}
.dr.me{color:var(--c);font-weight:700}
.dr.me .p{color:var(--c)}
.dr.me .tr i{background:var(--c)}
.rcard .brand{position:relative;margin-top:14px;font-size:11.5px;color:var(--sub);letter-spacing:.5px}
.racts{display:flex;gap:10px;margin-top:16px}
.racts .btn{flex:1;font-size:15px}
.blk{margin-top:36px}
.read{padding:18px;border-radius:24px;background:var(--soft)}
.read p{font-size:15px;line-height:1.8;color:var(--txt)}
.read p+p{margin-top:10px}
.read b{color:var(--ink)}
.read q{quotes:"「" "」";color:var(--c);font-weight:700}
.tips{display:flex;flex-direction:column;gap:10px}
.tp{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.tp .n{flex:none;width:30px;font-size:30px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--c);font-variant-numeric:tabular-nums}
.tp p{font-size:14.5px;line-height:1.65;color:var(--ink)}
.mate{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:linear-gradient(110deg,var(--cbg),#fff 80%)}
.mate img{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center 22%;border:3px solid #fff;box-shadow:0 4px 12px var(--c10)}
.mate small{display:block;font-size:12px;color:var(--sub);line-height:1.5}
.mate b{display:block;font-size:16px;color:var(--ink);line-height:1.4}
.mate p{margin-top:2px;font-size:13.5px;color:var(--txt);line-height:1.55}
#tools{margin-top:36px !important}
.again{margin-top:24px}
.rend{display:flex;gap:10px;margin-top:24px}.rend .btn{flex:1;min-width:0}
.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:60}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* 保存结果卡弹层 */
.mask{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px 28px calc(24px + env(safe-area-inset-bottom));background:rgba(22,34,12,.82)}
.mask.on{display:flex;animation:vin .25s ease both}
.mask img{max-width:100%;max-height:calc(100% - 96px);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.25);-webkit-touch-callout:default;user-select:auto}
.mask p{margin-top:14px;color:#fff;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.mask .row{display:flex;gap:16px;margin-top:10px}
.mask .row button,.mask .row a{height:34px;padding:0 18px;border-radius:99px;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:13.5px;line-height:32px;text-decoration:none}
.fade{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade,.stage,.view.on,.mask.on{opacity:1;transform:none;transition:none;animation:none}}
/* 分数 + 档位 + 参考量(本页新增) */
.rcard h1.score{display:flex;align-items:baseline;justify-content:center;gap:4px;line-height:1.1;margin-top:2px}
.rcard h1.score mark{font-size:56px;font-weight:800;padding:0 4px}
.rcard h1.score small{font-size:18px;font-weight:700;color:var(--ink)}
.rcard .lv{position:relative;display:inline-block;margin-top:10px;height:30px;padding:0 16px;border-radius:99px;background:var(--c);color:#fff;font-size:15px;font-weight:800;line-height:30px;letter-spacing:1px}
.tp p b{display:inline-block;margin-right:6px;color:var(--c)}
.read q{quotes:"「" "」"}
.plate{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plate div{padding:10px 12px;border-radius:16px;background:var(--soft)}
.plate small{display:block;font-size:12px;color:var(--sub);line-height:1.4}
.plate b{display:block;font-size:15.5px;color:var(--ink);line-height:1.45}
.plate span{display:block;font-size:12px;color:var(--txt);line-height:1.45}
.read p,.tp p,.plate span,.src,.warn,.mate p{text-wrap:pretty}
.src{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.6}
.warn{margin-top:20px;padding:10px 14px;border-radius:14px;background:var(--cbg);color:#4F7F2A;font-size:13px;line-height:1.6;text-align:center}
</style>
<link rel="stylesheet" href="../_shared/quiz-skin.css?v=26110643"><!-- 11-07 答题页底色 / 卡片 -->
<script src="../../js/host-nav.js?v=26110908"></script>
</head>
<body>
<!-- 单色线性图标(每题一个场景图标 q-*) -->
<svg class="hide" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></symbol>
<symbol id="i-list" viewBox="0 0 24 24"><path d="M9 6.5h10M9 12h10M9 17.5h10M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01"/></symbol>
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="10.5" width="14" height="10" rx="3"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v11M7.5 11l4.5 4.5 4.5-4.5M5 19.5h14"/></symbol>
<symbol id="i-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-hand" viewBox="0 0 24 24"><path d="M9 11V5.5a1.5 1.5 0 0 1 3 0V10M12 9.5V4.5a1.5 1.5 0 0 1 3 0V10M15 9.5V6a1.5 1.5 0 0 1 3 0v8a6.5 6.5 0 0 1-6.5 6.5h-.6a6 6 0 0 1-4.6-2.2L4 15.5a1.6 1.6 0 0 1 2.4-2.1L9 15.5V11"/></symbol>
<symbol id="i-foot" viewBox="0 0 24 24"><path d="M12 9c3 0 4.6 2.7 4.6 6.3S14.8 22 12 22s-4.6-3.1-4.6-6.7S9 9 12 9z"/><circle cx="7.6" cy="6.6" r="1.6"/><circle cx="10.6" cy="4.4" r="1.75"/><circle cx="14" cy="4.6" r="1.6"/><circle cx="16.8" cy="6.8" r="1.35"/></symbol>
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.5 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z"/></symbol>
<!-- 题目场景 -->
<symbol id="q-cup" viewBox="0 0 24 24"><path d="M4.5 9.5h12v5a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5zM16.5 11h1.5a2.5 2.5 0 0 1 0 5h-1.8M8.5 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3"/></symbol>
<symbol id="q-leaf" viewBox="0 0 24 24"><path d="M5 19C5 10 10 5 20 4c0 10-5 15-13 15z"/><path d="M5 19l8-8"/></symbol>
<symbol id="q-apple" viewBox="0 0 24 24"><path d="M12 7.5c-2-1.5-7-1.5-7 4.5 0 4.5 3 8.5 5 8.5 1 0 1.3-.5 2-.5s1 .5 2 .5c2 0 5-4 5-8.5 0-6-5-6-7-4.5z"/><path d="M12 7.5c0-2 .8-3.5 2.5-4.5"/></symbol>
<symbol id="q-milk" viewBox="0 0 24 24"><path d="M9 2.5h6v3l2 3.5V20a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 7 20V9l2-3.5zM7 12.5h10"/></symbol>
<symbol id="q-bean" viewBox="0 0 24 24"><path d="M15.5 4c3 1.2 4.5 4.6 3 8.2-1 2.4-3.6 2.6-4.8 4.6S11.5 21 8.5 20 3.5 16.5 5 12.8c1-2.4 3.4-2.4 4.8-4.6S12.5 2.8 15.5 4z"/><path d="M13.5 9.5c-.8 1.4-2 2-2.8 3"/></symbol>
<symbol id="q-fish" viewBox="0 0 24 24"><path d="M3 12c2.5-4 6-5.5 9.5-5.5 3.8 0 6.5 2.5 8 5.5-1.5 3-4.2 5.5-8 5.5C9 17.5 5.5 16 3 12zM3 12l-1-3.5M3 12l-1 3.5"/><circle cx="16.5" cy="11" r=".9"/></symbol>
<symbol id="q-bowl" viewBox="0 0 24 24"><path d="M3.5 11.5h17a8.5 8.5 0 0 1-17 0zM9 20h6M14 8.5l5-5M17 8.5l3-3"/></symbol>
<symbol id="q-drop" viewBox="0 0 24 24"><path d="M12 3s6.5 7 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 10 12 3 12 3z"/><path d="M9 15a3 3 0 0 0 3 3"/></symbol>
<symbol id="q-candy" viewBox="0 0 24 24"><path d="M7 7.5h10l-1.4 13H8.4zM6 7.5h12M12 7.5l2-5"/><path d="M8 12.5h8"/></symbol>
<symbol id="q-bag" viewBox="0 0 24 24"><rect x="3.5" y="8" width="17" height="12.5" rx="3"/><path d="M8.5 8V6a3.5 3.5 0 0 1 7 0v2M3.5 13h17M11 13v2h2v-2"/></symbol>
<symbol id="q-snow" viewBox="0 0 24 24"><path d="M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5L12 6.5l2.5-2M9.5 19.5l2.5-2 2.5 2"/></symbol>
<symbol id="q-pill" viewBox="0 0 24 24"><rect x="2.8" y="8.2" width="18.4" height="7.6" rx="3.8" transform="rotate(-45 12 12)"/><path d="M8.8 8.8l6.4 6.4"/></symbol>
</svg>
<div id="scroll">
<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>
</header>
<!-- ① 开始 -->
<main class="view" id="vStart">
<section class="hero">
<i class="o1"></i><i class="o2"></i>
<span class="eb">孕期趣味测试 · DIET SCORE</span>
<h1>测一测<br>你的孕期饮食<br>能打<mark>几分</mark>?</h1>
<div class="meta">
<span><svg class="ic"><use href="#i-list" xlink:href="#i-list"/></svg><b class="num">12</b>题 · 约<b class="num">2</b>分钟</span>
<span><svg class="ic"><use href="#i-lock" xlink:href="#i-lock"/></svg>只在本机算,不上传</span>
<span id="tested" hidden><svg class="ic"><use href="#i-heart" xlink:href="#i-heart"/></svg>已有<b class="num" id="testedN"></b>位妈妈测过</span>
</div>
<img class="pic" src="img/hero.webp" alt="孕妈坐在餐桌前,面前是一份荤素搭配的营养餐">
</section>
<div class="wrap">
<section class="types fade">
<div class="sh2"><i>4 LEVELS</i><b>4 档成绩,你在哪一档?</b></div>
<div class="tgrid" id="tgrid"></div>
</section>
<div class="startbox fade">
<button class="btn pri" id="startBtn">开始测试<svg class="ic"><use href="#i-arrow" xlink:href="#i-arrow"/></svg></button>
<p class="note">想想最近一两周的真实吃法,凭第一感觉选</p>
</div>
</div>
</main>
<!-- ② 答题 -->
<main class="view wrap" id="vQuiz">
<div class="qtop">
<button id="prevBtn"><svg class="ic"><use href="#i-back" xlink:href="#i-back"/></svg>上一题</button>
<span class="no num"><b id="qNo">1</b> / <span id="qTotal">12</span></span>
</div>
<div class="feet" id="feet" aria-hidden="true"></div>
<div class="stage" id="stage">
<div class="qcard">
<div class="hd">
<span class="qi"><svg class="ic"><use id="qIc" href="#q-cup" xlink:href="#q-cup"/></svg></span>
<span class="cat" id="qCat"></span>
</div>
<h2 id="qTitle"></h2>
</div>
<div class="opts" id="qOpts"></div>
</div>
<p class="qtip">选完自动进入下一题</p>
</main>
<!-- ③ 结果 -->
<main class="view wrap" id="vResult">
<article class="rcard" id="rCard">
<i class="o1"></i><i class="o2"></i>
<div class="top"><b>孕期饮食成绩单</b><span id="rLast"></span></div>
<div class="ava"><img id="rImg" src="" alt=""></div>
<p class="you">我的孕期饮食能打</p>
<h1 class="score"><mark class="num" id="rScore"></mark><small>分</small></h1>
<p class="lv" id="rName"></p>
<p class="slo" id="rLine"></p>
<div class="rtags" id="rTags"></div>
<div class="dims">
<svg id="rRadar" viewBox="-16 -2 168 146" role="img" aria-label="4 个方面得分率雷达图"></svg>
<div class="dl" id="rDims"></div>
</div>
<p class="brand">兜爸心选 · 孕期专题 · 你的孕期饮食能打几分</p>
</article>
<div class="racts">
<button class="btn pri" id="saveBtn"><svg class="ic"><use href="#i-down" xlink:href="#i-down"/></svg>保存结果卡</button>
</div>
<section class="blk fade">
<div class="sh2"><i>01</i><b>一句话评价</b></div>
<div class="read" id="rRead"></div>
</section>
<section class="blk fade">
<div class="sh2"><i>02</i><b>你做得好的地方</b></div>
<div class="read" id="rGood"></div>
</section>
<section class="blk fade">
<div class="sh2"><i>03</i><b>最该改的 3 件小事</b></div>
<div class="tips" id="rTips"></div>
</section>
<section class="blk fade">
<div class="sh2"><i>04</i><b>一天吃多少,心里有数</b><span>孕中晚期</span></div>
<div class="plate" id="rPlate"></div>
<p class="src">参考《中国居民膳食指南(2022)》孕期妇女膳食指南;孕早期和孕前吃法差不多,不用刻意多吃。具体按产检医生建议调整。</p>
</section>
<div id="tools" class="fade"></div>
<p class="warn">仅供参考,不能代替医生判断,有不适请及时就医</p>
<!-- 11-07 用户:「所有测一测的结果页要有一个『返回首页』按钮,返回到测试入口,也就是列表页」→ 孕妈广场「测一测」列表(guangchang/?c=ceshi) -->
<div class="rend">
<button class="btn sec" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>重新测试</button>
<button class="btn pri" id="listBtn"><svg class="ic"><use href="#i-list" xlink:href="#i-list"/></svg>返回首页</button>
</div>
</main>
<p class="foot">生活饮食自查,仅供参考;身体相关问题以产检医生意见为准</p>
</div>
<div class="mask" id="mask">
<img id="maskImg" alt="孕期饮食成绩单">
<p><svg class="ic"><use href="#i-hand" xlink:href="#i-hand"/></svg>长按图片,保存到相册</p>
<div class="row"><a id="dlBtn" download="孕期饮食成绩单.png" hidden>下载图片</a><button id="maskClose">关闭</button></div>
</div>
<div class="toast" id="toast"></div>
<script src="../_shared/tools.js"></script>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var sc = $('#scroll');
var KEY = 'mmbox.yinshi.v1';
var TESTED_COUNT = 0; /* 「已有 N 位妈妈测过」:只有接上真实统计后才填,0 = 不显示(不造数字) */
var C = '#6BAA3C', CL = '#CFE5BA';
var XL = 'http://www.w3.org/1999/xlink';
function useRef(el, id) { el.setAttribute('href', '#' + id); el.setAttributeNS(XL, 'xlink:href', '#' + id); }
function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
var openid = (function () {
var m = (location.hash + '&' + location.search).match(/[#?&]openid=([^&#]+)/);
return m ? decodeURIComponent(m[1]) : '';
})();
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份 hash 原样带回 */
$('#back').addEventListener('click', function () {
if (window.MBHost && MBHost.back(function () { location.href = '../../' + location.search + location.hash; })) return; /* 11-09 容器页:回小程序上一页 */
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 个方面(雷达顺时针:上/右/下/左),按得分率画 ================= */
var DIMS = {
veg: { dim: '蔬菜水果', ax: '蔬果' },
pro: { dim: '奶豆肉蛋鱼', ax: '蛋白' },
base: { dim: '三餐主食喝水', ax: '主食' },
habit: { dim: '饮食小习惯', ax: '习惯' }
};
var ORDER = ['veg', 'pro', 'base', 'habit'];
/* ================= 4 档 =================
* min:最低分;say:一句话评价;keep:没有满分题时「做得好」的兜底;extra:要改的不足 3 件时补的保持建议。
* 语气:温柔、不说教、不吓人;数值依据《中国居民膳食指南(2022)》孕期部分。 */
var LEVELS = [
{ k: 'man', min: 85, name: '营养满分', range: '85 分以上', img: 'img/man.webp', alt: '孕妈端着一份荤素搭配的营养餐盘',
line: '吃得均衡又讲究,宝宝跟着你吃得好', tags: ['荤素均衡', '会挑会搭', '习惯好'],
say: '你已经是「会吃」的孕妈了:该吃的都吃到了,该少吃的也管得住,照现在这样保持就很好。',
keep: '整体吃得很均衡,每一类都照顾到了。',
extra: ['每周称一次体重,看看增长是不是在医生建议的范围里,吃得好也要长得稳。', '孕晚期胃口会被宝宝「挤小」,可以少量多餐,一天吃 5~6 顿,每顿七八分饱。', '每天出门走走、晒晒太阳 20~30 分钟,帮身体合成维生素 D,饭后散步也有助于血糖平稳。'],
tools: [{ id: 'yunqitizhong', why: '每周记一次体重,看增长稳不稳' }, { id: 'yunqinengbuchi', why: '遇到拿不准的食物,先查一查' }, { id: 'bushui', why: '喝水和补剂打个卡,不怕忘' }] },
{ k: 'zai', min: 70, name: '基本在线', range: '70~84 分', img: 'img/zai.webp', alt: '孕妈坐在沙发上吃一碗水果酸奶',
line: '大方向都对,再精一点点就满分', tags: ['底子不错', '偶尔偷懒', '小改就好'],
say: '你的饮食底子不错,大部分都做到位了,只差几个小细节,改一两处就能更上一层。',
keep: '大部分题都选得不错,基本的荤素搭配已经有了。',
extra: ['每周称一次体重,看看增长是不是在医生建议的范围里。', '孕晚期可以少量多餐,一天吃 5~6 顿,每顿七八分饱。', '每天出门走走、晒晒太阳 20~30 分钟。'],
tools: [{ id: 'yunqinengbuchi', why: '想吃又拿不准的,先查一查' }, { id: 'bushui', why: '喝水和补剂每天打卡' }, { id: 'yunqitizhong', why: '体重曲线看一看,吃得刚刚好' }] },
{ k: 'cha', min: 50, name: '还差一点', range: '50~69 分', img: 'img/cha.webp', alt: '孕妈拿着小蛋糕和苹果,歪头想选哪个',
line: '有几处小短板,补上就很棒', tags: ['有意识', '不太稳定', '潜力大'],
say: '你心里知道要好好吃,只是忙起来、馋起来容易顾不上。先挑下面最简单的一件做起,一周就能看到变化。',
keep: '你已经在留意孕期饮食了,这份心思最难得。',
extra: ['每周称一次体重,看看增长是不是在医生建议的范围里。', '冰箱里常备鸡蛋、牛奶、小番茄,忙的时候也能快速凑一顿。', '每天出门走走、晒晒太阳 20~30 分钟。'],
tools: [{ id: 'bushui', why: '喝水、叶酸每天打卡,养成习惯' }, { id: 'yunqinengbuchi', why: '外卖、零食拿不准,先查一查' }, { id: 'yunqitizhong', why: '记记体重,吃得够不够有数' }] },
{ k: 'bu', min: 0, name: '要补补课', range: '50 分以下', img: 'img/bu.webp', alt: '孕妈提着装满蔬菜水果的购物篮,准备好好吃饭',
line: '先从一两件小事改起,慢慢就上手', tags: ['刚起步', '别着急', '一步步来'],
say: '最近可能太忙、胃口不好,或者还没顾上研究吃。别有压力,不用一次全改,从下面第一件开始就好。',
keep: '愿意花两分钟认真测一测,就是好的开始。',
extra: ['冰箱里常备鸡蛋、牛奶、小番茄,忙的时候也能快速凑一顿。', '每周称一次体重,看看增长是不是在医生建议的范围里。', '下次产检可以问问医生,需不需要做个营养评估。'],
tools: [{ id: 'bushui', why: '喝水、叶酸每天打卡,先养一个好习惯' }, { id: 'yunqinengbuchi', why: '哪些能吃、哪些先放放,查一查就知道' }, { id: 'chanjianrili', why: '产检日子记好,顺便问问医生' }] }
];
function levelOf(score) { for (var i = 0; i < LEVELS.length; i++) if (score >= LEVELS[i].min) return LEVELS[i]; return LEVELS[LEVELS.length - 1]; }
/* ================= 12 道题 · 计分表 =================
* 每个选项 = [分数 0~3, 文案],选项顺序已人工打散;d:所属方面;c:题目标签;ic:场景图标;
* good:这题满分时「做得好」的说法;fix:这题没满分时「该改的小事」(具体到吃什么、吃多少)。 */
var QS = [
{ d: 'base', c: '早餐', ic: 'q-cup', q: '工作日早上,你的早餐通常吃什么?', o: [
[2, '包子或粥,配个鸡蛋'], [0, '常常来不及,干脆不吃'], [3, '蛋+奶+杂粮包,再加水果'], [1, '一杯豆浆或一个面包'] ],
good: '早餐吃得规律又丰富',
fix: '早餐凑齐「主食 + 蛋 + 奶」:比如全麦面包 2 片、煮鸡蛋 1 个、牛奶 1 杯(250 毫升),再加几颗小番茄。来不及就前一晚备好,路上也能吃。' },
{ d: 'veg', c: '蔬菜', ic: 'q-leaf', q: '一天下来,你大概吃了多少蔬菜?', o: [
[1, '偶尔夹几筷子'], [3, '三餐都有,加起来约一斤'], [0, '一不小心一天都没吃'], [2, '午饭晚饭各有一盘'] ],
good: '蔬菜吃得够量',
fix: '蔬菜每天 400~500 克(生重差不多一斤),其中三分之二选深色的,比如菠菜、西兰花、胡萝卜、紫甘蓝,午饭晚饭各一大盘就够。' },
{ d: 'veg', c: '水果', ic: 'q-apple', q: '水果你一般怎么吃?', o: [
[3, '每天一两个,换着品种吃'], [1, '一吃停不下来,好几斤'], [2, '有空才吃,不太固定'], [0, '基本靠果汁代替'] ],
good: '水果吃得适量又多样',
fix: '水果每天 200~350 克,大约一个苹果加一小把葡萄;吃完整的水果,别用果汁代替,也别一天吃好几斤,糖分会偏多。' },
{ d: 'pro', c: '奶', ic: 'q-milk', q: '牛奶、酸奶这类,你一天喝多少?', o: [
[2, '每天一杯左右'], [3, '每天两杯,牛奶酸奶换着来'], [0, '不爱喝,基本不碰'], [1, '想起来才喝,一周几次'] ],
good: '奶喝得足,补钙有底',
fix: '奶每天 300~500 克:早上一杯牛奶(250 毫升),下午再来一杯无糖酸奶。喝牛奶肚子不舒服,就换成酸奶或奶酪。' },
{ d: 'pro', c: '豆和坚果', ic: 'q-bean', q: '豆腐、豆浆和坚果,你常吃吗?', o: [
[0, '很少吃,想不起来'], [2, '豆腐常吃,坚果偶尔'], [1, '一周也就吃一两回'], [3, '豆制品常吃,每天小把坚果'] ],
good: '豆制品和坚果都没落下',
fix: '每天一份豆制品加一小把坚果:比如北豆腐小半块(约 60 克)或豆浆一大杯,再加原味核桃 2 个左右(约 10 克),选不加盐不加糖的。' },
{ d: 'pro', c: '肉蛋鱼', ic: 'q-fish', q: '鱼虾、瘦肉和鸡蛋,你平时怎么安排?', o: [
[1, '只吃鸡蛋,肉吃得少'], [3, '天天有蛋有肉,常吃鱼虾'], [2, '肉蛋常吃,鱼虾很少'], [0, '没胃口,荤菜很少碰'] ],
good: '鱼禽蛋肉安排得均衡',
fix: '孕中晚期每天鱼禽蛋瘦肉 150~225 克:一个鸡蛋,加一掌心大小的瘦肉和一块鱼;每周吃 2~3 次鱼虾,1~2 次猪肝或鸭血补铁(每次 20~50 克)。' },
{ d: 'base', c: '主食', ic: 'q-bowl', q: '你的主食一般是?', o: [
[3, '常有杂粮薯类,粗细搭配'], [0, '怕胖,主食很少吃'], [2, '白米饭为主,偶尔粗粮'], [1, '几乎全是白米白面'] ],
good: '主食粗细搭配',
fix: '主食别省,每天谷类孕中期约 200~250 克、孕晚期约 225~275 克(生重),其中三分之一换成全谷物和杂豆:煮饭时抓一把燕麦、小米或红豆,再加一小块红薯或玉米。' },
{ d: 'base', c: '喝水', ic: 'q-drop', q: '一天下来,你喝了多少水?', o: [
[1, '渴了才喝,经常忘'], [2, '大概四五杯'], [0, '基本靠饮料、奶茶'], [3, '水杯不离手,七八杯'] ],
good: '喝水主动又规律',
fix: '每天喝水约 1700 毫升,差不多七八杯(每杯 200 毫升),首选白开水;早起、上午、午后、睡前各定一杯,不等渴了再喝。' },
{ d: 'habit', c: '零食甜饮', ic: 'q-candy', q: '嘴馋的时候,你通常会吃?', o: [
[1, '奶茶甜品,一周好几次'], [3, '酸奶、水果或原味坚果'], [0, '薯片辣条,几乎天天有'], [2, '偶尔吃点小饼干、点心'] ],
good: '零食挑得聪明',
fix: '奶茶、甜饮料尽量少,一周不超过 1 次;嘴馋时换成无糖酸奶 1 杯、一个水果或一小把原味坚果,甜点心留着周末解解馋。' },
{ d: 'habit', c: '外卖', ic: 'q-bag', q: '点外卖或在外面吃时,你会?', o: [
[2, '选家常菜,荤素都有'], [0, '炸鸡麻辣烫,越重口越好'], [3, '主动加青菜,少油少盐'], [1, '想吃啥点啥,不太挑'] ],
good: '外食也记得荤素搭配',
fix: '点外卖备注「少油少盐」,一份荤菜配一份绿叶菜,主食选杂粮饭;汤汁别拌饭,一天盐控制在 5 克以内(约一啤酒瓶盖)。' },
{ d: 'habit', c: '生冷食物', ic: 'q-snow', q: '生鱼片、溏心蛋、冰饮这些,你?', o: [
[0, '没太在意,想吃就吃'], [3, '都换成熟透的、温的'], [1, '溏心蛋半熟牛排照吃'], [2, '基本不碰,偶尔馋一口'] ],
good: '生冷食物管得住',
fix: '肉、蛋、海鲜都做熟再吃,鸡蛋煮到蛋黄凝固;剩菜热透再吃,生鱼片、没杀菌的生奶先放一放。冰饮偶尔一小口没关系,别空腹大量喝。' },
{ d: 'habit', c: '补充剂', ic: 'q-pill', q: '叶酸这些营养补充剂,你?', o: [
[2, '在吃,但常常忘'], [0, '没吃过,也不太清楚'], [3, '按医生建议每天吃'], [1, '孕早期吃过,后来停了'] ],
good: '补充剂按医嘱坚持',
fix: '叶酸每天 400 微克,建议整个孕期都坚持;家里用加碘盐,每周吃 1~2 次海带或紫菜;要不要补铁、钙、维生素 D,听产检医生的。' }
];
var MAXQ = 3;
$('#qTotal').textContent = QS.length;
/* 一天参考量(孕中晚期) */
var PLATE = [
['谷类', '200~275 克', '含全谷杂豆 75~100 克'], ['薯类', '约 75 克', '一小块红薯或土豆'],
['蔬菜', '400~500 克', '三分之二是深色菜'], ['水果', '200~350 克', '一个苹果加一小把'],
['鱼禽蛋瘦肉', '150~225 克', '含 1 个鸡蛋'], ['奶', '300~500 克', '约两杯'],
['大豆 · 坚果', '20 克 · 10 克', '小半块豆腐 + 2 个核桃'], ['水', '约 1700 毫升', '7~8 杯白开水'],
['盐', '不超过 5 克', '用加碘盐'], ['叶酸', '400 微克', '整个孕期坚持']
];
$('#rPlate').innerHTML = PLATE.map(function (x) { return '<div><small>' + x[0] + '</small><b class="num">' + x[1] + '</b><span>' + x[2] + '</span></div>'; }).join('');
/* 开始页:4 档小卡 + 测过人数(仅真实数据) */
$('#tgrid').innerHTML = LEVELS.map(function (t) {
return '<div class="tcard"><img src="' + t.img + '" alt=""><span><b>' + t.name + '</b><small class="num">' + t.range + '</small></span></div>';
}).join('');
if (TESTED_COUNT > 0) { $('#testedN').textContent = TESTED_COUNT.toLocaleString('zh-CN'); $('#tested').hidden = false; }
/* 进场动画:按顺序 60ms 错开 */
var views = { start: $('#vStart'), quiz: $('#vQuiz'), result: $('#vResult') };
var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (es) {
var n = 0;
es.forEach(function (e) {
if (!e.isIntersecting) return;
var el = e.target; io.unobserve(el);
setTimeout(function () { el.classList.add('in'); }, 60 * n++);
});
}, { root: sc, threshold: .08 }) : null;
/* 11-03 用户:「重新测试后退回首页,再进来还是结果页」→ 记住最后停在哪(开始 / 第几题 / 结果),再进来回到那里 */
function pos(v) {
if (v) pos.v = v;
try { localStorage.setItem(KEY + '.pos', JSON.stringify({ v: pos.v, cur: cur, ans: ans })); } catch (e) {}
}
function resume() {
var p = null; try { p = JSON.parse(localStorage.getItem(KEY + '.pos') || 'null'); } catch (e) {}
if (!p) return false; /* 旧用户没有记录:照原来的(有结果看结果) */
if (p.v === 'start') { show('start'); return true; }
if (p.v === 'quiz' && Array.isArray(p.ans)) { cur = Math.max(0, Math.min(+p.cur || 0, QS.length - 1)); ans = p.ans.slice(0, QS.length); paint(); show('quiz'); return true; }
return false;
}
function show(name) {
pos(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');
});
}
/* ================= 答题 ================= */
var cur = 0, ans = [], busy = false;
var stage = $('#stage');
$('#feet').innerHTML = QS.map(function () { return '<svg viewBox="0 0 24 24"><use href="#i-foot" xlink:href="#i-foot"/></svg>'; }).join('');
var feet = document.querySelectorAll('#feet svg');
function paint() {
var q = QS[cur];
$('#qNo').textContent = cur + 1;
[].forEach.call(feet, function (f, i) { f.setAttribute('class', i < cur ? 'done' : i === cur ? 'cur' : ''); });
useRef($('#qIc'), q.ic);
$('#qCat').textContent = q.c;
$('#qTitle').textContent = q.q;
$('#qOpts').innerHTML = q.o.map(function (o, i) {
return '<button class="opt' + (ans[cur] === i ? ' sel' : '') + '" data-i="' + i + '"><span class="l">' + 'ABCD'[i] + '</span><span>' + esc(o[1]) +
'</span><span class="ck"><svg class="ic"><use href="#i-check" xlink:href="#i-check"/></svg></span></button>';
}).join('');
$('#prevBtn').disabled = cur === 0;
if (pos.v === 'quiz') pos();
}
/* 左右滑动:前进 → 当前向左滑出、新题从右滑入;上一题反过来 */
function swap(dir, after) {
busy = true;
stage.classList.add(dir > 0 ? 'outL' : 'outR');
setTimeout(function () {
after();
stage.classList.remove('outL', 'outR');
stage.classList.add(dir > 0 ? 'inR' : 'inL');
void stage.offsetWidth;
stage.classList.remove('inR', 'inL');
setTimeout(function () { busy = false; }, 220);
}, 220);
}
$('#qOpts').addEventListener('click', function (e) {
var b = e.target.closest('.opt'); if (!b || busy) return;
busy = true;
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(); });
else { busy = false; finish(); }
}, 380);
});
$('#prevBtn').addEventListener('click', function () {
if (busy || cur === 0) return;
swap(-1, function () { cur--; paint(); });
});
function startQuiz() {
cur = 0; ans = []; busy = false;
stage.classList.remove('outL', 'outR', 'inL', 'inR');
paint();
show('quiz');
}
$('#startBtn').addEventListener('click', startQuiz);
$('#againBtn').addEventListener('click', startQuiz);
/* 11-07 结果页「返回首页」= 回测试列表(孕妈广场「测一测」分类),查询参数和身份 hash 原样带上 */
$('#listBtn').addEventListener('click', function () { var q = new URLSearchParams(location.search); ['id', 'c', 'n', 't'].forEach(function (k) { q.delete(k); }); q.set('c', 'ceshi'); location.href = '../../guangchang/?' + q.toString() + location.hash; });
/* ================= 计分:每题 0~3,合计折算 100 分;各方面按得分率 ================= */
function score(answers) {
var got = {}, max = {}, sum = 0, per = [];
ORDER.forEach(function (k) { got[k] = 0; max[k] = 0; });
answers.forEach(function (i, qi) { var v = QS[qi].o[i][0]; per.push(v); sum += v; got[QS[qi].d] += v; max[QS[qi].d] += MAXQ; });
var p = {}; ORDER.forEach(function (k) { p[k] = max[k] ? Math.round(got[k] / max[k] * 100) : 0; });
return { total: Math.round(sum / (QS.length * MAXQ) * 100), p: p, per: per };
}
function finish() {
var rec = { ans: ans.slice(), at: Date.now() };
try { localStorage.setItem(KEY, JSON.stringify(rec)); } catch (e) {}
render(rec, false);
}
/* ================= 解读:引用作答 ================= */
function reading(r, lv) {
var full = r.per.filter(function (v) { return v === MAXQ; }).length;
var sorted = ORDER.slice().sort(function (x, y) { return r.p[y] - r.p[x]; });
var hi = sorted[0], lo = sorted[sorted.length - 1];
var html = '<p><b>' + esc(lv.say) + '</b></p>';
html += '<p>' + (full ? QS.length + ' 道题里,你有 <b class="num">' + full + '</b> 道选到了最理想的吃法。' : '这次还没有哪道题选到最理想的吃法,没关系,改起来进步会很明显。');
if (r.p[hi] === r.p[lo]) html += '四个方面得分差不多,都在 <span class="num">' + r.p[hi] + '%</span> 左右。</p>';
else html += '最稳的是「' + DIMS[hi].dim + '」(<span class="num">' + r.p[hi] + '%</span>),最值得加把劲的是「' + DIMS[lo].dim + '」(<span class="num">' + r.p[lo] + '%</span>)。</p>';
return html;
}
function goods(r, lv) {
var g = [], ok = [];
r.per.forEach(function (v, qi) { if (v === MAXQ) g.push(QS[qi]); else if (v === 2) ok.push(QS[qi]); });
var html = '';
if (g.length) {
html += '<p>' + g.slice(0, 6).map(function (q) { return '<q>' + esc(q.good) + '</q>'; }).join('、') + (g.length > 6 ? ' 等 ' + g.length + ' 项' : '') + ',这些都做得很到位,继续保持。</p>';
} else html += '<p>' + esc(lv.keep) + '</p>';
if (ok.length) html += '<p>' + ok.slice(0, 3).map(function (q) { return '「' + q.c + '」'; }).join('') + (ok.length > 3 ? '等' : '') + '也已经有意识了,再多走一步就是满分。</p>';
else if (g.length) html += '<p>' + esc(lv.keep) + '</p>';
return html;
}
/* 最该改的 3 件:得分最低的题优先(同分按题目顺序);不足 3 件时用该档保持建议补齐 */
function fixes(r, lv) {
var idx = r.per.map(function (v, qi) { return qi; }).filter(function (qi) { return r.per[qi] < MAXQ; });
idx.sort(function (a, b) { return r.per[a] - r.per[b] || a - b; });
var out = idx.slice(0, 3).map(function (qi) { return { t: QS[qi].c, x: QS[qi].fix }; });
for (var i = 0; out.length < 3 && i < lv.extra.length; i++) out.push({ t: '加分', x: lv.extra[i] });
return out;
}
/* ================= 雷达图(SVG 手写,单系列,刻度固定 100%) ================= */
function radarPts(p, cx, cy, R) {
var d = [[0, -1], [1, 0], [0, 1], [-1, 0]];
return ORDER.map(function (k, i) { var r = Math.max(p[k] / 100, .06) * R; return [cx + d[i][0] * r, cy + d[i][1] * r]; });
}
function radarSVG(p, top) {
var cx = 68, cy = 68, R = 44, g = '';
[1 / 3, 2 / 3, 1].forEach(function (f) {
var r = R * f; g += '<polygon points="' + [cx, cy - r, cx + r, cy, cx, cy + r, cx - r, cy].join(',') + '" fill="none" stroke="' + CL + '" stroke-width="1"/>';
});
g += '<path d="M' + cx + ' ' + (cy - R) + 'V' + (cy + R) + 'M' + (cx - R) + ' ' + cy + 'H' + (cx + R) + '" stroke="' + CL + '" stroke-width="1"/>';
var pts = radarPts(p, cx, cy, R);
g += '<polygon points="' + pts.map(function (x) { return x.join(','); }).join(' ') + '" fill="rgba(107,170,60,.18)" stroke="' + C + '" stroke-width="2" stroke-linejoin="round"/>';
pts.forEach(function (x, i) { g += '<circle cx="' + x[0] + '" cy="' + x[1] + '" r="' + (ORDER[i] === top ? 4.5 : 3.2) + '" fill="' + C + '" stroke="#fff" stroke-width="1.5"/>'; });
var L = [[cx, 12, 'middle'], [cx + R + 6, cy + 4, 'start'], [cx, cy + R + 18, 'middle'], [cx - R - 6, cy + 4, 'end']];
ORDER.forEach(function (k, i) {
g += '<text x="' + L[i][0] + '" y="' + L[i][1] + '" text-anchor="' + L[i][2] + '" font-size="11" font-weight="' + (k === top ? 800 : 500) + '" fill="' + (k === top ? C : '#86909C') + '">' + DIMS[k].ax + '</text>';
});
return g;
}
function topDim(p) { return ORDER.slice().sort(function (x, y) { return p[y] - p[x]; })[0]; }
function dimSorted(p, top) { return ORDER.slice().sort(function (x, y) { return (y === top) - (x === top) || p[y] - p[x]; }); }
/* ================= 渲染结果 ================= */
var curRec = null, curR = null, curLv = null, wk = 0;
function render(rec, fromCache) {
var r = score(rec.ans), lv = levelOf(r.total), top = topDim(r.p);
curRec = rec; curR = r; curLv = lv;
$('#rImg').src = lv.img; $('#rImg').alt = lv.alt;
$('#rScore').textContent = r.total;
$('#rName').textContent = lv.name;
$('#rLine').textContent = lv.line;
var d = new Date(rec.at || Date.now());
$('#rLast').textContent = (fromCache ? '上次测试 · ' : '') + (d.getMonth() + 1) + '月' + d.getDate() + '日';
$('#rTags').innerHTML = lv.tags.map(function (a) { return '<span>' + esc(a) + '</span>'; }).join('');
$('#rRadar').innerHTML = radarSVG(r.p, top);
$('#rDims').innerHTML = dimSorted(r.p, top).map(function (k) {
return '<div class="dr' + (k === top ? ' me' : '') + '"><span>' + DIMS[k].dim + '</span><span class="p num">' + r.p[k] + '%</span><span class="tr"><i data-w="' + r.p[k] + '"></i></span></div>';
}).join('');
$('#rRead').innerHTML = reading(r, lv);
$('#rGood').innerHTML = goods(r, lv);
$('#rTips').innerHTML = fixes(r, lv).map(function (x, i) { return '<div class="tp"><span class="n">' + (i + 1) + '</span><p><b>' + esc(x.t) + '</b>' + esc(x.x) + '</p></div>'; }).join('');
renderTools();
show('result');
setTimeout(function () { [].forEach.call(document.querySelectorAll('#rDims i'), function (b) { b.style.width = b.dataset.w + '%'; }); }, 250);
}
function renderTools() {
if (!curLv || !window.TopicTools) return;
var el = $('#tools'); el.className = 'fade in';
TopicTools.render(el, curLv.tools, { title: '帮你吃得更好的工具', color: C, bg: '#F0F7E8', wk: wk });
}
/* 孕周:只用来给推荐工具打「孕N周开放」标签 */
if (openid) {
fetch('/api/mp/public/mama-box/pregnancy?openid=' + encodeURIComponent(openid))
.then(function (r) { return r.ok ? r.json() : null; })
.then(function (j) {
var p = j && j.code === 200 && j.result;
if (p && !p.postpartum && !p.empty && p.week != null) { wk = +p.week || 0; renderTools(); }
}).catch(function () {});
}
/* ================= 提示(用户要求结果页不放「复制发给 xx」类按钮) ================= */
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);
}
/* ================= 保存结果卡:canvas 画图 → <img> 长按保存 ================= */
var FONT = '-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif';
function rr(ctx, x, y, w, h, r) {
ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath();
}
function loadImg(src) { return new Promise(function (ok, no) { var im = new Image(); im.onload = function () { ok(im); }; im.onerror = no; im.src = src; }); }
function drawCard(im) {
var lv = curLv, p = curR.p, top = topDim(p), W = 750, H = 1240;
var cv = document.createElement('canvas'); cv.width = W; cv.height = H;
var ctx = cv.getContext('2d');
var g = ctx.createLinearGradient(0, 0, W * .3, H);
g.addColorStop(0, '#DDEFCB'); g.addColorStop(.45, '#F2F9EA'); g.addColorStop(1, '#FFFFFF');
ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
ctx.fillStyle = 'rgba(255,255,255,.55)'; ctx.beginPath(); ctx.arc(660, 90, 230, 0, 7); ctx.fill();
ctx.fillStyle = 'rgba(107,170,60,.06)'; ctx.beginPath(); ctx.arc(40, 470, 150, 0, 7); ctx.fill();
ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic';
/* 顶部胶囊 */
ctx.font = '700 24px ' + FONT;
var lb = '孕期饮食成绩单', lw = ctx.measureText(lb).width + 44;
ctx.fillStyle = '#fff'; rr(ctx, (W - lw) / 2, 52, lw, 48, 24); ctx.fill();
ctx.fillStyle = C; ctx.fillText(lb, W / 2, 84);
/* 插画 */
var S = 300, ix = (W - S) / 2, iy = 132;
ctx.save(); ctx.shadowColor = 'rgba(107,170,60,.18)'; ctx.shadowBlur = 36; ctx.shadowOffsetY = 12;
ctx.fillStyle = '#fff'; rr(ctx, ix - 10, iy - 10, S + 20, S + 20, 60); ctx.fill(); ctx.restore();
ctx.save(); rr(ctx, ix, iy, S, S, 52); ctx.clip();
var sw = im.naturalWidth, sh = im.naturalHeight, side = Math.min(sw, sh);
ctx.drawImage(im, (sw - side) / 2, (sh - side) * .3, side, side, ix, iy, S, S); ctx.restore();
/* 分数 + 档位 */
ctx.fillStyle = '#86909C'; ctx.font = '400 26px ' + FONT; ctx.fillText('我的孕期饮食能打', W / 2, 496);
ctx.font = '800 96px ' + FONT;
var sn = String(curR.total), snw = ctx.measureText(sn).width;
ctx.font = '700 32px ' + FONT; var uw = ctx.measureText('分').width;
var sx = (W - snw - uw - 8) / 2;
ctx.fillStyle = 'rgba(107,170,60,.22)'; ctx.fillRect(sx - 4, 566, snw + 8, 26);
ctx.textAlign = 'left'; ctx.fillStyle = '#1F2329'; ctx.font = '800 96px ' + FONT; ctx.fillText(sn, sx, 588);
ctx.font = '700 32px ' + FONT; ctx.fillText('分', sx + snw + 8, 586);
ctx.textAlign = 'center';
ctx.font = '800 34px ' + FONT; var nw = ctx.measureText(lv.name).width + 48;
ctx.fillStyle = C; rr(ctx, (W - nw) / 2, 612, nw, 54, 27); ctx.fill();
ctx.fillStyle = '#fff'; ctx.fillText(lv.name, W / 2, 651);
ctx.fillStyle = '#4E5969'; ctx.font = '400 28px ' + FONT; ctx.fillText(lv.line, W / 2, 712);
/* 关键词 */
ctx.font = '700 26px ' + FONT;
var ws = lv.tags.map(function (s) { return ctx.measureText(s).width + 44; }), gap = 16;
var tx = (W - ws.reduce(function (a, b) { return a + b; }, 0) - gap * 2) / 2;
lv.tags.forEach(function (s, i) {
ctx.save(); ctx.shadowColor = 'rgba(107,170,60,.12)'; ctx.shadowBlur = 14; ctx.shadowOffsetY = 4;
ctx.fillStyle = '#fff'; rr(ctx, tx, 744, ws[i], 56, 28); ctx.fill(); ctx.restore();
ctx.fillStyle = C; ctx.fillText(s, tx + ws[i] / 2, 781); tx += ws[i] + gap;
});
/* 维度面板 */
var py = 832;
ctx.fillStyle = 'rgba(255,255,255,.9)'; rr(ctx, 40, py, 670, 300, 36); ctx.fill();
var cx = 205, cy = py + 150, R = 88;
ctx.strokeStyle = CL; ctx.lineWidth = 2;
[1 / 3, 2 / 3, 1].forEach(function (f) { var r = R * f; ctx.beginPath(); ctx.moveTo(cx, cy - r); ctx.lineTo(cx + r, cy); ctx.lineTo(cx, cy + r); ctx.lineTo(cx - r, cy); ctx.closePath(); ctx.stroke(); });
ctx.beginPath(); ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R); ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy); ctx.stroke();
var pts = radarPts(p, cx, cy, R);
ctx.beginPath(); pts.forEach(function (x, i) { i ? ctx.lineTo(x[0], x[1]) : ctx.moveTo(x[0], x[1]); }); ctx.closePath();
ctx.fillStyle = 'rgba(107,170,60,.18)'; ctx.fill(); ctx.strokeStyle = C; ctx.lineWidth = 4; ctx.lineJoin = 'round'; ctx.stroke();
pts.forEach(function (x, i) { ctx.beginPath(); ctx.arc(x[0], x[1], ORDER[i] === top ? 9 : 6.5, 0, 7); ctx.fillStyle = C; ctx.fill(); ctx.lineWidth = 3; ctx.strokeStyle = '#fff'; ctx.stroke(); });
var L = [[cx, cy - R - 16, 'center'], [cx + R + 12, cy + 8, 'left'], [cx, cy + R + 34, 'center'], [cx - R - 12, cy + 8, 'right']];
ORDER.forEach(function (k, i) {
ctx.textAlign = L[i][2]; ctx.font = (k === top ? '800' : '500') + ' 22px ' + FONT;
ctx.fillStyle = k === top ? C : '#86909C'; ctx.fillText(DIMS[k].ax, L[i][0], L[i][1]);
});
dimSorted(p, top).forEach(function (k, i) {
var y = py + 62 + i * 64, me = k === top;
ctx.textAlign = 'left'; ctx.font = (me ? '700' : '400') + ' 25px ' + FONT; ctx.fillStyle = me ? C : '#4E5969'; ctx.fillText(DIMS[k].dim, 388, y + 10);
ctx.textAlign = 'right'; ctx.font = '700 25px ' + FONT; ctx.fillStyle = me ? C : '#1F2329'; ctx.fillText(p[k] + '%', 674, y + 10);
ctx.fillStyle = '#E8F3DD'; rr(ctx, 388, y + 24, 286, 10, 5); ctx.fill();
ctx.fillStyle = me ? C : '#B5D896'; rr(ctx, 388, y + 24, Math.max(10, 286 * p[k] / 100), 10, 5); ctx.fill();
});
/* 底部 */
ctx.textAlign = 'center';
ctx.fillStyle = '#1F2329'; ctx.font = '700 26px ' + FONT; ctx.fillText('测一测:你的孕期饮食能打几分?', W / 2, 1180);
ctx.fillStyle = '#86909C'; ctx.font = '400 21px ' + FONT; ctx.fillText('兜爸心选 · 孕期专题 · 生活自查,仅供参考', W / 2, 1214);
return cv.toDataURL('image/png');
}
var isWx = /MicroMessenger/i.test(navigator.userAgent);
$('#saveBtn').addEventListener('click', function () {
if (!curLv) return;
toast('正在生成结果卡…');
loadImg(curLv.img).then(function (im) {
var url = drawCard(im);
$('#maskImg').src = url;
var dl = $('#dlBtn'); dl.href = url; dl.hidden = isWx;
$('#toast').classList.remove('on');
$('#mask').classList.add('on');
}).catch(function () { toast('生成失败,截个图保存也可以'); });
});
$('#maskClose').addEventListener('click', function () { $('#mask').classList.remove('on'); });
$('#mask').addEventListener('click', function (e) { if (e.target === this) this.classList.remove('on'); });
/* 入口:有上次结果直接看结果,否则开始页 */
var saved = null;
try { saved = JSON.parse(localStorage.getItem(KEY) || 'null'); } catch (e) {}
var valid = saved && saved.ans && saved.ans.length === QS.length && saved.ans.every(function (i, qi) { return QS[qi].o[i]; });
if (resume()) ;
else if (valid) 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>
<script src="../../js/last-sub.js?v=26110905"></script> <!-- 11-07 小程序刷新回到这一页(见 js/last-sub.js) -->
<script src="../../js/pv.js?v=26110653"></script> <!-- 11-07 页面访问记录(推送效果看板,见 js/pv.js) -->
</body>
</html>