Skip to content

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

fix: 修改考试组件

上级 94c168ff
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 595 行增加 和 8 行删除
src/components/exam/examCard.vue
浏览文件 @ 941a7249
<template> <template>
<div></div> <div>
<div class="answer-box">
<div class="head" id="head-h">
<el-button icon="el-icon-arrow-left" circle @click="$router.back()"></el-button>
<div class="title">{{ params.title }}</div>
<div class="right">
<div class="count">12:00</div>
</div>
</div>
<div class="exam-main" :style="{ height: this.contentHeight + 'px' }">
<div class="left"></div>
<div class="right">
<answer-card> </answer-card>
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div>上一题</div>
<div>下一题</div>
</div>
<div class="rigth-btn">
<div class="sign" v-if="params.collect">
<div class="icon"></div>
<div class="txt">收藏</div>
</div>
<div class="sign2" v-if="params.sign">
<div class="icon"></div>
<div class="txt">标记</div>
</div>
<div class="end-exam-btn">
<div class="btn" v-if="params.submitBtn">交卷</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import answerCard from '@/components/exam/examNumbers'
export default { export default {
components: { answerCard },
props: {
title: { type: String },
hasMark: { type: Boolean, default: true },
hasCollect: { type: Boolean, default: true },
hasSubmitBtn: { type: Boolean, default: true },
data: { type: Object, default: () => {} }
},
data() { data() {
return { return {
list: [], // 所有题 list: [], // 所有题
currentExam: {} // 当前页面的大题数据 currentExam: {}, // 当前页面的大题数据
contentHeight: 0 // 页面高度
}
},
computed: {
questionList() {
if (!this.data.questions) {
return []
}
return this.data.questions.question_items.reduce((result, question) => {
question.question_list = question.question_list.forEach(item => {
result.push(Object.assign(question, { list: item }))
})
return result
}, [])
}
},
mounted() {
// 赋值页面高度
this.contentHeight = parseInt(
document.documentElement.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight)
)
},
methods: {
// 获取dom高
getDom(id) {
return document.getElementById(id)
} }
} }
} }
</script> </script>
<style></style> <style lang="scss" scoped>
.answer-box {
width: 100%;
height: 100%;
// background: #f9f9f9;
.head {
border-bottom: 1px solid #ccc;
height: 80px;
background: #ffffff;
display: flex;
align-items: center;
padding-left: 40px;
.title {
padding-left: 20px;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
}
.right {
width: 260px;
margin-left: auto;
display: flex;
justify-content: space-around;
align-items: center;
.count {
font-size: 18px;
font-weight: bold;
color: #222222;
}
.time {
display: flex;
.icon {
width: 23px;
height: 23px;
// background: url(../../assets/images/tick.png);
background-size: 100% 100%;
}
.mun {
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-left: 10px;
}
}
}
}
.exam-main {
display: flex;
.left {
background: #fff;
flex: 1;
padding: 10px 20px 0 53px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.right {
border-left: 1px solid #ccc;
position: relative;
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.foot {
border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
.exam-btn {
display: flex;
padding-left: 40px;
cursor: pointer;
div {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #cccccc;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 40px;
text-align: center;
margin-right: 20px;
&.active {
background: #c01540;
border-radius: 4px;
color: #fff;
}
}
}
.rigth-btn {
display: flex;
margin-left: auto;
.end-exam-btn {
background: #fff;
height: 62px;
margin-top: -2px;
border-left: 1px solid #ccc;
width: 260px;
display: flex;
justify-content: center;
align-items: center;
.btn {
cursor: pointer;
width: 200px;
height: 40px;
background: #c01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #cccccc;
line-height: 40px;
text-align: center;
}
}
.sign {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/collection.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/collection2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
.sign2 {
margin-right: 20px;
margin-top: 8px;
.icon {
margin: 0 auto;
width: 24px;
height: 24px;
background: url(@/assets/images/sign.png);
background-size: 100% 100%;
&.active {
background: url(@/assets/images/sign2.png);
background-size: 100% 100%;
}
}
.txt {
font-size: 14px;
color: #cccccc;
line-height: 20px;
margin-top: 2px;
}
}
}
}
}
</style>
src/components/exam/examNumbers.vue
浏览文件 @ 941a7249
<template> <template>
<div></div> <div>
<div class="order-num">
<div>
<div class="tit">判断题</div>
<ul>
<!-- stu1已答 stu2当前 stu3标记 -->
<li class="stu1">1</li>
<li class="stu2">2</li>
<li class="stu3">3</li>
</ul>
</div>
</div>
<ul class="flag-tips" v-if="true">
<li>
<div class="circle1"></div>
<div class="txt">已答</div>
</li>
<li>
<div class="circle2"></div>
<div class="txt">未答</div>
</li>
<li>
<div class="circle3"></div>
<div class="txt">当前</div>
</li>
<li>
<div class="circle4"></div>
<div class="txt">标记</div>
</li>
</ul>
<ul class="tips-box" v-else>
<li>
<div class="circle1"></div>
<div class="txt">答对</div>
</li>
<li>
<div class="circle2"></div>
<div class="txt">答错</div>
</li>
<li>
<div class="circle3"></div>
<div class="txt">未答</div>
</li>
</ul>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { list: { type: Array, default: () => [] } } props: {},
mounted() {},
computed: {},
methods: {},
watch: {}
} }
</script> </script>
<style lang="scss" scoped>
<style></style> .info{
display: flex;
align-items: center;
height: 100px;
.shape{
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
img{
width: 75px;
// transform: scale(1);
display: block;
}
.right{
margin-left: 22px;
.name{
font-size: 18px;
color: #222222;
line-height: 25px;
}
.code{
font-size: 14px;
color: #222222;
line-height: 20px;
margin-top: 5px;
}
}
}
.order-num{
padding-top: 20px;
padding-bottom: 90px;
.tit{
font-size: 12px;
color: #999999;
line-height: 17px;
margin-bottom: 10px;
}
ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
li{
cursor: pointer;
position: relative;
border-radius: 50px;
width: 24px;
height: 24px;
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){
margin-right: 0;
}
&.analy{
&.stu1{
border: 2px solid #0FC118;
line-height: 22px;
background: #fff;
color: #999;
}
&.stu2{
border: 2px solid #C01540;
line-height: 22px;
background: #fff;
color: #999;
}
&.stu3{
color: #fff;
background: #999999;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: none;
border-radius: 50%;
}
}
}
&.stu1{
background: #999;
border: 1px solid #999;
color: #fff;
}
&.stu2{
width: 22px;
height: 22px;
line-height: 22px;
border: 2px solid #0FC118;
}
&.stu3{
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
}
}
}
.flag-tips{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
width: 24px;
height: 24px;
background: #EEEEEE;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle1{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle2{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle3{
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
.flag-tips{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
width: 24px;
height: 24px;
background: #999;
border: 1px solid #999;
border-radius: 50%;
}
.circle2{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle3{
width: 24px;
height: 24px;
border: 2px solid #0FC118;
background: rgba(15, 193, 24, 0.1);
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
.tips-box{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
&:nth-child(2){
// margin: 0 50px;
}
.circle1{
width: 24px;
height: 24px;
background: #fff;
border: 2px solid #0FC118;
border-radius: 50%;
box-sizing: border-box;
}
.circle2{
width: 24px;
height: 24px;
border: 2px solid #C01540;
border-radius: 50%;
box-sizing: border-box;
}
.circle3{
width: 24px;
height: 24px;
background: #999999;
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
</style>
src/pages/exam/testExam/exam/index copy.vue 0 → 100644
浏览文件 @ 941a7249
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论