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 +++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 148 insertions(+), 82 deletions(-)

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>本次考试得分：&nbsp;{{score}}&nbsp;分</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> &nbsp;分</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>

--
Gitblit v1.9.3