<!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>第08讲: 年龄问题（年龄差不变）</title>
<style>
/* 基础重置 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 隐藏滚动条 */
::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; }
* { -ms-overflow-style: none; scrollbar-width: none; }
html, body { margin: 0; padding: 0; background: #F0F0F0; overflow: hidden; height: 100vh; }
/* 主容器 */
#app { height: 100vh; max-width: 480px; margin: 0 auto; background: #fff; display: flex; flex-direction: column; }
.content-area { flex: 1; overflow-y: auto; padding-bottom: 80px; scroll-behavior: smooth; }
/* 底部导航 - 关键! */
.bottom-nav {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100%; max-width: 480px; height: 70px;
background: white; border-top: 1px solid #e0e0e0;
display: flex; justify-content: space-around; align-items: center; z-index: 9999;
}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: color 0.3s; }
.nav-item.active { color: #667eea; }
.nav-icon { font-size: 22px; }
.nav-label { font-size: 12px; margin-top: 4px; }
/* 页面基础 */
.page { padding: 20px; }
/* 概念引入页 */
.intro-page { text-align: center; padding: 40px 20px; }
.intro-emoji { font-size: 80px; margin-bottom: 20px; }
.intro-title { font-size: 28px; color: #333; margin-bottom: 30px; font-weight: bold; }
.story-box {
background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
border-radius: 20px; padding: 25px;
margin-bottom: 30px; text-align: left;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.story-text { font-size: 16px; line-height: 1.6; color: #555; margin-bottom: 15px; }
.highlight { color: #e74c3c; font-weight: bold; }
.key-concept { background: #f0f7ff; border-radius: 12px; padding: 20px; margin-bottom: 30px; text-align: left; }
.concept-title { font-size: 18px; color: #667eea; margin-bottom: 10px; font-weight: bold; }
.concept-list { list-style: none; padding: 0; margin: 0; }
.concept-list li { margin-bottom: 8px; padding-left: 24px; position: relative; }
.concept-list li:before { content: "✓"; position: absolute; left: 0; color: #4CAF50; }
.speak-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 40px; border-radius: 25px; font-size: 18px; cursor: pointer; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); transition: transform 0.2s; }
.speak-btn:active { transform: scale(0.95); }
/* Tab 导航 */
.tab-nav { display: flex; border-bottom: 2px solid #e0e0e0; margin-bottom: 20px; }
.tab-item { flex: 1; padding: 12px; text-align: center; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s; }
.tab-item.active { color: #667eea; border-bottom-color: #667eea; font-weight: bold; }
/* 动画区域 */
.animation-area {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px; padding: 20px;
height: 360px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.svg-container { width: 100%; height: 280px; }
/* 公式和控制栏样式 */
.math-area { background: white; border: 2px solid #667eea; border-radius: 12px; padding: 12px; margin: 15px 0; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.math-formula { font-size: 18px; font-weight: bold; color: #333; text-align: center; }
.step-explanation { background: #f8f9fa; padding: 15px; border-radius: 8px; color: #666; font-size: 14px; text-align: center; margin-bottom: 20px; line-height: 1.5; }
.control-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 100;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.step-btn {
background: rgba(102, 126, 234, 0.85);
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
pointer-events: all;
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.step-btn:disabled { background: rgba(204, 204, 204, 0.7); cursor: not-allowed; }
.step-btn:active { transform: scale(0.9); }
.step-btn.prev { left: 10px; }
.step-btn.next { right: 10px; }
/* 讲解页 */
.example-card {
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border-left: 5px solid #667eea;
}
.example-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.example-title { font-weight: bold; color: #333; font-size: 16px; }
.example-toggle { background: none; border: none; color: #667eea; cursor: pointer; font-size: 14px; }
.example-content { border-top: 1px solid #eee; padding-top: 15px; }
.example-text { font-size: 15px; margin-bottom: 10px; color: #555; }
.example-answer { color: #e74c3c; font-weight: bold; margin-bottom: 10px; }
.example-explanation { background: #f9f9f9; padding: 10px; border-radius: 8px; font-size: 14px; color: #666; }
/* 练习页通用样式 */
.practice-page { padding: 20px; }
.question-card {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px dashed #e0e0e0;
}
.question-number { font-size: 16px; color: #777; }
.score-display { font-size: 18px; font-weight: bold; color: #f39c12; }
.question-text {
font-size: 18px;
line-height: 1.5;
color: #333;
margin-bottom: 25px;
font-weight: bold;
}
.options-container { margin-bottom: 20px; }
.option-btn {
display: block;
width: 100%;
padding: 15px;
margin-bottom: 12px;
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
text-align: left;
cursor: pointer;
transition: all 0.2s;
}
.option-btn:hover { background: #e9ecef; }
.option-btn.correct { background: #d4edda; border-color: #28a745; color: #155724; }
.option-btn.wrong { background: #f8d7da; border-color: #dc3545; color: #721c24; animation: shake 0.5s; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.feedback-area {
padding: 15px;
border-radius: 12px;
margin-bottom: 20px;
line-height: 1.5;
}
.feedback-correct { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.feedback-wrong { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.next-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
}
.next-btn:active { transform: scale(0.98); }
.completion-page { text-align: center; padding: 60px 20px; }
.completion-emoji { font-size: 80px; margin-bottom: 20px; }
.completion-title { font-size: 28px; color: #333; margin-bottom: 10px; font-weight: bold; }
.final-score { font-size: 60px; color: #f39c12; font-weight: bold; margin-bottom: 30px; }
.restart-btn {
padding: 16px 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* 奥数页特定样式 */
.difficulty-badge {
display: inline-block;
margin-left: 10px;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: bold;
}
.difficulty-1 { background: #d4edda; color: #155724; }
.difficulty-2 { background: #fff3cd; color: #856404; }
.difficulty-3 { background: #f8d7da; color: #721c24; }
.hint-box {
background: #e3f2fd;
border-left: 4px solid #2196F3;
padding: 12px;
margin-bottom: 15px;
border-radius: 0 8px 8px 0;
font-size: 14px;
}
/* 通关秘籍页 */
.secrets-container { padding: 20px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.secret-card {
flex: 0 0 auto;
width: 100%;
min-height: 300px;
border-radius: 20px;
padding: 30px;
margin-right: 20px;
scroll-snap-align: start;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
justify-content: center;
}
.secret-card:last-child { margin-right: 0; }
.secret-icon { font-size: 60px; text-align: center; margin-bottom: 20px; }
.secret-title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 15px; }
.secret-content { font-size: 18px; line-height: 1.6; text-align: center; }
</style>
</head>
<body>
<div id="app">
<div class="content-area">
<!-- 页面1: 概念引入 -->
<div v-show="currentPage === 1" class="intro-page">
<div class="intro-emoji">👦👩</div>
<div class="intro-title">年龄问题（年龄差不变）</div>
<div class="story-box">
<p class="story-text">小朋友们，你今年几岁？妈妈几岁？</p>
<p class="story-text">比如你 7 岁，妈妈 32 岁，妈妈比你大 <span class="highlight">25 岁</span>。</p>
<p class="story-text">等到明年，你 8 岁了，妈妈 33 岁，妈妈还是比你大 <span class="highlight">25 岁</span>！</p>
<p class="story-text">哪怕过 100 年，这个<span class="highlight">“年龄差”</span>永远不会变哦。</p>
</div>
<div class="key-concept">
<div class="concept-title">🎯 本课核心概念</div>
<ul class="concept-list">
<li><strong>年龄差不变</strong>：不管是今年、明年还是十年前，你和妈妈的年龄差距永远是一样的！</li>
<li><strong>共同增长</strong>：你长一岁，妈妈也长一岁，大家都一起变老。</li>
</ul>
</div>
<button class="speak-btn" @click="speakStory">🎤 听老师讲解</button>
</div>
<!-- 页面2: 演示动画 -->
<div v-show="currentPage === 2" class="page demo-page">
<div class="tab-nav">
<div class="tab-item" :class="{active: demoTab === 'direct'}" @click="switchDemoTab('direct')">年龄增长演示</div>
</div>
<!-- 年龄增长演示 Tab -->
<div class="demo-section" :class="{active: demoTab === 'direct'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 280">
<!-- 时间轴背景 -->
<line x1="50" y1="140" x2="350" y2="140" stroke="#ccc" stroke-width="3" stroke-dasharray="5,5" />
<!-- 时间标签 -->
<text x="50" y="170" text-anchor="middle" font-size="14" fill="#999">今年</text>
<text x="200" y="170" text-anchor="middle" font-size="14" fill="#999">1年后</text>
<text x="350" y="170" text-anchor="middle" font-size="14" fill="#999">2年后</text>
<!-- 儿子头像和年龄 -->
<circle :cx="50 + directStep * 150" cy="70" r="30" fill="#a8edea" />
<text :x="50 + directStep * 150" y="75" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">👦</text>
<text :x="50 + directStep * 150" y="115" text-anchor="middle" font-size="16" font-weight="bold" fill="#667eea">{{boyAge + directStep}}</text>
<text :x="50 + directStep * 150" y="130" text-anchor="middle" font-size="12" fill="#666">儿子</text>
<!-- 爸爸头像和年龄 -->
<circle :cx="50 + directStep * 150" cy="210" r="30" fill="#fed6e3" />
<text :x="50 + directStep * 150" y="215" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">👨</text>
<text :x="50 + directStep * 150" y="255" text-anchor="middle" font-size="16" font-weight="bold" fill="#667eea">{{dadAge + directStep}}</text>
<text :x="50 + directStep * 150" y="270" text-anchor="middle" font-size="12" fill="#666">爸爸</text>
<!-- 双向箭头和年龄差 -->
<line :x1="50 + directStep * 150" y1="100" :x2="50 + directStep * 150" y2="180" stroke="#f39c12" stroke-width="4" marker-end="url(#arrowhead)" marker-start="url(#arrowhead)" />
<text :x="50 + directStep * 150" y="145" text-anchor="middle" font-size="14" font-weight="bold" fill="#e74c3c">年龄差</text>
<text :x="50 + directStep * 150" y="160" text-anchor="middle" font-size="16" font-weight="bold" fill="#e74c3c">{{ageDiff}}</text>
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#f39c12" />
</marker>
</defs>
</svg>
<!-- 控制按钮 -->
<div class="control-bar">
<button class="step-btn prev" @click="prevDirectStep" :disabled="directStep === 0">◀</button>
<button class="step-btn next" @click="nextDirectStep" :disabled="directStep === 2">▶</button>
</div>
</div>
<!-- 公式展示区 -->
<div class="math-area">
<div class="math-formula">
<span v-if="directStep === 0">儿子 {{boyAge}} 岁 - 爸爸 {{dadAge}} 岁</span>
<span v-if="directStep === 1">儿子 {{boyAge+1}} 岁 - 爸爸 {{dadAge+1}} 岁</span>
<span v-if="directStep === 2">儿子 {{boyAge+2}} 岁 - 爸爸 {{dadAge+2}} 岁</span>
</div>
</div>
<!-- 步骤文字讲解 -->
<div class="step-explanation">
{{stepExplanations[directStep]}}
</div>
</div>
</div>
<!-- 页面3: 讲解页 -->
<div v-show="currentPage === 3" class="page explain-page">
<div class="tab-nav">
<div class="tab-item" :class="{active: explainTab === 'direct'}" @click="switchExplainTab('direct')">直接判断</div>
<div class="tab-item" :class="{active: explainTab === 'theory'}" @click="switchExplainTab('theory')">核心原理</div>
<div class="tab-item" :class="{active: explainTab === 'example'}" @click="switchExplainTab('example')">典型例题</div>
</div>
<!-- 直接判断 -->
<div v-show="explainTab === 'direct'">
<div class="example-card">
<p class="example-text">遇到“几年后，大几岁？”这类问题，<strong>年龄差永远不变</strong>！直接计算今年的年龄差即可。</p>
</div>
</div>
<!-- 核心原理 -->
<div v-show="explainTab === 'theory'">
<div class="example-card">
<p class="example-text"><strong>1. 年龄差不变原理</strong></p>
<p class="example-text">两个人的年龄差是固定的，不会随时间改变。</p>
</div>
<div class="example-card">
<p class="example-text"><strong>2. 共同增长原理</strong></p>
<p class="example-text">过N年，每个人年龄都增加N岁。N个人的总年龄增加 N×人数 岁。</p>
</div>
<div class="example-card">
<p class="example-text"><strong>3. 解决问题的步骤</strong></p>
<p class="example-text">① 抓住“年龄差不变”。② 分清“和”、“差”、“倍数”。③ 应用和差公式或画图。</p>
</div>
</div>
<!-- 典型例题 -->
<div v-show="explainTab === 'example'" class="example-tab">
<div class="example-card">
<div class="example-header">
<div class="example-title">例题1：基础题</div>
<button class="example-toggle" @click="toggleExample(0)">{{exampleOpen[0] ? '收起' : '展开'}}</button>
</div>
<div v-if="exampleOpen[0]" class="example-content">
<p class="example-text"><strong>题目</strong>：小明今年 6 岁，妈妈今年 30 岁。5 年后，妈妈比小明大几岁？</p>
<p class="example-answer"><strong>答案</strong>：24 岁</p>
<p class="example-explanation"><strong>解析</strong>：年龄差不变。今年大 30-6=24 岁，5年后还是大 24 岁。</p>
</div>
</div>
<div class="example-card">
<div class="example-header">
<div class="example-title">例题2：进阶题</div>
<button class="example-toggle" @click="toggleExample(1)">{{exampleOpen[1] ? '收起' : '展开'}}</button>
</div>
<div v-if="exampleOpen[1]" class="example-content">
<p class="example-text"><strong>题目</strong>：爸爸和儿子共 50 岁，爸爸比儿子大 28 岁。儿子今年几岁？</p>
<p class="example-answer"><strong>答案</strong>：11 岁</p>
<p class="example-explanation"><strong>解析</strong>：这是和差问题。小数 = (和-差)÷2 = (50-28)÷2 = 11。</p>
</div>
</div>
<div class="example-card">
<div class="example-header">
<div class="example-title">例题3：易错题</div>
<button class="example-toggle" @click="toggleExample(2)">{{exampleOpen[2] ? '收起' : '展开'}}</button>
</div>
<div v-if="exampleOpen[2]" class="example-content">
<p class="example-text"><strong>题目</strong>：今年姐姐 10 岁，妹妹 5 岁。当姐姐 20 岁时，妹妹几岁？</p>
<p class="example-answer"><strong>答案</strong>：15 岁</p>
<p class="example-explanation"><strong>解析</strong>：【易错点】不是 20÷2=10！姐姐长了 10 岁 (20-10)，妹妹也要长 10 岁，5+10=15。</p>
</div>
</div>
</div>
</div>
<!-- 页面4: 课内练习 -->
<div v-show="currentPage === 4" class="practice-page">
<div v-if="!practiceCompleted">
<div class="question-card">
<div class="question-header">
<div class="question-number">第 {{currentQuestion + 1}}/{{practiceQuestions.length}} 题</div>
<div class="score-display">⭐ {{score}}分</div>
</div>
<div class="question-text">{{practiceQuestions[currentQuestion].text}}</div>
<div class="options-container">
<button
v-for="(option, index) in practiceQuestions[currentQuestion].options"
:key="'opt'+index"
class="option-btn"
:class="{
'correct': answered && option.correct,
'wrong': answered && selectedOption === index && !option.correct
}"
@click="selectOption(index, option.correct)"
:disabled="answered"
>
{{option.text}}
</button>
</div>
<div v-if="answered" class="feedback-area" :class="isCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isCorrect">
<strong>🎉 太棒了!</strong><br>
{{practiceQuestions[currentQuestion].explanation}}
</div>
<div v-else>
<strong>💡 让我们一起分析:</strong><br>
{{practiceQuestions[currentQuestion].explanation}}
</div>
</div>
<button v-if="answered" class="next-btn" @click="nextQuestion">
{{currentQuestion < practiceQuestions.length - 1 ? '下一题 →' : '完成练习 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page">
<div class="completion-emoji">🎊</div>
<div class="completion-title">课内练习完成!</div>
<div class="final-score">{{score}}分</div>
<button class="restart-btn" @click="switchPage(5)">挑战奥数题 →</button>
</div>
</div>
<!-- 页面5: 奥数挑战 -->
<div v-show="currentPage === 5" class="practice-page">
<div v-if="!olympiadCompleted">
<div class="question-card">
<div class="question-header">
<div>
<span class="question-number">第 {{currentOlympiad + 1}}/{{olympiadQuestions.length}} 题</span>
<span class="difficulty-badge" :class="'difficulty-' + olympiadQuestions[currentOlympiad].difficulty">
{{olympiadQuestions[currentOlympiad].difficultyText}}
</span>
</div>
<div class="score-display">⭐ {{olympiadScore}}分</div>
</div>
<div class="question-text">{{olympiadQuestions[currentOlympiad].text}}</div>
<div class="options-container">
<button
v-for="(option, index) in olympiadQuestions[currentOlympiad].options"
:key="'olopt'+index"
class="option-btn"
:class="{
'correct': olympiadAnswered && option.correct,
'wrong': olympiadAnswered && selectedOlympiadOption === index && !option.correct
}"
@click="selectOlympiadOption(index, option.correct)"
:disabled="olympiadAnswered"
>
{{option.text}}
</button>
</div>
<div v-if="wrongAttempts > 0 && !olympiadAnswered">
<div class="hint-box" v-if="wrongAttempts === 1">
<strong>💡 提示1:</strong> {{olympiadQuestions[currentOlympiad].hint1}}
</div>
<div class="hint-box" v-if="wrongAttempts === 2">
<strong>💡 提示2:</strong> {{olympiadQuestions[currentOlympiad].hint2}}
</div>
</div>
<div v-if="olympiadAnswered" class="feedback-area" :class="isOlympiadCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isOlympiadCorrect">
<strong>🏆 厉害!</strong><br>
{{olympiadQuestions[currentOlympiad].explanation}}
</div>
<div v-else>
<strong>📖 详细解析:</strong><br>
{{olympiadQuestions[currentOlympiad].explanation}}
</div>
</div>
<button v-if="olympiadAnswered || wrongAttempts >= 3" class="next-btn" @click="nextOlympiad">
{{currentOlympiad < olympiadQuestions.length - 1 ? '下一题 →' : '完成挑战 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page">
<div class="completion-emoji">🏆</div>
<div class="completion-title">奥数挑战完成!</div>
<div class="final-score">{{olympiadScore}}分</div>
<button class="restart-btn" @click="switchPage(6)">查看通关秘籍 →</button>
</div>
</div>
<!-- 页面6: 通关秘籍 -->
<div v-show="currentPage === 6" class="secrets-container">
<div class="secret-card" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<div class="secret-icon">🚀</div>
<div class="secret-title">秘籍1：差不变</div>
<div class="secret-content">抓住“年龄差永远不变”这个救命稻草。</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);">
<div class="secret-icon">📈</div>
<div class="secret-title">秘籍2：同增长</div>
<div class="secret-content">过 N 年，总岁数增加 人数 × N。</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #faaca8 0%, #dad4ec 100%);">
<div class="secret-icon">🎯</div>
<div class="secret-title">秘籍3：变倍数</div>
<div class="secret-content">倍数问题里，还是先找年龄差！</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<div class="bottom-nav">
<div class="nav-item" :class="{active: currentPage === 1}" @click="switchPage(1)">
<div class="nav-icon">💡</div>
<div class="nav-label">概念</div>
</div>
<div class="nav-item" :class="{active: currentPage === 2}" @click="switchPage(2)">
<div class="nav-icon">🎬</div>
<div class="nav-label">演示</div>
</div>
<div class="nav-item" :class="{active: currentPage === 3}" @click="switchPage(3)">
<div class="nav-icon">📝</div>
<div class="nav-label">讲解</div>
</div>
<div class="nav-item" :class="{active: currentPage === 4}" @click="switchPage(4)">
<div class="nav-icon">✏️</div>
<div class="nav-label">练习</div>
</div>
<div class="nav-item" :class="{active: currentPage === 5}" @click="switchPage(5)">
<div class="nav-icon">🏆</div>
<div class="nav-label">奥数</div>
</div>
<div class="nav-item" :class="{active: currentPage === 6}" @click="switchPage(6)">
<div class="nav-icon">🎁</div>
<div class="nav-label">秘籍</div>
</div>
</div>
</div>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/vue.global.prod.js"></script>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/gsap.min.js"></script>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/confetti.browser.min.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
currentPage: 1,
demoTab: 'direct',
explainTab: 'direct',
directStep: 0,
theoryStep: 0,
exampleOpen: [false, false, false],
// 动画演示相关数据
boyAge: 7,
dadAge: 32,
ageDiff: 25,
stepExplanations: [
'今年：儿子7岁，爸爸32岁，年龄差25岁。年龄差就是32-7=25。',
'1年后：儿子和爸爸都长1岁。年龄差还是25岁，闪闪发光，永远不变！',
'2年后：儿子9岁，爸爸34岁。你看，年龄差依然是25岁！抓住这个不变的差，题目就变简单啦！'
],
// 课内练习相关
practiceQuestions: [
{
text: '小刚今年 8 岁，哥哥今年 12 岁。3 年后，哥哥比小刚大几岁？',
options: [
{text: 'A. 3', correct: false},
{text: 'B. 4', correct: true},
{text: 'C. 7', correct: false},
{text: 'D. 5', correct: false}
],
explanation: '年龄差不变。今年大 12-8=4 岁，3年后还是大 4 岁。'
},
{
text: '爷爷今年 60 岁，孙子今年 10 岁。明年爷爷比孙子大几岁？',
options: [
{text: 'A. 50', correct: true},
{text: 'B. 51', correct: false},
{text: 'C. 49', correct: false},
{text: 'D. 60', correct: false}
],
explanation: '直接算今年的差。60-10=50。明年差一样。'
},
{
text: '小红今年 7 岁，她比妈妈小 25 岁。妈妈今年几岁？',
options: [
{text: 'A. 30', correct: false},
{text: 'B. 31', correct: false},
{text: 'C. 32', correct: true},
{text: 'D. 33', correct: false}
],
explanation: '妈妈 = 小红 + 25。7 + 25 = 32。'
},
{
text: '弟弟今年 5 岁，姐姐今年 12 岁。当弟弟 10 岁时，姐姐几岁？',
options: [
{text: 'A. 15', correct: false},
{text: 'B. 17', correct: true},
{text: 'C. 22', correct: false},
{text: 'D. 19', correct: false}
],
explanation: '弟弟过了几年？10-5=5年。姐姐也长5岁。12+5=17。'
},
{
text: '两人今年共 20 岁，5 年后两人共多少岁？',
options: [
{text: 'A. 25', correct: false},
{text: 'B. 30', correct: true},
{text: 'C. 35', correct: false},
{text: 'D. 40', correct: false}
],
explanation: '每个人都长5岁。两个人一共长 5+5=10岁。20+10=30。'
},
{
text: '今年爸爸 40 岁，儿子 10 岁。几年前爸爸是 35 岁？',
options: [
{text: 'A. 4', correct: false},
{text: 'B. 5', correct: true},
{text: 'C. 6', correct: false},
{text: 'D. 3', correct: false}
],
explanation: '40 - 35 = 5。也就是5年前。那时候儿子5岁。'
},
{
text: '小动物比年龄：大象比猴子大 20 岁。过了 2 年，大象比猴子大几岁？',
options: [
{text: 'A. 20', correct: true},
{text: 'B. 22', correct: false},
{text: 'C. 18', correct: false},
{text: 'D. 24', correct: false}
],
explanation: '年龄差永不变。还是20岁。不要加2。'
},
{
text: '妈妈今年 36 岁，是女儿年龄的 6 倍。女儿今年几岁？',
options: [
{text: 'A. 5', correct: false},
{text: 'B. 6', correct: true},
{text: 'C. 7', correct: false},
{text: 'D. 4', correct: false}
],
explanation: '36 ÷ 6 = 6。女儿6岁。'
}
],
currentQuestion: 0,
score: 0,
answered: false,
isCorrect: false,
selectedOption: null,
practiceCompleted: false,
// 奥数挑战相关
olympiadQuestions: [
{
text: '爸爸今年 32 岁，儿子 4 岁。当父子俩年龄和是 50 岁时，儿子几岁？',
options: [
{text: 'A. 10', correct: false},
{text: 'B. 11', correct: true},
{text: 'C. 12', correct: false},
{text: 'D. 9', correct: false}
],
hint1: '年龄差是 32-4=28岁。',
hint2: '和是50，差是28。求小数（儿子）。',
hint3: '(50-28)÷2=11岁。',
explanation: '利用年龄差求和差。年龄差是 32-4=28岁。当年龄和为50时，儿子年龄是小数 = (和-差)÷2 = (50-28)÷2=11岁。',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '今年小红和奶奶共 70 岁，10 年后，奶奶比小红大 50 岁。今年小红几岁？',
options: [
{text: 'A. 10', correct: true},
{text: 'B. 20', correct: false},
{text: 'C. 5', correct: false},
{text: 'D. 15', correct: false}
],
hint1: '年龄差10年后也是50岁。',
hint2: '今年和70，差50。',
hint3: '(70-50)÷2=10。',
explanation: '年龄差永远不变，10年后差50岁，所以今年差也是50岁。今年小红和奶奶的年龄和是70岁，差是50岁。小红是小数，所以小红年龄 = (和-差)÷2 = (70-50)÷2=10岁。',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '一家三口，爸爸妈妈和儿子。今年全家年龄和 72 岁。6 年后全家年龄和是多少？',
options: [
{text: 'A. 78', correct: false},
{text: 'B. 84', correct: false},
{text: 'C. 90', correct: true},
{text: 'D. 100', correct: false}
],
hint1: '过6年，每个人都长6岁。',
hint2: '一共长 3×6=18岁。',
hint3: '72+18=90。',
explanation: '过6年，每个人都增加6岁。三个人一共增加 3×6=18岁。所以6年后全家年龄和是 72+18=90岁。',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '当哥哥像弟弟现在这么大时，弟弟 5 岁；当弟弟像哥哥现在这么大时，哥哥 20 岁。哥哥今年几岁？',
options: [
{text: 'A. 10', correct: false},
{text: 'B. 15', correct: true},
{text: 'C. 12', correct: false},
{text: 'D. 18', correct: false}
],
hint1: '两人的年龄差是固定的，设为d。',
hint2: '弟弟5岁时，哥哥是(5+d)岁（也就是弟弟现在的年龄）。',
hint3: '哥哥现在(5+2d)，未来(5+3d)=20。3d=15, d=5。哥哥现在15。',
explanation: '典型年龄差画图。设年龄差为d。第一句话：弟弟现在年龄 - d = 5，所以弟弟现在 = 5+d。第二句话：哥哥现在年龄 + d = 20，所以哥哥现在 = 20-d。又因为哥哥现在比弟弟现在大d岁：(20-d) - (5+d) = d。解得d=5。哥哥现在 = 20-5 = 15岁。',
difficulty: 3,
difficultyText: '⭐⭐⭐'
},
{
text: '今年叔叔 20 岁，小明 10 岁。几年后叔叔的年龄是小明的 1 倍？',
options: [
{text: 'A. 10年', correct: false},
{text: 'B. 20年', correct: false},
{text: 'C. 永远不', correct: true},
{text: 'D. 5年', correct: false}
],
hint1: '1倍就是相等。',
hint2: '叔叔永远比小明大。',
hint3: '不可能相等。',
explanation: '陷阱题。1倍就是相等。叔叔今年比小明大10岁（20-10），而且年龄差永远不变。所以无论过多少年，叔叔永远比小明大10岁，他们的年龄永远不可能相等。答案是“永远不”。',
difficulty: 2,
difficultyText: '⭐⭐'
},
{
text: '小强今年 12 岁，比爷爷小 50 岁。当爷爷 70 岁时，小强几岁？',
options: [
{text: 'A. 20', correct: true},
{text: 'B. 18', correct: false},
{text: 'C. 22', correct: false},
{text: 'D. 25', correct: false}
],
hint1: '爷爷比小强总大50岁。',
hint2: '70 - 50 = 20。',
hint3: '小强20岁。',
explanation: '差不变。爷爷总比小强大50岁。当爷爷70岁时，小强年龄 = 70 - 50 = 20岁。',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '姐姐今年 15 岁，妹妹 11 岁。几年前姐姐是妹妹的 2 倍？',
options: [
{text: 'A. 5', correct: false},
{text: 'B. 6', correct: false},
{text: 'C. 7', correct: true},
{text: 'D. 4', correct: false}
],
hint1: '年龄差 15-11=4 岁。',
hint2: '姐姐是妹妹2倍时，差也是1倍的量，所以妹妹那时4岁。',
hint3: '11 - 4 = 7年前。',
explanation: '差倍问题。年龄差 15-11=4 岁，永远不变。当姐姐年龄是妹妹的2倍时，她们的年龄差（4岁）刚好等于那时妹妹的年龄（1倍的量）。所以那时妹妹4岁。妹妹从11岁变成4岁，需要 11-4=7 年前。',
difficulty: 2,
difficultyText: '⭐⭐'
},
{
text: '父子俩的年龄差是 30 岁。5 年后，父亲年龄是儿子的 4 倍。今年儿子几岁？',
options: [
{text: 'A. 5', correct: true},
{text: 'B. 10', correct: false},
{text: 'C. 15', correct: false},
{text: 'D. 4', correct: false}
],
hint1: '5年后差还是30。',
hint2: '5年后父亲是儿子4倍，差3倍。3倍=30，1倍=10。',
hint3: '5年后儿子10岁，今年 10-5=5 岁。',
explanation: '差倍问题。5年后年龄差还是30岁。5年后父亲是儿子4倍，那么年龄差（30岁）对应儿子年龄的3倍（4-1=3）。所以5年后儿子年龄是 30÷3=10岁。那么今年儿子年龄是 10-5=5岁。',
difficulty: 2,
difficultyText: '⭐⭐'
}
],
currentOlympiad: 0,
olympiadScore: 0,
olympiadAnswered: false,
isOlympiadCorrect: false,
selectedOlympiadOption: null,
wrongAttempts: 0,
olympiadCompleted: false
};
},
methods: {
switchPage(page) {
this.stopSpeak();
this.currentPage = page;
if (page === 2) {
this.directStep = 0;
this.theoryStep = 0;
this.runDirectAnimation();
}
if (page === 4) {
this.currentQuestion = 0;
this.score = 0;
this.answered = false;
this.practiceCompleted = false;
}
if (page === 5) {
this.currentOlympiad = 0;
this.olympiadScore = 0;
this.olympiadAnswered = false;
this.wrongAttempts = 0;
this.olympiadCompleted = false;
}
},
// 停止语音
stopSpeak() {
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
const audio = document.getElementById('tts-audio');
if (audio) {
audio.pause();
audio.currentTime = 0;
}
} else {
if (window.speechSynthesis) {
window.speechSynthesis.cancel();
}
}
},
// 概念页语音讲解
speakStory() {
const story = '小朋友们，你今年几岁？妈妈几岁？比如你 7 岁，妈妈 32 岁，妈妈比你大 25 岁。等到明年，你 8 岁了，妈妈 33 岁，妈妈还是比你大 25 岁！哪怕过 100 年，这个“年龄差”永远不会变哦。记住两个核心概念：第一，年龄差不变；第二，共同增长。';
this.speak(story);
},
switchDemoTab(tab) {
this.stopSpeak();
this.demoTab = tab;
},
switchExplainTab(tab) {
this.stopSpeak();
this.explainTab = tab;
},
toggleExample(index) {
this.exampleOpen[index] = !this.exampleOpen[index];
},
// 语音合成
speak(text) {
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
let audio = document.getElementById('tts-audio');
if (!audio) {
audio = document.createElement('audio');
audio.id = 'tts-audio';
audio.style.display = 'none';
document.body.appendChild(audio);
}
const url = `https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/tts.php?text=${encodeURIComponent(text)}&t=${Date.now()}`;
audio.src = url;
audio.play().catch(err => { console.log('语音播放失败:', err); });
} else {
if (window.speechSynthesis) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
}
}
},
// GSAP 动画逻辑
runDirectAnimation() {
if (typeof gsap === 'undefined') return;
// 清除之前的动画
gsap.killTweensOf('.svg-container > *');
// 根据当前步骤设置动画
const tl = gsap.timeline();
// 让代表年龄差的数字和箭头闪烁强调
tl.to("text[fill='#e74c3c']", {
duration: 0.5,
scale: 1.2,
ease: "bounce.out",
yoyo: true,
repeat: 1
}, 0.2);
// 如果回到第0步，让所有元素复位
if (this.directStep === 0) {
tl.to(".svg-container > *", {
x: 0,
duration: 0.5,
ease: "power2.out"
}, 0);
} else {
// 移动到对应位置
tl.to("circle, text", {
x: this.directStep * 150,
duration: 0.8,
ease: "power2.inOut"
}, 0);
tl.to("line", {
attr: {
x1: 50 + this.directStep * 150,
x2: 50 + this.directStep * 150
},
duration: 0.8,
ease: "power2.inOut"
}, 0);
}
},
// 步骤导航
nextDirectStep() {
if (this.directStep < 2) {
this.directStep++;
this.runDirectAnimation();
}
},
prevDirectStep() {
if (this.directStep > 0) {
this.directStep--;
this.runDirectAnimation();
}
},
// 练习题逻辑
selectOption(index, correct) {
if (this.answered) return;
this.answered = true;
this.selectedOption = index;
this.isCorrect = correct;
if (correct) {
this.score += 20;
if (typeof confetti !== 'undefined') {
confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
}
}
},
nextQuestion() {
if (this.currentQuestion < this.practiceQuestions.length - 1) {
this.currentQuestion++;
this.answered = false;
this.selectedOption = null;
} else {
this.practiceCompleted = true;
}
},
// 奥数题逻辑
selectOlympiadOption(index, correct) {
if (this.olympiadAnswered) return;
if (!correct) {
this.wrongAttempts++;
// 震动反馈
if (navigator.vibrate) navigator.vibrate(100);
return;
}
this.olympiadAnswered = true;
this.selectedOlympiadOption = index;
this.isOlympiadCorrect = correct;
if (correct) {
// 根据尝试次数给分
if (this.wrongAttempts === 0) {
this.olympiadScore += 30;
} else if (this.wrongAttempts === 1) {
this.olympiadScore += 20;
} else if (this.wrongAttempts >= 2) {
this.olympiadScore += 10;
}
if (typeof confetti !== 'undefined') {
confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
}
}
},
nextOlympiad() {
if (this.currentOlympiad < this.olympiadQuestions.length - 1) {
this.currentOlympiad++;
this.olympiadAnswered = false;
this.selectedOlympiadOption = null;
this.wrongAttempts = 0;
} else {
this.olympiadCompleted = true;
}
}
}
}).mount('#app');
</script>
</body>
</html>💡 这段代码完全由 AI 生成。
登录后可复制完整代码