jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

测一测：新增 5 个好物配置测试（t26-t30，12 种采购玩家类型）；测一测列表按组换排法（考卷编号/心理双列/闯关横滑/好物图文）；测一测分类标签独立样式；v26110220

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-02 11:55:39 +00:00
parent 96ca17261c
commit 4be3d20275
48 changed files with 133 additions and 6904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
guangchang/ceshi/index.html
View File

@@ -5,7 +5,7 @@
<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>
<!-- 孕妈广场 · 测一测（25 个测试共用这一页，?id=t01…t25）
<!-- 孕妈广场 · 测一测（30 个测试共用这一页，?id=t01…t30）
11-02 v1：列表 + 简版答题。
11-02 v2 用户：「每一个测一测页面都要有设计感，要做插图放进去，跟『你是什么样的妈妈』那个一样；『只在本机算，不上传』删掉」
→ 照 topic/ceshi（妈妈类型卡）重做三屏：
@@ -147,6 +147,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.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}
.dl.wide{padding-left:8px;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:10px}
.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 span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dr .p{font-weight:700;color:var(--ink)}
@@ -206,7 +207,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
.rec b{display:block;font-size:15px;color:var(--ink);line-height:1.4}
.rec small{display:block;font-size:12.5px;color:var(--sub);line-height:1.5}
.rec em{flex:none;font-style:normal;height:28px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:700;line-height:28px}
.rec.g-quiz em{background:#FFEEE8;color:#E8643F}.rec.g-psy em{background:#F1EDFF;color:#7C5CFC}.rec.g-game em{background:#E2F6F1;color:#13917C}
.rec.g-quiz em{background:#FFEEE8;color:#E8643F}.rec.g-psy em{background:#F1EDFF;color:#7C5CFC}.rec.g-game em{background:#E2F6F1;color:#13917C}.rec.g-shop em{background:#FFEEF3;color:#E9557F}
.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}
@@ -308,7 +309,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
<section class="blk fade"><div class="sh2"><i>01</i><b id="rReadT"></b></div><div class="read" id="rRead"></div></section>
<section class="blk fade" id="rTipsB"><div class="sh2"><i>02</i><b>给你的小建议</b></div><div class="tips" id="rTips"></div></section>
<section class="blk fade" id="rRvB"><div class="sh2"><i>03</i><b id="rRvT"></b></div><div id="rRv"></div></section>
<section class="blk fade"><div class="sh2"><i>04</i><b>再测一个</b><span>共 25 个测试</span></div><div class="recs" id="rRecs"></div></section>
<section class="blk fade"><div class="sh2"><i>04</i><b>再测一个</b><span>共 30 个测试</span></div><div class="recs" id="rRecs"></div></section>
<button class="btn sec again" id="againBtn"><svg class="ic"><use href="#i-refresh"/></svg>重新测试</button>
</main>
@@ -322,7 +323,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
</div>
<div class="toast" id="toast"></div>
<script src="tests.js?v=26110219"></script>
<script src="tests.js?v=26110220"></script>
<script>
(function () {
'use strict';
@@ -343,7 +344,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
var GROUP = {
quiz: { name: '知识考卷', en: 'QUIZ', c: '#F0714F', bg: '#FFEFE9', c2: '#FFD9CB', rgb: '240,113,79' },
psy: { name: '趣味心理测试', en: 'MIND TEST', c: '#7C5CFC', bg: '#F1EDFF', c2: '#E4DDFD', rgb: '124,92,252' },
game: { name: '趣味闯关', en: 'CHALLENGE', c: '#13A08A', bg: '#E4F6F1', c2: '#C4EBE1', rgb: '19,160,138' }
game: { name: '趣味闯关', en: 'CHALLENGE', c: '#13A08A', bg: '#E4F6F1', c2: '#C4EBE1', rgb: '19,160,138' },
shop: { name: '好物配置', en: 'SHOPPING TYPE', c: '#E9557F', bg: '#FFEEF3', c2: '#FFD3E0', rgb: '233,85,127' }
};
var G = GROUP[t.group] || GROUP.psy, R = t.results, N = t.questions.length, KS = 'ABCD';
var st = document.documentElement.style;
@@ -351,7 +353,7 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
st.setProperty('--c06', 'rgba(' + G.rgb + ',.06)'); st.setProperty('--c10', 'rgba(' + G.rgb + ',.10)'); st.setProperty('--c20', 'rgba(' + G.rgb + ',.22)');
document.title = t.title + ' · 测一测';
var IMG = function (k) { return 'img/' + t.id + '_' + k + '.webp'; }; /* k=0 主图；k=i+1 第 i 个结果 */
var rImg = function (r) { return IMG(R.indexOf(r) + 1); };
var rImg = function (r) { return r.img || IMG(R.indexOf(r) + 1); }; /* 好物配置组按类型共用插画：results[].img */
var optT = function (o) { return typeof o === 'string' ? o : o.t; };
var isQuiz = t.type === 'quiz', isType = t.type === 'type';
@@ -520,12 +522,12 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
$('#rImg').src = rImg(r); $('#rImg').alt = r.title;
$('#rYou').textContent = isType ? '你是' : isQuiz ? '你获得了称号' : '你的结果是';
$('#rName').textContent = r.title;
$('#rLine').textContent = t.title;
$('#rLine').textContent = r.line || t.title;
var tags = [r.tag, isQuiz ? '答对 ' + res.v + ' / ' + N : isType ? '占 ' + res.pc[r.k] + '%' : '指数 ' + res.v];
$('#rTags').innerHTML = tags.map(function (x) { return '<span>' + esc(x) + '</span>'; }).join('');
if (isType) {
var sorted = R.slice().sort(function (a, b) { return (b === r) - (a === r) || res.pc[b.k] - res.pc[a.k]; });
$('#rDims').innerHTML = radarSVG() + '<div class="dl">' + sorted.map(function (x) {
$('#rDims').innerHTML = (R.length <= 6 ? radarSVG() : '') + '<div class="dl' + (R.length > 6 ? ' wide' : '') + '">' + sorted.map(function (x) {
return '<div class="dr' + (x === r ? ' me' : '') + '"><span>' + esc(x.title) + '</span><span class="p num">' + res.pc[x.k] + '%</span><span class="tr"><i data-w="' + res.pc[x.k] + '"></i></span></div>';
}).join('') + '</div>';
} else {