xiangpei
2024-10-17 c3c523b8f25ecb9cc8bc18c058393e8ef48321c7
src/views/exam/components/answer-time/index.vue
@@ -1,16 +1,34 @@
<template>
  <div class="time-container flex justify-center text-white items-center shadow-md">
  <div
    class="time-container flex justify-center text-white items-center shadow-md"
  >
    <el-icon class="mr-1 text-xl" size="24"><Timer /></el-icon>
    <div class="label mr-1">剩余时间:</div>
    <el-countdown :value="time" />
    <el-countdown :value="time" @finish="timeFinish" />
  </div>
</template>
<script setup>
import {ref} from 'vue';
import { Timer } from '@element-plus/icons-vue';
import { ref, defineExpose } from "vue";
import dayjs from "dayjs";
import { storeToRefs } from "pinia";
import { Timer } from "@element-plus/icons-vue";
import { useExamStore } from "@/store/index.js";
const time = ref(1000);
const examStore = useExamStore();
const { examInfo } = storeToRefs(examStore);
const emit = defineEmits(["timeOut"]);
const time = ref(dayjs().valueOf() + examInfo.value.suggestTime * 1000 * 60);
const timeFinish = () => {
  emit("timeOut");
};
const addTime = (data) => {
  time.value = time.value + data * 1000;
};
defineExpose({ addTime });
</script>
<style lang="scss" scoped>
@@ -19,10 +37,9 @@
  border-radius: 100px;
  padding: 10px 0;
  background-color: rgba($color: #86d7f7, $alpha: 0.3);
}
:deep(.el-statistic__number) {
  color: #ffffff;
}
</style>
</style>