<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} 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');
|
}
|
|
</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>
|
