样式

liuyg

2021-08-18 32199bf4ed3c287e8bcbb1f61c106c276d82542c

 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>