提交 ca9593f5 authored 作者: 王鹏飞's avatar 王鹏飞

update

上级 15e9912f
......@@ -8,9 +8,11 @@
<div class="count">12:00</div>
</div>
</div>
<div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
<div class="exam-main">
<div class="left">
<question-list :data="currentExam"></question-list>
<question-list :data="currentExam">
<template #index>1/100</template>
</question-list>
</div>
<div class="right">
<answer-card></answer-card>
......@@ -54,37 +56,39 @@ export default {
data() {
return {
index: 0,
list: [], // 所有题
contentHeight: 0 // 页面高度
questionList: [] // 所有试题
}
},
computed: {
questionList() {
if (!this.data.questions) {
return []
}
return this.data.questions.question_items.reduce((result, question) => {
question.question_list.forEach(item => {
result.push(Object.assign(question, { question_list: item }))
})
return result
}, [])
},
// 当前页面的大题数据
currentExam() {
return this.questionList[this.index]
}
},
mounted() {
// 赋值页面高度
this.contentHeight = parseInt(
document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight)
)
watch: {
data: {
deep: true,
immediate: true,
handler(value) {
this.genQuestions(value)
}
}
},
methods: {
// 获取dom高
getDom(id) {
return document.getElementById(id)
// 组装试题数据
genQuestions(data) {
const { questions = [], answers } = data
console.log(answers)
if (!questions) return []
this.questionList = questions.question_items.reduce((result, question) => {
question.question_list.forEach(list => {
list = list.map(item => {
return { ...item, user_answer: [] }
})
result.push(Object.assign({}, question, { question_list: list }))
})
return result
}, [])
}
}
}
......@@ -92,8 +96,10 @@ export default {
<style lang="scss" scoped>
.answer-box {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
height: 100vh;
// background: #f9f9f9;
.head {
border-bottom: 1px solid #ccc;
......@@ -139,6 +145,7 @@ export default {
}
}
.exam-main {
flex: 1;
display: flex;
.left {
background: #fff;
......
<template>
<div class="question-list">
<div class="question-list-hd">{{ data.title }}</div>
<div class="question-list-hd">
<h4 class="question-list-hd__title">{{ questionTypeText }}</h4>
<aside class="question-list-hd__aside"><slot name="index"></slot></aside>
</div>
<div class="question-list-bd">
<h2 class="question-list-title" v-if="conmonTitle">{{ conmonTitle }}</h2>
<question-list-item
v-for="(item, index) in data.question_list"
:data="item"
......@@ -18,6 +22,40 @@
import QuestionListItem from './questionListItem.vue'
export default {
props: { data: { type: Object, default: () => ({}) } },
components: { QuestionListItem }
components: { QuestionListItem },
computed: {
// 试题类型
questionTypeText() {
const map = { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
return map[this.data.question_type] || this.data.question_type
},
// 公共题干
conmonTitle() {
const [first = {}] = this.data.question_list
return first.common_content
}
}
}
</script>
<style lang="scss" scoped>
.question-list-hd {
display: flex;
align-items: center;
height: 45px;
}
.question-list-hd__title {
flex: 1;
font-size: 18px;
color: #222;
}
.question-list-hd__aside {
font-size: 18px;
color: #222;
}
.question-list-title {
margin: 20px 0 30px;
font-size: 18px;
color: #222;
}
</style>
<template>
<div class="question-list-item">
<div class="question-list-item-hd">
<div class="question-list-item-num">{{ index + 1 }}.</div>
<div class="question-list-item-title" v-html="data.question_content"></div>
<div class="question-list-item-hd__num">{{ index + 1 }}.</div>
<div class="question-list-item-hd__title" v-html="data.question_content"></div>
</div>
<div class="question-list-item-bd">
<!-- 单选 -->
<template v-if="questionType === 1">
<el-radio-group v-model="checked">
<div class="q-option-item" v-for="item in currentOptions" :key="item.id">
<el-radio-group v-model="data.user_answer[0]">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-radio :label="item.id">
<div class="q-option-item__answer" v-html="item.abc_option"></div>
<div class="question-option-item__text" v-html="item.abc_option"></div>
</el-radio>
</div>
</el-radio-group>
</template>
<!-- 多选 -->
<template v-if="[2, 6].includes(questionType)">
<el-checkbox-group v-model="checkedList">
<div class="q-option-item" v-for="item in currentOptions" :key="item.id">
<el-checkbox-group v-model="data.user_answer">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-checkbox :label="item.id">
<div class="q-option-item__answer" v-html="item.abc_option"></div>
<div class="question-option-item__text" v-html="item.abc_option"></div>
</el-checkbox>
</div>
</el-checkbox-group>
</template>
<!-- 简答题 -->
<template v-if="questionType === 3">
<el-input type="textarea" v-model="text"></el-input>
<el-input type="textarea" v-model="data.user_answer[0]"></el-input>
</template>
</div>
<div class="question-list-item-ft">
......@@ -47,11 +47,7 @@ export default {
question: { type: Object, default: () => ({}) } // 大题
},
data() {
return {
checkedList: [],
checked: '',
text: ''
}
return {}
},
computed: {
questionType() {
......@@ -104,4 +100,40 @@ export default {
}
</script>
<style></style>
<style lang="scss" scoped>
.question-list-item-hd {
display: flex;
}
.question-list-item-hd__num {
font-size: 32px;
font-weight: bold;
color: #222;
line-height: 45px;
margin-top: 5px;
}
.question-list-item-hd__title {
margin-left: 5px;
padding-top: 18px;
font-size: 18px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-option-item {
margin-top: 20px;
}
.question-option-item__text {
display: inline-block;
font-size: 18px;
color: #222;
}
::v-deep .el-radio__inner {
width: 18px;
height: 18px;
}
.question-list-item-ft {
margin-top: 20px;
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论