From 272c6479425767aaaeb53c3bf29a85979abbb5cf Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 18 Aug 2021 15:52:35 +0800
Subject: [PATCH] 样式 到时见自动提交
---
src/views/singleperformance/index.vue | 230 +++++++++++++++++++++-----------
src/store/modules/exam.js | 17 +
src/views/exam/startexam.vue | 35 ++--
src/store/getters.js | 2
src/assets/css/subject.scss | 24 +-
src/styles/element-ui.scss | 18 ++
src/views/startexam/index.vue | 91 +++++++++---
7 files changed, 275 insertions(+), 142 deletions(-)
diff --git a/src/assets/css/subject.scss b/src/assets/css/subject.scss
index 69f5f89..285a418 100644
--- a/src/assets/css/subject.scss
+++ b/src/assets/css/subject.scss
@@ -2,7 +2,7 @@
font-size: 18px;
line-height: 25px;
padding: 18px 20px;
- border-bottom: 1px solid #DEDEDE;
+ border-bottom: 1px solid #dedede;
margin-bottom: 12px;
}
@@ -21,18 +21,19 @@
position: relative;
}
-
/* 题目 */
.subject-title {
font-size: 18px;
line-height: 22px;
+ margin-bottom: 15px;
.subject-title-number {
display: inline-block;
line-height: 22px;
}
.subject-title-content {
// display: inline-block;
+ // margin-bottom: 15px;
}
}
@@ -40,7 +41,7 @@
margin: 0;
padding: 0;
list-style: none;
- >li {
+ > li {
position: relative;
font-size: 24px;
.toggle {
@@ -58,21 +59,22 @@
-webkit-appearance: none;
appearance: none;
}
- .toggle+label {
- background-image: url('/img/exam/radus.png');
+ $sizes: 25px;
+ .toggle + label {
+ background-image: url("/img/exam/radus.png");
background-repeat: no-repeat;
background-position: center left;
- background-size: 30px;
+ background-size: $sizes;
}
- .toggle:checked+label {
- background-size: 30px;
- background-image: url('/img/exam/radus-check.png');
+ .toggle:checked + label {
+ background-size: $sizes;
+ background-image: url("/img/exam/radus-check.png");
}
label {
word-break: break-all;
padding: 10px 10px 10px 45px;
display: block;
- line-height: 1.0;
+ line-height: 1;
transition: color 0.4s;
}
/* 选项名称 */
@@ -84,4 +86,4 @@
.subject-answer {
padding: 16px;
-}
\ No newline at end of file
+}
diff --git a/src/store/getters.js b/src/store/getters.js
index 203eaba..b91014f 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -30,5 +30,7 @@
subject: state => state.exam.subject,
examRecord: state => state.exam.examRecord,
incorrectRecord: state => state.exam.incorrectRecord,
+
+ examUserData: state => state.exam.examUserData,
}
export default getters
diff --git a/src/store/modules/exam.js b/src/store/modules/exam.js
index 54c3680..036d024 100644
--- a/src/store/modules/exam.js
+++ b/src/store/modules/exam.js
@@ -1,5 +1,5 @@
import { start } from '@/api/exam/examRecord'
-import {setStore, getStore} from '@/util/store'
+import { setStore, getStore } from '@/util/store'
import { submit } from '@/api/exam/answer'
const exam = {
@@ -15,15 +15,17 @@
}) || {},
incorrectRecord: getStore({
name: 'incorrectRecord'
- }) || {}
+ }) || {},
+ examUserData: {},
},
actions: {
+
// 设置题目信息
- SetSubjectInfo ({ commit, state }, subject) {
+ SetSubjectInfo({ commit, state }, subject) {
commit('SET_SUBJECT', subject)
},
// 开始考试
- StartExam ({ commit, state }, examRecord) {
+ StartExam({ commit, state }, examRecord) {
return new Promise((resolve, reject) => {
start(examRecord).then(response => {
commit('SET_EXAM', response.data.data.examination)
@@ -36,7 +38,7 @@
})
},
// 提交考试
- SubmitExam ({ commit, state }, exam) {
+ SubmitExam({ commit, state }, exam) {
return new Promise((resolve, reject) => {
submit(exam).then(response => {
resolve(response)
@@ -46,11 +48,14 @@
})
},
// 当前错题记录
- SetIncorrectRecord ({ commit, state }, incorrectRecord) {
+ SetIncorrectRecord({ commit, state }, incorrectRecord) {
commit('SET_INCORRECT_RECORD', incorrectRecord)
}
},
mutations: {
+ SetexamUserData(state, data) {
+ state.examUserData = data;
+ },
SET_EXAM: (state, exam) => {
state.exam = exam
setStore({
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 54c3e92..8330151 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -25,7 +25,6 @@
display: none;
}
-
.el-message__icon,
.el-message__content {
display: inline-block;
@@ -49,12 +48,19 @@
padding: 0 !important;
}
-.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+.el-dropdown-menu__item--divided:before,
+.el-menu,
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
background-color: transparent;
}
-
-.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+.el-dropdown-menu__item--divided:before,
+.el-menu,
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
background-color: transparent !important;
}
@@ -69,3 +75,7 @@
.el-divider--horizontal {
margin: 12px 0 !important;
}
+
+// .time {
+// font-size: 41px !important;
+// }
diff --git a/src/views/exam/startexam.vue b/src/views/exam/startexam.vue
index 2a4fa55..741364c 100644
--- a/src/views/exam/startexam.vue
+++ b/src/views/exam/startexam.vue
@@ -85,22 +85,22 @@
});
},
//开始考试跳转
- startExam () {
+ startExam() {
var that = this;
//去修改考试状态
var data = {
- id:that.resData.applyId,
- examType:this.resData.examType,
- examId:this.resData.id,
- userId:this.userInfo.user_id,
- }
+ id: that.resData.applyId,
+ examType: this.resData.examType,
+ examId: this.resData.id,
+ userId: this.userInfo.user_id,
+ };
updateApplyStatus(data).then((res) => {
- that.resData['examScoreId'] = res.data.id;
- that.$router.push({
- path: `/startexam/${that.resData.id}`,
- query: that.resData
- })
- })
+ that.resData["examScoreId"] = res.data.id;
+ that.$router.push({
+ path: `/startexam/${that.resData.id}`,
+ query: that.resData,
+ });
+ });
},
getUserInfoBYExam() {
var that = this;
@@ -109,7 +109,7 @@
that.resData = res.data.data[0];
var data = res.data.data[0];
// debugger;
- console.log(data, 254424);
+ // console.log(data, 254424);
if (res.data.data.length > 0) {
that.pageDisable = true;
if (data.sex == 1) {
@@ -150,6 +150,7 @@
],
},
];
+ that.$store.commit("SetexamUserData", that.option.data[0]);
}
},
@@ -167,9 +168,9 @@
// width: 100%;
// height: 100%;
// border: 1px solid red;
- width: 80%;
- height: 90%;
- margin: 2.5% 10%;
+ width: calc(100% - 100px);
+ height: 89%;
+ margin: 2.5% 50px;
background-color: rgba($color: #fff, $alpha: 1);
display: flex;
align-items: center;
@@ -188,7 +189,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- box-shadow: 5px 12px 15px -3px rgba($color: #797979, $alpha: 0.2);
+ box-shadow: 0px 0px 5px 3px rgba($color: #797979, $alpha: 0.2);
.s_m_img {
width: 50%;
height: 100%;
diff --git a/src/views/singleperformance/index.vue b/src/views/singleperformance/index.vue
index b469f44..20df1f1 100644
--- a/src/views/singleperformance/index.vue
+++ b/src/views/singleperformance/index.vue
@@ -6,8 +6,8 @@
* menu-name 成绩管理
*/
<template>
- <div class="exam-end">
- <button class="logout"
+ <div class="exam-end">
+ <!-- <button class="logout"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='';"
@click="handleLogout">退出系统</button>
@@ -19,98 +19,164 @@
<div class="score">
<span>本次考试得分： {{score}} 分</span>
</div>
- </div>
+ </div> -->
+ <div class="startexam_heard">
+ {{ examUserData.title }}
</div>
+ <div class="startexam_main">
+ <div class="s_m_img">
+ <img src="/img/exam/startbg.jpg" alt="" />
+ </div>
+ <div class="s_m_value" v-if="examUserData.list.length != 0">
+ <div v-for="(item, index) in examUserData.list" :key="index">
+ <span class="s_m_v_title">{{ item.title }}</span>
+ <span>{{ item.value }}</span>
+ </div>
+ <div>
+ <span class="s_m_v_title" style="font-size: 24px">成绩 ：</span>
+ <span style="font-size: 24px; color: red">
+ <span style="font-size: 32px">{{ score }}</span> 分</span
+ >
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import {getExamScore} from "@/api/exam/examscore";
-
+import { getExamScore } from "@/api/exam/examscore";
+import { mapState } from "vuex";
export default {
- data () {
- return {
- score:0,
- }
+ data() {
+ return {
+ score: 0,
+ };
+ },
+ created() {},
+ computed: {
+ ...mapState({
+ examUserData: (state) => state.exam.examUserData,
+ }),
+ },
+ mounted() {
+ //获取考试成绩
+ this.getExamScore();
+ },
+ methods: {
+ //退出登录
+ handleLogout() {
+ this.$confirm("是否退出系统, 是否继续?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ }).then(() => {
+ this.$store.dispatch("LogOut").then(() => {
+ this.$router.push({ path: "/login" });
+ });
+ });
},
- created () {
-
-
+ getExamScore() {
+ var data = {
+ userId: this.$route.query.userId,
+ examId: this.$route.query.examId,
+ };
+ getExamScore(data).then((res) => {
+ this.score = res.data.data.theoryGrade;
+ });
},
- mounted () {
- //获取考试成绩
- this.getExamScore();
- },
- methods: {
- //退出登录
- handleLogout() {
- this.$confirm("是否退出系统, 是否继续?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- this.$store.dispatch("LogOut").then(() => {
- this.$router.push({ path: "/login" });
- });
- });
- },
- getExamScore(){
- var data = {
- userId:this.$route.query.userId,
- examId:this.$route.query.examId
- }
- getExamScore(data).then((res) => {
- this.score = res.data.data.theoryGrade;
- })
- }
-
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
-.exam-end{
- position: fixed;
- width: 100%;
- height: 100%;
-}
-
-.logout{
- border: 0px;
- margin-left: 92%;
- margin-top: 30px;
- border-radius: 5px;
- font-size: 14px;
- width: 80px;
- height: 30px;
- letter-spacing: 1px;
+.exam-end {
+ width: calc(100% - 100px);
+ height: 89%;
+ margin: 2.5% 50px;
+ background-color: rgba($color: #fff, $alpha: 1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .startexam_heard {
+ font-size: 34px;
+ color: rgb(240, 114, 29);
+ position: relative;
+ top: -10%;
+ }
+ .startexam_main {
+ width: 960px;
+ height: 300px;
+ // border: 1px solid red;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-shadow: 0px 0px 5px 3px rgba($color: #797979, $alpha: 0.2);
+ .s_m_img {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 90%;
+ height: 90%;
+ }
}
-
-.end{
- width: 20%;
- height: 200px;
- line-height: 200px;
- text-align: center;
- background-color: #fff;
- border-radius: 5px;
- margin-left: 40%;
- margin-top: 10%;
-
- .title{
- width: 100%;
- height: 40px;
-
- span{
- color: blueviolet;
- letter-spacing: 2px;
+ .s_m_value {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ div {
+ width: 90%;
+ height: 15%;
+ font-size: 17px;
+ .s_m_v_title {
+ display: inline-block;
+ width: 100px;
}
+ }
}
-
- .score{
- font-size: 16px;
- color: darkorchid;
- }
-
-
-
+ }
}
+
+// .logout {
+// border: 0px;
+// margin-left: 92%;
+// margin-top: 30px;
+// border-radius: 5px;
+// font-size: 14px;
+// width: 80px;
+// height: 30px;
+// letter-spacing: 1px;
+// }
+
+// .end {
+// width: 20%;
+// height: 200px;
+// line-height: 200px;
+// text-align: center;
+// background-color: #fff;
+// border-radius: 5px;
+// margin-left: 40%;
+// margin-top: 10%;
+
+// .title {
+// width: 100%;
+// height: 40px;
+
+// span {
+// color: blueviolet;
+// letter-spacing: 2px;
+// }
+// }
+
+// .score {
+// font-size: 16px;
+// color: darkorchid;
+// }
+// }
</style>
diff --git a/src/views/startexam/index.vue b/src/views/startexam/index.vue
index 2e75079..b94e418 100644
--- a/src/views/startexam/index.vue
+++ b/src/views/startexam/index.vue
@@ -8,7 +8,8 @@
<el-col :span="5">
<div class="tool-bar">
<div class="time-remain">
- 剩余时间:
+ <div class="time-remain_title">剩余时间 :</div>
+
<div class="time">
<count-down
v-on:start_callback="countDownS_cb(1)"
@@ -32,7 +33,8 @@
<div class="answer-card">
<el-button
type="text"
- icon="el-icon-date"
+ icon="el-icon-date el-dates"
+ class="el-dates"
@click="answerCard"
>答题卡</el-button
>
@@ -74,10 +76,14 @@
/>
<div class="subject-buttons" v-if="query.subjectId !== ''">
- <el-button plain @click="last" :loading="loadingLast"
+ <!-- <el-button plain @click="last" :loading="loadingLast"
>上一题</el-button
- >
- <el-button plain @click="next" :loading="loadingNext"
+ > -->
+ <el-button
+ @click="next"
+ class="buttons"
+ :loading="loadingNext"
+ type="primary"
>下一题</el-button
>
<el-button
@@ -100,9 +106,9 @@
center
>
<div class="answer-card-title">
- {{ exam.examinationName }}（共{{ subjectIds.length }}题，合计{{
- exam.totalScore
- }}分）
+ {{ exam.examinationName }}（共{{
+ subjectIds.length
+ }}题，合计100分）
</div>
<div class="answer-card-split"></div>
<el-row class="answer-card-content">
@@ -117,8 +123,8 @@
<el-button
circle
v-for="(value, index) in subjectIds"
+ :style="{ background: value.color, color: value.fontColor }"
:key="index"
- @click="toSubject(value.everyID, value.type, index)"
> {{ index + 1 }} </el-button
>
</el-row>
@@ -263,6 +269,7 @@
this.subjectStartTime = current;
// this.endTime = moment(this.exam.endTime).valueOf()
this.endTime = current + 45 * 60 * 1000;
+ // this.endTime = current + 1 * 60 * 1000;
this.disableSubmit = false;
}
})
@@ -286,6 +293,7 @@
answer: "",
score: subjectData[i].score,
color: "#fff",
+ fontColor: "#000",
});
}
@@ -316,7 +324,8 @@
},
countDownE_cb: function () {
messageWarn(this, "考试结束");
- this.disableSubmit = true;
+ // this.disableSubmit = true;
+ this.submitExam("over");
},
last() {
for (let i = 0; i < this.subjectIds.length; i++) {
@@ -347,6 +356,11 @@
next() {
for (let i = 0; i < this.subjectIds.length; i++) {
if (this.subjectIds[i].everyID == this.query.subjectId) {
+ if (this.getAnswer() == "") {
+ messageSuccess(this, "请选择答案");
+ return;
+ }
+
this.subjectIds[i].answer = this.getAnswer();
this.markAnswered(this.subjectIds[i].answer, i);
@@ -390,9 +404,11 @@
if (this.result == 1) {
subjectIds.color = "#67C23A";
+ subjectIds.fontColor = "#fff";
}
if (this.result == 2) {
subjectIds.color = "red";
+ subjectIds.fontColor = "#fff";
}
const { id, choicesType } = subject;
@@ -513,7 +529,7 @@
this.dialogVisible = false;
},
// 提交
- submitExam() {
+ submitExam(val) {
var ind = this.subjectIndex;
if (this.firstFlag == false) {
@@ -525,6 +541,13 @@
this.subjectIds[ind].answer = this.getAnswer();
this.markAnswered(this.subjectIds[ind].answer, ind);
+
+ if (val == "over") {
+ //时间到了情况 自动提交
+ this.disableSubmit = true;
+ this.doSubmitExam();
+ return;
+ }
this.$confirm("确定要提交吗?", "提示", {
confirmButtonText: "确定",
@@ -539,7 +562,7 @@
},
doSubmitExam() {
var obj = {
- id:this.$route.query.examScoreId,
+ id: this.$route.query.examScoreId,
examName: this.$route.query.examName,
candidateNo: this.$route.query.candidateNo,
securityName: this.userInfo.user_name,
@@ -735,6 +758,9 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
+$fontSize1: 18px;
+$fontSize2: 20px;
+$fontSize3: 40px;
.subject-box {
margin-top: 50px;
margin-left: 20px;
@@ -746,23 +772,43 @@
min-height: 400px;
}
.subject-buttons {
- text-align: right;
- position: fixed;
- top: 70%;
- right: 15%;
+ text-align: left;
+ position: relative;
+ top: 70px;
+ left: 390px;
+ // top: 70%;
+ // right: 30%;
+ .buttons {
+ // border: 1px solid green;
+ }
}
.tool-bar {
margin-left: 20px;
- font-size: 20px;
+}
+.time-remain_title {
+ font-size: $fontSize2;
}
.time-remain .time {
- display: inline-block;
- font-size: 18px;
- line-height: 22px;
+ display: block;
+ font-size: $fontSize3;
+ line-height: $fontSize3;
color: #ff0000;
font-weight: 400;
+ position: relative;
+ // top: -20px;
}
-
+.current-progress {
+ font-size: $fontSize2;
+}
+.answer-card {
+ margin: 15px 0;
+}
+.el-dates {
+ font-size: $fontSize1;
+}
+.subject-exam-title {
+ margin-bottom: 25px;
+}
/* 答题卡 */
.answer-card-title {
font-size: 24px;
@@ -788,10 +834,11 @@
#avue-view > .morpheus-box {
position: absolute;
- width: 100%;
+ width: calc(100% - 100px);
height: 85%;
border-radius: 4px;
top: 10%;
+ left: 50px;
padding: 10px !important;
box-sizing: border-box;
}
--
Gitblit v1.9.3