v26110267 预览:首页头图倒计时翻牌;百宝箱入口人数改几十万带小数;30 个测试开始页按参考图精简居中;产假计算器模式(calc=1)计算器置顶
Co-Authored-By: AI 助手
This commit is contained in:
@@ -54,74 +54,39 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
.sh2 span{margin-left:auto;font-size:12.5px;color:var(--sub)}
|
||||
|
||||
/* ---------- ① 开始 ---------- */
|
||||
/* 11-03 用户:测试首页要一屏放下,「开始测试」不用往下滑就能看到 → 头图缩成右上小图、信息横排、结果类型一行四个;按钮再贴底兜底(小屏/有上次结果时) */
|
||||
/* 11-03 用户发参考图(依恋型人格测试):「每个测试的首页内容不要太多,简明清晰」→ 全部居中、一屏放下:
|
||||
顶部分组小胶囊 → 插画(圆形 + 身后两团柔光 + 小圆点)→ 大标题 → 「N 道题 · M 分钟」+ 一句话 → 两三个小标签 → 大号胶囊按钮 → 底部一行小字。
|
||||
原来的「简介段落」「N 种结果插画宫格」撤掉(结果插画在结果页「其他结果」里照样能看到)。 */
|
||||
#vStart{margin-top:-48px}
|
||||
.hero{position:relative;overflow:hidden;padding:58px 20px 16px;background:linear-gradient(160deg,var(--cbg) 0%,#fff 78%)}
|
||||
.hero .o1,.hero .o2{position:absolute;border-radius:50%;background:var(--c10);pointer-events:none}
|
||||
.hero .o1{width:220px;height:220px;right:-80px;top:-80px}
|
||||
.hero .o2{width:120px;height:120px;left:-50px;bottom:-30px;background:var(--c06)}
|
||||
.hero .eb{position:relative;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;border-radius:99px;background:#fff;color:var(--c);font-size:12px;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 8px var(--c10)}
|
||||
.hero h1{position:relative;z-index:1;margin-top:10px;padding-right:118px;font-size:23px;font-weight:800;line-height:1.38;color:var(--ink);letter-spacing:.5px;text-wrap:balance}
|
||||
.hero h1 small{display:block;font-size:14px;font-weight:700;color:var(--txt);letter-spacing:1px}
|
||||
.hero .meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
|
||||
.hero .meta span{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--txt);line-height:1.4}
|
||||
.hero .meta .ic{width:15px;height:15px;color:var(--c)}
|
||||
.hero .meta b{color:var(--ink);font-weight:800}
|
||||
.hero .pic{position:absolute;z-index:1;right:18px;top:62px;width:100px;height:100px;object-fit:cover;object-position:center 30%;border-radius:24px;border:3px solid #fff;box-shadow:0 8px 20px var(--c20);background:var(--cbg)}
|
||||
.lead{margin-top:4px;padding:12px 14px;border-radius:16px;background:var(--soft);font-size:13.5px;line-height:1.7;color:var(--txt)}
|
||||
.lastr{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 12px;border-radius:14px;background:var(--cbg);font-size:13px;color:var(--ink)}
|
||||
.lastr img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff}
|
||||
#vStart.on{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh;padding:calc(58px + env(safe-area-inset-top)) 28px calc(18px + env(safe-area-inset-bottom));text-align:center;
|
||||
background:radial-gradient(120% 60% at 50% 0%,var(--cbg) 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#FFFBF8,#fff 70%)}
|
||||
.s-pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 16px;border-radius:99px;background:var(--c06);color:var(--c);font-size:13px;font-weight:700;letter-spacing:2px}
|
||||
.s-pill i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
|
||||
.s-art{position:relative;width:min(64vw,250px);aspect-ratio:1;margin:clamp(14px,4vh,34px) 0 0}
|
||||
.s-art .g1,.s-art .g2{position:absolute;border-radius:50%;filter:blur(2px)}
|
||||
.s-art .g1{left:-14%;top:-6%;width:72%;height:72%;background:radial-gradient(circle at 40% 40%,var(--c2),var(--c06) 70%)}
|
||||
.s-art .g2{right:-16%;bottom:-8%;width:66%;height:66%;background:radial-gradient(circle at 55% 55%,#E3EEDD,rgba(227,238,221,.25) 70%)}
|
||||
.s-art .dt{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--c20)}
|
||||
.s-art .d1{right:-4%;top:6%}.s-art .d2{left:-10%;bottom:16%;width:7px;height:7px}.s-art .d3{right:18%;bottom:-6%;width:6px;height:6px}
|
||||
.s-art img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 32%;border:5px solid #fff;box-shadow:0 14px 34px -10px var(--c20);background:var(--cbg)}
|
||||
.s-art .hb{position:absolute;right:2%;bottom:6%;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--c);box-shadow:0 6px 16px -4px var(--c20)}
|
||||
.s-art .hb .ic{width:24px;height:24px;stroke-width:2}
|
||||
#sTitle{margin-top:clamp(18px,4.2vh,36px);font-size:clamp(25px,7.4vw,30px);font-weight:900;line-height:1.3;color:var(--ink);letter-spacing:2px;text-wrap:balance}
|
||||
.s-meta{margin-top:10px;font-size:15px;color:var(--sub);letter-spacing:.5px}
|
||||
.s-meta b{font-weight:600;color:var(--txt)}
|
||||
.s-line{margin-top:4px;font-size:15.5px;color:var(--txt);letter-spacing:.5px}
|
||||
.s-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(14px,3vh,26px)}
|
||||
.s-chips span{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 15px;border-radius:99px;background:#fff;border:1px solid var(--line);box-shadow:0 3px 10px -4px rgba(0,0,0,.08);font-size:13px;color:var(--txt)}
|
||||
.s-chips .hot{color:#F0704F;font-weight:700}
|
||||
.s-chips .hot svg{width:13px;height:13px}
|
||||
.s-go{width:100%;margin-top:auto;padding-top:clamp(18px,4vh,40px)}
|
||||
#startBtn{height:56px;font-size:18px;letter-spacing:4px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 78%,#fff));box-shadow:0 12px 26px -10px var(--c)}
|
||||
#startBtn .ic{display:none}
|
||||
.s-note{margin-top:14px;font-size:12.5px;color:#A9AEB8;letter-spacing:1px}
|
||||
.lastr{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 12px 5px 5px;border-radius:99px;background:var(--c06);font-size:12.5px;color:var(--ink)}
|
||||
.lastr img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid #fff}
|
||||
.lastr b{color:var(--c)}
|
||||
.lastr span{flex:1}
|
||||
.types{margin-top:16px}
|
||||
.types .sh2 b{font-size:15.5px}
|
||||
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;margin-top:-2px}
|
||||
.tcard{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center}
|
||||
.tcard img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 26%;border:2px solid #fff;box-shadow:0 2px 8px var(--c10);background:var(--cbg)}
|
||||
.tcard span{min-width:0;width:100%}
|
||||
.tcard b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.35;word-break:break-all}
|
||||
.tcard small{display:none}
|
||||
.startbox{position:sticky;bottom:0;z-index:5;margin:6px -20px 0;padding:12px 20px calc(4px + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(rgba(255,255,255,0),#fff 14px)}
|
||||
.startbox .note{margin-top:7px;font-size:12px;color:var(--sub)}
|
||||
/* 11-03 用户:一屏放下后底下空太多 → 开始页撑满一屏(减去底部免责一行),多出的高度均分到各块之间;屏越高图越大 */
|
||||
#vStart.on{display:flex;flex-direction:column;min-height:calc(100vh - 69px);min-height:calc(100dvh - 69px - env(safe-area-inset-bottom))}
|
||||
#vStart .wrap{flex:1;display:flex;flex-direction:column;width:100%}
|
||||
#vStart .lead{margin-top:clamp(4px,(100dvh - 640px) * .12 + 4px,22px)}
|
||||
#vStart .types{margin-top:auto;padding-top:16px}
|
||||
#vStart .startbox{margin-top:auto}
|
||||
#vStart .types + .startbox{padding-top:clamp(12px,(100dvh - 640px) * .25 + 12px,40px)}
|
||||
@media (min-height:680px){
|
||||
.hero{padding-top:66px;padding-bottom:22px}
|
||||
.hero h1{padding-right:132px;font-size:24px}
|
||||
.hero .pic{top:70px;width:116px;height:116px;border-radius:28px}
|
||||
.hero .meta{margin-top:16px}
|
||||
.lead{padding:14px 16px;font-size:14px;line-height:1.8}
|
||||
.tcard img{width:56px;height:56px}
|
||||
.tcard b{font-size:12.5px}
|
||||
.tgrid{gap:12px 6px}
|
||||
}
|
||||
@media (min-height:760px){
|
||||
.hero{padding-top:74px;padding-bottom:28px}
|
||||
.hero h1{padding-right:146px;font-size:26px}
|
||||
.hero h1 small{font-size:15px;margin-bottom:2px}
|
||||
.hero .pic{top:76px;width:130px;height:130px}
|
||||
.hero .meta{margin-top:20px}
|
||||
.hero .meta span{font-size:13.5px}
|
||||
.types .sh2 b{font-size:17px}
|
||||
.tcard img{width:64px;height:64px}
|
||||
.tcard b{font-size:13px}
|
||||
.tgrid{gap:16px 6px}
|
||||
.startbox .note{margin-top:10px;font-size:12.5px}
|
||||
}
|
||||
@media (min-height:790px){
|
||||
.hero{padding-top:80px;padding-bottom:32px}
|
||||
.hero h1{padding-right:160px;font-size:28px}
|
||||
.hero .pic{top:80px;width:146px;height:146px;border-radius:32px}
|
||||
.lead{padding:16px 18px;font-size:14.5px}
|
||||
.tcard{gap:6px}
|
||||
.tcard img{width:70px;height:70px}
|
||||
.tcard small{display:block;font-size:11.5px;color:var(--sub);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
}
|
||||
@media (max-height:700px){.s-art{width:min(48vw,180px)}#sTitle{font-size:23px}.s-line{font-size:14.5px}.s-chips span{height:29px}}
|
||||
|
||||
/* ---------- ② 答题 ---------- */
|
||||
#vQuiz{padding-top:4px}
|
||||
@@ -288,30 +253,18 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
<span class="t">孕妈广场 · 测一测</span>
|
||||
</header>
|
||||
|
||||
<!-- ① 开始 -->
|
||||
<!-- ① 开始(11-03 参考图版:居中、一屏放下) -->
|
||||
<main class="view" id="vStart">
|
||||
<section class="hero">
|
||||
<i class="o1"></i><i class="o2"></i>
|
||||
<span class="eb" id="sEb"></span>
|
||||
<h1 id="sTitle"></h1>
|
||||
<div class="meta">
|
||||
<span><svg class="ic"><use href="#i-list"/></svg><b class="num" id="sN"></b>题 · 约<b class="num" id="sMin"></b>分钟</span>
|
||||
<span id="sKind"></span>
|
||||
<span id="sCnt"><svg class="ic"><use href="#i-user"/></svg><b class="num" id="sCntN"></b></span>
|
||||
</div>
|
||||
<img class="pic" id="sPic" src="" alt="">
|
||||
</section>
|
||||
<div class="wrap">
|
||||
<p class="lead fade" id="sLead"></p>
|
||||
<span class="s-pill" id="sEb"></span>
|
||||
<div class="s-art fade"><i class="g1"></i><i class="g2"></i><i class="dt d1"></i><i class="dt d2"></i><i class="dt d3"></i><img id="sPic" src="" alt=""><span class="hb"><svg class="ic" id="sHb"><use href="#i-heart"/></svg></span></div>
|
||||
<h1 id="sTitle"></h1>
|
||||
<p class="s-meta"><b class="num" id="sN"></b> 道题 · <b class="num" id="sMin"></b> 分钟</p>
|
||||
<p class="s-line" id="sLine"></p>
|
||||
<div class="s-chips" id="sChips"></div>
|
||||
<div class="s-go">
|
||||
<button class="btn pri" id="startBtn">开始测试</button>
|
||||
<div class="lastr" id="sLast" hidden></div>
|
||||
<section class="types fade">
|
||||
<div class="sh2"><i id="sTyEn"></i><b id="sTyT"></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"/></svg></button>
|
||||
<p class="note" id="sNote"></p>
|
||||
</div>
|
||||
<p class="s-note" id="sNote"></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -367,8 +320,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
</div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script src="meta.js?v=26110266"></script>
|
||||
<script src="tests.js?v=26110266"></script>
|
||||
<script src="meta.js?v=26110267"></script>
|
||||
<script src="tests.js?v=26110267"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -434,28 +387,30 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
|
||||
sc.addEventListener('scroll', function () { $('#bar').classList.toggle('sh', sc.scrollTop > 4); }, { passive: true });
|
||||
|
||||
/* ================= ① 开始 ================= */
|
||||
function titleHTML() {
|
||||
/* 「…测试 / 考卷 / 大挑战」:前面的主体加荧光笔,后缀不加 */
|
||||
var s = t.title, m = s.match(/^(.*?)(小测试|大测试|测试|考卷|小考卷|大挑战)$/);
|
||||
if (m && m[1].length > 2) return '<mark>' + esc(m[1]) + '</mark>' + esc(m[2]);
|
||||
return '<mark>' + esc(s) + '</mark>';
|
||||
}
|
||||
/* 开始页一句话(11-03,参考图那种一行说清「测出什么」;原 intro 段落不再上开始页) */
|
||||
var LINE = { t01: '测测你的孕期常识能打几分', t02: '看看准爸爸到底有多靠谱', t03: '新手妈妈的带娃常识小考', t04: '冲奶换尿布,新手爸爸会几样', t05: '看看待产包准备齐了没有',
|
||||
t06: '新生儿护理,你知道多少', t07: '月子里的那些事,你答对几个', t08: '宝宝辅食先吃啥、怎么加', t09: '宝宝睡觉的门道,你懂几分', t10: '哺乳期吃喝,避开这些误区',
|
||||
t11: '测出你是哪一种带娃风格', t12: '给家里的带娃队友打个分', t13: '看看你多快进入爸妈角色', t14: '扫一扫最近的心情小天气', t15: '测出你最信哪一种育儿方式',
|
||||
t16: '你们俩带娃配合有多默契', t17: '轻松看看最近的孕期心情', t18: '你是精细讲究派,还是随意派', t19: '两个娃的日常,你是哪一款', t20: '你是哪一种带娃的长辈',
|
||||
t21: '准爸爸闯关,看你能过几关', t22: '那些带娃老经验,哪些是误区', t23: '当了妈妈,你给自己留了多少', t24: '猜猜宝宝会是什么小性格', t25: '测测你的孕期幸福感有多少',
|
||||
t26: '测出你的母婴选品偏好', t27: '看看你是哪一种采购思路', t28: '囤货党,还是够用就好', t29: '测测你是哪类育儿采购玩家', t30: '看看你的购物清单逻辑' };
|
||||
var KIND = { quiz: '知识小测', psy: '心理向测试', game: '闯关小游戏', shop: '消费类型测试' };
|
||||
var FIRE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="currentColor"/></svg>';
|
||||
function renderStart() {
|
||||
$('#sEb').textContent = G.name + ' · ' + G.en;
|
||||
$('#sTitle').innerHTML = '<small>测一测</small>' + titleHTML();
|
||||
$('#sEb').innerHTML = esc(G.name) + '<i></i>' + esc(window.GC_SHORT && GC_SHORT[t.id] || t.title);
|
||||
$('#sTitle').textContent = t.title;
|
||||
$('#sN').textContent = N; $('#sMin').textContent = t.minutes || 3;
|
||||
$('#sKind').innerHTML = '<svg class="ic"><use href="#' + (isQuiz ? 'i-bulb' : 'i-heart') + '"/></svg>' + (isQuiz ? '答完当场看解析' : '没有对错之分');
|
||||
$('#sLine').textContent = LINE[t.id] || (t.sub || '').split('·').pop().trim();
|
||||
$('#sPic').src = IMG(0); $('#sPic').alt = t.title;
|
||||
$('#sLead').textContent = t.intro;
|
||||
if (window.gcTestedText) $('#sCntN').textContent = gcTestedText(t.id); else $('#sCnt').hidden = true;
|
||||
$('#sTyEn').textContent = R.length + (isType ? ' TYPES' : ' LEVELS');
|
||||
$('#sTyT').textContent = isType ? R.length + ' 种结果,你是哪一种?' : isQuiz ? R.length + ' 个称号,你能拿到哪个?' : R.length + ' 种状态,看看你在哪一档';
|
||||
$('#tgrid').innerHTML = R.map(function (r) { return '<div class="tcard"><img src="' + rImg(r) + '" alt="" loading="lazy"><span><b>' + esc(r.title) + '</b><small>' + esc(r.tag) + '</small></span></div>'; }).join('');
|
||||
$('#sNote').textContent = isQuiz ? '每题选完马上告诉你对不对' : '凭第一感觉选,选完自动下一题';
|
||||
$('#sHb').innerHTML = '<use href="#' + (isQuiz ? 'i-bulb' : 'i-heart') + '"/>';
|
||||
var c = [(isType ? R.length + ' 种结果' : isQuiz ? R.length + ' 个称号' : R.length + ' 档状态'), KIND[t.group] || '趣味测试'];
|
||||
$('#sChips').innerHTML = c.map(function (x) { return '<span>' + esc(x) + '</span>'; }).join('') +
|
||||
(window.gcTestedText ? '<span class="hot">' + FIRE + gcTestedText(t.id) + '</span>' : '');
|
||||
$('#sNote').textContent = isQuiz ? '每题选完 · 马上看解析' : '凭第一感觉选 · 没有对错之分';
|
||||
var last = store()[t.id], lr = last && R.filter(function (r) { return r.title === last.title; })[0], el = $('#sLast');
|
||||
if (lr) { el.hidden = false; el.innerHTML = '<img src="' + rImg(lr) + '" alt=""><span>上次结果:<b>' + esc(lr.title) + '</b>' + (last.score ? ' · <span class="num">' + esc(last.score) + '</span>' : '') + '</span>'; }
|
||||
else el.hidden = true;
|
||||
$('#startBtn').innerHTML = (lr ? '再测一次' : '开始测试') + '<svg class="ic"><use href="#i-arrow"/></svg>';
|
||||
$('#startBtn').textContent = lr ? '再测一次' : '开始测试';
|
||||
}
|
||||
|
||||
/* ================= ② 答题 ================= */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -682,10 +682,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
<div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script src="topics.js?v=26110266"></script>
|
||||
<script src="data.js?v=26110266"></script>
|
||||
<script src="feed.js?v=26110266"></script>
|
||||
<script src="ceshi/meta.js?v=26110266"></script>
|
||||
<script src="topics.js?v=26110267"></script>
|
||||
<script src="data.js?v=26110267"></script>
|
||||
<script src="feed.js?v=26110267"></script>
|
||||
<script src="ceshi/meta.js?v=26110267"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -751,7 +751,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
var CMD = null, CMERR = false;
|
||||
/* 头像编码:数字 = av/NNNN.webp(旧代码头像);'av:c012' = av/c012.webp(卡通/可爱卡通);'/…' = 站内绝对路径(内置头像库 /_bridge/avatars/);其余 = assets/img/mom/xxx.jpg */
|
||||
var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; };
|
||||
fetch('cm.json?v=26110266').then(function (r) { return r.json(); }).then(function (j) {
|
||||
fetch('cm.json?v=26110267').then(function (r) { return r.json(); }).then(function (j) {
|
||||
CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
|
||||
}).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
|
||||
function commentsOf(n) {
|
||||
@@ -965,10 +965,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
/* 11-03 用户发参考图:「测试列表按图里的排版」→ 分组标题(色条 + 图标 + 名称 + 一句话)+ 宫格卡:
|
||||
彩色渐变封面(两团柔和色块)上写大字短名 + 小字「谁来测 · N 题」+「开始测试」胶囊,封面下一行完整标题 + 人数;
|
||||
常识小测 / 趣味闯关 3 列,趣味心理 / 好物配置 2 列(大卡)。原热度榜不再单列,组内仍按人数从高到低排。 */
|
||||
var CS_SHORT = { t01: '孕期常识', t02: '准爸爸考卷', t03: '带娃常识', t04: '新手爸爸考', t05: '待产包自查', t06: '新生儿护理', t07: '月子常识', t08: '辅食常识', t09: '宝宝睡眠', t10: '哺乳饮食',
|
||||
t11: '你的带娃风格', t12: '给队友打个分', t13: '当爸妈适应度', t14: '产后心情自查', t15: '你信哪种育儿', t16: '夫妻带娃默契', t17: '孕期焦虑自查', t18: '讲究还是随意', t19: '二胎状态测试', t20: '你是哪种长辈',
|
||||
t21: '准爸爸闯关', t22: '育儿误区', t23: '自我关爱', t24: '宝宝小性格', t25: '孕期幸福感',
|
||||
t26: '你的选品偏好', t27: '母婴采购思路', t28: '囤货找方向', t29: '育儿采购玩家', t30: '购物清单逻辑' };
|
||||
var CS_SHORT = window.GC_SHORT || {}; /* 短名表在 ceshi/meta.js(测试开始页顶部小胶囊也用) */
|
||||
var CS_SEC = { quiz: ['📝', '查漏补缺,温和掌握孕产育儿知识', 3], psy: ['💛', '看见情绪,也看见关系', 2], game: ['🎯', '挑战一下,看能拿什么称号', 3], shop: ['🛍️', '看看你是哪一类育儿采购玩家', 2] };
|
||||
var CS_PAL = ['pa', 'pb', 'pc', 'pd', 'pe', 'pf']; /* 6 套封面配色轮流:蜜桃 / 薰衣草 / 奶油蓝 / 浅紫 / 薄荷 / 杏橙 */
|
||||
var CS_BLOB = '<svg class="cbl" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path class="b1" d="M58 0C66 14 80 18 100 14V0z"/><path class="b2" d="M0 72C18 60 30 78 46 86S80 84 100 70V100H0z"/><path class="b3" d="M0 0H28C20 12 8 16 0 30z"/></svg>';
|
||||
|
||||
@@ -105,7 +105,7 @@ main{padding:6px 16px 0}
|
||||
</div>
|
||||
<div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div>
|
||||
|
||||
<script src="../topics.js?v=26110266"></script>
|
||||
<script src="../topics.js?v=26110267"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
16
index.html
16
index.html
@@ -7,9 +7,10 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26110266 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26110267 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<link rel="stylesheet" href="night.css">
|
||||
<link rel="stylesheet" href="js/hero-cd.css?v=26110267">
|
||||
<!-- 夜晚模式:首屏绘制前就按上次的选择加 class,避免先白后黑闪一下(开关在首页右上角 #nightBtn,逻辑见 app.js) -->
|
||||
<script>try{if(localStorage.getItem('mmbox.night.v1')==='1'){document.documentElement.classList.add('night');document.querySelector('meta[name=theme-color]').content='#2A2340'}}catch(e){}</script>
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
@@ -124,6 +125,8 @@
|
||||
离「宝宝来信」卡顶 234 留 16px(和旧版一样)。宽度不超过 x≈197(旧玻璃卡的右缘),不伸进宝宝插画。
|
||||
JS 只认 id:heroLeft / heroWeek / heroWeekU / heroPlus / heroBar / heroFruit / heroSize / heroWho / heroDays。 -->
|
||||
<div class="hero-pane">
|
||||
<!-- 11-03 倒计时版:翻页数字牌(天)+ 时分秒走字,由 js/hero-cd.js 填;没开倒计时(未填预产期 / 已出生 / 已到预产期)时整块隐藏 -->
|
||||
<div class="hi-cd" id="heroCd" aria-live="off"></div>
|
||||
<span class="hi-due" id="heroDue"><span id="heroDueT">距离见面还有 <b id="heroLeft">--</b> 天</span></span>
|
||||
<div class="hi-week"><b id="heroWeek">--</b><span class="hi-unit"><em id="heroWeekU">周</em><span id="heroPlus"></span></span></div>
|
||||
<div class="hi-prog">
|
||||
@@ -2556,16 +2559,17 @@
|
||||
<script src="/_bridge/avatar-picker.js?v=26101105"></script>
|
||||
<script src="/_bridge/hand-icons.js?v=26101202"></script>
|
||||
<script src="js/zodiac-art.js"></script>
|
||||
<script src="guangchang/topics.js?v=26110266"></script>
|
||||
<script src="guangchang/topics.js?v=26110267"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/kit.js?v=26110266"></script>
|
||||
<script src="js/hero-cd.js?v=26110267"></script>
|
||||
<script src="js/kit.js?v=26110267"></script>
|
||||
<script>
|
||||
/* 11-02 首页「孕妈广场」效果稿:地址带 ?gcv=1~6 时,把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
|
||||
11-02 用户:「用第一版,放到预览页面上」;后改定彩色卡 → 不带参数也默认用 V6 合并版(广场卡堆 + 其他妈妈也在搜 + 测一测第 4 版彩色卡),不滚动、不显示效果稿角标 */
|
||||
(function () {
|
||||
var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
|
||||
if (!m) window.__gcDefault = 1;
|
||||
var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110266';
|
||||
var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110267';
|
||||
var dir = n === '4' || n === '6' ? 'js/gch/' : 'demo/gch/'; /* 11-03 上正式:定稿 V6(含它套的 V4)并进 js/gch/,其余效果稿仍在 demo/ */
|
||||
l.rel = 'stylesheet'; l.href = dir + 'v' + n + '.css?' + q;
|
||||
s.src = dir + 'v' + n + '.js?' + q;
|
||||
@@ -2574,7 +2578,7 @@
|
||||
/* 11-02 品牌露出(用户定 4 处都要):默认加载,?brand=0 可关掉对比;11-03 已并进 js/gch/ */
|
||||
if (!/[?&]brand=0/.test(location.search)) {
|
||||
var bl = document.createElement('link'), bs = document.createElement('script');
|
||||
bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110266'; bs.src = 'js/gch/brand.js?v=26110266';
|
||||
bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110267'; bs.src = 'js/gch/brand.js?v=26110267';
|
||||
document.head.appendChild(bl); document.body.appendChild(bs);
|
||||
}
|
||||
})();
|
||||
@@ -2585,7 +2589,7 @@
|
||||
<script src="js/hero-fx.js"></script>
|
||||
<!-- 2026-10-05 首页头图:宝宝时不时动一动小手小脚(独立文件,删掉这一行即下线) -->
|
||||
<script src="js/baby-limbs.js?v=26101201"></script>
|
||||
<script src="js/coach.js?v=26110266"></script>
|
||||
<script src="js/coach.js?v=26110267"></script>
|
||||
<script src="js/birth-flow.js?v=26110201"></script>
|
||||
|
||||
<!-- 禁止下拉回弹(2026-10-11 统一规则,与孕期体重同一段):竖向拖动时从手指下往上找还能朝该方向滚的容器,找不到才拦;横滑、双指、可滚列表不受影响 -->
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26110266';
|
||||
var VER = '26110267';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
@@ -1832,6 +1832,9 @@
|
||||
$('#heroSize').textContent = o.size || '';
|
||||
$('#heroWeekU').textContent = o.unit == null ? '周' : o.unit;
|
||||
$('.hero-pane').classList.toggle('is-born', !!o.born);
|
||||
/* 11-03 用户:「首页头图小孩左边做成倒计时的感觉」→ 孕期且有天数时换成翻页数字牌 + 时分秒走字(js/hero-cd.js),其余状态照旧 */
|
||||
window.__mbHeroLeft = o.left > 0 ? o.left : 0;
|
||||
if (window.__mbHeroCd) window.__mbHeroCd(window.__mbHeroLeft);
|
||||
bar.style.width = '0%';
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => { bar.style.width = Math.max(0, Math.min(100, o.pct || 0)) + '%'; }));
|
||||
}
|
||||
@@ -2095,6 +2098,7 @@
|
||||
const sz = babySize(week);
|
||||
setHero({
|
||||
due: left > 0 ? '距离见面还有 <b>' + left + '</b> 天' : '宝宝随时会来见你',
|
||||
left: left,
|
||||
emoji: sz.emoji, hi: window.handIcons && (handIcons.week(week) || {}).id, size: '像' + sz.name.replace(/^一[个颗根只串把粒条棵颗]/, ''), pct: pct
|
||||
});
|
||||
}
|
||||
|
||||
@@ -231,5 +231,5 @@
|
||||
}
|
||||
/* feed.js 首页默认不加载(index.html 只引了 topics.js),这里按需拉一次 */
|
||||
if (window.GC_FEED) init();
|
||||
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110266'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
|
||||
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110267'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
|
||||
})();
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
(function () {
|
||||
var sec = document.getElementById('gcHome');
|
||||
if (!sec) return;
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110266';
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110267';
|
||||
document.head.appendChild(l);
|
||||
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110266';
|
||||
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110267';
|
||||
s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
|
||||
document.body.appendChild(s);
|
||||
|
||||
|
||||
36
js/hero-cd.css
Normal file
36
js/hero-cd.css
Normal file
@@ -0,0 +1,36 @@
|
||||
/* 首页头图倒计时(11-03,见 js/hero-cd.js)。只在 .hero-pane.cd 时生效;关掉(未填预产期 / 已出生)就是原来的样子。
|
||||
竖向:小标 18 → 数字牌 46 → 时分秒 20 → 孕周一行 20 → 进度条 16,加间距后和旧版总高一样,下面「我的孕期工具」卡不会被顶下去。 */
|
||||
.hi-cd{display:none}
|
||||
.hero-pane.cd{margin-top:2px}
|
||||
.hero-pane.cd .hi-due{display:none}
|
||||
.hero-pane.cd .hi-cd{display:flex;flex-direction:column;align-items:flex-start}
|
||||
.cd-lb{display:inline-flex;align-items:center;gap:5px;height:18px;font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.5px;white-space:nowrap}
|
||||
.cd-lb svg{width:12px;height:12px;color:#FFD9C7;animation:hiBeat 1.6s ease-in-out infinite}
|
||||
.cd-row{display:flex;align-items:flex-end;gap:6px;margin-top:5px}
|
||||
.cd-d{display:flex;gap:4px}
|
||||
/* 一位一块牌:上半亮、下半略暗,中间一道翻页缝 + 两侧小铆点,像机场翻牌钟 */
|
||||
.cd-d i{position:relative;display:block;width:34px;height:46px;border-radius:9px;font-style:normal;
|
||||
background:linear-gradient(180deg,rgba(255,255,255,.34) 0 50%,rgba(255,255,255,.22) 50% 100%);
|
||||
border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 14px -6px rgba(120,30,10,.45),inset 0 1px 0 rgba(255,255,255,.4);
|
||||
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;perspective:200px}
|
||||
.cd-d i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(150,60,35,.28);z-index:2}
|
||||
.cd-d i::after{content:"";position:absolute;left:-2px;right:-2px;top:calc(50% - 2px);height:4px;z-index:2;
|
||||
background:radial-gradient(circle at 2px 2px,rgba(150,60,35,.35) 1.5px,transparent 2px) left/4px 4px no-repeat,radial-gradient(circle at 2px 2px,rgba(150,60,35,.35) 1.5px,transparent 2px) right/4px 4px no-repeat}
|
||||
.cd-d span{display:block;font-size:34px;font-weight:900;line-height:46px;text-align:center;color:#fff;font-variant-numeric:tabular-nums;
|
||||
text-shadow:0 2px 0 rgba(140,50,28,.3),0 4px 10px rgba(120,30,10,.22)}
|
||||
.cd-d i.flip span{animation:cdFlip .55s cubic-bezier(.3,.7,.4,1)}
|
||||
@keyframes cdFlip{0%{transform:rotateX(-90deg);opacity:.2}60%{transform:rotateX(12deg);opacity:1}100%{transform:none}}
|
||||
.cd-row em{margin-bottom:3px;font-style:normal;font-size:17px;font-weight:800;color:#FFE6BF}
|
||||
/* 时分秒:小毛玻璃格 + 汉字单位 */
|
||||
.cd-tk{display:flex;align-items:center;gap:2px;margin-top:6px;height:20px;white-space:nowrap}
|
||||
.cd-tk b{min-width:22px;height:20px;padding:0 3px;border-radius:5px;background:rgba(110,35,18,.24);color:#fff;font-size:12.5px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:none}
|
||||
.cd-tk i{margin:0 3px 0 1px;font-style:normal;font-size:11px;font-weight:700;color:#FFE6BF}
|
||||
/* 孕周退成一行小字「孕 26 周 +6天」,不再和倒计时抢主角 */
|
||||
.hero-pane.cd .hi-week{height:20px;margin-top:5px;align-items:center}
|
||||
.hero-pane.cd .hi-week::before{content:"孕";margin-right:3px;font-size:13px;font-weight:800;color:#FFE6BF}
|
||||
.hero-pane.cd .hi-week b{font-size:17px;line-height:20px;letter-spacing:0;text-shadow:0 1px 3px rgba(120,30,10,.28)}
|
||||
.hero-pane.cd .hi-unit{flex-direction:row;align-items:center;margin:0 0 0 3px}
|
||||
.hero-pane.cd .hi-unit em{font-size:13px}
|
||||
.hero-pane.cd .hi-unit span{margin:0 0 0 5px;padding:0 6px;font-size:10.5px;line-height:16px}
|
||||
.hero-pane.cd .hi-prog{margin-top:5px}
|
||||
@media (prefers-reduced-motion:reduce){.cd-d i.flip span,.cd-lb svg{animation:none}}
|
||||
41
js/hero-cd.js
Normal file
41
js/hero-cd.js
Normal file
@@ -0,0 +1,41 @@
|
||||
/* 首页头图倒计时(11-03 用户:「头图小孩左边改成倒计时那种感觉」)
|
||||
· 天数做成翻页数字牌(每位一块毛玻璃牌,中间一道翻页缝),变化时逐位翻一下;
|
||||
· 下面一行「时 分 秒」每秒走字 = 到今天 24:00 还剩多少 —— 和天数合起来就是「到预产期那天结束」,跟别处的「还有 N 天」对得上;
|
||||
· 数据只认 app.js setHero 传进来的天数(window.__mbHeroLeft),0 = 不开倒计时(未填预产期 / 已出生 / 已到预产期),整块隐藏、回到旧样式。 */
|
||||
(function () {
|
||||
var box = document.getElementById('heroCd'), pane = box && box.closest('.hero-pane');
|
||||
if (!box) return;
|
||||
var cur = '', timer = 0;
|
||||
var p2 = function (n) { return (n < 10 ? '0' : '') + n; };
|
||||
box.innerHTML =
|
||||
'<span class="cd-lb"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-8-5-8-11a4.5 4.5 0 018-2.8A4.5 4.5 0 0120 10c0 6-8 11-8 11z" fill="currentColor"/></svg>距离和宝宝见面还有</span>' +
|
||||
'<div class="cd-row"><span class="cd-d" id="heroCdD"></span><em>天</em></div>' +
|
||||
'<div class="cd-tk"><b id="heroCdH">--</b><i>时</i><b id="heroCdM">--</b><i>分</i><b id="heroCdS">--</b><i>秒</i></div>';
|
||||
var D = document.getElementById('heroCdD'), H = document.getElementById('heroCdH'), M = document.getElementById('heroCdM'), S = document.getElementById('heroCdS');
|
||||
function tick() {
|
||||
var n = new Date(), e = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1), r = Math.max(0, Math.floor((e - n) / 1000));
|
||||
H.textContent = p2(Math.floor(r / 3600)); M.textContent = p2(Math.floor(r / 60) % 60); S.textContent = p2(r % 60);
|
||||
}
|
||||
function setDays(v) {
|
||||
var s = String(v), old = cur; cur = s;
|
||||
if (D.children.length !== s.length) D.innerHTML = s.split('').map(function () { return '<i><span></span></i>'; }).join('');
|
||||
s.split('').forEach(function (ch, k) {
|
||||
var c = D.children[k], sp = c.firstChild;
|
||||
if (sp.textContent === ch) return;
|
||||
sp.textContent = ch;
|
||||
if (old) { c.classList.remove('flip'); void c.offsetWidth; c.classList.add('flip'); }
|
||||
});
|
||||
}
|
||||
window.__mbHeroCd = function (left) {
|
||||
left = +left || 0;
|
||||
var on = left > 0;
|
||||
pane && pane.classList.toggle('cd', on);
|
||||
if (!on) { clearInterval(timer); timer = 0; cur = ''; return; }
|
||||
setDays(left);
|
||||
tick();
|
||||
if (!timer) timer = setInterval(tick, 1000);
|
||||
};
|
||||
/* 停在后台时不走字,回前台立刻补一次 */
|
||||
document.addEventListener('visibilitychange', function () { if (!document.hidden && timer) tick(); });
|
||||
if (window.__mbHeroLeft != null) window.__mbHeroCd(window.__mbHeroLeft);
|
||||
})();
|
||||
18
js/kit.js
18
js/kit.js
@@ -9,7 +9,7 @@
|
||||
if (/[?&]kit=0(?:&|$)/.test(location.search)) return;
|
||||
var box = document.getElementById('kit'), sec = document.getElementById('kitHome');
|
||||
if (!box || !sec) return;
|
||||
var V = '26110266';
|
||||
var V = '26110267';
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/kit.css?v=' + V; document.head.appendChild(l);
|
||||
document.documentElement.classList.add('has-kit');
|
||||
|
||||
@@ -21,6 +21,8 @@
|
||||
var s = q.toString(); return (s ? '?' + s : '') + location.hash;
|
||||
}
|
||||
function wan(n) { return n >= 1e6 ? Math.round(n / 1e4) + '万' : n >= 1e4 ? (Math.round(n / 1e3) / 10) + '万' : String(Math.round(n)); } /* 百万以上取整,卡片窄放得下 */
|
||||
/* 入口专用:万为单位、必带一位小数,碰上整数(如 68.0)挪 0.3,避免看着像凑的整数 */
|
||||
function wanX(n) { var v = Math.round(n / 1e3) / 10; if (v % 1 === 0) v = +(v + .3).toFixed(1); return v.toFixed(1) + '万'; }
|
||||
function total() { var p = window.__mbPulse; return (p && p.total && +p.total.value) || 1510000; }
|
||||
var FIRE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.6 2.5c.4 3-1.6 4.6-3 6.2C8 10.4 7 12 7 14.3A5 5 0 0012 19.5a5 5 0 005-5.2c0-2-1-3.6-1.9-4.6-.2 1.3-.9 2.2-1.9 2.6.6-3.4-.2-7-.6-9.8z" fill="currentColor"/></svg>';
|
||||
|
||||
@@ -38,11 +40,13 @@
|
||||
'<div class="kit-lh"><b>大家都在用</b><span class="kit-wk"></span></div><div class="ms-list kit-list"></div>';
|
||||
sec.classList.remove('hide');
|
||||
function setCnt(k, t) { var e = box.querySelector('.e-' + k + ' em'); if (e) e.firstChild.nodeValue = t; }
|
||||
function setNum(k, n) { var e = box.querySelector('.e-' + k + ' .kit-n i'); if (e && n) e.textContent = wan(n); }
|
||||
/* 人数口径:测过 = 30 个测试 gcTested 之和(同广场「累计 N 万人次参与」);看过 = 「此刻」总人数 × 0.62;算过 = 4 个计算器 heat 之和 × 总人数(同 topic/jisuan) */
|
||||
function setNum(k, n) { var e = box.querySelector('.e-' + k + ' .kit-n i'); if (e && n) e.textContent = wanX(n); }
|
||||
/* 人数口径(11-03 改):测过 = 30 个测试 gcTested 之和 × .456;看过 = 「此刻」总人数 × .574;算过 = 4 个计算器 heat 之和 × 总人数(同 topic/jisuan) */
|
||||
function nums() {
|
||||
if (window.GC_TESTS_META && window.gcTested) { setNum('qz', window.GC_TESTS_META.reduce(function (a, x) { return a + window.gcTested(x.id); }, 0)); setCnt('qz', window.GC_TESTS_META.length + ' 个测试'); }
|
||||
setNum('qa', total() * .62);
|
||||
/* 11-03 用户:「三个入口的人数太大,几十万就行,要有零有整」→ 系数压到几十万(测过 ≈68 万 / 看过 ≈87 万 / 算过 ≈50 万),且一律带一位小数(wanX)。
|
||||
仍不小于下面列表里单条的最大值(单个测试 ≤12 万、单条百问 ≤64 万、单个计算器 ≤18 万),口径不打架。模拟数,12-31 复核 */
|
||||
if (window.GC_TESTS_META && window.gcTested) { setNum('qz', window.GC_TESTS_META.reduce(function (a, x) { return a + window.gcTested(x.id); }, 0) * .456); setCnt('qz', window.GC_TESTS_META.length + ' 个测试'); }
|
||||
setNum('qa', total() * .574);
|
||||
setNum('js', total() * CALC.reduce(function (a, x) { return a + x.heat; }, 0));
|
||||
if (QA && QA.length) setCnt('qa', QA.length + ' 个问题');
|
||||
}
|
||||
@@ -63,7 +67,7 @@
|
||||
{ q: '生娃到底要花多少钱?一键算清', h: 'topic/huafei/', heat: .118 },
|
||||
{ q: '孕期该长多少斤?按身高体重算', h: '/yunqi-tizhong/', heat: .083 },
|
||||
{ q: '胎儿现在多重?填 B 超数估一估', h: '/taier-guzhong/', heat: .071, gate: 15 },
|
||||
{ q: '产假能休多少天?哪天回去上班', h: 'topic/zhichang/', heat: .062 }
|
||||
{ q: '产假能休多少天?哪天回去上班', h: 'topic/zhichang/', heat: .062, cm: 1 } /* cm:带 calc=1,进去第一屏就是计算器(11-03) */
|
||||
];
|
||||
var QA = null, day = Math.floor((Date.now() + 288e5) / 864e5);
|
||||
function band() { var p = window.__mbPreg || {}; return p.postpartum || !p.week ? 0 : (window.__mbQaBand ? window.__mbQaBand(p.week) : 0); }
|
||||
@@ -83,7 +87,7 @@
|
||||
}
|
||||
var cl = CALC.filter(function (x) { return !(x.gate && wk && wk < x.gate); });
|
||||
if (b >= 5) cl = [cl[cl.length - 1]].concat(cl.slice(0, -1)); /* 孕 29 周起产假排前 */
|
||||
cl.slice(0, 2).forEach(function (x) { out.js.push({ q: x.q, href: x.h + location.search + location.hash, n: total() * x.heat, u: '人算过' }); });
|
||||
cl.slice(0, 2).forEach(function (x) { out.js.push({ q: x.q, href: x.h + (x.cm ? (location.search ? location.search + '&' : '?') + 'calc=1' : location.search) + location.hash, n: total() * x.heat, u: '人算过' }); });
|
||||
var r = [];
|
||||
for (var k = 0; k < 2; k++) ['qz', 'qa', 'js'].forEach(function (c) { if (out[c][k]) r.push(Object.assign({ c: c }, out[c][k])); });
|
||||
return { r: r, wk: wk };
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }
|
||||
|
||||
function related(box) {
|
||||
getJSON('../_shared/idx.json?v=26110266').then(function (idx) {
|
||||
getJSON('../_shared/idx.json?v=26110267').then(function (idx) {
|
||||
var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; });
|
||||
var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0;
|
||||
var rest = idx.filter(function (x) { return x[0] !== SLUG; });
|
||||
@@ -175,7 +175,7 @@
|
||||
}
|
||||
fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
|
||||
.then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {});
|
||||
getJSON('../_shared/cm/' + SLUG + '.json?v=26110266').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
|
||||
getJSON('../_shared/cm/' + SLUG + '.json?v=26110267').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
|
||||
}
|
||||
|
||||
function extras(el) {
|
||||
|
||||
@@ -64,7 +64,7 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
(function () {
|
||||
'use strict';
|
||||
var $ = function (s) { return document.querySelector(s); };
|
||||
function href(u) { return u + (location.search || '') + (location.hash || ''); }
|
||||
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;
|
||||
@@ -77,13 +77,13 @@ button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
|
||||
};
|
||||
var L = [
|
||||
{ n: '生娃花费计算器', tag: '最多人用', d: '产检、分娩、月子、宝宝第一年,一共要花多少钱', u: '../huafei/', heat: .118, c: '#F07A2E', bg: '#FFF0E4', ic: SV.money },
|
||||
{ n: '产假天数计算器', d: '能休几天、哪天开始休、哪天回去上班', u: '../zhichang/', heat: .062, c: '#5B6CFF', bg: '#EEF0FF', ic: SV.cal },
|
||||
{ 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)) + '" style="--c:' + x.c + ';--bg:' + x.bg + '">' +
|
||||
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>';
|
||||
|
||||
@@ -184,6 +184,21 @@ details.fold .bd p+p{margin-top:6px}
|
||||
.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{opacity:1;transform:none;transition:none}.track i{transition:none}}
|
||||
/* 11-03 用户:「产假计算那个,点进来第一屏就要能算自己有多少产假,其他内容精简」
|
||||
→ 从「孕期计算器」入口(百宝箱 / topic/jisuan,带 calc=1)进来是计算器模式:顶部换成一句话标题,计算器提到第一屏、结果放最上面,
|
||||
「记住这 3 点」留着;三阶段时间轴、被劝退怎么办收进一个按钮「看完整的职场维权指南」,点了才展开。从「其他孕妈也在搜」进来仍是原文章页。 */
|
||||
.cm-hd,.cm-more{display:none}
|
||||
html.cm .hero,html.cm .me,html.cm #s2 .sh,html.cm #s2 .lead{display:none}
|
||||
html.cm:not(.cm-all) #s1,html.cm:not(.cm-all) #s3{display:none}
|
||||
html.cm .cm-hd{display:block;margin-top:-48px;padding:60px 20px 4px;background:linear-gradient(180deg,var(--cbg),#fff)}
|
||||
.cm-hd p{font-size:12.5px;font-weight:700;color:var(--c);letter-spacing:1px}
|
||||
.cm-hd h1{margin-top:4px;font-size:25px;font-weight:900;line-height:1.3;color:var(--h)}
|
||||
.cm-hd span{display:block;margin-top:4px;font-size:14px;color:var(--m)}
|
||||
html.cm #s2{margin-top:6px}
|
||||
html.cm .calc{display:flex;flex-direction:column;margin-top:8px;box-shadow:0 10px 30px -18px rgba(91,108,255,.5)}
|
||||
html.cm .calc .res{order:-1;margin:0 0 16px}
|
||||
html.cm .key{margin-top:26px}
|
||||
html.cm:not(.cm-all) .cm-more{display:flex;align-items:center;justify-content:center;gap:4px;margin:22px 20px 0;height:46px;border-radius:99px;background:var(--cbg);color:var(--c);font-size:14.5px;font-weight:700;width:calc(100% - 40px)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -207,6 +222,9 @@ details.fold .bd p+p{margin-top:6px}
|
||||
<span class="t">孕期专题</span>
|
||||
</header>
|
||||
|
||||
<!-- 计算器模式顶部(calc=1 时显示,见样式说明) -->
|
||||
<section class="cm-hd"><p>孕期计算器</p><h1>产假天数计算器</h1><span>填好预产期,算出能休几天、哪天回去上班</span></section>
|
||||
|
||||
<section class="hero">
|
||||
<i class="blob b1"></i><i class="blob b2"></i>
|
||||
<p class="eyebrow">孕期专题 · 职场篇</p>
|
||||
@@ -337,6 +355,8 @@ details.fold .bd p+p{margin-top:6px}
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<button type="button" class="cm-more" id="cmMore">看完整的职场维权指南 ›</button>
|
||||
|
||||
<div id="tools"></div>
|
||||
|
||||
<details class="fold src">
|
||||
@@ -360,6 +380,16 @@ details.fold .bd p+p{margin-top:6px}
|
||||
var $ = function (s) { return document.querySelector(s); };
|
||||
function hp(n) { var h = (location.hash.slice(1) || '') + '&' + (location.search.slice(1) || ''); var m = h.match(new RegExp('(?:^|&)' + n + '=([^&]*)')); return m ? decodeURIComponent(m[1]) : ''; }
|
||||
var openid = hp('openid');
|
||||
/* 计算器模式:计算器挪到最前(DOM 上紧跟顶部标题),「记住这 3 点」跟在后面 */
|
||||
if (hp('calc')) {
|
||||
document.documentElement.classList.add('cm');
|
||||
document.title = '产假天数计算器';
|
||||
document.querySelector('#bar .t').textContent = '孕期计算器';
|
||||
var hd = document.querySelector('.cm-hd');
|
||||
hd.parentNode.insertBefore(document.getElementById('s2'), hd.nextSibling);
|
||||
document.getElementById('s2').parentNode.insertBefore(document.querySelector('.key'), document.getElementById('s2').nextSibling);
|
||||
document.getElementById('cmMore').addEventListener('click', function () { document.documentElement.classList.add('cm-all'); setTimeout(function () { go('s1'); }, 30); });
|
||||
}
|
||||
var sc = $('#scroll');
|
||||
|
||||
/* 返回:从首页点进来就 back;直接打开(分享 / 刷新)就回同目录的首页,身份原样带回 */
|
||||
|
||||
Reference in New Issue
Block a user