feat:考试成绩组件

ZhangXianQiang

2024-06-20 74a00243db34c09952855059b81de9810a99cf08

feat:考试成绩组件

 src/store/modules/grade.js

@@ -9,6 +9,7 @@
    examStartTime: '2021-01-01',
    examEndTime: '2021-01-01',
    examTime: 5,
    examGrade: 60
  });

  const examType = ref({

 src/views/grade/components/answer-grade/index.vue

New file
@@ -0,0 +1,29 @@
<template>
  <div class="grade-container flex justify-center text-white items-center shadow-md">
    <el-icon class="mr-1 text-xl" size="24"><Document /></el-icon>
    <div class="label mr-1">考试成绩:</div>
    <div class="grade font-bold text-3xl text-red-600">{{ examInfo.examGrade }}</div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import { storeToRefs } from 'pinia';
import { Document } from '@element-plus/icons-vue';
import { useGradeStore } from '@/store/index.js';

const gradeStore = useGradeStore();
const { examInfo } = storeToRefs(gradeStore);


</script>

<style lang="scss" scoped>
.grade-container {
  width: 200px;
  border-radius: 100px;
  padding: 10px 0;
  background-color: rgba($color: #86d7f7, $alpha: 0.3);
}

</style>

 src/views/grade/index.vue

@@ -7,7 +7,8 @@
          <div class="title-container text-3xl font-semibold text-white mr-8">
            {{ examInfo.examName }}
          </div>

          <AnswerGrade></AnswerGrade>
          
          <div class="return-container grow flex justify-end">
            <el-button type="danger" size="large" circle @click="closeClick">
              <template #icon>
@@ -74,12 +75,12 @@
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
import { Close,Timer } from '@element-plus/icons-vue';
import { Close } from '@element-plus/icons-vue';

import AnswerTag from './components/answer-tag/index.vue';
import AnswerSheet from './components/answer-sheet/index.vue';
import AnswerGrade from './components/answer-grade/index.vue';

import AnswerSingle from './components/answer-main/answer-single/index.vue';
import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';