<template>
|
<!-- 答题卡 -->
|
<div class="sheet boxBorder">
|
<div class="sheetTop">
|
<div class="title">
|
<p class="colorBox"></p>
|
<p>答题卡</p>
|
</div>
|
<ul class="sheetContent" v-if="props.cardList">
|
<li
|
class="contentLi"
|
v-for="(item, index) in props.cardList"
|
:key="index"
|
v-show="item.infoList.length"
|
>
|
<h2 class="topic" v-show="item.infoList.length">
|
{{ item.catalogName }}
|
<span v-if="props.answerType != 'mock'">（共{{ item.infoList.length }}题）</span>
|
</h2>
|
<ul class="topicBox">
|
<li
|
@click="itemLocation(value.id)"
|
v-for="(value, index) in item.infoList"
|
:key="index"
|
:class="
|
value.questionType == 'shortAnswer'
|
? isHaveAnswer(value.userAnswer)
|
? 'patch noDeafault'
|
: 'default'
|
: !value.isComplete
|
? isHaveAnswer(value.userAnswer)
|
? 'patch noDeafault'
|
: 'default'
|
: value.isRight
|
? ' correct noDeafault'
|
: ' error noDeafault'
|
"
|
>
|
{{ index + 1 }}
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div>
|
<div
|
class="sheetBottom"
|
v-if="props.answerType != 'errorQuestion' && props.answerType != 'collectQuestion'"
|
>
|
<ul class="sheeting" >
|
<li>
|
<p class="sheetingBox"></p>
|
<p>已答</p>
|
</li>
|
<li>
|
<p class="sheetingBox" style="background-color: #f1f3f8"></p>
|
<p>未答</p>
|
</li>
|
<li v-if="submitStatus">
|
<p class="sheetingBox" style="background-color: #FF5E5E"></p>
|
<p>错误</p>
|
</li>
|
<li v-if="submitStatus">
|
<p class="sheetingBox" style="background-color: #1fbc1f"></p>
|
<p>正确</p>
|
</li>
|
</ul>
|
<div class="sheet-btn">
|
<el-button @click="saveData" v-if="!submitStatus">
|
提交
|
</el-button>
|
</div>
|
</div>
|
<div class="sheetBottom" v-else>
|
<ul class="sheeting" >
|
<li>
|
<p class="sheetingBox"></p>
|
<p>已答</p>
|
</li>
|
<li>
|
<p class="sheetingBox" style="background-color: #f1f3f8"></p>
|
<p>未答</p>
|
</li>
|
<li>
|
<p class="sheetingBox" style="background-color: #FF5E5E"></p>
|
<p>错误</p>
|
</li>
|
<li>
|
<p class="sheetingBox" style="background-color: #1fbc1f"></p>
|
<p>正确</p>
|
</li>
|
</ul>
|
<div class="sheet-btn">
|
<el-button v-if="answerType == 'option'">
|
提交
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, watch, ref, computed, defineEmits, onMounted } from 'vue'
|
const props = defineProps<{
|
cardList: any
|
submitStatus: Boolean
|
answerType: String,
|
|
}>()
|
|
const emits = defineEmits(['saveData'])
|
// 题目定位
|
const itemLocation = (id: number) => {
|
document.getElementById(`listItem-${id}`)!.scrollIntoView()
|
}
|
// 判断是否输入答案
|
const isHaveAnswer = (data:any) => {
|
if (typeof data == 'string') {
|
data = data
|
.replace(/<[^>]*>/g, '')
|
.replace(/ /g, '')
|
.trim()
|
if (data.length) {
|
return true
|
} else {
|
return false
|
}
|
} else {
|
const answer = data.find((item) => item.length > 0)
|
if (answer) {
|
return true
|
} else {
|
return false
|
}
|
}
|
}
|
// 提交
|
const saveData = () => {
|
emits('saveData')
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.title {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 55px;
|
font-size: 16px;
|
color: #000;
|
border-bottom: 1px solid #f4f4f4;
|
font-weight: bold;
|
background-color: #F5F7FB ;
|
}
|
.colorBox {
|
margin: 0 10px 0 23px;
|
width: 4px;
|
height: 19px;
|
background-color: #ff6c00;
|
}
|
.sheet {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 25px;
|
min-width: 275px;
|
margin-right: 18px;
|
height: 100%;
|
overflow: auto;
|
border-right: 1px solid #EEEEEE;
|
.sheetContent {
|
padding-top: 20px;
|
.contentLi {
|
padding: 0 20px 0 20px;
|
.topic {
|
font-size: 14px;
|
color: #000;
|
}
|
.topicBox {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 20px;
|
li {
|
cursor: pointer;
|
margin-right: 20px;
|
margin-bottom: 15px;
|
text-align: center;
|
line-height: 30px;
|
width: 30px;
|
background-color: #f1f3f8;
|
color: #b4b6bd;
|
font-size: 17px;
|
border-radius: 2px;
|
}
|
li:nth-child(5n) {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
.sheetBottom {
|
margin-bottom: 22px;
|
.sheeting {
|
display: flex;
|
justify-content: space-evenly;
|
li {
|
display: flex;
|
align-items: center;
|
.sheetingBox {
|
margin-right: 6px;
|
width: 12px;
|
height: 12px;
|
border-radius: 2px;
|
background-color: #ff6c00;
|
}
|
}
|
}
|
}
|
}
|
.sheet-btn {
|
margin-top: 20px;
|
display: flex;
|
justify-content: center;
|
.el-button {
|
width: 150px;
|
background-color: #3b93fe;
|
color: #fff;
|
&:hover {
|
background-color: #83b6f5;
|
}
|
}
|
}
|
.sheet::-webkit-scrollbar {
|
width: 3px;
|
}
|
/*滚动条滑块*/
|
.sheet::-webkit-scrollbar-thumb {
|
border-radius: 20px;
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background-color: #333;
|
}
|
/*滚动条轨道*/
|
.sheet::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
|
border-radius: 20px;
|
background: #d9d9d9;
|
}
|
/** 默认样式 */
|
.default {
|
background-color: #f1f3f8;
|
color: #b4b6bd;
|
}
|
/** 有答案样式 */
|
.patch {
|
background-color: #ff6c00 !important;
|
}
|
/** 正确样式 */
|
.correct {
|
background-color: #1fbc1f !important;
|
}
|
/** 错误样式 */
|
.error {
|
background-color: #FF5E5E !important;
|
}
|
/** 非默认字体颜色 */
|
.noDeafault {
|
color: #fff !important;
|
}
|
</style>
|
