chenzhen
2 months ago
3 changed files with 898 additions and 1 deletions
@ -0,0 +1,891 @@ |
|||
<template> |
|||
<div class="home"> |
|||
<div class="top"> |
|||
<h1>📈股票知识评测系统</h1> |
|||
<p>全方面评估您的股票投资知识水平，获取个性化学习建议</p> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="clearfix"> |
|||
<div class="content"> |
|||
<div class="block"> |
|||
<div class="schedule" :style="{ width: progress + '%' }"></div> |
|||
</div> |
|||
<div class="question-block" v-if="currentQuestion"> |
|||
<div class="question"> |
|||
<span class="text-lg font-bold mr-2">{{ currentQuestionIndex + 1 }}、</span> |
|||
{{ currentQuestion.question }} |
|||
</div> |
|||
<div class="options"> |
|||
<label |
|||
class="option" |
|||
:class="{ 'selected': selectedOption === option.value }" |
|||
v-for="option in currentQuestion.options" |
|||
:key="option.value" |
|||
> |
|||
<input |
|||
type="radio" |
|||
:name="'answer' + (currentQuestionIndex + 1)" |
|||
:value="option.value" |
|||
v-model="selectedOption" |
|||
> |
|||
<span class="label">{{ option.label }}</span> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
<div class="question-block" v-if="currentQuestion"> |
|||
<div class="question"> |
|||
<span class="text-lg font-bold mr-2">{{ currentQuestionIndex + 2 }}、</span> |
|||
{{ currentQuestion.question }} |
|||
</div> |
|||
<div class="options"> |
|||
<label |
|||
class="option" |
|||
:class="{ 'selected': selectedOption === option.value }" |
|||
v-for="option in currentQuestion.options" |
|||
:key="option.value" |
|||
> |
|||
<input |
|||
type="radio" |
|||
:name="'answer' + (currentQuestionIndex + 2)" |
|||
:value="option.value" |
|||
v-model="selectedOption" |
|||
> |
|||
<span class="label">{{ option.label }}</span> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="nav-buttons"> |
|||
<button |
|||
class="nav-btn prev" |
|||
@click="prevQuestion" |
|||
:disabled="currentQuestionIndex === 0" |
|||
> |
|||
← 上一题 |
|||
</button> |
|||
<button |
|||
class="nav-btn next" |
|||
@click="nextQuestion" |
|||
:disabled="currentQuestionIndex === questions.length - 1" |
|||
> |
|||
下一题 → |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="right"> |
|||
<div class="time-module"> |
|||
<h3>⏰ 考试时间</h3> |
|||
<div class="current-time">{{ currentTime }}</div> |
|||
<div class="countdown">倒计时: {{ countdown }}</div> |
|||
</div> |
|||
|
|||
<div class="question-nav"> |
|||
<h3>📝 题目导航</h3> |
|||
<div class="question-grid"> |
|||
<div |
|||
class="question-number" |
|||
:class="getQuestionStatusClass(i)" |
|||
@click="goToQuestion(i)" |
|||
v-for="i in questions.length" |
|||
:key="i" |
|||
> |
|||
{{ i }} |
|||
</div> |
|||
</div> |
|||
<div class="pagination"> |
|||
<button |
|||
class="pagination-btn" |
|||
@click="changePage(page - 1)" |
|||
:disabled="page === 1" |
|||
> |
|||
上一页 |
|||
</button> |
|||
<span>第 {{ page }} 页 / 共 {{ totalPages }} 页</span> |
|||
<button |
|||
class="pagination-btn" |
|||
@click="changePage(page + 1)" |
|||
:disabled="page === totalPages" |
|||
> |
|||
下一页 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="statistics"> |
|||
<h3>📊 答题统计</h3> |
|||
<div class="statistics-item"> |
|||
<span class="statistics-label">总题数:</span> |
|||
<span class="statistics-value">{{ questions.length }}</span> |
|||
</div> |
|||
<div class="statistics-item"> |
|||
<span class="statistics-label">已答题数:</span> |
|||
<span class="statistics-value">{{ answeredCount }}</span> |
|||
</div> |
|||
<div class="statistics-item"> |
|||
<span class="statistics-label">未答题数:</span> |
|||
<span class="statistics-value">{{ questions.length - answeredCount }}</span> |
|||
</div> |
|||
<div class="statistics-item"> |
|||
<span class="statistics-label">完成率:</span> |
|||
<span class="statistics-value">{{ completionRate.toFixed(1) }}%</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<button |
|||
class="submit-btn" |
|||
@click="submitTest" |
|||
:disabled="answeredCount === 0" |
|||
> |
|||
🚀 提交试卷 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 股票知识题目数据 |
|||
const stockQuestions = [ |
|||
{ |
|||
id: 1, |
|||
question: "以下哪项不是股票的基本特征？", |
|||
options: [ |
|||
{ value: "A", label: "A. 收益性" }, |
|||
{ value: "B", label: "B. 风险性" }, |
|||
{ value: "C", label: "C. 流动性" }, |
|||
{ value: "D", label: "D. 固定性" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 2, |
|||
question: "股票市场中，'IPO'的全称是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. Initial Public Offering" }, |
|||
{ value: "B", label: "B. International Public Offering" }, |
|||
{ value: "C", label: "C. Initial Private Offering" }, |
|||
{ value: "D", label: "D. International Private Offering" } |
|||
], |
|||
answer: "A" |
|||
}, |
|||
{ |
|||
id: 3, |
|||
question: "以下哪个指标不属于股票的技术分析指标？", |
|||
options: [ |
|||
{ value: "A", label: "A. MACD" }, |
|||
{ value: "B", label: "B. KDJ" }, |
|||
{ value: "C", label: "C. ROE" }, |
|||
{ value: "D", label: "D. RSI" } |
|||
], |
|||
answer: "C" |
|||
}, |
|||
{ |
|||
id: 4, |
|||
question: "股票代码以'60'开头的是哪个交易所的股票？", |
|||
options: [ |
|||
{ value: "A", label: "A. 深圳证券交易所" }, |
|||
{ value: "B", label: "B. 上海证券交易所" }, |
|||
{ value: "C", label: "C. 香港交易所" }, |
|||
{ value: "D", label: "D. 美国纳斯达克" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 5, |
|||
question: "以下哪项不属于基本面分析的范畴？", |
|||
options: [ |
|||
{ value: "A", label: "A. 公司财务报表分析" }, |
|||
{ value: "B", label: "B. 行业发展趋势分析" }, |
|||
{ value: "C", label: "C. 宏观经济环境分析" }, |
|||
{ value: "D", label: "D. 股票价格走势图分析" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 6, |
|||
question: "股票交易中，'涨停板'是指股票价格上涨到什么程度后停止交易？", |
|||
options: [ |
|||
{ value: "A", label: "A. 5%" }, |
|||
{ value: "B", label: "B. 10%" }, |
|||
{ value: "C", label: "C. 15%" }, |
|||
{ value: "D", label: "D. 20%" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 7, |
|||
question: "以下哪个不是股票指数？", |
|||
options: [ |
|||
{ value: "A", label: "A. 上证指数" }, |
|||
{ value: "B", label: "B. 深证成指" }, |
|||
{ value: "C", label: "C. 恒生指数" }, |
|||
{ value: "D", label: "D. GDP指数" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 8, |
|||
question: "股票投资中，'PE比率'指的是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 市盈率" }, |
|||
{ value: "B", label: "B. 市净率" }, |
|||
{ value: "C", label: "C. 收益率" }, |
|||
{ value: "D", label: "D. 波动率" } |
|||
], |
|||
answer: "A" |
|||
}, |
|||
{ |
|||
id: 9, |
|||
question: "以下哪种订单类型可以确保以指定价格或更好的价格成交？", |
|||
options: [ |
|||
{ value: "A", label: "A. 市价单" }, |
|||
{ value: "B", label: "B. 限价单" }, |
|||
{ value: "C", label: "C. 止损单" }, |
|||
{ value: "D", label: "D. 止盈单" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 10, |
|||
question: "股票市场中，'熊市'指的是什么市场状态？", |
|||
options: [ |
|||
{ value: "A", label: "A. 市场持续上涨" }, |
|||
{ value: "B", label: "B. 市场持续下跌" }, |
|||
{ value: "C", label: "C. 市场震荡整理" }, |
|||
{ value: "D", label: "D. 市场活跃度低" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 11, |
|||
question: "以下哪项不是影响股票价格的因素？", |
|||
options: [ |
|||
{ value: "A", label: "A. 公司业绩" }, |
|||
{ value: "B", label: "B. 宏观经济数据" }, |
|||
{ value: "C", label: "C. 投资者情绪" }, |
|||
{ value: "D", label: "D. 公司员工数量" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 12, |
|||
question: "股票交易的最小单位是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 1股" }, |
|||
{ value: "B", label: "B. 10股" }, |
|||
{ value: "C", label: "C. 100股" }, |
|||
{ value: "D", label: "D. 1000股" } |
|||
], |
|||
answer: "C" |
|||
}, |
|||
{ |
|||
id: 13, |
|||
question: "以下哪个不是股票的分类？", |
|||
options: [ |
|||
{ value: "A", label: "A. 普通股" }, |
|||
{ value: "B", label: "B. 优先股" }, |
|||
{ value: "C", label: "C. 蓝筹股" }, |
|||
{ value: "D", label: "D. 债券股" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 14, |
|||
question: "股票投资中的'分散投资'策略主要是为了降低什么风险？", |
|||
options: [ |
|||
{ value: "A", label: "A. 系统性风险" }, |
|||
{ value: "B", label: "B. 非系统性风险" }, |
|||
{ value: "C", label: "C. 市场风险" }, |
|||
{ value: "D", label: "D. 流动性风险" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 15, |
|||
question: "以下哪项不是技术分析的假设前提？", |
|||
options: [ |
|||
{ value: "A", label: "A. 市场行为涵盖一切信息" }, |
|||
{ value: "B", label: "B. 价格沿趋势移动" }, |
|||
{ value: "C", label: "C. 历史会重演" }, |
|||
{ value: "D", label: "D. 公司价值决定股票价格" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 16, |
|||
question: "股票市场中，'量价关系'指的是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 股票价格与成交量的关系" }, |
|||
{ value: "B", label: "B. 股票价格与公司价值的关系" }, |
|||
{ value: "C", label: "C. 股票价格与市场指数的关系" }, |
|||
{ value: "D", label: "D. 股票价格与市盈率的关系" } |
|||
], |
|||
answer: "A" |
|||
}, |
|||
{ |
|||
id: 17, |
|||
question: "以下哪个指标反映了公司的盈利能力？", |
|||
options: [ |
|||
{ value: "A", label: "A. 资产负债率" }, |
|||
{ value: "B", label: "B. 净利润率" }, |
|||
{ value: "C", label: "C. 流动比率" }, |
|||
{ value: "D", label: "D. 资产周转率" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 18, |
|||
question: "股票交易中，'T+1'制度指的是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 当天买入的股票当天可以卖出" }, |
|||
{ value: "B", label: "B. 当天买入的股票次日才能卖出" }, |
|||
{ value: "C", label: "C. 当天卖出的股票当天可以买入" }, |
|||
{ value: "D", label: "D. 当天卖出的股票次日才能买入" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 19, |
|||
question: "以下哪项不是股票投资的风险？", |
|||
options: [ |
|||
{ value: "A", label: "A. 市场风险" }, |
|||
{ value: "B", label: "B. 信用风险" }, |
|||
{ value: "C", label: "C. 通胀风险" }, |
|||
{ value: "D", label: "D. 固定收益风险" } |
|||
], |
|||
answer: "D" |
|||
}, |
|||
{ |
|||
id: 20, |
|||
question: "股票市场中，'龙头股'指的是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 市值最大的股票" }, |
|||
{ value: "B", label: "B. 涨幅最大的股票" }, |
|||
{ value: "C", label: "C. 在行业中具有领先地位的股票" }, |
|||
{ value: "D", label: "D. 分红最高的股票" } |
|||
], |
|||
answer: "C" |
|||
}, |
|||
{ |
|||
id: 21, |
|||
question: "以下哪项不是基本面分析的指标？", |
|||
options: [ |
|||
{ value: "A", label: "A. 每股收益(EPS)" }, |
|||
{ value: "B", label: "B. 净资产收益率(ROE)" }, |
|||
{ value: "C", label: "C. 相对强弱指数(RSI)" }, |
|||
{ value: "D", label: "D. 资产负债率" } |
|||
], |
|||
answer: "C" |
|||
}, |
|||
{ |
|||
id: 22, |
|||
question: "股票投资中的'止损'策略主要是为了什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 限制损失" }, |
|||
{ value: "B", label: "B. 锁定利润" }, |
|||
{ value: "C", label: "C. 增加收益" }, |
|||
{ value: "D", label: "D. 降低交易成本" } |
|||
], |
|||
answer: "A" |
|||
}, |
|||
{ |
|||
id: 23, |
|||
question: "以下哪个不是股票市场的参与者？", |
|||
options: [ |
|||
{ value: "A", label: "A. 个人投资者" }, |
|||
{ value: "B", label: "B. 机构投资者" }, |
|||
{ value: "C", label: "C. 中央银行" }, |
|||
{ value: "D", label: "D. 上市公司" } |
|||
], |
|||
answer: "C" |
|||
}, |
|||
{ |
|||
id: 24, |
|||
question: "股票市场中，'成交量'指的是什么？", |
|||
options: [ |
|||
{ value: "A", label: "A. 股票成交的金额" }, |
|||
{ value: "B", label: "B. 股票成交的数量" }, |
|||
{ value: "C", label: "C. 股票成交的笔数" }, |
|||
{ value: "D", label: "D. 股票成交的频率" } |
|||
], |
|||
answer: "B" |
|||
}, |
|||
{ |
|||
id: 25, |
|||
question: "以下哪项不是影响股票市场的宏观经济因素？", |
|||
options: [ |
|||
{ value: "A", label: "A. GDP增长率" }, |
|||
{ value: "B", label: "B. 通货膨胀率" }, |
|||
{ value: "C", label: "C. 公司管理层变动" }, |
|||
{ value: "D", label: "D. 利率水平" } |
|||
], |
|||
answer: "C" |
|||
} |
|||
]; |
|||
|
|||
export default { |
|||
name: 'TextView', |
|||
data() { |
|||
return { |
|||
questions: stockQuestions, |
|||
currentQuestionIndex: 0, |
|||
selectedOption: '', |
|||
answers: {}, // 存储用户答案，格式：{ questionId: selectedOption } |
|||
page: 1, |
|||
questionsPerPage: 25, // 每页显示25个题目（5×5） |
|||
startTime: new Date(), |
|||
countdownMinutes: 60, // 考试时间60分钟 |
|||
currentTime: '', |
|||
countdown: '', |
|||
timer: null |
|||
}; |
|||
}, |
|||
computed: { |
|||
currentQuestion() { |
|||
return this.questions[this.currentQuestionIndex]; |
|||
}, |
|||
totalPages() { |
|||
return Math.ceil(this.questions.length / this.questionsPerPage); |
|||
}, |
|||
answeredCount() { |
|||
return Object.keys(this.answers).length; |
|||
}, |
|||
completionRate() { |
|||
return (this.answeredCount / this.questions.length) * 100; |
|||
}, |
|||
progress() { |
|||
return this.completionRate; |
|||
} |
|||
}, |
|||
watch: { |
|||
currentQuestionIndex() { |
|||
// 当切换题目时，更新选中的选项 |
|||
this.selectedOption = this.answers[this.currentQuestion.id] || ''; |
|||
|
|||
// 更新当前页码 |
|||
this.page = Math.ceil((this.currentQuestionIndex + 1) / this.questionsPerPage); |
|||
}, |
|||
selectedOption() { |
|||
// 当选中选项时，保存到答案对象 |
|||
if (this.selectedOption) { |
|||
this.$set(this.answers, this.currentQuestion.id, this.selectedOption); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取题目状态样式 |
|||
getQuestionStatusClass(questionNumber) { |
|||
const index = questionNumber - 1; |
|||
const questionId = this.questions[index].id; |
|||
|
|||
if (index === this.currentQuestionIndex) { |
|||
return 'current'; |
|||
} else if (this.answers[questionId]) { |
|||
return 'answered'; |
|||
} else { |
|||
return 'normal'; |
|||
} |
|||
}, |
|||
// 跳转到指定题目 |
|||
goToQuestion(questionNumber) { |
|||
const index = questionNumber - 1; |
|||
if (index >= 0 && index < this.questions.length) { |
|||
this.currentQuestionIndex = index; |
|||
} |
|||
}, |
|||
// 上一题 |
|||
prevQuestion() { |
|||
if (this.currentQuestionIndex > 0) { |
|||
this.currentQuestionIndex--; |
|||
} |
|||
}, |
|||
// 下一题 |
|||
nextQuestion() { |
|||
if (this.currentQuestionIndex < this.questions.length - 1) { |
|||
this.currentQuestionIndex++; |
|||
} |
|||
}, |
|||
// 切换页码 |
|||
changePage(newPage) { |
|||
if (newPage >= 1 && newPage <= this.totalPages) { |
|||
this.page = newPage; |
|||
// 跳转到当前页的第一题 |
|||
const firstQuestionIndex = (newPage - 1) * this.questionsPerPage; |
|||
this.goToQuestion(firstQuestionIndex + 1); |
|||
} |
|||
}, |
|||
// 更新当前时间 |
|||
updateCurrentTime() { |
|||
const now = new Date(); |
|||
const hours = now.getHours().toString().padStart(2, '0'); |
|||
const minutes = now.getMinutes().toString().padStart(2, '0'); |
|||
const seconds = now.getSeconds().toString().padStart(2, '0'); |
|||
this.currentTime = `${hours}:${minutes}:${seconds}`; |
|||
}, |
|||
// 更新倒计时 |
|||
updateCountdown() { |
|||
const now = new Date(); |
|||
const elapsedMinutes = (now - this.startTime) / (1000 * 60); |
|||
const remainingMinutes = Math.max(0, this.countdownMinutes - elapsedMinutes); |
|||
|
|||
const minutes = Math.floor(remainingMinutes).toString().padStart(2, '0'); |
|||
const seconds = Math.floor((remainingMinutes % 1) * 60).toString().padStart(2, '0'); |
|||
|
|||
this.countdown = `${minutes}:${seconds}`; |
|||
|
|||
// 如果倒计时结束，自动提交试卷 |
|||
if (remainingMinutes <= 0) { |
|||
this.submitTest(); |
|||
} |
|||
}, |
|||
// 提交试卷 |
|||
submitTest() { |
|||
if (confirm('确定要提交试卷吗？提交后将无法修改答案。')) { |
|||
// 计算得分 |
|||
let score = 0; |
|||
this.questions.forEach(question => { |
|||
if (this.answers[question.id] === question.answer) { |
|||
score++; |
|||
} |
|||
}); |
|||
|
|||
const percentage = (score / this.questions.length) * 100; |
|||
|
|||
// 显示结果 |
|||
alert(`考试结束！\n您的得分：${score}/${this.questions.length} (${percentage.toFixed(1)}%)`); |
|||
|
|||
// 可以在这里添加更详细的结果分析 |
|||
// 例如，显示错题、推荐学习内容等 |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 初始化当前时间和倒计时 |
|||
this.updateCurrentTime(); |
|||
this.updateCountdown(); |
|||
|
|||
// 设置定时器，每秒更新一次时间和倒计时 |
|||
this.timer = setInterval(() => { |
|||
this.updateCurrentTime(); |
|||
this.updateCountdown(); |
|||
}, 1000); |
|||
|
|||
// 初始化选中的选项 |
|||
this.selectedOption = this.answers[this.currentQuestion.id] || ''; |
|||
}, |
|||
beforeDestroy() { |
|||
// 清除定时器 |
|||
if (this.timer) { |
|||
clearInterval(this.timer); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 这里放置之前的所有CSS样式 */ |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|||
background-color: #f5f7fa; |
|||
} |
|||
.home { |
|||
min-height: 100vh; |
|||
width: 100%; |
|||
background-color: #24293c; |
|||
overflow: auto; |
|||
padding: 20px; |
|||
} |
|||
.top { |
|||
background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%); |
|||
color: white; |
|||
padding: 30px; |
|||
margin-bottom: 30px; |
|||
border-radius: 10px; |
|||
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
|||
position: relative; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
} |
|||
.top h1 { |
|||
font-size: 2.2em; |
|||
margin-bottom: 10px; |
|||
background: none; |
|||
} |
|||
.top p { |
|||
font-size: 1.1em; |
|||
opacity: 0.9; |
|||
background: none; |
|||
} |
|||
.block { |
|||
background: rgba(139, 141, 145, 0.7); |
|||
width: 90%; |
|||
height: 10px; |
|||
border-radius: 5px; |
|||
margin: 0 auto 30px; |
|||
overflow: hidden; |
|||
position: relative; |
|||
box-shadow: inset 0 0 10px rgba(0,0,0,0.3); |
|||
} |
|||
.schedule { |
|||
background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%); |
|||
height: 100%; |
|||
width: 15%; |
|||
transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); |
|||
position: relative; |
|||
} |
|||
.content { |
|||
float: left; |
|||
width: calc(65% - 20px); |
|||
border: #183954 solid 2px; |
|||
border-radius: 10px; |
|||
color: #f1f5f9; |
|||
padding: 20px 40px 50px; |
|||
margin-right: 20px; |
|||
background-color: #2a3147; |
|||
} |
|||
.question-block { |
|||
border: #183954 solid 2px; |
|||
border-radius: 10px; |
|||
padding: 20px 40px; |
|||
margin-bottom: 30px; |
|||
background-color: #2f374d; |
|||
} |
|||
.question { |
|||
font-size: 1.3em; |
|||
line-height: 1.8; |
|||
margin-bottom: 25px; |
|||
color: #f1f5f9; |
|||
font-weight: 500; |
|||
} |
|||
.options { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
} |
|||
.option { |
|||
border: #183954 solid 2px; |
|||
border-radius: 10px; |
|||
padding: 12px 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
background-color: #374151; |
|||
} |
|||
.option:hover { |
|||
border-color: #3b82f6; |
|||
background-color: #4b5563; |
|||
} |
|||
.option input { |
|||
margin-right: 15px; |
|||
width: 18px; |
|||
height: 18px; |
|||
accent-color: #3b82f6; |
|||
} |
|||
.option .label { |
|||
font-size: 1.1em; |
|||
color: #e5e7eb; |
|||
} |
|||
.option.selected { |
|||
border-color: #3b82f6; |
|||
background-color: rgba(59, 130, 246, 0.2); |
|||
} |
|||
.right { |
|||
float: right; |
|||
width: calc(35% - 20px); |
|||
border: #183954 solid 2px; |
|||
border-radius: 10px; |
|||
color: #f1f5f9; |
|||
padding: 20px; |
|||
background-color: #2a3147; |
|||
} |
|||
.time-module, .question-nav, .statistics { |
|||
border: #183954 solid 2px; |
|||
border-radius: 10px; |
|||
padding: 15px; |
|||
margin-bottom: 20px; |
|||
background-color: #2f374d; |
|||
} |
|||
.time-module h3, .question-nav h3, .statistics h3 { |
|||
margin-bottom: 15px; |
|||
color: #f1f5f9; |
|||
font-size: 1.2em; |
|||
border-bottom: 1px solid #374151; |
|||
padding-bottom: 10px; |
|||
} |
|||
.current-time { |
|||
font-size: 1.8em; |
|||
font-weight: bold; |
|||
color: #3b82f6; |
|||
text-align: center; |
|||
margin-bottom: 10px; |
|||
} |
|||
.countdown { |
|||
font-size: 1.5em; |
|||
color: #f59e0b; |
|||
text-align: center; |
|||
} |
|||
.question-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
gap: 10px; |
|||
margin-top: 15px; |
|||
} |
|||
.question-number { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
} |
|||
.question-number.normal { |
|||
background-color: #374151; |
|||
border: 1px solid #4b5563; |
|||
} |
|||
.question-number.answered { |
|||
background-color: #10b981; |
|||
border: 1px solid #059669; |
|||
} |
|||
.question-number.current { |
|||
background-color: #3b82f6; |
|||
border: 1px solid #2563eb; |
|||
transform: scale(1.1); |
|||
} |
|||
.question-number:hover { |
|||
transform: scale(1.1); |
|||
} |
|||
.pagination { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
gap: 10px; |
|||
} |
|||
.pagination-btn { |
|||
padding: 8px 15px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
background-color: #3b82f6; |
|||
color: white; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
} |
|||
.pagination-btn:hover { |
|||
background-color: #2563eb; |
|||
} |
|||
.pagination-btn:disabled { |
|||
background-color: #4b5563; |
|||
cursor: not-allowed; |
|||
} |
|||
.nav-buttons { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 30px; |
|||
} |
|||
.nav-btn { |
|||
padding: 10px 20px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
background-color: #3b82f6; |
|||
color: white; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 5px; |
|||
} |
|||
.nav-btn:hover { |
|||
background-color: #2563eb; |
|||
} |
|||
.nav-btn.prev { |
|||
background-color: #4b5563; |
|||
} |
|||
.nav-btn.prev:hover { |
|||
background-color: #374151; |
|||
} |
|||
.nav-btn:disabled { |
|||
background-color: #4b5563; |
|||
cursor: not-allowed; |
|||
} |
|||
.statistics-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 10px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #374151; |
|||
} |
|||
.statistics-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
.statistics-label { |
|||
color: #e5e7eb; |
|||
} |
|||
.statistics-value { |
|||
font-weight: bold; |
|||
color: #3b82f6; |
|||
} |
|||
.submit-btn { |
|||
width: 100%; |
|||
padding: 15px; |
|||
border-radius: 10px; |
|||
border: none; |
|||
background-color: #10b981; |
|||
color: white; |
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
margin-top: 20px; |
|||
} |
|||
.submit-btn:hover { |
|||
background-color: #059669; |
|||
} |
|||
.clearfix::after { |
|||
content: ""; |
|||
clear: both; |
|||
display: table; |
|||
} |
|||
@media (max-width: 1200px) { |
|||
.content, .right { |
|||
float: none; |
|||
width: 100%; |
|||
margin-right: 0; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
@media (max-width: 768px) { |
|||
.content { |
|||
padding: 15px 20px 30px; |
|||
} |
|||
.question-block { |
|||
padding: 15px 20px; |
|||
} |
|||
.question { |
|||
font-size: 1.1em; |
|||
} |
|||
.option .label { |
|||
font-size: 1em; |
|||
} |
|||
.question-grid { |
|||
grid-template-columns: repeat(5, 1fr); |
|||
} |
|||
.question-number { |
|||
width: 35px; |
|||
height: 35px; |
|||
font-size: 0.9em; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue