|
|
@@ -2,28 +2,32 @@
|
|
|
<div class="center">
|
|
|
<beforeSubmitMask
|
|
|
:show="beforeSubmitVisible"
|
|
|
- @cancel="() => {
|
|
|
- beforeSubmitVisible=false
|
|
|
- }"
|
|
|
+ @cancel="
|
|
|
+ () => {
|
|
|
+ beforeSubmitVisible = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
:correctScore="correctScore"
|
|
|
:errorScore="errorScore"
|
|
|
:total="list.length"
|
|
|
- @confirm="() => {
|
|
|
- beforeSubmitVisible=false
|
|
|
- submitVisible=true
|
|
|
- }"
|
|
|
+ @confirm="
|
|
|
+ () => {
|
|
|
+ beforeSubmitVisible = false;
|
|
|
+ submitVisible = true;
|
|
|
+ }
|
|
|
+ "
|
|
|
></beforeSubmitMask>
|
|
|
- <submitMask v-if="submitVisible" :correctScore="correctScore"></submitMask>
|
|
|
+ <submitMask v-if="submitVisible" :correctScore="correctScore"></submitMask>
|
|
|
<div class="box">
|
|
|
<div class="main">
|
|
|
<div class="container1">
|
|
|
<div class="kaoti">
|
|
|
<div class="kaoti-header">金牌驾考</div>
|
|
|
- <div class="mt16">第01考台</div>
|
|
|
+ <div class="kaoti-headerText">第01考台</div>
|
|
|
</div>
|
|
|
- <div class="student mt16">
|
|
|
+ <div class="student mt6">
|
|
|
<div class="student-header">考生信息</div>
|
|
|
- <div class="mt19">
|
|
|
+ <div class="mt13">
|
|
|
<img class="driver" :src="headimg" />
|
|
|
<div class="driverInfo">
|
|
|
<div>姓名：{{ username }}</div>
|
|
|
@@ -34,13 +38,13 @@
|
|
|
</div>
|
|
|
<div class="restTime">
|
|
|
<div class="restTime-header">剩余时间</div>
|
|
|
- <div class="mt16">{{ countdownTime }}</div>
|
|
|
+ <div class="restTime-headerText">{{ countdownTime }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container2">
|
|
|
<div class="topic">
|
|
|
<div class="topic-header">考试题目</div>
|
|
|
- <div class="topic-issue" style="font-weight: 600; text-align: left">
|
|
|
+ <div class="topic-issue">
|
|
|
<span>{{ listIndex + 1 }}.{{ list[listIndex].issue }}</span>
|
|
|
</div>
|
|
|
<div class="mt9 topic-select">
|
|
|
@@ -56,7 +60,7 @@
|
|
|
</div>
|
|
|
<div class="answer">
|
|
|
<span>您选择的答案：</span>
|
|
|
- <div style="display: flex">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
<span>选项:</span>
|
|
|
<div class="answer-list">
|
|
|
<div
|
|
|
@@ -73,9 +77,6 @@
|
|
|
<!-- <div class="answer-list-item answer-list-item_select">B</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mt16">
|
|
|
- <img class="answer-img" v-if="list[listIndex].image" :src="list[listIndex].image" />
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container3">
|
|
|
@@ -143,7 +144,7 @@
|
|
|
|
|
|
<div class="bottom">
|
|
|
<div class="left">
|
|
|
- <div style="color: red; width: 100%">操作提示：选择题</div>
|
|
|
+ <div style="color: #bc322d; width: 100%">操作提示：选择题</div>
|
|
|
<div>请在备选答案中选择你认为正确的答案！</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
@@ -152,6 +153,9 @@
|
|
|
<div @click="submitScore" class="right-button2">交卷</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="mt16">
|
|
|
+ <img class="answer-img" v-if="list[listIndex].image" :src="list[listIndex].image" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -160,7 +164,7 @@
|
|
|
import { defineComponent, reactive, ref, onMounted } from 'vue';
|
|
|
import dayjs from 'dayjs';
|
|
|
import beforeSubmitMask from '@/components/mask/beforeSubmitMask.vue';
|
|
|
-import submitMask from "@/components/mask/submitMask.vue"
|
|
|
+import submitMask from '@/components/mask/submitMask.vue';
|
|
|
// import Api from '@/api/api';
|
|
|
import { countdownTime, countdown, countdownTimer } from '@/hooks/countdown';
|
|
|
import { useStore } from 'vuex';
|
|
|
@@ -190,7 +194,7 @@ export default defineComponent({
|
|
|
getPgae,
|
|
|
correctScore,
|
|
|
errorScore,
|
|
|
- submitVisible
|
|
|
+ submitVisible,
|
|
|
} = useExamTest();
|
|
|
//设置开始时间
|
|
|
store.commit('SET_BEGINTIME', {
|
|
|
@@ -703,12 +707,18 @@ export default defineComponent({
|
|
|
},
|
|
|
components: {
|
|
|
beforeSubmitMask,
|
|
|
- submitMask
|
|
|
+ submitMask,
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.mt6 {
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+.mt13 {
|
|
|
+ margin-top: 13px;
|
|
|
+}
|
|
|
.border-none {
|
|
|
border: none;
|
|
|
}
|
|
|
@@ -716,7 +726,7 @@ export default defineComponent({
|
|
|
background: #498ef5;
|
|
|
}
|
|
|
.bottom {
|
|
|
- margin-top: 14px;
|
|
|
+ margin-top: 3px;
|
|
|
display: flex;
|
|
|
padding: 0px 8px;
|
|
|
font-size: 13px;
|
|
|
@@ -727,6 +737,9 @@ export default defineComponent({
|
|
|
height: 46px;
|
|
|
border: 1px solid #b8c0cc;
|
|
|
border-radius: 6px;
|
|
|
+ padding: 4px 0px;
|
|
|
+ padding-left: 6px;
|
|
|
+ padding-right: 12px;
|
|
|
.left {
|
|
|
display: flex;
|
|
|
width: 50%;
|
|
|
@@ -767,9 +780,9 @@ export default defineComponent({
|
|
|
}
|
|
|
.center {
|
|
|
display: flex;
|
|
|
- align-content: center;
|
|
|
- align-items: center;
|
|
|
+
|
|
|
height: 100vh;
|
|
|
+ background: #f6f2f1;
|
|
|
}
|
|
|
.box {
|
|
|
padding-top: 16px;
|
|
|
@@ -787,15 +800,14 @@ export default defineComponent({
|
|
|
}
|
|
|
.container2 {
|
|
|
box-sizing: border-box;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
+ padding-left: 3px;
|
|
|
+ padding-right: 3px;
|
|
|
width: 454px;
|
|
|
- height: 258px;
|
|
|
+ height: 151px;
|
|
|
}
|
|
|
.container1 {
|
|
|
display: flex;
|
|
|
- height: 258px;
|
|
|
- width: 109px;
|
|
|
+ width: 73px;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.coll {
|
|
|
@@ -853,7 +865,13 @@ export default defineComponent({
|
|
|
border-bottom: 1px solid #b8c0cc;
|
|
|
border-right: 1px solid #b8c0cc;
|
|
|
|
|
|
- font-size: 12px;
|
|
|
+ div {
|
|
|
+ font-size: 8px;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+ // font-size: 12px;
|
|
|
.coll-table-topic-item {
|
|
|
border: none;
|
|
|
|
|
|
@@ -872,21 +890,21 @@ export default defineComponent({
|
|
|
.answer {
|
|
|
font-size: 13px;
|
|
|
text-align: left;
|
|
|
- margin-top: 13px;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
+ height: 31px;
|
|
|
+ line-height: 31px;
|
|
|
font-weight: 600;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
flex-wrap: wrap;
|
|
|
- .answer-img {
|
|
|
- width: 321px;
|
|
|
- height: 128px;
|
|
|
- }
|
|
|
+ padding-left: 18px;
|
|
|
+
|
|
|
.answer-list {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: auto;
|
|
|
+ height: 24px;
|
|
|
.answer_selected {
|
|
|
color: #fff;
|
|
|
background: #498ef5;
|
|
|
@@ -908,28 +926,34 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.answer-img {
|
|
|
+
|
|
|
+ height: 63px;
|
|
|
+}
|
|
|
.topic {
|
|
|
border: 1px solid #b8c0cc;
|
|
|
width: 100%;
|
|
|
- height: 93px;
|
|
|
- border-radius: 6px;
|
|
|
+ height: 161px;
|
|
|
position: relative;
|
|
|
.topic-issue {
|
|
|
- margin-top: 14px;
|
|
|
+ margin-top: 8px;
|
|
|
font-size: 13px;
|
|
|
padding-left: 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
.topic-header {
|
|
|
color: #498ef5;
|
|
|
position: absolute;
|
|
|
- background: #fff;
|
|
|
+ background: #f6f2f1;
|
|
|
top: 0;
|
|
|
- left: 15%;
|
|
|
+ left: 30px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
text-align: left;
|
|
|
- padding-left: 8px;
|
|
|
- padding-right: 8px;
|
|
|
+ padding-left: 2px;
|
|
|
+ padding-right: 2px;
|
|
|
white-space: nowrap;
|
|
|
+ font-size: 10px;
|
|
|
}
|
|
|
.topic-select {
|
|
|
display: flex;
|
|
|
@@ -937,8 +961,7 @@ export default defineComponent({
|
|
|
height: 37px;
|
|
|
padding-left: 10px;
|
|
|
padding-right: 10px;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.topic-select-item {
|
|
|
@@ -949,69 +972,77 @@ export default defineComponent({
|
|
|
}
|
|
|
.student {
|
|
|
border: 1px solid #b8c0cc;
|
|
|
- width: 101px;
|
|
|
- height: 150px;
|
|
|
+ width: 70px;
|
|
|
+ height: 125px;
|
|
|
font-size: 13px;
|
|
|
position: relative;
|
|
|
.student-header {
|
|
|
color: #498ef5;
|
|
|
position: absolute;
|
|
|
- background: #fff;
|
|
|
+ background: #f6f2f1;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
text-align: left;
|
|
|
- padding-left: 8px;
|
|
|
- padding-right: 8px;
|
|
|
+ padding-left: 2px;
|
|
|
+ padding-right: 2px;
|
|
|
white-space: nowrap;
|
|
|
font-weight: 600;
|
|
|
+ font-size: 10px;
|
|
|
}
|
|
|
.driver {
|
|
|
- width: 46px;
|
|
|
- height: 46px;
|
|
|
+ width: 57px;
|
|
|
+ height: 57px;
|
|
|
}
|
|
|
.driverInfo {
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 9px;
|
|
|
font-weight: 600;
|
|
|
- padding-top: 10px;
|
|
|
+ padding-top: 6px;
|
|
|
text-align: left;
|
|
|
- padding-left: 10px;
|
|
|
+ padding-left: 2px;
|
|
|
+ div {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.kaoti {
|
|
|
- width: 101px;
|
|
|
+ width: 70px;
|
|
|
position: relative;
|
|
|
- height: 37px;
|
|
|
+ height: 26px;
|
|
|
border: 1px solid #b8c0cc;
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
- border-radius: 6px;
|
|
|
.kaoti-header {
|
|
|
color: #498ef5;
|
|
|
position: absolute;
|
|
|
- background: #fff;
|
|
|
+ background: #f6f2f1;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
+ font-size: 10px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
text-align: left;
|
|
|
- padding-left: 8px;
|
|
|
- padding-right: 8px;
|
|
|
+ padding-left: 2px;
|
|
|
+ padding-right: 2px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+ .kaoti-headerText {
|
|
|
+ font-size: 8px;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
}
|
|
|
.restTime {
|
|
|
- width: 101px;
|
|
|
+ width: 70px;
|
|
|
position: relative;
|
|
|
- height: 37px;
|
|
|
+ height: 26px;
|
|
|
border: 1px solid #b8c0cc;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 9px;
|
|
|
font-weight: 600;
|
|
|
- border-radius: 6px;
|
|
|
- margin-top: 14px;
|
|
|
+ margin-top: 6px;
|
|
|
.restTime-header {
|
|
|
color: #498ef5;
|
|
|
position: absolute;
|
|
|
- background: #fff;
|
|
|
+ background: #f6f2f1;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
@@ -1020,9 +1051,13 @@ export default defineComponent({
|
|
|
padding-right: 8px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
+ .restTime-headerText {
|
|
|
+ margin-top: 7px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
-.mt16 {
|
|
|
- margin-top: 14px;
|
|
|
+.mt6 {
|
|
|
+ margin-top: 6px;
|
|
|
}
|
|
|
.mt9 {
|
|
|
margin-top: 9px;
|
