795 lines
56 KiB
HTML
795 lines
56 KiB
HTML
<!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}
|
||
|
||
.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>
|
||
</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>
|
||
<button class="btn sec again" id="againBtn"><svg class="ic"><use href="#i-refresh" xlink:href="#i-refresh"/></svg>重新测试</button>
|
||
</main>
|
||
|
||
<p class="foot">生活饮食自查,仅供参考;身体相关问题以产检医生意见为准</p>
|
||
</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 { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||
var openid = (function () {
|
||
var m = (location.hash + '&' + location.search).match(/[#?&]openid=([^&#]+)/);
|
||
return m ? decodeURIComponent(m[1]) : '';
|
||
})();
|
||
|
||
/* 返回:从首页点进来就 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;
|
||
});
|
||
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~300 克(生重),其中三分之一换成全谷物和杂豆:煮饭时抓一把燕麦、小米或红豆,再加一小块红薯或玉米。' },
|
||
{ 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~300 克', '含全谷杂豆 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);
|
||
|
||
/* ================= 计分:每题 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>
|
||
</body>
|
||
</html>
|