console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>测测你的本命定居城市</title>
<style>
/* 莫兰迪浅色系 / 小红书清新简约风 */
:root {
--bg-color: #F5F6F0;
--card-bg: #FFFFFF;
--text-main: #333333;
--text-sub: #777777;
--accent-color: #A3B1A1;
--accent-light: #E8EDE6;
--border-radius: 16px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
display: flex;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
#app {
width: 100%;
max-width: 480px; /* 适配手机端 */
display: flex;
flex-direction: column;
}
/* 通用隐藏类 */
.hidden {
display: none !important;
}
/* 封面样式 */
#cover-page {
text-align: center;
padding-top: 15vh;
}
.cover-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: 1px;
}
.cover-subtitle {
font-size: 15px;
color: var(--text-sub);
margin-bottom: 40px;
}
.cover-img {
width: 120px;
height: 120px;
background-color: var(--accent-light);
border-radius: 50%;
margin: 0 auto 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
/* 按钮通用样式 */
.btn {
background-color: var(--accent-color);
color: #fff;
border: none;
padding: 16px 32px;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
width: 100%;
cursor: pointer;
transition: opacity 0.2s;
}
.btn:active {
opacity: 0.8;
}
.btn:disabled {
background-color: #D3D3D3;
cursor: not-allowed;
}
/* 答题区样式 */
#quiz-page {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 30px 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
margin-top: 5vh;
}
.progress {
font-size: 14px;
color: var(--accent-color);
margin-bottom: 20px;
font-weight: 600;
}
.question-text {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 25px;
}
.options {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 30px;
}
.option {
background-color: var(--bg-color);
border: 1px solid transparent;
padding: 16px;
border-radius: 12px;
font-size: 15px;
color: var(--text-main);
cursor: pointer;
transition: all 0.2s;
}
.option.selected {
background-color: var(--accent-light);
border-color: var(--accent-color);
font-weight: 500;
}
/* 结果页样式 */
#result-page {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 30px 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
margin-top: 5vh;
text-align: center;
}
.result-label {
font-size: 14px;
color: var(--text-sub);
margin-bottom: 10px;
}
.result-city {
font-size: 32px;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 24px;
}
.result-desc {
text-align: left;
font-size: 15px;
line-height: 1.8;
color: var(--text-main);
background-color: var(--bg-color);
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="app">
<!-- 封面页 -->
<div id="cover-page">
<div class="cover-img">🌿</div>
<div class="cover-title">测测你的本命定居城市</div>
<div class="cover-subtitle">你最适合在哪长期定居？</div>
<button class="btn" onclick="startQuiz()">开始测试</button>
</div>
<!-- 答题页 -->
<div id="quiz-page" class="hidden">
<div class="progress" id="progress-text">1/15</div>
<div class="question-text" id="question-text">题目加载中...</div>
<div class="options" id="options-container">
<!-- 选项由JS生成 -->
</div>
<button class="btn" id="next-btn" onclick="nextQuestion()" disabled>下一题</button>
</div>
<!-- 结果页 -->
<div id="result-page" class="hidden">
<div class="result-label">你的本命定居城市是</div>
<div class="result-city" id="result-city">城市名</div>
<div class="result-desc" id="result-desc">解读文案...</div>
<button class="btn" onclick="resetTest()">重新测试</button>
</div>
</div>
<script>
// ================= 数据库配置 =================
// 题库数据 (示例5题，请根据需求补全至15题)
const questions = [
{
q: "1. 你理想中的气候是怎样的？",
options: [
{ text: "四季如春，不冷不热", type: "A" },
{ text: "四季分明，喜欢下雪的冬天", type: "B" },
{ text: "阳光充足，温暖干燥", type: "C" },
{ text: "温暖湿润，喜欢海风", type: "D" }
]
},
{
q: "2. 对于通勤节奏，你更倾向于？",
options: [
{ text: "慢节奏，骑小电驴十分钟到公司", type: "A" },
{ text: "快节奏，地铁通勤一小时也充满斗志", type: "B" },
{ text: "自由职业，不用打卡，在哪都行", type: "C" },
{ text: "开车通勤，道路宽敞不拥堵", type: "D" }
]
},
{
q: "3. 你的美食偏好是？",
options: [
{ text: "无辣不欢，喜欢烟火气", type: "A" },
{ text: "清淡养生，喜欢早茶和老火汤", type: "B" },
{ text: "喜欢各种异国料理和精致Brunch", type: "C" },
{ text: "碳水天堂，面食和牛羊肉狂热爱好者", type: "D" }
]
},
{
q: "4. 周末你更愿意去哪里度过？",
options: [
{ text: "去海边吹风，或者逛公园", type: "A" },
{ text: "去看展、喝咖啡、逛潮流街区", type: "B" },
{ text: "去周边名山大川徒步野营", type: "C" },
{ text: "宅家点外卖，晚上去热闹的夜市", type: "D" }
]
},
{
q: "5. 你对居住环境的包容度如何？",
options: [
{ text: "不能接受潮湿，衣服晾不干会崩溃", type: "A" },
{ text: "喜欢国际化，能接受快节奏和高房价", type: "B" },
{ text: "希望物价低一点，生活安逸，性价比高", type: "C" },
{ text: "气候干燥也没关系，只要暖气给力", type: "D" }
]
}
];
// 城市结果数据 (示例3个，请根据需求补全至50个)
// 评分逻辑：选择选项后，对应type的分数+1，最后选出分数最高的type
const results = {
"A": {
city: "云南 · 大理",
desc: "🍃 宜居亮点：苍山洱海，风花雪月。这里有着让人慢下来的魔力，阳光充足，气候宜人，非常注重生活品质。\n\n✨ 适合性格：适合喜欢安静、热爱自然、追求精神自由、不喜欢内卷的你。\n\n💡 小缺点：紫外线较强，工作机会相对较少，适合自由职业或数字游民。"
},
"B": {
city: "上海 · 魔都",
desc: "☕ 宜居亮点：极致的便利与繁华。这里有逛不完的展、喝不完的咖啡、永远充满活力的街区。\n\n✨ 适合性格：适合热爱社交、渴望成长、追求事业、享受都市精致生活的你。\n\n💡 小缺点：生活成本高，房价让人望而却步，偶尔会感到孤独和压力。"
},
"C": {
city: "四川 · 成都",
desc: "🍲 宜居亮点：一座来了就不想走的城市。烟火气十足，美食遍地，物价适中，生活节奏巴适得很。\n\n✨ 适合性格：适合性格随和、喜欢热闹、享受生活、注重美食与社交的你。\n\n💡 小缺点：气候偏潮湿，阴天较多，偶尔会有雾霾。"
},
"D": {
city: "北京 · 京城",
desc: "🍂 宜居亮点：厚重的历史文化与顶尖的资源。秋天的银杏美不胜收，胡同里充满了人间烟火气。\n\n✨ 适合性格：适合有野心、有情怀、喜欢历史底蕴、追求顶级资源的人。\n\n💡 小缺点：气候干燥，冬季较冷，通勤时间较长，落户难度大。"
}
};
// ================= 逻辑控制 =================
let currentQuestionIndex = 0;
let scores = { A: 0, B: 0, C: 0, D: 0 };
let selectedOption = null;
const coverPage = document.getElementById('cover-page');
const quizPage = document.getElementById('quiz-page');
const resultPage = document.getElementById('result-page');
const progressText = document.getElementById('progress-text');
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const nextBtn = document.getElementById('next-btn');
function startQuiz() {
coverPage.classList.add('hidden');
quizPage.classList.remove('hidden');
renderQuestion();
}
function renderQuestion() {
const currentQ = questions[currentQuestionIndex];
progressText.innerText = `${currentQuestionIndex + 1}/${questions.length}`;
questionText.innerText = currentQ.q;
optionsContainer.innerHTML = '';
selectedOption = null;
nextBtn.disabled = true;
nextBtn.innerText = currentQuestionIndex === questions.length - 1 ? "查看结果" : "下一题";
currentQ.options.forEach((opt, index) => {
const div = document.createElement('div');
div.className = 'option';
div.innerText = opt.text;
div.onclick = () => selectOption(div, opt.type);
optionsContainer.appendChild(div);
});
}
function selectOption(element, type) {
// 移除之前的选中状态
const allOptions = document.querySelectorAll('.option');
allOptions.forEach(opt => opt.classList.remove('selected'));
// 添加当前选中状态
element.classList.add('selected');
selectedOption = type;
nextBtn.disabled = false;
}
function nextQuestion() {
if (!selectedOption) return;
// 记录分数
scores[selectedOption] += 1;
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
renderQuestion();
} else {
showResult();
}
}
function showResult() {
quizPage.classList.add('hidden');
resultPage.classList.remove('hidden');
// 计算最高分类型
let maxType = 'A';
let maxScore = -1;
for (const type in scores) {
if (scores[type] > maxScore) {
maxScore = scores[type];
maxType = type;
}
}
// 显示结果
const resultData = results[maxType];
document.getElementById('result-city').innerText = resultData.city;
document.getElementById('result-desc').innerText = resultData.desc;
}
function resetTest() {
currentQuestionIndex = 0;
scores = { A: 0, B: 0, C: 0, D: 0 };
selectedOption = null;
resultPage.classList.add('hidden');
startQuiz();
}
</script>
</body>
</html>