chengdandan
/
InternetCompetition
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交_1225

This commit is contained in:
lixiaobang 2024-12-25 08:56:49 +08:00
parent 64b259d487
commit b56a1b47c2
4 changed files with 499 additions and 590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

330
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
src/views/Index.vue
View File

@ -45,7 +45,7 @@
</div>
<div>
<router-link to="/examination">工业互联网试卷</router-link>
<router-link to="/successPage">11111111111111</router-link>
<router-link to="/successPage">考试完成</router-link>
</div>
<!-- <ceshi></ceshi> -->
<!-- <CeCe></CeCe> -->

240
src/views/examination/examSelect.vue
View File

@ -1,27 +1,26 @@
<script>
import {getKnowledgeTest} from "@/api/user";
import { getKnowledgeTest } from "@/api/user";
export default {
name: 'examSelect',
name: "examSelect",
data() {
return {
examTab: [
{
name: '全部',
state: ''
name: "全部",
state: "",
},
{
name: '未开始',
state: '0'
name: "未开始",
state: "0",
},
{
name: '进行中',
state: '1'
name: "进行中",
state: "1",
},
{
name: '已结束',
state: '2'
name: "已结束",
state: "2",
},
],
examIndex: 0,
@ -29,90 +28,94 @@ export default {
form: {
PageIndex: 1,
PageSize: 8,
state: '',
userId: ''
state: "",
userId: "",
},
// 考试场次
testList: [],
total:0,//总数
}
total: 0, //总数
};
},
methods: {
examClick(item, index) {
// 状态切换页码初始化
this.form.PageIndex = 1
this.examIndex = index
this.form.state = item.state
this.form.PageIndex = 1;
this.examIndex = index;
this.form.state = item.state;
// 切换状态重新发送请求
this.getTestList()
this.getTestList();
},
getTestList() {
getKnowledgeTest(this.form).then(res => {
this.testList = res.data.data
this.total = parseInt(res.data.message)
})
getKnowledgeTest(this.form).then((res) => {
this.testList = res.data.data;
this.total = parseInt(res.data.message);
});
},
// 进入考试
enterExam(item){
if(item.batch_state.trim()==='进行中'){
this.$router.push(`/examination?id=${item.batch_id}&totalScore=${item.total_score}&minute=${item.ks_minute}&passScore=${item.pass_score}`)
enterExam(item) {
if (item.batch_state.trim() === "进行中") {
this.$router.push(
`/examination?id=${item.batch_id}&totalScore=${item.total_score}&minute=${item.ks_minute}&passScore=${item.pass_score}`
);
let data = {
user_id:this.form.userId,
batch_id:item.batch_id,
list_item_answer:[]
}
user_id: this.form.userId,
batch_id: item.batch_id,
list_item_answer: [],
};
let testMsg = {
testTitle:item.subject_name, //考试名称
endTime:item.end_time //考试结束时间
}
testTitle: item.subject_name, //考试名称
endTime: item.end_time, //考试结束时间
};
// 存储考试数据
sessionStorage.setItem('testMsg',JSON.stringify(testMsg))
sessionStorage.setItem('params',JSON.stringify(data))
sessionStorage.setItem("testMsg", JSON.stringify(testMsg));
sessionStorage.setItem("params", JSON.stringify(data));
}
},
currentChange(current){
this.form.PageIndex = current
this.getTestList()
currentChange(current) {
this.form.PageIndex = current;
this.getTestList();
},
getCountdown(time) {
let endTime = new Date(time).getTime()
let startTime = new Date().getTime()
let remainder = endTime - startTime
let d = parseInt(remainder / 1000 / 60 / 60 / 24) //算出天数
let h = parseInt(remainder / 1000 / 60 / 60 % 24)//算出小时数
let m = parseInt(remainder / 1000 / 60 % 60)//算出分钟数
let s = parseInt(remainder / 1000 % 60)//算出秒数
h = d*24+h
if(h<10){
h='0'+h
let endTime = new Date(time).getTime();
let startTime = new Date().getTime();
let remainder = endTime - startTime;
let d = parseInt(remainder / 1000 / 60 / 60 / 24); //算出天数
let h = parseInt((remainder / 1000 / 60 / 60) % 24); //算出小时数
let m = parseInt((remainder / 1000 / 60) % 60); //算出分钟数
let s = parseInt((remainder / 1000) % 60); //算出秒数
h = d * 24 + h;
if (h < 10) {
h = "0" + h;
}
if(m<10){
m='0'+m
if (m < 10) {
m = "0" + m;
}
if(s<10){
s='0'+s
if (s < 10) {
s = "0" + s;
}
return h+'小时'+m+'分'+s+'秒后开始'
return h + "小时" + m + "分" + s + "秒后开始";
// return h+':'+m+':'+s
}
},
},
mounted() {
// 用户id赋值
this.form.userId = window.location.href.split("?")[1];
this.getTestList()
this.getTestList();
},
computed: {}
}
computed: {},
};
</script>
<template>
<div class="test-box">
<div class="test-box-title">考试场次选择</div>
<ul class="test-box-status">
<li v-for="(item,index) in examTab" :class="examIndex===index?'select':''" @click="examClick(item,index)">
<li
v-for="(item, index) in examTab"
:class="examIndex === index ? 'select' : ''"
@click="examClick(item, index)"
>
{{ item.name }}
</li>
</ul>
@ -123,8 +126,8 @@ export default {
</div>
<div class="test-box-site-item-start">
<span>开始时间：{{ item.start_time }}</span>
<span class="end" v-if="item.batch_state.trim()==='已结束'"></span>
<span class="started" v-else-if="item.batch_state.trim()==='进行中'"></span>
<span class="end" v-if="item.batch_state.trim() === '已结束'"></span>
<span class="started" v-else-if="item.batch_state.trim() === '进行中'"></span>
<span class="not-started" v-else></span>
</div>
<div class="test-box-site-item-end">
@ -137,36 +140,38 @@ export default {
<span>满分：{{ item.total_score }}分</span>
</div>
<div class="test-box-site-item-btn">
<div class="time" v-if="item.batch_state.trim()==='未开始'">{{getCountdown(item.start_time)}}</div>
<span v-if="item.state===0" :class="item.batch_state.trim()==='进行中'?'starting':''" @click="enterExam(item)">
进入考场
</span>
<span v-else>
已参加
</span>
<div class="time" v-if="item.batch_state.trim() === '未开始'">
{{ getCountdown(item.start_time) }}
</div>
<span
v-if="item.state === 0"
:class="item.batch_state.trim() === '进行中' ? 'starting' : ''"
@click="enterExam(item)"
>
进入考场
</span>
<span v-else> 已参加 </span>
</div>
</div>
</div>
<div class="test-no-data" v-if="!testList.length">
</div>
<div class="test-no-data" v-if="!testList.length"></div>
<div class="test-box-pagination">
<span>共{{total}}条</span>
<span>共{{ total }}条</span>
<el-pagination
@current-change="currentChange"
:current-page="form.PageIndex"
layout="prev, pager, next"
:page-size="8"
:total="total">
@current-change="currentChange"
:current-page="form.PageIndex"
layout="prev, pager, next"
:page-size="8"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<style lang="less" scoped>
.test-no-data{
background-image: url('../../assets/image/examSelect/not_data.png');
.test-no-data {
background-image: url("../../assets/image/examSelect/not_data.png");
width: 228px;
height: 244px;
background-size: 100% 100%;
@ -175,39 +180,40 @@ export default {
left: 0;
right: 0;
bottom: 0;
margin:auto;
margin: auto;
}
::v-deep .el-pager li{
::v-deep .el-pager li {
background-image: none;
background-color: transparent;
font-size: 14px;
font-weight:normal;
font-weight: normal;
width: 34px;
height: 34px;
line-height: 34px;
}
::v-deep .el-pagination .btn-next,::v-deep .el-pagination .btn-prev{
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
background-color: transparent;
width: 34px;
color: #FFFFFF;
color: #ffffff;
height: 34px;
line-height: 34px;
}
::v-deep .el-pagination button:disabled{
color:rgba(255, 255, 255, 0.30);
::v-deep .el-pagination button:disabled {
color: rgba(255, 255, 255, 0.3);
background-color: transparent;
}
::v-deep .el-pager li:hover{
color: #FFFFFF;
::v-deep .el-pager li:hover {
color: #ffffff;
}
::v-deep .el-pager li.active{
::v-deep .el-pager li.active {
background-color: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
color: #ffffff;
}
.test-box {
width: 1773px;
height: 858px;
background-image: url('../../assets/image/examSelect/test-box.png');
background-image: url("../../assets/image/examSelect/test-box.png");
background-size: 100% 100%;
position: absolute;
padding: 0 68px;
@ -218,15 +224,15 @@ export default {
bottom: 0;
margin: auto;
//
&-pagination{
&-pagination {
position: absolute;
display: flex;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
align-items: center;
span{
color: #FFFFFF;
span {
color: #ffffff;
font-size: 14px;
}
}
@ -236,7 +242,7 @@ export default {
left: 50%;
font-size: 24px;
margin-left: -72px;
color: rgba(255, 255, 255, 1);
}
@ -249,13 +255,13 @@ export default {
list-style: none;
.select {
background-image: url('../../assets/image/examSelect/select-status.png');
background-image: url("../../assets/image/examSelect/select-status.png");
color: rgba(255, 255, 255, 1);
}
li {
background-image: url('../../assets/image/examSelect/default-status.png');
color: rgba(255, 255, 255, .6);
background-image: url("../../assets/image/examSelect/default-status.png");
color: rgba(255, 255, 255, 0.6);
width: 136px;
height: 40px;
margin-right: 14px;
@ -275,7 +281,7 @@ export default {
height: 232px;
box-sizing: border-box;
padding: 0 18px;
background-image: url('../../assets/image/examSelect/exam-plate.png');
background-image: url("../../assets/image/examSelect/exam-plate.png");
background-size: 100% 100%;
// 理论考试名字
&-name {
@ -294,21 +300,21 @@ export default {
display: flex;
justify-content: space-between;
margin-top: 23px !important;
span:nth-child(2){
span:nth-child(2) {
text-align: center;
line-height: 22px;
width: 62px;
height: 22px;
background-size: 100% 100%;
}
.end{
background-image: url('../../assets/image/examSelect/end.png');
.end {
background-image: url("../../assets/image/examSelect/end.png");
}
.not-started{
background-image: url('../../assets/image/examSelect/not-started.png');
.not-started {
background-image: url("../../assets/image/examSelect/not-started.png");
}
.started{
background-image: url('../../assets/image/examSelect/started.png');
.started {
background-image: url("../../assets/image/examSelect/started.png");
}
}
@ -318,26 +324,26 @@ export default {
justify-content: flex-end;
position: relative;
margin-top: 5px !important;
.time{
color:rgba(101, 140, 246, 1);
.time {
color: rgba(101, 140, 246, 1);
font-size: 14px;
position: absolute;
top: -30px;
right: 0;
margin: 0;
}
span{
background-image: url('../../assets/image/examSelect/enter-not.png');
span {
background-image: url("../../assets/image/examSelect/enter-not.png");
font-size: 14px;
width: 101px;
line-height: 28px;
color: rgba(255,255,255,0.5);
color: rgba(255, 255, 255, 0.5);
text-align: center;
background-size: 100% 100%;
}
.starting{
background-image: url('../../assets/image/examSelect/enter.png');
color: rgba(255,255,255,1);
.starting {
background-image: url("../../assets/image/examSelect/enter.png");
color: rgba(255, 255, 255, 1);
}
}
}
@ -347,4 +353,4 @@ export default {
}
}
}
</style>
</style>

517
src/views/examination/index.vue
View File

@ -1,298 +1,299 @@
<script>
import {getTestTopic, getTopicDetail, savaTestAnswer, getTestCache, saveTestCache} from '@/api/user'
import {sortString} from "@/util/tools";
import {
getTestTopic,
getTopicDetail,
savaTestAnswer,
getTestCache,
saveTestCache,
} from "@/api/user";
import { sortString } from "@/util/tools";
export default {
name: 'examination',
name: "examination",
data() {
return {
// 题目详情
testContent: {
testType: '多选题',
question: "1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
testType: "多选题",
question:
"1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
score: "10",
your_answer: '',
your_answer: "",
options: [
{
item_letter: 'A',
item: '国家文化软实力和中华文化影响力'
item_letter: "A",
item: "国家文化软实力和中华文化影响力",
},
{
item_letter: 'B',
item: '国家文化硬实力和中华文化影响力'
item_letter: "B",
item: "国家文化硬实力和中华文化影响力",
},
{
item_letter: 'C',
item: '国家文化硬实力和中华传统文化影响力'
item_letter: "C",
item: "国家文化硬实力和中华传统文化影响力",
},
{
item_letter: 'D',
item: '国家文化硬实力和中华传统文化'
}
]
item_letter: "D",
item: "国家文化硬实力和中华传统文化",
},
],
},
testList: [],
//题目数量
testTypeNum: [
{
type: '单选题',
children: []
type: "单选题",
children: [],
},
{
type: '多选题',
children: []
type: "多选题",
children: [],
},
{
type: '判断题',
children: []
}
type: "判断题",
children: [],
},
],
optionIndex: -1,// 选中的选项
optionIndex: -1, // 选中的选项
examDialogShow: false,
// 考试请求参数
params: {
id: '',
kind: ''
id: "",
kind: "",
},
// 题量总数
questionTotal: 0,
passScore: 0, //及格分
totalScore: 0, //总分
minute: 0,//剩余时间
minute: 0, //剩余时间
number: 0, //第几题
isCache: false,//是否获取完缓存
testTitle: '',//试卷名称
endTime: '',
countdown:'',//剩余时间
timer:''//定时器
}
isCache: false, //是否获取完缓存
testTitle: "", //试卷名称
endTime: "",
countdown: "", //剩余时间
timer: "", //定时器
};
},
methods: {
// 选项点击事件
optionClick(event, index, item) {
// 单选题
if (this.testContent.testType === '多选题') {
if (this.testContent.testType === "多选题") {
// 多选题
if (event.target.className.includes('optionSelect')) {
event.target.className = 'exam-left-test-option'
this.testList[this.number - 1].your_answer = this.testList[this.number - 1].your_answer.replace(item.item_letter+',', '')
if (event.target.className.includes("optionSelect")) {
event.target.className = "exam-left-test-option";
this.testList[this.number - 1].your_answer = this.testList[
this.number - 1
].your_answer.replace(item.item_letter + ",", "");
} else {
if (this.testList[this.number - 1].your_answer.indexOf(item.item_letter) === -1) {
this.testList[this.number - 1].your_answer += item.item_letter + ','
if (
this.testList[this.number - 1].your_answer.indexOf(item.item_letter) === -1
) {
this.testList[this.number - 1].your_answer += item.item_letter + ",";
}
event.target.className = 'exam-left-test-option optionSelect'
event.target.className = "exam-left-test-option optionSelect";
}
} else {
if(event.target.className.includes('optionSelect')){
event.target.className = 'exam-left-test-option'
this.$set(this.testList[this.number - 1],'your_answer','')
}else{
if (event.target.className.includes("optionSelect")) {
event.target.className = "exam-left-test-option";
this.$set(this.testList[this.number - 1], "your_answer", "");
} else {
// 单选题、判断题
this.$refs.option.forEach(el => {
el.className = 'exam-left-test-option'
})
event.target.className = 'exam-left-test-option optionSelect'
this.$set(this.testList[this.number - 1],'your_answer',item.item_letter)
this.$refs.option.forEach((el) => {
el.className = "exam-left-test-option";
});
event.target.className = "exam-left-test-option optionSelect";
this.$set(this.testList[this.number - 1], "your_answer", item.item_letter);
}
// this.testList[this.number - 1].your_answer = item.item_letter
}
},
//交卷按钮
handPaper() {
this.examDialogShow = true
this.examDialogShow = true;
},
//确定交卷按钮
submitTest() {
let list = this.testList.map(el => {
let list = this.testList.map((el) => {
return {
your_answer: el.your_answer.includes(',')?sortString(el.your_answer).slice(0,-1):el.your_answer,
theory_base_id: el.theory_base_id
}
})
let params = sessionStorage.getItem('params')
let data = JSON.parse(params)
console.log(list)
data.list_item_answer = list
your_answer: el.your_answer.includes(",")
? sortString(el.your_answer).slice(0, -1)
: el.your_answer,
theory_base_id: el.theory_base_id,
};
});
let params = sessionStorage.getItem("params");
let data = JSON.parse(params);
console.log(list);
data.list_item_answer = list;
let formData = new FormData();
formData.append('data', JSON.stringify(data));
savaTestAnswer(formData).then(res => {
this.$router.push('/successPage')
})
formData.append("data", JSON.stringify(data));
savaTestAnswer(formData).then((res) => {
this.$router.push("/successPage");
});
},
//答题卡数据获取
getCardData() {
// 考试信息
let testMsg = sessionStorage.getItem('testMsg')
this.testTitle = JSON.parse(testMsg).testTitle //考试名称
this.endTime = JSON.parse(testMsg).endTime //结束时间
let testMsg = sessionStorage.getItem("testMsg");
this.testTitle = JSON.parse(testMsg).testTitle; //考试名称
this.endTime = JSON.parse(testMsg).endTime; //结束时间
// 试卷id
this.params.id = this.$route.query.id;
this.totalScore = this.$route.query.totalScore;//总分
this.minute = this.$route.query.minute;//剩余时间
this.passScore = this.$route.query.passScore;//及格分
getTestTopic(this.params).then(res => {
this.totalScore = this.$route.query.totalScore; //总分
this.minute = this.$route.query.minute; //剩余时间
this.passScore = this.$route.query.passScore; //及格分
getTestTopic(this.params).then((res) => {
// 总数
this.questionTotal = res.data.data.length
res.data.data.forEach(el => {
this.testTypeNum.forEach(item => {
this.questionTotal = res.data.data.length;
res.data.data.forEach((el) => {
this.testTypeNum.forEach((item) => {
if (el.question_kind === item.type) {
item.children.push(el)
item.children.push(el);
}
})
})
});
});
this.testTypeNum.forEach((item, index) => {
this.testList.push(...item.children)
item.children.forEach(el => {
this.testList.push(...item.children);
item.children.forEach((el) => {
// 回答的问题
el.your_answer = ''
if (el.question_kind === '单选题') {
el.number = el.no
} else if (el.question_kind === '多选题') {
el.number = el.no + this.testTypeNum[0].children.length
} else if (el.question_kind === '判断题') {
el.number = el.no + this.testTypeNum[0].children.length + this.testTypeNum[1].children.length
el.your_answer = "";
if (el.question_kind === "单选题") {
el.number = el.no;
} else if (el.question_kind === "多选题") {
el.number = el.no + this.testTypeNum[0].children.length;
} else if (el.question_kind === "判断题") {
el.number =
el.no +
this.testTypeNum[0].children.length +
this.testTypeNum[1].children.length;
}
})
})
});
});
// 获取缓存数据
this.getCacheData()
this.testClick(this.testList[0])
})
this.getCacheData();
this.testClick(this.testList[0]);
});
},
// 题目点击
testClick(item) {
// 保存缓存
this.saveCacheData()
this.testContent.options = []
this.testContent.question = ''
this.saveCacheData();
this.testContent.options = [];
this.testContent.question = "";
// 第几个题目
this.number = item.number
this.number = item.number;
// 分数赋值
this.testContent.score = item.per_score
this.testContent.testType = item.question_kind
this.testContent.score = item.per_score;
this.testContent.testType = item.question_kind;
getTopicDetail({theoryBaseId: item.theory_base_id}).then(res => {
this.testContent.question = res.data.data.question
this.testContent.options = res.data.data.items
})
getTopicDetail({ theoryBaseId: item.theory_base_id }).then((res) => {
this.testContent.question = res.data.data.question;
this.testContent.options = res.data.data.items;
});
// 当前答案
this.testContent.your_answer = item.your_answer
this.testContent.your_answer = item.your_answer;
},
// 获取缓存数据
getCacheData() {
let params = sessionStorage.getItem('params')
let data = JSON.parse(params)
let params = sessionStorage.getItem("params");
let data = JSON.parse(params);
// formData.append('user_id',JSON.stringify(data.user_id))
// formData.append('batch_id',JSON.stringify(data.batch_id))
let formData = {
user_id: data.user_id,
batch_id: data.batch_id
}
getTestCache(formData).then(res => {
batch_id: data.batch_id,
};
getTestCache(formData).then((res) => {
if (res.data.state) {
res.data.data.list_item_answer.forEach(val => {
this.testList.forEach(ele => {
res.data.data.list_item_answer.forEach((val) => {
this.testList.forEach((ele) => {
if (val.theory_base_id === ele.theory_base_id) {
this.$set(ele, 'your_answer', val.your_answer)
this.$set(ele, "your_answer", val.your_answer);
// ele.your_answer = val.your_answer
}
})
})
this.testContent.your_answer = this.testList[0].your_answer
});
});
this.testContent.your_answer = this.testList[0].your_answer;
} else {
}
this.isCache = true
})
this.isCache = true;
});
},
// 保存缓存数据
saveCacheData() {
let list = this.testList.map(el => {
let list = this.testList.map((el) => {
return {
your_answer: el.your_answer,
theory_base_id: el.theory_base_id
}
})
let params = sessionStorage.getItem('params')
let data = JSON.parse(params)
data.list_item_answer = list.filter(el => {
return el.your_answer
})
theory_base_id: el.theory_base_id,
};
});
let params = sessionStorage.getItem("params");
let data = JSON.parse(params);
data.list_item_answer = list.filter((el) => {
return el.your_answer;
});
let formData = new FormData();
formData.append('data', JSON.stringify(data));
formData.append("data", JSON.stringify(data));
// 保存缓存
saveTestCache(formData)
saveTestCache(formData);
},
// 下一题点击
nextClick() {
if (this.number === this.questionTotal) {
return
return;
}
this.number++
let data = this.testList[this.number - 1]
this.testClick(data)
this.number++;
let data = this.testList[this.number - 1];
this.testClick(data);
},
// 上一题点击
preClick() {
if (this.number === 1) {
return
if (this.number === 1 || this.number === 0) {
return;
}
this.number--
let data = this.testList[this.number - 1]
this.testClick(data)
this.number--;
let data = this.testList[this.number - 1];
this.testClick(data);
},
// 获取距离考试结束还多久
getCountdown() {
let endTime = new Date(this.endTime).getTime()
let startTime = new Date().getTime()
let remainder = endTime - startTime
let endTime = new Date(this.endTime).getTime();
let startTime = new Date().getTime();
let remainder = endTime - startTime;
// let d = parseInt(remainder / 1000 / 60 / 60 / 24) //算出天数
let h = parseInt(remainder / 1000 / 60 / 60 % 24)//算出小时数
let m = parseInt(remainder / 1000 / 60 % 60)//算出分钟数
let s = parseInt(remainder / 1000 % 60)//算出秒数
if(h<10){
h='0'+h
let h = parseInt((remainder / 1000 / 60 / 60) % 24); //算出小时数
let m = parseInt((remainder / 1000 / 60) % 60); //算出分钟数
let s = parseInt((remainder / 1000) % 60); //算出秒数
if (h < 10) {
h = "0" + h;
}
if(m<10){
m='0'+m
if (m < 10) {
m = "0" + m;
}
if(s<10){
s='0'+s
if (s < 10) {
s = "0" + s;
}
this.countdown = h+':'+m+':'+s
this.timer = setTimeout(()=>{
this.getCountdown()
},1000)
}
this.countdown = h + ":" + m + ":" + s;
this.timer = setTimeout(() => {
this.getCountdown();
}, 1000);
},
},
mounted() {
this.getCardData()
this.getCardData();
// 获取剩余时间
this.getCountdown()
this.getCountdown();
},
computed: {},
watch: {
'testContent.options'(newVal, oldVal) {
}
}
}
"testContent.options"(newVal, oldVal) {},
},
};
</script>
<template>
@ -304,37 +305,61 @@ export default {
<div class="exam-left-num">{{ number }}/{{ questionTotal }}</div>
<div class="exam-left-type">{{ testContent.testType }}</div>
<span>({{ testContent.score }}分)</span>
<div v-if="testContent.testType==='单选题'" class="exam-left-msc">每题只有一个正确答案</div>
<div v-else-if="testContent.testType==='多选题'" class="exam-left-msc">每题只有两个以上正确答案</div>
<div v-if="testContent.testType === '单选题'" class="exam-left-msc">
每题只有一个正确答案
</div>
<div v-else-if="testContent.testType === '多选题'" class="exam-left-msc">
每题只有两个以上正确答案
</div>
</div>
<!-- 题干 -->
<div class="exam-left-test">
<div class="exam-left-test-title">
{{ testContent.question }}
</div>
<div v-if="testContent.testType==='多选题'" class="exam-left-test-content">
<div v-for="(item,index) in testContent.options"
ref="option"
:class="testContent.your_answer.includes(item.item_letter)?'optionSelect':''" class="exam-left-test-option" @click="optionClick($event,index,item)">
<div v-if="testContent.testType === '多选题'" class="exam-left-test-content">
<div
v-for="(item, index) in testContent.options"
ref="option"
:class="
testContent.your_answer.includes(item.item_letter) ? 'optionSelect' : ''
"
class="exam-left-test-option"
@click="optionClick($event, index, item)"
>
{{ item.item_letter }}丶{{ item.item }}
</div>
</div>
<div v-else class="exam-left-test-content">
<div v-for="(item,index) in testContent.options"
ref="option"
:class="testContent.your_answer===item.item_letter?'optionSelect':''" class="exam-left-test-option" @click="optionClick($event,index,item)">
<div
v-for="(item, index) in testContent.options"
ref="option"
:class="testContent.your_answer === item.item_letter ? 'optionSelect' : ''"
class="exam-left-test-option"
@click="optionClick($event, index, item)"
>
{{ item.item_letter }}丶{{ item.item }}
</div>
</div>
<!-- 按钮 -->
<div class="exam-left-btn">
<div :class="number===1?'exam-left-btn-pre':'exam-left-btn-next'" @click="preClick">上一题</div>
<div :class="number===questionTotal?'exam-left-btn-pre':'exam-left-btn-next'" style="margin-left: 164px;"
@click="nextClick">下一题
<div
:class="number === 1 ? 'exam-left-btn-pre' : 'exam-left-btn-next'"
@click="preClick"
>
上一题
</div>
<div
:class="
number === questionTotal ? 'exam-left-btn-pre' : 'exam-left-btn-next'
"
style="margin-left: 164px"
@click="nextClick"
>
下一题
</div>
</div>
</div>
</div>
<div class="exam-right">
<div class="exam-right-title">答题卡</div>
@ -347,36 +372,47 @@ export default {
<div class="exam-right-card-time">
<span>剩余时间：</span>
<span>{{ countdown }}</span>
</div>
<div class="exam-right-card-line"></div>
<div v-if="isCache" class="exam-right-card-box">
<div v-for="(item,index) in testTypeNum" class="exam-right-card-num">
<span class="exam-right-card-num-title"><span
class="type">{{ item.type }}</span> <span>(共{{ item.children.length }}题)</span></span>
<div v-for="(item, index) in testTypeNum" class="exam-right-card-num">
<span class="exam-right-card-num-title"
><span class="type">{{ item.type }}</span>
<span>(共{{ item.children.length }}题)</span></span
>
<div class="exam-right-card-num-item">
<span ref="answer" v-for="s in item.children" :class="{'selectQuestion':s.your_answer,'border':s.number===number}"
@click="testClick(s)">{{ s.no }}</span>
<span
ref="answer"
v-for="s in item.children"
:class="{ selectQuestion: s.your_answer, border: s.number === number }"
@click="testClick(s)"
>{{ s.no }}</span
>
</div>
</div>
</div>
<!-- <div class="exam-right-card-lenged">-->
<!-- <div>-->
<!-- <span><i class="have"></i>已做</span>-->
<!-- <span><i class="notDone"></i>未做</span>-->
<!-- <span><i class="current"></i>当前</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="exam-right-card-lenged">-->
<!-- <div>-->
<!-- <span><i class="have"></i>已做</span>-->
<!-- <span><i class="notDone"></i>未做</span>-->
<!-- <span><i class="current"></i>当前</span>-->
<!-- </div>-->
<!-- </div>-->
<div class="submit" @click="handPaper"></div>
</div>
</div>
</div>
<div v-if="examDialogShow" class="exam-dialog">
<div class="exam-dialog-title">提示</div>
<div class="exam-dialog-content"> 确定要交卷吗？交卷之后将不能再继续答题。</div>
<div class="exam-dialog-content">确定要交卷吗？交卷之后将不能再继续答题。</div>
<div class="exam-dialog-btn">
<div class="exam-dialog-btn-light" style="margin-right: 82px;" @click="examDialogShow=false">取消</div>
<div
class="exam-dialog-btn-light"
style="margin-right: 82px"
@click="examDialogShow = false"
>
取消
</div>
<div class="exam-dialog-btn-light" @click="submitTest">确定</div>
</div>
</div>
@ -409,7 +445,7 @@ export default {
right: 0;
bottom: 0;
margin: auto;
background-image: url('../../assets/image/prompt.png');
background-image: url("../../assets/image/prompt.png");
background-size: 100% 100%;
&-title {
@ -442,13 +478,13 @@ export default {
&-light {
color: rgba(255, 255, 255, 1);
background-image: url('../../assets/image/highlight-btn.png');
background-image: url("../../assets/image/highlight-btn.png");
}
&-dark {
margin-right: 82px;
color: rgba(255, 255, 255, 0.2);
background-image: url('../../assets/image/dark-btn.png');
background-image: url("../../assets/image/dark-btn.png");
}
}
}
@ -458,7 +494,6 @@ export default {
display: flex;
align-items: center;
justify-content: space-evenly;
}
&-left::-webkit-scrollbar {
@ -470,8 +505,7 @@ export default {
width: 1325px;
height: 858px;
background-size: 100% 100%;
background-image: url('../../assets/image/test.png');
background-image: url("../../assets/image/test.png");
&-top {
margin-top: 32px;
@ -501,12 +535,11 @@ export default {
width: 114px;
height: 52px;
background-size: 100% 100%;
background-image: url('../../assets/image/test-num.png');
background-image: url("../../assets/image/test-num.png");
}
&-msc {
color: rgba(255, 255, 255, 0.60);
color: rgba(255, 255, 255, 0.6);
font-size: 18px;
}
@ -518,7 +551,7 @@ export default {
&-title {
font-size: 24px;
line-height: 44px;
color: rgba(255, 255, 255, 1)
color: rgba(255, 255, 255, 1);
}
&-content::-webkit-scrollbar {
@ -540,11 +573,11 @@ export default {
width: 100%;
height: 80px;
margin-bottom: 20px;
background-image: url('../../assets/image/test-option.png');
background-image: url("../../assets/image/test-option.png");
padding-left: 34px;
display: flex;
font-size: 22px;
color: #FFFFFF;
color: #ffffff;
align-items: center;
box-sizing: border-box;
}
@ -558,7 +591,8 @@ export default {
margin-left: -239px;
left: 50%;
&-pre, &-next {
&-pre,
&-next {
width: 157px;
height: 44px;
text-align: center;
@ -569,12 +603,12 @@ export default {
&-pre {
color: rgba(255, 255, 255, 0.5);
background-image: url('../../assets/image/dark-btn.png');
background-image: url("../../assets/image/dark-btn.png");
}
&-next {
color: rgba(255, 255, 255, 1);
background-image: url('../../assets/image/highlight-btn.png');
background-image: url("../../assets/image/highlight-btn.png");
}
}
}
@ -584,7 +618,7 @@ export default {
width: 441px;
height: 858px;
background-size: 100% 100%;
background-image: url('../../assets/image/test-card.png');
background-image: url("../../assets/image/test-card.png");
//答题卡名称
&-title {
@ -596,21 +630,21 @@ export default {
&-card {
font-size: 18px;
color: rgba(255, 255, 255, 1);;
color: rgba(255, 255, 255, 1);
padding: 46px;
//提交按钮
.submit {
width: 157px;
height:44px;
margin:20px auto;
height: 44px;
margin: 20px auto;
//left: 50%;
//margin-left: -78px;
//bottom: 50px;
background-image: url('../../assets/image/submit.png');
background-image: url("../../assets/image/submit.png");
}
&-lenged{
width:400px;
height:80px;
&-lenged {
width: 400px;
height: 80px;
background-color: rgba(149, 149, 149, 0.2);
position: absolute;
bottom: 10px;
@ -619,29 +653,28 @@ export default {
display: flex;
justify-content: center;
align-items: center;
div{
span{
div {
span {
font-size: 14px;
margin-right: 26px;
span:last-child{
span:last-child {
margin-right: 0;
}
i{
i {
width: 18px;
height: 10px;
margin-right: 10px;
display: inline-block;
box-sizing: border-box;
}
.current{
border:2px solid rgba(101, 140, 246, 1);
.current {
border: 2px solid rgba(101, 140, 246, 1);
}
.notDone{
background-color:rgba(0, 0, 0, 0.20);
.notDone {
background-color: rgba(0, 0, 0, 0.2);
}
.have{
background-color: rgba(64, 253, 137, 0.20);
.have {
background-color: rgba(64, 253, 137, 0.2);
}
}
}
@ -650,11 +683,10 @@ export default {
justify-content: space-between;
display: flex;
font-size: 18px;
}
&-line {
border: 1px solid rgba(255, 255, 255, 0.30);
border: 1px solid rgba(255, 255, 255, 0.3);
margin: 22px 0;
}
@ -662,7 +694,6 @@ export default {
margin-top: 37px;
position: relative;
span:nth-child(2) {
color: rgba(255, 189, 34, 1);
font-size: 26px;
@ -681,7 +712,7 @@ export default {
position: absolute;
left: -50px;
width: 7px; //修改滚动条宽度
background-color: rgba(107, 126, 177, 0.20);
background-color: rgba(107, 126, 177, 0.2);
}
&-box::-webkit-scrollbar-thumb {
@ -709,12 +740,12 @@ export default {
&-item {
display: flex;
flex-wrap: wrap;
.border{
.border {
box-sizing: border-box;
border:2px solid rgba(101, 140, 246, 1);
border: 2px solid rgba(101, 140, 246, 1);
}
.selectQuestion {
background-color: rgba(64, 253, 137, 0.20);
background-color: rgba(64, 253, 137, 0.2);
}
span {
@ -724,7 +755,7 @@ export default {
line-height: 38px;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.10);
background-color: rgba(0, 0, 0, 0.1);
height: 38px;
}
@ -736,4 +767,4 @@ export default {
}
}
}
</style>
</style>