From 32199bf4ed3c287e8bcbb1f61c106c276d82542c Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 18 Aug 2021 11:16:30 +0800
Subject: [PATCH] 样式
---
src/views/exam/startexam.vue | 292 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 161 insertions(+), 131 deletions(-)
diff --git a/src/views/exam/startexam.vue b/src/views/exam/startexam.vue
index c0da7eb..4d89b0c 100644
--- a/src/views/exam/startexam.vue
+++ b/src/views/exam/startexam.vue
@@ -6,7 +6,7 @@
* menu-name 考试管理
*/
<template>
- <div class="exam">
+ <!-- <div class="exam">
<button class="logout"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='';"
@@ -15,45 +15,69 @@
<div class="no" v-if="!pageDisable">
<span>没有找到相应的考试信息</span>
</div>
+ </div> -->
+ <div class="startexam">
+ <div class="startexam_heard">
+ {{ option.data[0].title ? option.data[0].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="option.data[0].list.length != 0">
+ <div v-for="(item, index) in option.data[0].list" :key="index">
+ <span class="s_m_v_title">{{ item.title }}</span>
+ <span>{{ item.value }}</span>
+ </div>
+ <div>
+ <el-button type="primary" round @click="startExam"
+ >开始考试</el-button
+ >
+ </div>
+ </div>
+ <div class="s_m_value" v-else>没有找到相应的考试信息</div>
+ </div>
+ </div>
</template>
<script>
-import { mapState } from 'vuex';
-import {getExamDetail} from "@/api/examapi/examination";
-import {updateApplyStatus} from "@/api/examapi/applyexam";
+import { mapState } from "vuex";
+import { getExamDetail } from "@/api/examapi/examination";
+import { updateApplyStatus } from "@/api/examapi/applyexam";
export default {
-
- data(){
+ data() {
return {
- resData:null,
- sex:"",
- pageDisable:false,
+ resData: null,
+ sex: "",
+ pageDisable: false,
option: {
span: 8,
- data: []
+ data: [
+ {
+ list: [],
+ },
+ ],
},
- }
+ };
},
computed: {
- ...mapState({
- userInfo: state => state.user.userInfo
- })
+ ...mapState({
+ userInfo: (state) => state.user.userInfo,
+ }),
},
mounted() {
- //获取数据
- this.getUserInfoBYExam();
- window.startExam=this.startExam;
- },
- methods:{
- //退出登录
+ //获取数据
+ this.getUserInfoBYExam();
+ window.startExam = this.startExam;
+ },
+ methods: {
+ //退出登录
handleLogout() {
this.$confirm("是否退出系统, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
- type: "warning"
+ type: "warning",
}).then(() => {
this.$store.dispatch("LogOut").then(() => {
this.$router.push({ path: "/login" });
@@ -61,128 +85,134 @@
});
},
//开始考试跳转
- startExam () {
+ startExam() {
var that = this;
//去修改考试状态
var data = {
- id:that.resData.applyId,
- examType:this.resData.examType
- }
- updateApplyStatus(data).then(() => {
- })
+ id: that.resData.applyId,
+ examType: this.resData.examType,
+ };
+ updateApplyStatus(data).then(() => {});
this.$router.push({
- path: `/startexam/${that.resData.id}`,
- query: that.resData
- })
+ path: `/startexam/${that.resData.id}`,
+ query: that.resData,
+ });
},
- getUserInfoBYExam(){
- var that = this;
- getExamDetail(this.userInfo.user_id).then((res) => {
- that.resData = res.data.data[0];
- var data = res.data.data[0];
- // debugger;
- if(res.data.data.length>0){
- that.pageDisable = true;
- if(data.sex==1){
- that.sex = "男"
- }
- if(data.sex==2){
- that.sex = "女"
- }
- that.option.data = [
- {
- title: that.resData.examName,
- color: '#ffa820',
- subtext: '开始考试',
- click: function () {
- window.parent.startExam();
- },
- list: [
- {
- title: '姓名： '+that.resData.realName,
- check: true,
- },
- {
- title: '准考证号： '+that.resData.candidateNo,
- check: true,
- },
- {
- title: '身份证号： '+that.resData.idCardNo,
- check: true,
- },
- {
- title: '性别： '+that.sex,
- check: true,
- }
- ]
- }
- ]
+ getUserInfoBYExam() {
+ var that = this;
+ getExamDetail(this.userInfo.user_id).then(
+ (res) => {
+ that.resData = res.data.data[0];
+ var data = res.data.data[0];
+ // debugger;
+ console.log(data, 254424);
+ if (res.data.data.length > 0) {
+ that.pageDisable = true;
+ if (data.sex == 1) {
+ that.sex = "男";
}
-
+ if (data.sex == 2) {
+ that.sex = "女";
+ }
+ that.option.data = [
+ {
+ title: that.resData.examName,
+ color: "#ffa820",
+ subtext: "开始考试",
+ click: function () {
+ window.parent.startExam();
+ },
+ list: [
+ {
+ title: "姓名： ",
+ value: that.resData.realName,
+ check: true,
+ },
+ {
+ title: "准考证号： ",
+ value: that.resData.candidateNo,
+ check: true,
+ },
+ {
+ title: "身份证号： ",
+ value: that.resData.idCardNo,
+ check: true,
+ },
+ {
+ title: "性别： ",
+ value: that.sex,
+ check: true,
+ },
+ ],
+ },
+ ];
+ }
},
(error) => {
window.console.log(error);
}
);
+ },
+ },
+};
+</script>
+<style lang="scss">
+//最终
+.startexam {
+ // width: 100%;
+ // height: 100%;
+ // border: 1px solid red;
+ width: 80%;
+ height: 90%;
+ margin: 2.5% 10%;
+ 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: 5px 12px 15px -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%;
+ }
+ }
+ .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;
+ }
+ }
}
}
}
-</script>
-<style lang="scss">
- .exam{
- width: 100%;
- height: 100%;
- position: fixed;
- align-items: center;
- justify-items: center;
- }
-
- .avue-data-pay .item {
- margin-left: 100% !important;
- width: 100% !important;
- min-height: 400px;
- margin-top: 240px;
- }
-
- .list {
- margin-left: 28% !important;
- }
-
- .avue-data-pay .img {
- display: none;
- }
-
- .avue-data-pay .title {
- padding: 40px 0 10px;
- }
-
-
- .no {
- background-color: #fff;
- width: 30%;
- height: 200px;
- border-radius: 5px;
- margin: 0 auto;
- margin-top: 15%;
- text-align: center;
- line-height: 200px;
-
- span{
- letter-spacing: 1px;
- color: blueviolet;
- font-size: 15px;
- }
- }
-
- .logout{
- border: 0px;
- margin-left: 92%;
- margin-top: 30px;
- border-radius: 5px;
- font-size: 14px;
- width: 80px;
- height: 30px;
- letter-spacing: 1px;
- }
</style>
--
Gitblit v1.9.3