<template>
|
<div class="progress-container w-full px-3 py-4 bg-slate-50">
|
<div class="title-container flex justify-between items-center mb-3">
|
<div class="title text-gray-600 text-base">答题进度</div>
|
<div class="title-num text-sm text-gray-500">{{ answerProgress }} / {{ total }}</div>
|
</div>
|
|
<div class="progress-content mb-3">
|
<el-progress :percentage="percent" :stroke-width="10" :show-text="false" />
|
</div>
|
|
<div class="exam-info text-sm text-gray-600">
|
共{{ total }}题，满分{{grade}}分
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue';
|
import {storeToRefs} from 'pinia';
|
import { useExamStore } from '@/store/index.js';
|
const examStore = useExamStore();
|
|
const {answerProgress} = storeToRefs(examStore);
|
|
|
const total = ref(examStore.getAnswerInfo.total);
|
const grade = ref(examStore.getAnswerInfo.grade);
|
|
const percent = computed(() => {
|
return Number((answerProgress.value / total.value * 100).toFixed(0));
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
.progress-container {
|
border-radius: 5px;
|
}
|
</style>
|
