<template>
|
<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" @finish="timeFinish" />
|
</div>
|
</template>
|
|
<script setup>
|
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 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>
|
.time-container {
|
width: 220px;
|
border-radius: 100px;
|
padding: 10px 0;
|
background-color: rgba($color: #86d7f7, $alpha: 0.3);
|
}
|
|
:deep(.el-statistic__number) {
|
color: #ffffff;
|
}
|
</style>
|
