|
|
|
@ -7,10 +7,14 @@ export default { |
|
|
|
showDialog: false, |
|
|
|
currentPage: 1, |
|
|
|
answers:{}, |
|
|
|
page:1, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed:{ |
|
|
|
currentProblem() { |
|
|
|
if (!this.problems || !this.problems.slice) { |
|
|
|
return null; |
|
|
|
} |
|
|
|
const startIndex = (this.currentPage - 1) * 2; |
|
|
|
return this.problems.slice(startIndex, startIndex + 2); |
|
|
|
}, |
|
|
|
@ -56,6 +60,39 @@ export default { |
|
|
|
getAnswer(id) { |
|
|
|
return this.answers[id]; |
|
|
|
}, |
|
|
|
rightBefore(){ |
|
|
|
this.page=1; |
|
|
|
}, |
|
|
|
rightNext(){ |
|
|
|
this.page=2; |
|
|
|
}, |
|
|
|
toQuestion(index){ |
|
|
|
this.currentPage = Math.ceil(index/2); |
|
|
|
}, |
|
|
|
getOption(problem,option) { |
|
|
|
const userAnswer = problem.userAnswer; |
|
|
|
const correctAnswer = problem.correctAnswer; |
|
|
|
if(userAnswer === option){ |
|
|
|
if(correctAnswer !== option){ |
|
|
|
return 'red'; |
|
|
|
} |
|
|
|
} |
|
|
|
if (correctAnswer === option) { |
|
|
|
return 'green'; |
|
|
|
} |
|
|
|
}, |
|
|
|
getNumber(problem) { |
|
|
|
if (!problem) return; |
|
|
|
const userAnswer = problem.userAnswer; |
|
|
|
const correctAnswer = problem.correctAnswer; |
|
|
|
|
|
|
|
if (correctAnswer !== userAnswer) { |
|
|
|
return 'red'; |
|
|
|
} |
|
|
|
if (correctAnswer === userAnswer) { |
|
|
|
return 'answered'; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
async mounted(){ |
|
|
|
await this.problemAnswers(); |
|
|
|
@ -73,8 +110,7 @@ export default { |
|
|
|
</span> |
|
|
|
<p>全方面评估您的股票投资知识水平，获取个性化学习建议</p> |
|
|
|
</div> |
|
|
|
<div class="popup-all" v-if="showDialog"> |
|
|
|
<div class="popup-top" @click="closeDialog"></div> |
|
|
|
<div class="popup-all popup-background" v-if="showDialog"> |
|
|
|
<div class="popup-content"> |
|
|
|
<h3>确认提示</h3> |
|
|
|
<p>确定返回报告吗？</p> |
|
|
|
@ -85,37 +121,58 @@ export default { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="question-all" v-if="currentProblem.length"> |
|
|
|
<div v-for="problem in currentProblem" :key="problem.id" class="question-card"> |
|
|
|
<div class="block"></div> |
|
|
|
<div class="question-all"> |
|
|
|
<div v-for="problem in currentProblem" :key="problem.id" class="left-question-card"> |
|
|
|
<div class="question"> |
|
|
|
<span class="text">{{problem.question.id}}、</span>{{ problem.question.stem }} |
|
|
|
</div> |
|
|
|
<div class="options"> |
|
|
|
<label class="option" @click="setAnswer(problem.question.id, 'A')" :class="{ 'selected': getAnswer(problem.question.id) === 'A' }"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="A"><span class="label">C. {{ problem.question.A }}</span> |
|
|
|
<label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'A' }, getOption(problem, 'A')]"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="A"><span class="label">A. {{ problem.question.A }}</span> |
|
|
|
</label> |
|
|
|
<label class="option" @click="setAnswer(problem.question.id, 'B')" :class="{ 'selected': getAnswer(problem.question.id) === 'B' }"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="B"><span class="label">D. {{ problem.question.B }}</span> |
|
|
|
<label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'B' }, getOption(problem, 'B')]"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="B"><span class="label">B. {{ problem.question.B }}</span> |
|
|
|
</label> |
|
|
|
<label class="option" @click="setAnswer(problem.question.id, 'C')" :class="{ 'selected': getAnswer(problem.question.id) === 'C' }"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="C"><span class="label">E. {{ problem.question.C }}</span> |
|
|
|
<label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'C' }, getOption(problem, 'C')]"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="C"><span class="label">C. {{ problem.question.C }}</span> |
|
|
|
</label> |
|
|
|
<label class="option" @click="setAnswer(problem.question.id, 'D')" :class="{ 'selected': getAnswer(problem.question.id) === 'D' }"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="D"><span class="label">F. {{ problem.question.D }}</span> |
|
|
|
<label class="option" :class="[{ 'selected': getAnswer(problem.question.id) === 'D' }, getOption(problem, 'D')]"> |
|
|
|
<input type="radio" :name="'answer' + problem.question.id" value="D"><span class="label">D. {{ problem.question.D }}</span> |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="buttons-left"> |
|
|
|
<button class="before-btn" @click="before" > |
|
|
|
<button class="before-btn" @click="before" :disabled="currentPage === 1"> |
|
|
|
← 上一页 |
|
|
|
</button> |
|
|
|
<span class="page">第 {{ currentPage }} 页 / 共 25 页</span> |
|
|
|
<button class="next-btn" @click="next" > |
|
|
|
<button class="next-btn" @click="next" :disabled="currentPage === 25"> |
|
|
|
下一页 → |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<h3>📝 题目导航</h3> |
|
|
|
<div class="right-question-card" v-show="page===1"> |
|
|
|
<div class="question-number normal" v-for="i in 25" :key="i" @click="toQuestion(i)" :class="getNumber(problems[i - 1])"> |
|
|
|
<span class="question-text">{{ i }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right-question-card" v-show="page===2"> |
|
|
|
<div class="question-number normal" v-for="i in 25" :key="i+25" @click="toQuestion(i+25)" :class="getNumber(problems[i + 24])"> |
|
|
|
<span class="question-text">{{ i+25 }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="button-right"> |
|
|
|
<button class="right-before-btn" @click="rightBefore">上一页</button> |
|
|
|
<button class="right-next-btn" @click="rightNext">下一页</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="button-right-bottom"> |
|
|
|
<button class="right-bottom-btn" @click="jump">退出</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -146,9 +203,9 @@ export default { |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
.img1{ |
|
|
|
width: 30px; |
|
|
|
height: 50px; |
|
|
|
float: left; |
|
|
|
width: 30px; |
|
|
|
height: 50px; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
h1{ |
|
|
|
margin-bottom: 10px; |
|
|
|
@ -171,7 +228,7 @@ p{ |
|
|
|
align-items: center; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
.popup-top{ |
|
|
|
.popup-background{ |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
@ -182,48 +239,66 @@ p{ |
|
|
|
} |
|
|
|
.popup-content{ |
|
|
|
background-color: #f1f5f9; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.3); |
|
|
|
padding: 30px; |
|
|
|
border-radius: 15px; |
|
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.3); |
|
|
|
width: 90%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.popup-buttons{ |
|
|
|
margin-top: 20px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
.cancel-btn{ |
|
|
|
background-color: #f1f5f9; |
|
|
|
color: #24293c; |
|
|
|
.cancel-btn,.confirm-btn{ |
|
|
|
border-radius: 10px; |
|
|
|
border: transparent 0px ; |
|
|
|
margin: 5px; |
|
|
|
padding: 5px 10px; |
|
|
|
padding: 12px 30px; |
|
|
|
font-size: 1em; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.cancel-btn{ |
|
|
|
background: #f1f1f1; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
.confirm-btn{ |
|
|
|
background-color: #22608b; |
|
|
|
color: #f1f5f9; |
|
|
|
border-radius: 10px; |
|
|
|
border: transparent 0px ; |
|
|
|
margin: 5px; |
|
|
|
padding: 5px 10px; |
|
|
|
background: #ff4757; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.content { |
|
|
|
float: left; |
|
|
|
width: calc(65% - 20px); |
|
|
|
min-height: 920px; |
|
|
|
border: #274779 solid 2px; |
|
|
|
border-radius: 10px; |
|
|
|
color: #f1f5f9; |
|
|
|
padding: 20px 40px 50px; |
|
|
|
margin-right: 20px; |
|
|
|
background-color: #2a3147; |
|
|
|
float: left; |
|
|
|
width: calc(65% - 20px); |
|
|
|
min-height: 920px; |
|
|
|
border: #274779 solid 2px; |
|
|
|
border-radius: 10px; |
|
|
|
color: #f1f5f9; |
|
|
|
padding: 20px 40px 50px; |
|
|
|
margin-right: 20px; |
|
|
|
background-color: #2a3147; |
|
|
|
} |
|
|
|
.block { |
|
|
|
background: #38bdf8; |
|
|
|
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); |
|
|
|
} |
|
|
|
.question-all{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 30px; |
|
|
|
} |
|
|
|
.question{ |
|
|
|
.left-question-card{ |
|
|
|
border: #274779 solid 2px; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 20px 40px; |
|
|
|
background-color: #2f374d; |
|
|
|
} |
|
|
|
.question { |
|
|
|
font-size: 1.3em; |
|
|
|
line-height: 1.8; |
|
|
|
margin-bottom: 25px; |
|
|
|
@ -231,48 +306,126 @@ p{ |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
.options { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 15px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
.option { |
|
|
|
border: #183954 solid 2px; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 12px 15px; |
|
|
|
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.red{ |
|
|
|
background-color: #ff4757; |
|
|
|
} |
|
|
|
.option.green{ |
|
|
|
background-color: #10b981; |
|
|
|
} |
|
|
|
.option input { |
|
|
|
margin-right: 15px; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
} |
|
|
|
.option .label { |
|
|
|
font-size: 1.1em; |
|
|
|
color: #e5e7eb; |
|
|
|
} |
|
|
|
.buttons-left{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 30px; |
|
|
|
} |
|
|
|
.before-btn,.next-btn{ |
|
|
|
padding: 10px 20px; |
|
|
|
border-radius: 8px; |
|
|
|
border: none; |
|
|
|
background-color: #3b82f6; |
|
|
|
color: white; |
|
|
|
font-weight: bold; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s ease; |
|
|
|
background-color: #374151; |
|
|
|
gap: 5px; |
|
|
|
} |
|
|
|
.option:hover { |
|
|
|
border-color: #3b82f6; |
|
|
|
.buttons-left:disabled,.next-btn:disabled { |
|
|
|
background-color: #4b5563; |
|
|
|
cursor: not-allowed; |
|
|
|
} |
|
|
|
.option input { |
|
|
|
margin-right: 15px; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
accent-color: #3b82f6; |
|
|
|
.right { |
|
|
|
float: right; |
|
|
|
width: calc(35% - 20px); |
|
|
|
border: #274779 solid 2px; |
|
|
|
border-radius: 30px; |
|
|
|
padding: 15px 0 15px 19px ; |
|
|
|
margin-bottom: 20px; |
|
|
|
background-color: #2f374d; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.option .label { |
|
|
|
font-size: 1.1em; |
|
|
|
color: #e5e7eb; |
|
|
|
.right h3{ |
|
|
|
font-size: xx-large; |
|
|
|
padding-bottom: 15px; |
|
|
|
margin-bottom: 15px; |
|
|
|
border-bottom: 2px solid #274779; |
|
|
|
} |
|
|
|
.option.selected { |
|
|
|
border-color: #3b82f6; |
|
|
|
background-color: rgba(59, 130, 246, 0.2); |
|
|
|
.right-question-card { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
|
gap: 10px; |
|
|
|
margin: auto 30px; |
|
|
|
} |
|
|
|
.buttons-left{ |
|
|
|
text-align: center; |
|
|
|
margin: auto; |
|
|
|
.question-number { |
|
|
|
width: 60px; |
|
|
|
height: 50px; |
|
|
|
border-radius: 8px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-weight: bold; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.before-btn{ |
|
|
|
padding: 12px 30px; |
|
|
|
border: none; |
|
|
|
.right-question-card .question-number.red { |
|
|
|
background-color: #ff4757; |
|
|
|
border: 1px solid #991b1b; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.question-number.normal { |
|
|
|
background-color: #374151; |
|
|
|
border: 1px solid #4b5563; |
|
|
|
color: #e5e7eb; |
|
|
|
} |
|
|
|
|
|
|
|
.button-right{ |
|
|
|
display: flex; |
|
|
|
margin: 30px 200px 5px; |
|
|
|
gap: 20px; |
|
|
|
} |
|
|
|
.right-before-btn,.right-next-btn{ |
|
|
|
padding: 8px 15px; |
|
|
|
border-radius: 8px; |
|
|
|
font-size: 1em; |
|
|
|
border: none; |
|
|
|
background-color: #3b82f6; |
|
|
|
color: white; |
|
|
|
font-weight: bold; |
|
|
|
min-width: 100px; |
|
|
|
cursor: pointer; |
|
|
|
margin: auto 20px; |
|
|
|
} |
|
|
|
.right-bottom-btn{ |
|
|
|
float: right; |
|
|
|
height: 40px; |
|
|
|
width: 100px; |
|
|
|
border-radius: 8px; |
|
|
|
background-color: #3b82f6; |
|
|
|
color: white; |
|
|
|
text-align: center; |
|
|
|
line-height: 40px; |
|
|
|
position:relative; |
|
|
|
top: 350px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
chenzhen
2 months ago