117 lines
9.0 KiB
HTML
117 lines
9.0 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>
|
||
<!-- 11-03 首页「测一测 · 科普 · 计算器」模块（js/kit.js）里「孕期计算器」入口的列表页。
|
||
用户：「这几个模块不是进去测一个，而是进去之后是列表页」。测试 / 科普已有列表（广场测一测、全部问题），计算器原来没有，这页补上。
|
||
条目：专题页里带计算器的（生娃花费 topic/huafei、产假天数 topic/zhichang）+ 会算数的孕期工具（胎儿估重、孕期体重管理）。
|
||
跳转一律同源相对路径，带回 search + hash（openid）；胎儿估重孕 15 周前提示（同首页 STAGE_GATE）。自成一页，不引 app.js。 -->
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
|
||
html,body{height:100%;overflow:hidden;background:#FFF8F3;color:#4E5969;font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
|
||
#scroll{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
|
||
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||
.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);transition:background .2s}
|
||
.bar.on{background:#FFF8F3;box-shadow:0 1px 0 #F3E6DC}
|
||
.bar .back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#1F2329}
|
||
.bar .back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.bar .t{font-weight:700;font-size:16px;color:#1F2329;opacity:0;transition:opacity .2s}
|
||
.bar.on .t{opacity:1}
|
||
.hero{position:relative;margin-top:-48px;padding:64px 20px 22px;background:linear-gradient(165deg,#FFE6D4 0%,#FFF8F3 78%);overflow:hidden}
|
||
.hero img{position:absolute;right:6px;top:44px;width:132px;height:132px;border-radius:30px;mix-blend-mode:multiply}
|
||
.hero small{display:inline-block;padding:2px 9px;border-radius:99px;background:#F07A2E;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.5px}
|
||
.hero h1{margin-top:10px;font-size:28px;font-weight:900;color:#1F2329;line-height:1.25}
|
||
.hero p{margin-top:6px;max-width:60%;font-size:13.5px;color:#7A6A60}
|
||
.list{display:flex;flex-direction:column;gap:12px;padding:6px 16px 0}
|
||
.it{position:relative;display:flex;align-items:center;gap:13px;padding:15px 14px;border-radius:20px;background:#fff;text-decoration:none;box-shadow:0 6px 18px -10px rgba(160,90,50,.28);transition:transform .14s}
|
||
.it:active{transform:scale(.98)}
|
||
.ic{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--bg)}
|
||
.ic svg{width:28px;height:28px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||
.ic img{width:38px;height:38px;object-fit:contain}
|
||
.tx{flex:1;min-width:0}
|
||
.tx b{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:800;color:#1F2329}
|
||
.tx b i{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:6px;background:var(--bg);color:var(--c)}
|
||
.tx p{margin-top:2px;font-size:12.5px;color:#7A6A60;line-height:1.5}
|
||
.tx small{display:block;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--c)}
|
||
.go{flex:none;height:30px;padding:0 13px;border-radius:99px;display:inline-flex;align-items:center;background:var(--c);color:#fff;font-size:13px;font-weight:800}
|
||
.it.lk{opacity:.6}
|
||
.it.lk .go{background:#C9BDB6}
|
||
.more{margin:22px 16px 0;padding:14px;border-radius:16px;background:rgba(240,122,46,.07);text-align:center;font-size:12.5px;color:#A08878}
|
||
.toast{position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom));z-index:50;transform:translate(-50%,10px);max-width:80%;padding:10px 16px;border-radius:12px;background:rgba(31,35,41,.86);color:#fff;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
|
||
.toast.on{opacity:1;transform:translate(-50%,0)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="scroll">
|
||
<header class="bar" id="bar">
|
||
<button class="back" id="back" aria-label="返回"><svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg></button>
|
||
<span class="t">孕期计算器</span>
|
||
</header>
|
||
<section class="hero">
|
||
<img src="../../assets/img/kit/jisuan.webp" alt="">
|
||
<small>算一算</small>
|
||
<h1>孕期计算器</h1>
|
||
<p>花多少钱、休几天产假、宝宝多重，算明白心里才有底</p>
|
||
</section>
|
||
<div class="list" id="list"></div>
|
||
<div class="more">更多计算器陆续上线中</div>
|
||
</div>
|
||
<div class="toast" id="toast"></div>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var $ = function (s) { return document.querySelector(s); };
|
||
function href(u, cm) { return u + (cm ? (location.search ? location.search + '&' : '?') + 'calc=1' : (location.search || '')) + (location.hash || ''); } /* cm：产假页进计算器模式（11-03） */
|
||
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; }); }
|
||
/* 人数口径同首页：「此刻」总人数（默认 151 万）× 固定比例，模拟数（AGENTS.md 12b） */
|
||
var TOT = 1510000;
|
||
function wan(n) { return n >= 1e4 ? (Math.round(n / 1e3) / 10) + '万' : String(Math.round(n)); }
|
||
var week = 0;
|
||
try { var g = JSON.parse(localStorage.getItem('mmbox.gcwk.v1') || 'null'); week = g && !g.pp ? +g.w || 0 : 0; } catch (e) {}
|
||
var SV = {
|
||
money: '<svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="3"/><path d="M8.5 7h7M8.5 11h1M12 11h1M15.5 11h0M8.5 14.5h1M12 14.5h1M8.5 18h1M12 18h1M15.5 14.5v3.5"/></svg>',
|
||
cal: '<svg viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15.5" rx="3"/><path d="M8 3v4M16 3v4M3.5 10h17M8 14h3M8 17h6"/></svg>'
|
||
};
|
||
var L = [
|
||
{ n: '生娃花费计算器', tag: '最多人用', d: '产检、分娩、月子、宝宝第一年，一共要花多少钱', u: '../huafei/', heat: .118, c: '#F07A2E', bg: '#FFF0E4', ic: SV.money },
|
||
{ n: '产假天数计算器', d: '能休几天、哪天开始休、哪天回去上班', u: '../zhichang/', cm: 1, heat: .062, c: '#5B6CFF', bg: '#EEF0FF', ic: SV.cal },
|
||
{ n: '胎儿体重估算', d: '填 B 超上的几个数，估宝宝现在多重', u: '/taier-guzhong/', heat: .071, c: '#2E9B78', bg: '#E6F6F0', img: '/upload/picture/715333a69fb67d8812ab093f342fa00f.png', gate: 15 },
|
||
{ n: '孕期增重计算', d: '按孕前身高体重，算你整个孕期该长多少斤', u: '/yunqi-tizhong/', heat: .083, c: '#E25C7A', bg: '#FFECEF', img: '/upload/picture/a6d7e61edee2ff0395cf00587a7c4036.svg' }
|
||
];
|
||
$('#list').innerHTML = L.map(function (x, i) {
|
||
var lk = x.gate && week && week < x.gate;
|
||
return '<a class="it' + (lk ? ' lk' : '') + '" data-i="' + i + '" href="' + esc(href(x.u, x.cm)) + '" style="--c:' + x.c + ';--bg:' + x.bg + '">' +
|
||
'<span class="ic">' + (x.img ? '<img src="' + esc(x.img) + '" alt="">' : x.ic) + '</span>' +
|
||
'<span class="tx"><b>' + esc(x.n) + (x.tag ? '<i>' + esc(x.tag) + '</i>' : '') + (lk ? '<i>孕' + x.gate + '周开放</i>' : '') + '</b><p>' + esc(x.d) + '</p><small>' + wan(TOT * x.heat) + '人算过</small></span>' +
|
||
'<span class="go">去算</span></a>';
|
||
}).join('');
|
||
var tt = 0;
|
||
function toast(t) { var e = $('#toast'); e.textContent = t; e.classList.add('on'); clearTimeout(tt); tt = setTimeout(function () { e.classList.remove('on'); }, 2200); }
|
||
$('#list').addEventListener('click', function (e) {
|
||
var a = e.target.closest('.it'); if (!a || !a.classList.contains('lk')) return;
|
||
e.preventDefault();
|
||
var x = L[+a.dataset.i]; toast(x.n + '孕 ' + x.gate + ' 周以后开放，你现在孕 ' + week + ' 周，还用不到哦');
|
||
});
|
||
/* 返回：从首页点进来就 back；直接打开（分享 / 刷新）就回首页，身份原样带回 */
|
||
$('#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;
|
||
});
|
||
var sc = $('#scroll'), bar = $('#bar');
|
||
sc.addEventListener('scroll', function () { bar.classList.toggle('on', sc.scrollTop > 40); }, { passive: true });
|
||
/* 禁止下拉回弹：固定外壳 + 容器滚动 + 到顶/到底时拦 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>
|