Skip to content

X
x-learn
提交 c621feba authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

Merge branch 'master' of https://gitlab.ezijing.com/ezijing/x-learn

上级 1740cd8f 7f7eec02
隐藏空白字符变更
内嵌 并排
正在显示 包含 134 行增加 和 87 行删除
src/components/exam/examCard.vue
浏览文件 @ c621feba
......@@ -11,11 +11,16 @@
<div class="exam-main">
<div class="left">
<question-list :data="currentExam" :index="index" :disabled="disabled" :hasResult="hasResult">
<template #index>{{ index + 1 }}/{{ data.questions.total_question_count }}</template>
<template #index>{{ index + 1 }}/{{ questionList.length }}</template>
</question-list>
</div>
<div class="right">
<answer-card></answer-card>
<question-numbers
:index="index"
:list="questionList"
:data="currentExam"
@change="handlePageChange"
></question-numbers>
</div>
</div>
<div class="foot" id="foot-h">
......@@ -44,9 +49,9 @@
<script>
import * as api from '@/api/exam.js'
import questionList from '@/components/exam/questionList'
import answerCard from '@/components/exam/examNumbers'
import questionNumbers from '@/components/exam/questionNumbers'
export default {
components: { questionList, answerCard },
components: { questionList, questionNumbers },
props: {
title: { type: String },
hasMark: { type: Boolean, default: true },
......@@ -130,13 +135,16 @@ export default {
},
// 下一题
nextQuestion() {
const totalNumber = this.data.questions.total_question_count
const totalNumber = this.questionList.length
if (this.index + 1 < totalNumber) this.index++
},
// 上一题
prevQuestion() {
if (this.index !== 0) this.index--
},
handlePageChange(index) {
this.index = index
},
// 收藏试题
collectQuestion() {
const item = this.currentItem
......
src/components/exam/examNumbers.vue → src/components/exam/questionNumbers.vue
浏览文件 @ c621feba
<template>
<div>
<div class="order-num">
<div>
<div class="tit">判断题</div>
<div v-for="item in dataList" :key="item.question_item_id">
<div class="tit">{{ item.title }}</div>
<ul>
<!-- stu1已答 stu2当前 stu3标记 -->
<li class="stu1">1</li>
<li class="stu2">2</li>
<li class="stu3">3</li>
<li
v-for="(item, index) in item.question_list"
:class="genClass(item)"
:key="index"
@click="handleClick(item)"
>
{{ index + 1 }}
</li>
</ul>
</div>
</div>
......@@ -47,37 +52,71 @@
</template>
<script>
export default {
props: {},
mounted() {},
computed: {},
methods: {},
watch: {}
props: {
index: { type: Number, default: 0 },
data: { type: Object, default: () => ({}) },
list: { type: Array, default: () => [] }
},
computed: {
dataList() {
const results = []
this.list.forEach((item, index) => {
const findIndex = results.findIndex(data => data.question_item_id === item.question_item_id)
const quesitonlist = item.question_list.map(item => {
return { ...item, index }
})
if (findIndex === -1) {
results.push({
title: item.title,
question_type: item.question_type,
question_item_id: item.question_item_id,
question_list: quesitonlist
})
} else {
results[findIndex].question_list = results[findIndex].question_list.concat(quesitonlist)
}
})
return results
}
},
methods: {
genClass(data) {
return {
stu1: data.user_answer.length,
stu2: data.index === this.index,
stu3: data.sign
}
},
handleClick(data) {
this.$emit('change', data.index, data)
}
}
}
</script>
<style lang="scss" scoped>
.info{
.info {
display: flex;
align-items: center;
height: 100px;
.shape{
.shape {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
img{
img {
width: 75px;
// transform: scale(1);
display: block;
}
.right{
.right {
margin-left: 22px;
.name{
.name {
font-size: 18px;
color: #222222;
line-height: 25px;
}
.code{
.code {
font-size: 14px;
color: #222222;
line-height: 20px;
......@@ -85,54 +124,54 @@ export default {
}
}
}
.order-num{
.order-num {
padding-top: 20px;
padding-bottom: 90px;
.tit{
.tit {
font-size: 12px;
color: #999999;
line-height: 17px;
margin-bottom: 10px;
}
ul{
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
li{
li {
cursor: pointer;
position: relative;
border-radius: 50px;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
font-size: 14px;
color: #666666;
line-height: 24px;
margin-right: 20px;
margin-bottom: 10px;
text-align: center;
&:nth-child(5n+5){
&:nth-child(5n + 5) {
margin-right: 0;
}
&.analy{
&.stu1{
border: 2px solid #0FC118;
&.analy {
&.stu1 {
border: 2px solid #0fc118;
line-height: 22px;
background: #fff;
color: #999;
}
&.stu2{
border: 2px solid #C01540;
&.stu2 {
border: 2px solid #c01540;
line-height: 22px;
background: #fff;
color: #999;
}
&.stu3{
&.stu3 {
color: #fff;
background: #999999;
&::after{
&::after {
content: '';
position: absolute;
top: -1px;
......@@ -144,208 +183,208 @@ export default {
}
}
}
&.stu1{
&.stu1 {
background: #999;
border: 1px solid #999;
color: #fff;
}
&.stu2{
&.stu2 {
width: 22px;
height: 22px;
line-height: 22px;
border: 2px solid #0FC118;
border: 2px solid #0fc118;
}
&.stu3{
&::after{
&.stu3 {
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
background: #c01540;
border-radius: 50%;
}
}
}
}
}
.flag-tips{
.flag-tips {
width: 260px;
position: fixed;
bottom: 60px;
right:0;
right: 0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
li {
.circle1 {
width: 24px;
height: 24px;
background: #EEEEEE;
border: 1px solid #CCCCCC;
background: #eeeeee;
border: 1px solid #cccccc;
border-radius: 50%;
}
.circle1{
.circle1 {
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
}
.circle2{
.circle2 {
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
}
.circle3{
.circle3 {
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border: 2px solid #0fc118;
border-radius: 50%;
}
.circle4{
.circle4 {
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
&::after{
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
background: #c01540;
border-radius: 50%;
}
}
.txt{
.txt {
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
color: #cccccc;
line-height: 17px;
}
}
}
.flag-tips{
.flag-tips {
width: 260px;
position: fixed;
bottom: 60px;
right:0;
right: 0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
li {
.circle1 {
width: 24px;
height: 24px;
background: #999;
border: 1px solid #999;
border-radius: 50%;
}
.circle2{
.circle2 {
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
}
.circle3{
.circle3 {
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border: 2px solid #0fc118;
background: rgba(15, 193, 24, 0.1);
border-radius: 50%;
}
.circle4{
.circle4 {
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
&::after{
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
background: #c01540;
border-radius: 50%;
}
}
.txt{
.txt {
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
color: #cccccc;
line-height: 17px;
}
}
}
.tips-box{
.tips-box {
width: 260px;
position: fixed;
bottom: 60px;
right:0;
right: 0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
&:nth-child(2){
li {
&:nth-child(2) {
// margin: 0 50px;
}
.circle1{
.circle1 {
width: 24px;
height: 24px;
background: #fff;
border: 2px solid #0FC118;
border: 2px solid #0fc118;
border-radius: 50%;
box-sizing: border-box;
}
.circle2{
.circle2 {
width: 24px;
height: 24px;
border: 2px solid #C01540;
border: 2px solid #c01540;
border-radius: 50%;
box-sizing: border-box;
}
.circle3{
.circle3 {
width: 24px;
height: 24px;
background: #999999;
border-radius: 50%;
}
.circle4{
.circle4 {
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border: 1px solid #cccccc;
border-radius: 50%;
&::after{
&::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
background: #c01540;
border-radius: 50%;
}
}
.txt{
.txt {
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
color: #cccccc;
line-height: 17px;
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论