feat:答题进度

ZhangXianQiang

2024-06-19 706fc58eea8b31ecd2e5003615a4874bf0200d76

 src/views/exam/components/answer-progress/index.vue

@@ -2,23 +2,35 @@
  <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">10/30</div>
      <div class="title-num text-sm text-gray-500">{{ answerProgress }} / {{ total }}</div>
    </div>

    <div class="progress-content mb-3">
      <el-progress :percentage="progress" :stroke-width="10" :show-text="false" />
      <el-progress :percentage="percent" :stroke-width="10" :show-text="false" />
    </div>

    <div class="exam-info text-sm text-gray-600">
      共30题，满分100分
      共{{ total }}题，满分{{grade}}分
    </div>

  </div>
</template>

<script setup>
import {ref} from 'vue';
const progress = ref(10);
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>