v26110267 预览：首页头图倒计时翻牌；百宝箱入口人数改几十万带小数；30 个测试开始页按参考图精简居中；产假计算器模式（calc=1）计算器置顶
Co-Authored-By: AI 助手
This commit is contained in:
deploy
@@ -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 ? '再测一次' : '开始测试';
|
||||
}
|
||||
|
||||
/* ================= ② 答题 ================= */
|
||||
|
||||
Reference in New Issue
Block a user