|
|
|
@ -156,15 +156,17 @@ |
|
|
|
class="pagination-btn" |
|
|
|
@click="changeNavPage(1)" |
|
|
|
:class="{ active: page === 1 }" |
|
|
|
:disabled="page === 1" |
|
|
|
> |
|
|
|
上一页 |
|
|
|
← 上一页 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
class="pagination-btn" |
|
|
|
@click="changeNavPage(2)" |
|
|
|
:class="{ active: page === 2 }" |
|
|
|
:disabled="page === 2" |
|
|
|
> |
|
|
|
下一页 |
|
|
|
下一页 → |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -192,7 +194,6 @@ export default { |
|
|
|
questions: [], // 从后端获取的题目 |
|
|
|
currentPage: 1, |
|
|
|
page: 1, |
|
|
|
questionsPerPage: 2, // 每页显示2个题目 |
|
|
|
answers: {}, |
|
|
|
startTime: new Date(), |
|
|
|
countdownMinutes: 30, |
|
|
|
@ -213,14 +214,14 @@ export default { |
|
|
|
computed: { |
|
|
|
// 当前页显示的两个题目 |
|
|
|
currentQuestions() { |
|
|
|
const startIndex = (this.currentPage - 1) * this.questionsPerPage; |
|
|
|
const startIndex = (this.currentPage - 1) * 2; |
|
|
|
return [ |
|
|
|
this.questions[startIndex], |
|
|
|
this.questions[startIndex + 1] |
|
|
|
].filter(Boolean); |
|
|
|
]; |
|
|
|
}, |
|
|
|
totalPages() { |
|
|
|
return Math.ceil(this.questions.length / this.questionsPerPage); |
|
|
|
return Math.ceil(this.questions.length / 2); |
|
|
|
}, |
|
|
|
answeredCount() { |
|
|
|
return Object.keys(this.answers).filter( |
|
|
|
@ -249,24 +250,24 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 默认题目数据（备用）- 生成50个题目 |
|
|
|
getDefaultQuestions() { |
|
|
|
// 这里创建一个示例数组，您可以根据实际需要替换为真实数据 |
|
|
|
const defaultQuestions = []; |
|
|
|
// // 默认题目数据（备用）- 生成50个题目 |
|
|
|
// getDefaultQuestions() { |
|
|
|
// // 这里创建一个示例数组，您可以根据实际需要替换为真实数据 |
|
|
|
// const defaultQuestions = []; |
|
|
|
|
|
|
|
for (let i = 1; i <= 50; i++) { |
|
|
|
defaultQuestions.push({ |
|
|
|
id: i, |
|
|
|
stem: `这是第${i}个股票知识测试题目`, |
|
|
|
A: `选项A - 第${i}题`, |
|
|
|
B: `选项B - 第${i}题`, |
|
|
|
C: `选项C - 第${i}题`, |
|
|
|
D: `选项D - 第${i}题` |
|
|
|
}); |
|
|
|
} |
|
|
|
// for (let i = 1; i <= 50; i++) { |
|
|
|
// defaultQuestions.push({ |
|
|
|
// id: i, |
|
|
|
// stem: `这是第${i}个股票知识测试题目`, |
|
|
|
// A: `选项A - 第${i}题`, |
|
|
|
// B: `选项B - 第${i}题`, |
|
|
|
// C: `选项C - 第${i}题`, |
|
|
|
// D: `选项D - 第${i}题` |
|
|
|
// }); |
|
|
|
// } |
|
|
|
|
|
|
|
return defaultQuestions; |
|
|
|
}, |
|
|
|
// return defaultQuestions; |
|
|
|
// }, |
|
|
|
|
|
|
|
// 获取题目在当前试卷中的序号 |
|
|
|
getQuestionIndex(questionId) { |
|
|
|
@ -314,15 +315,12 @@ export default { |
|
|
|
|
|
|
|
// 获取题目状态样式 |
|
|
|
getQuestionStatusClass(questionNumber) { |
|
|
|
const isCurrent = this.currentQuestionIds.includes(questionNumber); |
|
|
|
const isAnswered = !!this.answers[questionNumber]; |
|
|
|
|
|
|
|
if (isCurrent) { |
|
|
|
return 'current'; |
|
|
|
} else if (isAnswered) { |
|
|
|
if (isAnswered) { |
|
|
|
return 'answered'; |
|
|
|
} else { |
|
|
|
return 'normal'; |
|
|
|
return 'unanswered'; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -337,14 +335,14 @@ export default { |
|
|
|
this.currentPage = newPage; |
|
|
|
|
|
|
|
// 自动更新导航页（每25题一页） |
|
|
|
const startQuestion = (newPage - 1) * this.questionsPerPage + 1; |
|
|
|
const startQuestion = (newPage - 1) * 2 + 1; |
|
|
|
this.page = Math.ceil(startQuestion / 25); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 修改通过题目跳转的方法 |
|
|
|
goToPageByQuestion(questionNumber) { |
|
|
|
const page = Math.ceil(questionNumber / this.questionsPerPage); |
|
|
|
const page = Math.ceil(questionNumber / 2); |
|
|
|
this.changePage(page); |
|
|
|
|
|
|
|
// 自动切换到对应的导航页 |
|
|
|
@ -356,6 +354,9 @@ export default { |
|
|
|
if (this.currentPage > 1) { |
|
|
|
this.currentPage--; |
|
|
|
} |
|
|
|
if (this.currentPage < 13) { |
|
|
|
this.page=1; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 下一页 |
|
|
|
@ -363,6 +364,9 @@ export default { |
|
|
|
if (this.currentPage < this.totalPages) { |
|
|
|
this.currentPage++; |
|
|
|
} |
|
|
|
if(this.currentPage > 13){ |
|
|
|
this.page=2; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 更新倒计时 |
|
|
|
@ -480,7 +484,7 @@ export default { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.question-number.normal { |
|
|
|
.question-number.unanswered { |
|
|
|
background-color: #374151; |
|
|
|
border: 1px solid #4b5563; |
|
|
|
color: #e5e7eb; |
|
|
|
@ -492,16 +496,13 @@ export default { |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.question-number.current { |
|
|
|
/* .question-number.current { |
|
|
|
background-color: #3b82f6; |
|
|
|
border: 2px solid #2563eb; |
|
|
|
color: white; |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
.question-number:hover { |
|
|
|
transform: scale(1.05); |
|
|
|
} |
|
|
|
|
|
|
|
.question-text { |
|
|
|
z-index: 1; |
|
|
|
@ -511,6 +512,10 @@ export default { |
|
|
|
background-color: #2563eb; |
|
|
|
transform: scale(1.05); |
|
|
|
} |
|
|
|
.pagination-btn:disabled{ |
|
|
|
background-color: #4b5563; |
|
|
|
color: #e5e7eb; |
|
|
|
} |
|
|
|
|
|
|
|
* { |
|
|
|
margin: 0; |
|
|
|
@ -671,7 +676,7 @@ body { |
|
|
|
gap: 20px; |
|
|
|
} |
|
|
|
.pagination-btn { |
|
|
|
padding: 8px 15px; |
|
|
|
padding: 8px; |
|
|
|
border-radius: 8px; |
|
|
|
border: none; |
|
|
|
background-color: #3b82f6; |
|
|
|
|
chenzhen
2 months ago