wuguanghui
2 weeks ago
5 changed files with 436 additions and 3 deletions
-
BIN吴光慧学习笔记/11.6/11.6学习总结-吴光慧.docx
-
0吴光慧学习笔记/11.6/GuPiao.vue
-
BIN吴光慧学习笔记/11.6/道氏理论定义及基本观点2.docx
-
5吴光慧学习笔记/hello_vue3/src/App.vue
-
434吴光慧学习笔记/hello_vue3/src/components/GuPiao.vue
@ -1,10 +1,9 @@ |
|||||
<template> |
<template> |
||||
<Count/> |
|
||||
<br> |
|
||||
<LoveTalk/> |
|
||||
|
<GuPiao/> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts" name="App"> |
<script setup lang="ts" name="App"> |
||||
import Count from './components/Count.vue' |
import Count from './components/Count.vue' |
||||
import LoveTalk from './components/LoveTalk.vue' |
import LoveTalk from './components/LoveTalk.vue' |
||||
|
import GuPiao from './components/GuPiao.vue'; |
||||
</script> |
</script> |
||||
@ -0,0 +1,434 @@ |
|||||
|
<template> |
||||
|
<div class="exam-system"> |
||||
|
<!-- 头部标题 --> |
||||
|
<header class="header"> |
||||
|
<div class="logo"> |
||||
|
<span class="icon">📋</span> |
||||
|
<span class="title">股票知识评测系统</span> |
||||
|
</div> |
||||
|
<div class="subtitle">全方面评估您股票知识水平，还能个性化学习建议</div> |
||||
|
</header> |
||||
|
|
||||
|
<div class="main-content"> |
||||
|
<!-- 左侧题目区域 --> |
||||
|
<div class="left-panel"> |
||||
|
<!-- 题目显示区 --> |
||||
|
<div class="question-area"> |
||||
|
<div class="question-header"> |
||||
|
<input type="text" v-model="searchText" placeholder="搜索题目..." class="search-input" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="question-content"> |
||||
|
<h3 class="question-title">{{ currentQuestion.title }}</h3> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div |
||||
|
v-for="option in currentQuestion.options" |
||||
|
:key="option.key" |
||||
|
class="option-item" |
||||
|
:class="{ 'selected': selectedAnswer === option.key }" |
||||
|
@click="selectAnswer(option.key)" |
||||
|
> |
||||
|
<span class="radio-btn" :class="{ 'checked': selectedAnswer === option.key }"></span> |
||||
|
<span class="option-label">{{ option.key }}. {{ option.text }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 答题卡预览区 --> |
||||
|
<div class="answer-preview"> |
||||
|
<div class="preview-content"> |
||||
|
<!-- 可以显示答题进度或其他信息 --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部按钮 --> |
||||
|
<div class="bottom-actions"> |
||||
|
<button class="btn btn-secondary" @click="submitExam">提交</button> |
||||
|
<button class="btn btn-primary" @click="previousQuestion">← 上一题</button> |
||||
|
<button class="btn btn-primary" @click="nextQuestion">下一题 →</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 右侧答题卡 --> |
||||
|
<div class="right-panel"> |
||||
|
<div class="answer-card"> |
||||
|
<div class="card-header"> |
||||
|
<span class="folder-icon">📁</span> |
||||
|
<span class="card-title">试题导航</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-grid"> |
||||
|
<div |
||||
|
v-for="(item, index) in totalQuestions" |
||||
|
:key="index" |
||||
|
class="grid-item" |
||||
|
:class="getQuestionStatus(index)" |
||||
|
@click="jumpToQuestion(index)" |
||||
|
> |
||||
|
{{ index + 1 }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, computed } from 'vue' |
||||
|
|
||||
|
// 搜索文本 |
||||
|
const searchText = ref('') |
||||
|
|
||||
|
// 当前题目索引 |
||||
|
const currentQuestionIndex = ref(0) |
||||
|
|
||||
|
// 用户答案记录 |
||||
|
const userAnswers = ref({}) |
||||
|
|
||||
|
// 选中的答案 |
||||
|
const selectedAnswer = ref('') |
||||
|
|
||||
|
// 总题目数 |
||||
|
const totalQuestions = ref(25) |
||||
|
|
||||
|
// 题目数据（示例） |
||||
|
const questions = ref([ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: '以下哪个不属于股票的基本特征？', |
||||
|
options: [ |
||||
|
{ key: 'A', text: '收益性' }, |
||||
|
{ key: 'B', text: '风险性' }, |
||||
|
{ key: 'C', text: '流动性' }, |
||||
|
{ key: 'D', text: '确定性' } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: '股票市场的主要功能是什么？', |
||||
|
options: [ |
||||
|
{ key: 'A', text: '资金融通' }, |
||||
|
{ key: 'B', text: '价格发现' }, |
||||
|
{ key: 'C', text: '资源配置' }, |
||||
|
{ key: 'D', text: '以上都是' } |
||||
|
] |
||||
|
} |
||||
|
// 可以添加更多题目... |
||||
|
]) |
||||
|
|
||||
|
// 当前题目 |
||||
|
const currentQuestion = computed(() => { |
||||
|
return questions.value[currentQuestionIndex.value] || questions.value[0] |
||||
|
}) |
||||
|
|
||||
|
// 选择答案 |
||||
|
const selectAnswer = (answer) => { |
||||
|
selectedAnswer.value = answer |
||||
|
userAnswers.value[currentQuestionIndex.value] = answer |
||||
|
} |
||||
|
|
||||
|
// 上一题 |
||||
|
const previousQuestion = () => { |
||||
|
if (currentQuestionIndex.value > 0) { |
||||
|
currentQuestionIndex.value-- |
||||
|
selectedAnswer.value = userAnswers.value[currentQuestionIndex.value] || '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 下一题 |
||||
|
const nextQuestion = () => { |
||||
|
if (currentQuestionIndex.value < questions.value.length - 1) { |
||||
|
currentQuestionIndex.value++ |
||||
|
selectedAnswer.value = userAnswers.value[currentQuestionIndex.value] || '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 跳转到指定题目 |
||||
|
const jumpToQuestion = (index) => { |
||||
|
currentQuestionIndex.value = index |
||||
|
selectedAnswer.value = userAnswers.value[index] || '' |
||||
|
} |
||||
|
|
||||
|
// 获取题目状态 |
||||
|
const getQuestionStatus = (index) => { |
||||
|
if (index === currentQuestionIndex.value) { |
||||
|
return 'current' |
||||
|
} |
||||
|
if (userAnswers.value[index]) { |
||||
|
return 'answered' |
||||
|
} |
||||
|
return '' |
||||
|
} |
||||
|
|
||||
|
// 提交考试 |
||||
|
const submitExam = () => { |
||||
|
const answeredCount = Object.keys(userAnswers.value).length |
||||
|
if (answeredCount < questions.value.length) { |
||||
|
if (confirm(`您还有 ${questions.value.length - answeredCount} 道题未作答，确定要提交吗？`)) { |
||||
|
// 提交逻辑 |
||||
|
console.log('提交答案：', userAnswers.value) |
||||
|
} |
||||
|
} else { |
||||
|
// 提交逻辑 |
||||
|
console.log('提交答案：', userAnswers.value) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.exam-system { |
||||
|
min-height: 100vh; |
||||
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); |
||||
|
color: #fff; |
||||
|
font-family: 'Microsoft YaHei', Arial, sans-serif; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
padding: 20px 40px; |
||||
|
background: rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px; |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
color: rgba(255, 255, 255, 0.8); |
||||
|
font-size: 14px; |
||||
|
margin-left: 38px; |
||||
|
} |
||||
|
|
||||
|
.main-content { |
||||
|
display: flex; |
||||
|
gap: 20px; |
||||
|
padding: 20px 40px; |
||||
|
max-width: 1400px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.left-panel { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
.question-area { |
||||
|
background: rgba(20, 40, 80, 0.6); |
||||
|
border: 1px solid rgba(100, 150, 200, 0.3); |
||||
|
border-radius: 8px; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.question-header { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
width: 100%; |
||||
|
padding: 10px 15px; |
||||
|
background: rgba(0, 0, 0, 0.3); |
||||
|
border: 1px solid rgba(100, 150, 200, 0.3); |
||||
|
border-radius: 4px; |
||||
|
color: #fff; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.search-input::placeholder { |
||||
|
color: rgba(255, 255, 255, 0.4); |
||||
|
} |
||||
|
|
||||
|
.question-content { |
||||
|
padding: 20px 0; |
||||
|
} |
||||
|
|
||||
|
.question-title { |
||||
|
color: rgba(255, 255, 255, 0.6); |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 20px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
.options { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.option-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
padding: 12px 15px; |
||||
|
background: rgba(0, 0, 0, 0.2); |
||||
|
border: 1px solid rgba(100, 150, 200, 0.3); |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
} |
||||
|
|
||||
|
.option-item:hover { |
||||
|
background: rgba(100, 150, 200, 0.2); |
||||
|
border-color: rgba(100, 150, 200, 0.5); |
||||
|
} |
||||
|
|
||||
|
.option-item.selected { |
||||
|
background: rgba(220, 80, 80, 0.3); |
||||
|
border-color: rgba(220, 80, 80, 0.6); |
||||
|
} |
||||
|
|
||||
|
.radio-btn { |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
border: 2px solid rgba(255, 255, 255, 0.5); |
||||
|
border-radius: 50%; |
||||
|
display: inline-block; |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.radio-btn.checked { |
||||
|
border-color: #e74c3c; |
||||
|
background: #e74c3c; |
||||
|
} |
||||
|
|
||||
|
.radio-btn.checked::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
background: #fff; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.option-label { |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
|
||||
|
.answer-preview { |
||||
|
background: rgba(20, 40, 80, 0.6); |
||||
|
border: 1px solid rgba(100, 150, 200, 0.3); |
||||
|
border-radius: 8px; |
||||
|
padding: 20px; |
||||
|
min-height: 150px; |
||||
|
} |
||||
|
|
||||
|
.bottom-actions { |
||||
|
display: flex; |
||||
|
gap: 15px; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
padding: 12px 30px; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.btn-primary { |
||||
|
background: rgba(60, 120, 180, 0.8); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.btn-primary:hover { |
||||
|
background: rgba(60, 120, 180, 1); |
||||
|
} |
||||
|
|
||||
|
.btn-secondary { |
||||
|
background: rgba(60, 120, 180, 0.8); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.btn-secondary:hover { |
||||
|
background: rgba(70, 130, 190, 1); |
||||
|
} |
||||
|
|
||||
|
.right-panel { |
||||
|
width: 280px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.answer-card { |
||||
|
background: rgba(20, 40, 80, 0.6); |
||||
|
border: 1px solid rgba(100, 150, 200, 0.3); |
||||
|
border-radius: 8px; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
margin-bottom: 20px; |
||||
|
padding-bottom: 15px; |
||||
|
border-bottom: 1px solid rgba(100, 150, 200, 0.2); |
||||
|
} |
||||
|
|
||||
|
.folder-icon { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
color: #6db3f2; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.card-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(5, 1fr); |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.grid-item { |
||||
|
aspect-ratio: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: rgba(60, 120, 180, 0.6); |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.grid-item:hover { |
||||
|
background: rgba(60, 120, 180, 0.8); |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
|
||||
|
.grid-item.current { |
||||
|
background: #3498db; |
||||
|
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5); |
||||
|
} |
||||
|
|
||||
|
.grid-item.answered { |
||||
|
background: rgba(60, 120, 180, 0.8); |
||||
|
} |
||||
|
|
||||
|
.grid-item:nth-child(1) { |
||||
|
background: #e74c3c; |
||||
|
} |
||||
|
|
||||
|
.grid-item:nth-child(2) { |
||||
|
background: #27ae60; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue