master
parent
6f2d6fbe95
commit
5c7300e1b2
15 changed files with 570 additions and 147 deletions
@ -0,0 +1,263 @@ |
|||||||
|
<template> |
||||||
|
<div class="box"> |
||||||
|
<h1 class="title">{{paperName }}</h1> |
||||||
|
<div class="metas"> |
||||||
|
<div style="margin-right: 20px;"> |
||||||
|
<span class="name">总分：</span> |
||||||
|
<span class="val">100分</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<span class="name">考试时长：</span> |
||||||
|
<span class="val">{{time}}分钟</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul class="tab"> |
||||||
|
<li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<div class="wrap"> |
||||||
|
<div class="item" v-for="(item,index) in curType" :key="index"> |
||||||
|
<div class="answer"> |
||||||
|
<div class="info"> |
||||||
|
<p class="key">序号：</p> |
||||||
|
<p class="val">{{index+1}}</p> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<p class="key">得分：</p> |
||||||
|
<p class="val">{{item.question_score}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="meta"> |
||||||
|
<p class="key">题干：</p> |
||||||
|
<p class="val" v-html="item.question_stem"></p> |
||||||
|
</div> |
||||||
|
<div class="meta"> |
||||||
|
<p class="key">选项：</p> |
||||||
|
<div class="val"> |
||||||
|
<p v-for="(option,i) in item.options" :key="i">{{i}}.{{item.options[i]}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="meta ans"> |
||||||
|
<div class="info"> |
||||||
|
<p class="key">正确答案：</p> |
||||||
|
<p class="val">{{item.answer}}</p> |
||||||
|
</div> |
||||||
|
<div class="info"> |
||||||
|
<p class="key">学生答案：</p> |
||||||
|
<p class="val">{{item.user_answer}}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="meta"> |
||||||
|
<p class="key">答案解析：</p> |
||||||
|
<p class="val" v-html="item.answer_analysis"></p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import mixins from '@/mixins/setBackground' |
||||||
|
import { mapState } from 'vuex' |
||||||
|
export default { |
||||||
|
mixins: [ mixins ], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
paperName: '', |
||||||
|
time: 0, |
||||||
|
selectVisible: false, |
||||||
|
tabs: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '单选题' |
||||||
|
},{ |
||||||
|
id: 2, |
||||||
|
name: '多选题' |
||||||
|
},{ |
||||||
|
id: 3, |
||||||
|
name: '填空题' |
||||||
|
},{ |
||||||
|
id: 4, |
||||||
|
name: '判断题' |
||||||
|
},{ |
||||||
|
id: 5, |
||||||
|
name: '简答题' |
||||||
|
} |
||||||
|
], |
||||||
|
active: 1, |
||||||
|
curType: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('user', [ |
||||||
|
'userId' |
||||||
|
]), |
||||||
|
...mapState('exam', [ |
||||||
|
'testPaperId','assessmentId' |
||||||
|
]) |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
this.$post(`${this.api.answerDetail}?userId=${this.userId}&assessmentId=${this.assessmentId}&paperId=${this.testPaperId}`) |
||||||
|
// this.$post(`${this.api.answerDetail}?userId=${1}&assessmentId=${1}&paperId=${1}`) |
||||||
|
.then(res => { |
||||||
|
this.paperName = res.paperName |
||||||
|
this.time = res.time |
||||||
|
this.allData = res.data |
||||||
|
this.curType = this.allData.list1 |
||||||
|
this.handleOptions() |
||||||
|
}) |
||||||
|
.catch(err => {}); |
||||||
|
|
||||||
|
}, |
||||||
|
tabChange(id){ |
||||||
|
this.active = id |
||||||
|
this.curType = this.allData[`list${id}`] |
||||||
|
this.handleOptions() |
||||||
|
}, |
||||||
|
handleOptions(){ |
||||||
|
let curType = this.curType |
||||||
|
curType.forEach(n => { |
||||||
|
if(!n.options){ |
||||||
|
let options = {} |
||||||
|
for(let i in n){ |
||||||
|
if(i.includes('option') && n[i]){ |
||||||
|
console.log(i.replace('option_','')) |
||||||
|
options[i.replace('option_','')] = n[i] |
||||||
|
} |
||||||
|
} |
||||||
|
n.options = options |
||||||
|
} |
||||||
|
}) |
||||||
|
this.curType = curType |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.box{ |
||||||
|
width: 90%; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
text-align: center; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.metas{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin: 20px 0 30px; |
||||||
|
.name{ |
||||||
|
font-size: 12px; |
||||||
|
color: #717171; |
||||||
|
} |
||||||
|
.val{ |
||||||
|
font-size: 12px; |
||||||
|
color: #929292; |
||||||
|
} |
||||||
|
} |
||||||
|
.tab{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
li{ |
||||||
|
position: relative; |
||||||
|
padding: 0 44px; |
||||||
|
margin-right: 7px; |
||||||
|
font-size: 13px; |
||||||
|
line-height: 46px; |
||||||
|
text-align: center; |
||||||
|
color: #444; |
||||||
|
border: 1px solid #ececec; |
||||||
|
cursor: pointer; |
||||||
|
&:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
&.active:after{ |
||||||
|
content: ''; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 4px; |
||||||
|
background-color: #e80909; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.wrap{ |
||||||
|
.item{ |
||||||
|
padding-bottom: 30px; |
||||||
|
margin-bottom: 30px; |
||||||
|
border-bottom: 1px dashed #f4f4f4; |
||||||
|
|
||||||
|
.key{ |
||||||
|
font-weight: bold; |
||||||
|
color: #333; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.val{ |
||||||
|
color: #757575; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.answer{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 15px; |
||||||
|
margin: 15px 0; |
||||||
|
font-size: 12px; |
||||||
|
border: 1px solid #e8e8e8; |
||||||
|
background-color: #f3f2f2; |
||||||
|
.info{ |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
.meta{ |
||||||
|
padding-left: 10px; |
||||||
|
margin: 20px 0; |
||||||
|
font-size: 12px; |
||||||
|
&.ans{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.info{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.key{ |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.btns{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 20px; |
||||||
|
button{ |
||||||
|
height: 30px; |
||||||
|
padding: 0 30px; |
||||||
|
margin: 0 15px; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
line-height: 30px; |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid #ededed; |
||||||
|
border-radius: 4px; |
||||||
|
cursor: pointer; |
||||||
|
&.submit{ |
||||||
|
color: #fff; |
||||||
|
background-color: #e80909; |
||||||
|
border-color: #e80909; |
||||||
|
} |
||||||
|
&:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue