731 lines
19 KiB
Vue
731 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<div class="content">
|
||
<div class="top-content">
|
||
<div class="top-wrapper">
|
||
<div class="all" :class="{ isAllActive: isActive !== 1 }" @click="handleTab(1)">全部</div>
|
||
<div :class="{ isTopActive: isActive == 2 }" @click="handleTab(2)">正确（{{ rightCount }}）</div>
|
||
<div :class="{ isTopActive: isActive == 3 }" @click="handleTab(3)">错误（{{ wrongCount }}）</div>
|
||
<div :class="{ isTopActive: isActive == 4 }" @click="handleTab(4)">未答（{{ unAnsweredCount }}）</div>
|
||
<div>
|
||
第
|
||
<span style="color: #1989fa">{{ currentIndex + 1 }}</span>
|
||
/{{ list.length }}题
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-wrapper">
|
||
<div class="answer-wrapper">
|
||
<div
|
||
class="item-wrapper"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
v-show="item.isShow"
|
||
@click="handleQuestionNumber(item, index)"
|
||
>
|
||
<div
|
||
class="answer-item"
|
||
:class="{ currentBg: currentIndex == index, rightBg: item.isRight, wrongBg: item.isWrong }"
|
||
>
|
||
{{ index + 1 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="unfold" @click="handleUnfold">
|
||
{{ isRotating ? '收起' : '展开' }}
|
||
<u-icon v-if="!this.isRotating" name="arrow-down-fill" size="10" />
|
||
<u-icon v-else name="arrow-up-fill" size="10" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 题目 -->
|
||
<div class="question-wrapper" v-for="(item, index) in list" :key="index" v-show="index == currentIndex">
|
||
<div class="question-type-wrapper">
|
||
<div class="line" />
|
||
<div class="question-type">
|
||
<div v-if="item.type == 1">单选题（{{ item.score }}分）</div>
|
||
<div v-if="item.type == 2">多选题（{{ item.score }}分）</div>
|
||
<div v-if="item.type == 3">判断题（{{ item.score }}分）</div>
|
||
</div>
|
||
</div>
|
||
<div class="question">{{ currentIndex + 1 }}. {{ item.question }}</div>
|
||
|
||
<div class="options">
|
||
<div
|
||
class="option"
|
||
v-for="(option, optionIndex) in item.options"
|
||
:key="optionIndex"
|
||
:class="{ isRight: option.isRight, isError: option.isError }"
|
||
>
|
||
<div class="option-item">{{ option.value }}.</div>
|
||
<div class="option-content">
|
||
<div>{{ option.label }}</div>
|
||
<u-icon v-if="option.isRight" name="/static/images/correct.png" />
|
||
<u-icon v-if="option.isError" name="/static/images/error.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-for="(item, index) in list" v-show="index == currentIndex" style="margin-top: 30px; font-size: 12px">
|
||
<div v-if="item.isRight" style="color: #48d66b">回答正确</div>
|
||
<div v-else-if="item.isWrong" style="color: #fa4f19">回答错误</div>
|
||
<div v-else-if="item.isUnAnswered" style="color: #656565">未选择</div>
|
||
|
||
<div class="select-wrapper">
|
||
<div class="select-item">
|
||
<div>正确选择</div>
|
||
<div v-if="item.type == 1 || item.type == 3" style="color: #48d66b">{{ item.rightAnswer }}</div>
|
||
<div v-else style="color: #48d66b">{{ item.rightAnswer.join(', ') }}</div>
|
||
</div>
|
||
<div class="select-item" v-show="!item.isUnAnswered">
|
||
<div>你的选择</div>
|
||
<div v-if="item.type == 1 || item.type == 3" :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }">
|
||
{{ item.userAnswer }}
|
||
</div>
|
||
<div v-else :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }">{{ item.userAnswer.join(', ') }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analysis"><u-icon name="/static/images/解析.png" style="margin-right: 5px;" />解析</div>
|
||
<div class="analysis-item">{{ item.analysis }}</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isActive: 1,
|
||
isRotating: false,
|
||
currentIndex: 0,
|
||
// 正确
|
||
rightCount: 0,
|
||
// 错误
|
||
wrongCount: 0,
|
||
// 未答
|
||
unAnsweredCount: 0,
|
||
// 问题列表
|
||
questionList: [
|
||
{
|
||
type: 1,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'B',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 2,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: ['B', 'D'],
|
||
userAnswer: ['B', 'C'],
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 3,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '对',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '错',
|
||
value: 'B'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'A',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 1,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'A',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 2,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: ['B', 'D'],
|
||
userAnswer: ['B', 'C'],
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 2,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: ['B', 'D'],
|
||
userAnswer: ['B', 'D'],
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 3,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '对',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '错',
|
||
value: 'B'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'A',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 1,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'B',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 2,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: ['B', 'D'],
|
||
userAnswer: ['B', 'C'],
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 3,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '对',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '错',
|
||
value: 'B'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'A',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 1,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'B',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 2,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '正常工作电压作用下的电气设备',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'B'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'C'
|
||
},
|
||
{
|
||
label: '电气设备的绝缘电阻',
|
||
value: 'D'
|
||
}
|
||
],
|
||
rightAnswer: ['B', 'D'],
|
||
userAnswer: ['B', 'C'],
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 3,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '对',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '错',
|
||
value: 'B'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: 'A',
|
||
analysis: '解析'
|
||
},
|
||
{
|
||
type: 3,
|
||
question: '送配电线路架设工模拟考试',
|
||
options: [
|
||
{
|
||
label: '对',
|
||
value: 'A'
|
||
},
|
||
{
|
||
label: '错',
|
||
value: 'B'
|
||
}
|
||
],
|
||
rightAnswer: 'A',
|
||
userAnswer: '',
|
||
analysis: '解析'
|
||
}
|
||
],
|
||
// 正确列表
|
||
rightList: [],
|
||
// 错误列表
|
||
wrongList: [],
|
||
// 未答列表
|
||
unAnsweredList: [],
|
||
list: []
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
this.list = this.questionList
|
||
this.list.forEach((item, index) => {
|
||
if (index < 7) {
|
||
item.isShow = true
|
||
} else {
|
||
item.isShow = false
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.questionList.forEach((item, index) => {
|
||
if (item.type === 1 || item.type === 3) {
|
||
if (!item.userAnswer) {
|
||
this.unAnsweredCount++
|
||
item.isUnAnswered = true
|
||
// 添加正确背景色
|
||
item.options.forEach(option => {
|
||
option.isRight = option.value === item.rightAnswer
|
||
})
|
||
} else {
|
||
if (item.rightAnswer === item.userAnswer) {
|
||
this.rightCount++
|
||
// 添加正确背景色
|
||
item.isRight = true
|
||
item.options.forEach(option => {
|
||
option.isRight = option.value === item.rightAnswer
|
||
})
|
||
} else {
|
||
this.wrongCount++
|
||
// 添加错误背景色
|
||
item.isWrong = true
|
||
item.options.forEach(option => {
|
||
option.isError = option.value === item.userAnswer
|
||
if (option.value === item.rightAnswer) {
|
||
option.isRight = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
if (!item.userAnswer) {
|
||
this.unAnsweredCount++
|
||
item.isUnAnswered = true
|
||
// 添加正确背景色
|
||
item.options.forEach(option => {
|
||
option.isRight = item.rightAnswer.includes(option.value)
|
||
})
|
||
} else {
|
||
if (item.rightAnswer.toString() === item.userAnswer.toString()) {
|
||
this.rightCount++
|
||
// 添加正确背景色
|
||
item.isRight = true
|
||
} else {
|
||
this.wrongCount++
|
||
// 添加错误背景色
|
||
item.isWrong = true
|
||
}
|
||
}
|
||
// 对比用户答案和正确答案 ,如果用户当前选项与正确答案相同则添加正确背景色, 不同则添加错误背景色, 并将正确答案添加正确背景色, 需要确保每个选项只有一种状态背景色
|
||
item.options.forEach(option => {
|
||
if (item.rightAnswer.includes(option.value)) {
|
||
option.isRight = true
|
||
}
|
||
if (item.userAnswer.includes(option.value)) {
|
||
option.isError = true
|
||
}
|
||
if (option.isRight && option.isError) {
|
||
option.isError = false
|
||
}
|
||
})
|
||
}
|
||
})
|
||
this.rightList = this.questionList.filter(item => item.isRight)
|
||
this.wrongList = this.questionList.filter(item => item.isWrong)
|
||
this.unAnsweredList = this.questionList.filter(item => item.isUnAnswered)
|
||
},
|
||
handleTab(index) {
|
||
console.log('🚀 ~ handleTab ~ index:', index)
|
||
this.isActive = index
|
||
this.currentIndex = 0
|
||
if (index === 1) {
|
||
this.list = this.questionList
|
||
} else if (index === 2) {
|
||
this.list = this.rightList
|
||
} else if (index === 3) {
|
||
this.list = this.wrongList
|
||
} else if (index === 4) {
|
||
this.list = this.unAnsweredList
|
||
}
|
||
this.list.forEach((item, index) => {
|
||
if (index < 7) {
|
||
item.isShow = true
|
||
} else {
|
||
item.isShow = false
|
||
}
|
||
})
|
||
},
|
||
handleUnfold() {
|
||
this.isRotating = !this.isRotating
|
||
this.list.forEach((item, index) => {
|
||
if (index >= 7) {
|
||
item.isShow = this.isRotating
|
||
}
|
||
})
|
||
},
|
||
handleQuestionNumber(item, index) {
|
||
this.currentIndex = index
|
||
this.list.forEach(element => {
|
||
element.isActive = false
|
||
})
|
||
item.isActive = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 10px;
|
||
|
||
.top-content {
|
||
background: #fff;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.top-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: #333;
|
||
.isTopActive {
|
||
color: #1989fa;
|
||
}
|
||
.all {
|
||
box-sizing: border-box;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #1989fa;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
&.isAllActive {
|
||
background: #fff;
|
||
color: #333;
|
||
border: 1px solid #1989fa;
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.unfold {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.answer-wrapper {
|
||
width: 86%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.item-wrapper {
|
||
padding: 5px 5px 0 0;
|
||
width: 12%;
|
||
height: 45px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.answer-item {
|
||
width: 33px;
|
||
height: 33px;
|
||
line-height: 33px;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
background: #f4f9fe;
|
||
color: #333;
|
||
}
|
||
// 正确背景色
|
||
.rightBg {
|
||
background: #eaf8ed;
|
||
}
|
||
// 错误背景色
|
||
.wrongBg {
|
||
background: #fcefe9;
|
||
}
|
||
.currentBg {
|
||
background: #1989fa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.question-wrapper {
|
||
.question-type-wrapper {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.line {
|
||
width: 2px;
|
||
height: 11px;
|
||
background: #1989fa;
|
||
margin-right: 3px;
|
||
}
|
||
.question-type {
|
||
color: #8a8a8a;
|
||
}
|
||
}
|
||
|
||
.question {
|
||
font-weight: 800;
|
||
font-size: 15px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.options {
|
||
margin-top: 10px;
|
||
.option {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
background: #f4f9fe;
|
||
border-radius: 5px;
|
||
|
||
&.isRight {
|
||
background: #eaf8ed;
|
||
}
|
||
&.isError {
|
||
background: #fcefe9;
|
||
}
|
||
.option-item {
|
||
width: 33px;
|
||
height: 33px;
|
||
line-height: 33px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
.option-content {
|
||
width: calc(100% - 60px);
|
||
margin-left: 10px;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
.select-item {
|
||
width: 48%;
|
||
height: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #646464;
|
||
background: #edf2f7;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
|
||
.analysis {
|
||
margin: 10px 0;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 800;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
.analysis-item {
|
||
height: 100px;
|
||
background: #edf2f7;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
color: #656565;
|
||
}
|
||
}
|
||
</style>
|