902 lines
26 KiB
Vue
902 lines
26 KiB
Vue
<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) {
|
||
console.log(item,'xxxxxxx');
|
||
// 保存缓存
|
||
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("_");
|
||
console.log(parts,'xxxxxxxxxxxx');
|
||
return parts
|
||
// 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 !== ''">{{ char }}</span>
|
||
<el-input
|
||
v-else
|
||
v-model="chart"
|
||
@input="handleInput"
|
||
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>
|