代码提交_1226
This commit is contained in:
parent
a50d6172d2
commit
2f1d5d0488
|
|
@ -1,3 +1,3 @@
|
|||
const config = {
|
||||
url:'http://111.229.30.246:10014/'
|
||||
url:'http://172.16.1.254:10014/'
|
||||
}
|
||||
|
|
@ -38,47 +38,68 @@ export const getGrade = (data) => {
|
|||
);
|
||||
};
|
||||
// 获取正确答案和默认值的接口
|
||||
export const getQueryAnswer = (data) =>{
|
||||
export const getQueryAnswer = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Config.ashx?action=queryanswer&mark=${data.mark}&user_id=${data.user_id}`
|
||||
`/Handler/Config.ashx?action=queryanswer&mark=${data.mark}&user_id=${data.user_id}`
|
||||
);
|
||||
}
|
||||
// 用户获取理论考试
|
||||
export const getKnowledgeTest = (data) =>{
|
||||
export const getKnowledgeTest = (data) => {
|
||||
return axios.post(
|
||||
`/Handler/User.ashx?action=logintheory&user_id=${data.userId}&PageIndex=${data.PageIndex}&PageSize=${data.PageSize}&State=${data.state}`
|
||||
`/Handler/User.ashx?action=logintheory&user_id=${data.userId}&PageIndex=${data.PageIndex}&PageSize=${data.PageSize}&State=${data.state}`
|
||||
);
|
||||
}
|
||||
// 获取批次试卷题目列表信息
|
||||
export const getTestTopic = (data) =>{
|
||||
export const getTestTopic = (data) => {
|
||||
return axios.post(
|
||||
`/Handler/Boat.ashx?action=theorylist&batch_id=${data.id}&kind=${data.kind}`
|
||||
`/Handler/Boat.ashx?action=theorylist&batch_id=${data.id}&kind=${data.kind}`
|
||||
);
|
||||
}
|
||||
//获取题目选项信息
|
||||
export const getTopicDetail = (data) =>{
|
||||
export const getTopicDetail = (data) => {
|
||||
return axios.post(
|
||||
`/Handler/Boat.ashx?action=theorybase&theory_base_id=${data.theoryBaseId}`
|
||||
`/Handler/Boat.ashx?action=theorybase&theory_base_id=${data.theoryBaseId}`
|
||||
);
|
||||
}
|
||||
// 提交理论考试答案
|
||||
export const savaTestAnswer = (data) =>{
|
||||
export const savaTestAnswer = (data) => {
|
||||
return axios({
|
||||
url:`/Handler/Boat.ashx?action=savetheory`,
|
||||
data: data,
|
||||
method:'post',
|
||||
headers: {'Content-Type': 'multipart/form-data'}
|
||||
url: `/Handler/Boat.ashx?action=savetheory`,
|
||||
data: data,
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
}
|
||||
// 获取缓存数据
|
||||
export const getTestCache = (params) =>{
|
||||
export const getTestCache = (params) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=gettheorycache`,{params:params}
|
||||
`/Handler/Boat.ashx?action=gettheorycache`, { params: params }
|
||||
);
|
||||
}
|
||||
// 保存缓存数据
|
||||
export const saveTestCache = (data) =>{
|
||||
export const saveTestCache = (data) => {
|
||||
return axios.post(
|
||||
`/Handler/Boat.ashx?action=savetheorycache`,data,{headers: {'Content-Type': 'multipart/form-data'}}
|
||||
`/Handler/Boat.ashx?action=savetheorycache`, data, { headers: { 'Content-Type': 'multipart/form-data' } }
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
//获取科目类别
|
||||
export const GetSubjectType = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=GetSubjectType`, { params: data }
|
||||
);
|
||||
}
|
||||
//获取练习列表
|
||||
export const GetPractice = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/User.ashx?action=loginlianxi`, { params: data }
|
||||
);
|
||||
}
|
||||
|
||||
//获取练习题目
|
||||
export const getPracticeTopic = (data) => {
|
||||
return axios.get(
|
||||
`/Handler/Boat.ashx?action=theorylist&lianxi=1`, { params: data }
|
||||
);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
|
|
@ -236,6 +236,24 @@ const routes = [
|
|||
path:'/examSelect',
|
||||
name:'examSelect',
|
||||
component:()=>import("../views/examination/examSelect.vue")
|
||||
},
|
||||
//考试模块
|
||||
{
|
||||
path:'/examModule',
|
||||
name:'examModule',
|
||||
component:()=>import("../views/examModule/index.vue")
|
||||
},
|
||||
//考试页面
|
||||
{
|
||||
path:'/examPage',
|
||||
name:'examPage',
|
||||
component:()=>import("../views/examModule/examPage.vue")
|
||||
},
|
||||
//练习交卷页面
|
||||
{
|
||||
path:'/practiceSuccess',
|
||||
name:'practiceSuccess',
|
||||
component:()=>import("../views/examModule/practiceSuccess.vue")
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -44,9 +44,14 @@
|
|||
<router-link to="/ntmaintenance">网络优化-网关维护</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<router-link to="/examSelect">考试选择</router-link>
|
||||
<router-link to="/examination">工业互联网试卷</router-link>
|
||||
<router-link to="/successPage">考试完成</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<router-link to="/examModule">考试模块</router-link>
|
||||
<router-link to="/examPage">考试模块考试页</router-link>
|
||||
</div>
|
||||
<!-- <ceshi></ceshi> -->
|
||||
<!-- <CeCe></CeCe> -->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,898 @@
|
|||
<script>
|
||||
import {
|
||||
getPracticeTopic,
|
||||
getTopicDetail,
|
||||
savaTestAnswer,
|
||||
getTestCache,
|
||||
saveTestCache,
|
||||
} from "@/api/user";
|
||||
import { sortString } from "@/util/tools";
|
||||
|
||||
export default {
|
||||
name: "examPage",
|
||||
data() {
|
||||
return {
|
||||
// 题目详情
|
||||
testContent: {
|
||||
testType: "多选题",
|
||||
question:
|
||||
"1、以社会主义核心价值观为引领，发展社会主义先进文化，弘扬革命文化，传承中华优秀传统文化，满足人民日益增长的精神文化需求，巩固全党全国各族人民团结奋斗的共同思想基础，不断提升（ ）。",
|
||||
score: "10",
|
||||
your_answer: "",
|
||||
blanks_answer: [],
|
||||
options: [
|
||||
{
|
||||
item_letter: "A",
|
||||
item: "国家文化软实力和中华文化影响力",
|
||||
},
|
||||
{
|
||||
item_letter: "B",
|
||||
item: "国家文化硬实力和中华文化影响力",
|
||||
},
|
||||
{
|
||||
item_letter: "C",
|
||||
item: "国家文化硬实力和中华传统文化影响力",
|
||||
},
|
||||
{
|
||||
item_letter: "D",
|
||||
item: "国家文化硬实力和中华传统文化",
|
||||
},
|
||||
],
|
||||
},
|
||||
testList: [],
|
||||
//题目数量
|
||||
testTypeNum: [
|
||||
{
|
||||
type: "单选题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "多选题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "判断题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "填空题",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "简答题",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
optionIndex: -1, // 选中的选项
|
||||
examDialogShow: false,
|
||||
// 考试请求参数
|
||||
params: {
|
||||
batch_id: "",
|
||||
},
|
||||
// 题量总数
|
||||
questionTotal: 0,
|
||||
passScore: 0, //及格分
|
||||
totalScore: 0, //总分
|
||||
minute: 0, //剩余时间
|
||||
number: 0, //第几题
|
||||
isCache: false, //是否获取完缓存
|
||||
testTitle: "", //试卷名称
|
||||
endTime: "",
|
||||
countdown: "", //剩余时间
|
||||
timer: "", //定时器
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 选项点击事件
|
||||
optionClick(event, index, item) {
|
||||
// 单选题
|
||||
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 + ",", "");
|
||||
} else {
|
||||
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";
|
||||
}
|
||||
} 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.testList[this.number - 1].your_answer = item.item_letter
|
||||
}
|
||||
},
|
||||
//输入框输入事件
|
||||
handleInput(index) {
|
||||
// let filteredArr = this.testContent.blanks_answer.filter(
|
||||
// (item) => item !== undefined && item !== null
|
||||
// );
|
||||
console.log("value", index, this.testContent.blanks_answer,);
|
||||
index.forEach(item => {
|
||||
console.log(filteredArr[item-1]);
|
||||
});
|
||||
if (this.testContent.testType == "填空题") {
|
||||
|
||||
}
|
||||
},
|
||||
//交卷按钮
|
||||
handPaper() {
|
||||
this.examDialogShow = true;
|
||||
},
|
||||
//确定交卷按钮
|
||||
submitTest() {
|
||||
let list = this.testList.map((el) => {
|
||||
console.log(el, "el");
|
||||
if (el.question_kind == "填空题") {
|
||||
let filteredArr = el.blanks_answer.filter(
|
||||
(item) => item !== undefined && item !== null
|
||||
);
|
||||
return {
|
||||
your_answer: filteredArr.join("__"), // 将数组元素通过 '__' 连接成字符串
|
||||
theory_base_id: el.theory_base_id,
|
||||
};
|
||||
} else {
|
||||
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;
|
||||
let formData = new FormData();
|
||||
formData.append("data", JSON.stringify(data));
|
||||
savaTestAnswer(formData).then((res) => {
|
||||
localStorage.removeItem("countdownEndTime");
|
||||
this.$router.push("/practiceSuccess");
|
||||
});
|
||||
},
|
||||
//答题卡数据获取
|
||||
getCardData() {
|
||||
// 考试信息
|
||||
let testMsg = sessionStorage.getItem("testMsg");
|
||||
this.testTitle = JSON.parse(testMsg).testTitle; //考试名称
|
||||
this.endTime = JSON.parse(testMsg).endTime; //结束时间
|
||||
// 试卷id
|
||||
this.params.batch_id = this.$route.query.id;
|
||||
this.totalScore = this.$route.query.totalScore; //总分
|
||||
this.minute = this.$route.query.minute; //剩余时间
|
||||
this.passScore = this.$route.query.passScore; //及格分
|
||||
getPracticeTopic(this.params).then((res) => {
|
||||
// 总数
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.testTypeNum.forEach((item, index) => {
|
||||
this.testList.push(...item.children);
|
||||
item.children.forEach((el) => {
|
||||
// 回答的问题
|
||||
el.your_answer = "";
|
||||
el.blanks_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;
|
||||
} else if (el.question_kind === "填空题") {
|
||||
el.number =
|
||||
el.no +
|
||||
this.testTypeNum[0].children.length +
|
||||
this.testTypeNum[1].children.length +
|
||||
this.testTypeNum[2].children.length;
|
||||
} else if (el.question_kind === "简答题") {
|
||||
el.number =
|
||||
el.no +
|
||||
this.testTypeNum[0].children.length +
|
||||
this.testTypeNum[1].children.length +
|
||||
this.testTypeNum[2].children.length +
|
||||
this.testTypeNum[3].children.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
// 获取缓存数据
|
||||
this.getCacheData();
|
||||
this.testClick(this.testList[0]);
|
||||
});
|
||||
},
|
||||
// 题目点击
|
||||
testClick(item) {
|
||||
// 保存缓存
|
||||
this.saveCacheData();
|
||||
this.testContent.options = [];
|
||||
this.testContent.question = "";
|
||||
// 第几个题目
|
||||
this.number = item.number;
|
||||
// 分数赋值
|
||||
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;
|
||||
});
|
||||
// 当前答案
|
||||
this.testContent.your_answer = item.your_answer;
|
||||
this.testContent.blanks_answer = item.blanks_answer;
|
||||
},
|
||||
// 获取缓存数据
|
||||
getCacheData() {
|
||||
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) => {
|
||||
if (res.data.state) {
|
||||
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);
|
||||
// ele.your_answer = val.your_answer
|
||||
}
|
||||
});
|
||||
});
|
||||
this.testContent.your_answer = this.testList[0].your_answer;
|
||||
} else {
|
||||
}
|
||||
|
||||
this.isCache = true;
|
||||
});
|
||||
},
|
||||
// 保存缓存数据
|
||||
saveCacheData() {
|
||||
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;
|
||||
});
|
||||
let formData = new FormData();
|
||||
formData.append("data", JSON.stringify(data));
|
||||
// 保存缓存
|
||||
saveTestCache(formData);
|
||||
},
|
||||
// 下一题点击
|
||||
nextClick() {
|
||||
if (this.number === this.questionTotal) {
|
||||
return;
|
||||
}
|
||||
this.number++;
|
||||
let data = this.testList[this.number - 1];
|
||||
this.testClick(data);
|
||||
},
|
||||
// 上一题点击
|
||||
preClick() {
|
||||
if (this.number === 1 || this.number === 0) {
|
||||
return;
|
||||
}
|
||||
this.number--;
|
||||
let data = this.testList[this.number - 1];
|
||||
this.testClick(data);
|
||||
},
|
||||
|
||||
//获取剩余时间
|
||||
initializeCountdown() {
|
||||
// 检查 localStorage 中是否已有保存的结束时间
|
||||
const storedEndTime = localStorage.getItem("countdownEndTime");
|
||||
const currentTime = Date.now();
|
||||
|
||||
if (storedEndTime) {
|
||||
// 如果存在，计算剩余时间
|
||||
const remainingTime = Math.max(0, parseInt(storedEndTime) - currentTime);
|
||||
this.countdown = Math.floor(remainingTime / 1000); // 转换为秒
|
||||
} else {
|
||||
// 如果没有结束时间，设置新的结束时间（30分钟后）
|
||||
const newEndTime = currentTime + this.minute * 60 * 1000; // 当前时间 + 30分钟
|
||||
localStorage.setItem("countdownEndTime", newEndTime.toString());
|
||||
this.countdown = this.minute * 60; // 设置初始倒计时时间（30分钟）
|
||||
}
|
||||
|
||||
// 启动倒计时
|
||||
this.timer = setInterval(this.updateCountdown, 1000);
|
||||
},
|
||||
|
||||
updateCountdown() {
|
||||
const currentTime = Date.now();
|
||||
const storedEndTime = parseInt(localStorage.getItem("countdownEndTime"));
|
||||
const remainingTime = Math.max(0, storedEndTime - currentTime);
|
||||
|
||||
this.countdown = Math.floor(remainingTime / 1000);
|
||||
|
||||
// 如果倒计时结束，清除定时器
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
localStorage.removeItem("countdownEndTime"); // 倒计时结束时清除存储
|
||||
this.$message.warning("考试时间到,已自动交卷");
|
||||
this.submitTest();
|
||||
}
|
||||
},
|
||||
padZero(value) {
|
||||
// 格式化为两位数
|
||||
return value < 10 ? `0${value}` : value;
|
||||
},
|
||||
generateArray(n) {
|
||||
let result = [];
|
||||
for (let i = 1; i <= n; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCardData();
|
||||
// 获取剩余时间
|
||||
this.initializeCountdown();
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清除定时器
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 将题目字符串按“-”分割，形成一个包含文本和输入框的数组
|
||||
questionParts() {
|
||||
const parts = this.testContent.question.split("_");
|
||||
return parts.map((part, index) => {
|
||||
return {
|
||||
type: index % 2 === 1 ? "input" : "text",
|
||||
value: part,
|
||||
index: this.generateArray(parts.filter((value, i) => i % 2 === 1).length),
|
||||
};
|
||||
});
|
||||
},
|
||||
timeFormatted() {
|
||||
// 将剩余时间转换为时:分:秒
|
||||
const hours = Math.floor(this.countdown / 3600);
|
||||
const minutes = Math.floor((this.countdown % 3600) / 60);
|
||||
const seconds = this.countdown % 60;
|
||||
|
||||
return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"testContent.options"(newVal, oldVal) {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="exam">
|
||||
<div class="exam-box">
|
||||
<div class="exam-left">
|
||||
<div class="exam-test-title">{{ testTitle }}</div>
|
||||
<div class="exam-left-top">
|
||||
<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>
|
||||
<!-- 题干 -->
|
||||
<div class="exam-left-test">
|
||||
<div class="exam-left-test-title">
|
||||
<div v-if="testContent.testType === '填空题'" class="exam-left-test-blanks">
|
||||
<div v-for="(char, index) in questionParts" :key="index">
|
||||
<span v-if="char.type !== 'input'">{{ char.value }}</span>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="testContent.blanks_answer[index]"
|
||||
@input="handleInput(char.index)"
|
||||
type="text"
|
||||
placeholder="请输入答案"
|
||||
class="answer-input"
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>{{ testContent.question }}</div>
|
||||
</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)"
|
||||
>
|
||||
{{ 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)"
|
||||
>
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exam-right">
|
||||
<div class="exam-right-title">答题卡</div>
|
||||
<div class="exam-right-card">
|
||||
<div class="exam-right-card-score">
|
||||
<span>总分：{{ totalScore }}分</span>
|
||||
<span>及格分：{{ passScore }}</span>
|
||||
<span>题量：{{ questionTotal }}</span>
|
||||
</div>
|
||||
<div class="exam-right-card-time">
|
||||
<span>剩余时间：</span>
|
||||
<span>{{ timeFormatted }}</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 class="exam-right-card-num-item">
|
||||
<span
|
||||
ref="answer"
|
||||
v-for="s in item.children"
|
||||
:class="{ selectQuestion: s.your_answer, border: s.number === number }"
|
||||
:style="{
|
||||
'background-color':
|
||||
s.blanks_answer.length != 0 ? 'rgba(64, 253, 137, 0.2)' : '',
|
||||
}"
|
||||
@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="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-btn">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.exam-test-title {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 700;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.exam {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
//提示弹窗
|
||||
&-dialog {
|
||||
width: 807px;
|
||||
height: 391px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background-image: url("../../assets/image/prompt.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
margin-right: 25px;
|
||||
margin-top: 7px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 113px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&-btn {
|
||||
display: flex;
|
||||
margin-top: 97px;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
width: 157px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&-light {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
&-left::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-left {
|
||||
position: relative;
|
||||
width: 1325px;
|
||||
height: 858px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/test.png");
|
||||
|
||||
&-top {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-type {
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
color: rgba(101, 140, 246, 1);
|
||||
padding: 0 7px;
|
||||
margin-left: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-type + span {
|
||||
margin: 0 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-num {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
line-height: 52px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 114px;
|
||||
height: 52px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/test-num.png");
|
||||
}
|
||||
|
||||
&-msc {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// 试卷内容
|
||||
&-test {
|
||||
margin-top: 33px;
|
||||
padding: 0 50px;
|
||||
//题目
|
||||
&-title {
|
||||
font-size: 24px;
|
||||
line-height: 44px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
&-blanks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
::v-deep .el-input__inner {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
&-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 选项
|
||||
&-content {
|
||||
margin-top: 40px;
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.optionSelect {
|
||||
background-color: rgba(101, 140, 246, 0.55);
|
||||
}
|
||||
|
||||
&-option {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
background-image: url("../../assets/image/test-option.png");
|
||||
padding-left: 34px;
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
//按钮
|
||||
&-btn {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
display: flex;
|
||||
margin-left: -239px;
|
||||
left: 50%;
|
||||
|
||||
&-pre,
|
||||
&-next {
|
||||
width: 157px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-pre {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
background-image: url("../../assets/image/dark-btn.png");
|
||||
}
|
||||
|
||||
&-next {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-image: url("../../assets/image/highlight-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
position: relative;
|
||||
width: 441px;
|
||||
height: 858px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/image/test-card.png");
|
||||
|
||||
//答题卡名称
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&-card {
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 46px;
|
||||
//提交按钮
|
||||
.submit {
|
||||
width: 157px;
|
||||
height: 44px;
|
||||
margin: 20px auto;
|
||||
//left: 50%;
|
||||
//margin-left: -78px;
|
||||
//bottom: 50px;
|
||||
background-image: url("../../assets/image/submit.png");
|
||||
}
|
||||
&-lenged {
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
background-color: rgba(149, 149, 149, 0.2);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div {
|
||||
span {
|
||||
font-size: 14px;
|
||||
margin-right: 26px;
|
||||
span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
i {
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.current {
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
}
|
||||
.notDone {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.have {
|
||||
background-color: rgba(64, 253, 137, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-score {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&-line {
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
&-time {
|
||||
margin-top: 37px;
|
||||
position: relative;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: rgba(255, 189, 34, 1);
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
//题目容器
|
||||
&-box {
|
||||
position: relative;
|
||||
height: 516px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// 滚动条
|
||||
&-box::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
width: 7px; //修改滚动条宽度
|
||||
background-color: rgba(107, 126, 177, 0.2);
|
||||
}
|
||||
|
||||
&-box::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(107, 126, 177, 1);
|
||||
}
|
||||
|
||||
// 题目数量
|
||||
&-num {
|
||||
&-title {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.type {
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
color: rgba(101, 140, 246, 1);
|
||||
padding: 0 7px;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.border {
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(101, 140, 246, 1);
|
||||
}
|
||||
.selectQuestion {
|
||||
background-color: rgba(64, 253, 137, 0.2);
|
||||
}
|
||||
|
||||
span {
|
||||
//display:inline-block ;
|
||||
margin: 0 11px 14px 0;
|
||||
width: 58px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
span:nth-child(5n) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
<script>
|
||||
import { GetSubjectType, GetPractice } from "@/api/user";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
typeOptions: [],
|
||||
examIndex: 0,
|
||||
// 获取考试数据参数
|
||||
form: {
|
||||
PageIndex: 1,
|
||||
PageSize: 8,
|
||||
state: "",
|
||||
user_id: "",
|
||||
SubjectType: "",
|
||||
},
|
||||
// 考试场次
|
||||
testList: [],
|
||||
total: 0, //总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//根据科目查询
|
||||
onQuery() {
|
||||
this.getTestList();
|
||||
},
|
||||
examClick(item, index) {
|
||||
// 状态切换页码初始化
|
||||
this.form.PageIndex = 1;
|
||||
this.examIndex = index;
|
||||
this.form.state = item.state;
|
||||
// 切换状态重新发送请求
|
||||
this.getTestList();
|
||||
},
|
||||
getTestList() {
|
||||
GetPractice(this.form).then((res) => {
|
||||
this.testList = res.data.data;
|
||||
this.total = parseInt(res.data.message);
|
||||
});
|
||||
},
|
||||
// 进入考试
|
||||
enterExam(item) {
|
||||
this.$router.push(
|
||||
`/examPage?id=${item.batch_id}&totalScore=${item.total_score}&minute=${item.ks_minute}&passScore=${item.pass_score}`
|
||||
);
|
||||
let data = {
|
||||
user_id: this.form.user_id,
|
||||
batch_id: item.batch_id,
|
||||
list_item_answer: [],
|
||||
};
|
||||
let testMsg = {
|
||||
testTitle: item.subject, //考试名称
|
||||
endTime: item.ks_minute, //考试结束时间
|
||||
};
|
||||
// 存储考试数据
|
||||
sessionStorage.setItem("testMsg", JSON.stringify(testMsg));
|
||||
sessionStorage.setItem("params", JSON.stringify(data));
|
||||
},
|
||||
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;
|
||||
}
|
||||
if (m < 10) {
|
||||
m = "0" + m;
|
||||
}
|
||||
if (s < 10) {
|
||||
s = "0" + s;
|
||||
}
|
||||
|
||||
return h + "小时" + m + "分" + s + "秒后开始";
|
||||
// return h+':'+m+':'+s
|
||||
},
|
||||
//获取科目类别
|
||||
getSubjectTypeList() {
|
||||
GetSubjectType()
|
||||
.then((res) => {
|
||||
this.typeOptions = res.data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 用户id赋值
|
||||
// this.form.user_id = window.location.href.split("?")[1];
|
||||
this.form.user_id = "USER202311172256420502";
|
||||
this.getSubjectTypeList();
|
||||
this.getTestList();
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="test-box">
|
||||
<div class="test-box-title">考试场次选择</div>
|
||||
<div class="test-box-status">
|
||||
<el-form v-model="form" :inline="true">
|
||||
<el-form-item label="科目类别:">
|
||||
<el-select
|
||||
v-model="form.SubjectType"
|
||||
placeholder="请选择科目类别"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in typeOptions"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onQuery">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="test-box-site">
|
||||
<div v-for="item in testList" class="test-box-site-item">
|
||||
<div class="test-box-site-item-name">
|
||||
{{ item.subject }}
|
||||
</div>
|
||||
<div class="test-box-site-item-time">
|
||||
<span>考试时长：{{ item.ks_minute }}分钟</span>
|
||||
</div>
|
||||
<div class="test-box-site-item-score">
|
||||
<span>满分：{{ item.total_score }}分</span>
|
||||
</div>
|
||||
<div class="test-box-site-item-score">
|
||||
<span>及格分：{{ item.pass_score }}分</span>
|
||||
</div>
|
||||
<div class="test-box-site-item-btn">
|
||||
<!-- <span> 考试记录 </span> -->
|
||||
<span>
|
||||
<img src="@/assets/image/ksjl.png" />
|
||||
</span>
|
||||
<!-- <div class="time" v-if="item.batch_state.trim() === '未开始'">
|
||||
{{ getCountdown(item.start_time) }}
|
||||
</div> -->
|
||||
<!-- <span @click="enterExam(item)"> 进入考试 </span> -->
|
||||
<span>
|
||||
<img src="@/assets/image/jrks.png" @click="enterExam(item)" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="test-no-data" v-if="!testList.length"></div>
|
||||
<div class="test-box-pagination">
|
||||
<span>共{{ total }}条</span>
|
||||
<el-pagination
|
||||
@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");
|
||||
width: 228px;
|
||||
height: 244px;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
::v-deep .el-pager li {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
::v-deep .el-pagination .btn-next,
|
||||
::v-deep .el-pagination .btn-prev {
|
||||
background-color: transparent;
|
||||
width: 34px;
|
||||
color: #ffffff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
::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.active {
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.test-box {
|
||||
width: 1773px;
|
||||
height: 858px;
|
||||
background-image: url("../../assets/image/examSelect/test-box.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
padding: 0 68px;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
//
|
||||
&-pagination {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
align-items: center;
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 50%;
|
||||
font-size: 24px;
|
||||
margin-left: -72px;
|
||||
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
// 状态的tab栏
|
||||
|
||||
&-status {
|
||||
margin-top: 42px;
|
||||
margin-bottom: 26px;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-input.is-focus .el-input__inner {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
::v-deep .el-select-dropdown {
|
||||
left: 0 !important;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item.hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
::v-deep .el-select-dropdown__list {
|
||||
background: rgba(57, 57, 67);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.select {
|
||||
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, 0.6);
|
||||
// width: 136px;
|
||||
// height: 40px;
|
||||
// margin-right: 14px;
|
||||
// text-align: center;
|
||||
// line-height: 40px;
|
||||
// }
|
||||
}
|
||||
|
||||
// 考试场次选择
|
||||
&-site {
|
||||
height: 552px;
|
||||
&-item {
|
||||
float: left;
|
||||
width: 372px;
|
||||
margin-right: 49px;
|
||||
margin-bottom: 49px;
|
||||
height: 232px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 18px;
|
||||
background-image: url("../../assets/image/examSelect/exam-plate.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 20px;
|
||||
// 理论考试名字
|
||||
&-name {
|
||||
font-size: 18px;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
div {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
//开始时间
|
||||
&-start {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 23px !important;
|
||||
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");
|
||||
}
|
||||
.not-started {
|
||||
background-image: url("../../assets/image/examSelect/not-started.png");
|
||||
}
|
||||
.started {
|
||||
background-image: url("../../assets/image/examSelect/started.png");
|
||||
}
|
||||
}
|
||||
|
||||
// 进入考场
|
||||
&-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
margin-top: 30px !important;
|
||||
padding: 0 40px;
|
||||
.time {
|
||||
color: rgba(101, 140, 246, 1);
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
margin-right: 45px;
|
||||
}
|
||||
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);
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.starting {
|
||||
background-image: url("../../assets/image/examSelect/enter.png");
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<script>
|
||||
export default {
|
||||
name: "practiceSuccess",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 进入考场选择页面
|
||||
determine() {
|
||||
let params = sessionStorage.getItem("params");
|
||||
let data = JSON.parse(params);
|
||||
this.$router.push("/examModule?" + data.user_id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="success-page">
|
||||
<div class="success-font">您已成功交卷，请继续下一场考试。</div>
|
||||
<div class="success-score">
|
||||
<p class="score">60</p>
|
||||
<p class="unit">分</p>
|
||||
</div>
|
||||
<div class="success-btn">
|
||||
<img src="@/assets/image/viewAnalysis.png" />
|
||||
<img @click="determine" src="@/assets/image/returnList.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
.success-page {
|
||||
width: 1773px;
|
||||
position: relative;
|
||||
height: 858px;
|
||||
background-image: url("../../assets/image/success-bg.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.success-font {
|
||||
margin-top: 200px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.success-score {
|
||||
margin-top: 85px;
|
||||
text-align: center;
|
||||
.score {
|
||||
font-weight: 700;
|
||||
font-size: 72px;
|
||||
color: #658cf6;
|
||||
}
|
||||
.unit {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.success-btn {
|
||||
width: 600px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
position: absolute;
|
||||
bottom: 95px;
|
||||
left: 50%;
|
||||
margin-left: -300px;
|
||||
// background-image: url("../../assets/image/highlight-btn.png");
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
img{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue