Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
X
x-learn
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
x-learn
Commits
ca9593f5
提交
ca9593f5
authored
10月 19, 2021
作者:
王鹏飞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update
上级
15e9912f
隐藏空白字符变更
内嵌
并排
正在显示
3 个修改的文件
包含
118 行增加
和
41 行删除
+118
-41
examCard.vue
src/components/exam/examCard.vue
+31
-24
questionList.vue
src/components/exam/questionList.vue
+40
-2
questionListItem.vue
src/components/exam/questionListItem.vue
+47
-15
没有找到文件。
src/components/exam/examCard.vue
浏览文件 @
ca9593f5
...
...
@@ -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
:
100
vh
;
// background: #f9f9f9;
.head
{
border-bottom
:
1px
solid
#ccc
;
...
...
@@ -139,6 +145,7 @@ export default {
}
}
.exam-main
{
flex
:
1
;
display
:
flex
;
.left
{
background
:
#fff
;
...
...
src/components/exam/questionList.vue
浏览文件 @
ca9593f5
<
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
>
src/components/exam/questionListItem.vue
浏览文件 @
ca9593f5
<
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=
"q
uestion
-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=
"q
uestion-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=
"q
uestion
-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=
"q
uestion-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
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论