feat:开考前15分钟和考试时显示倒计时

This commit is contained in:
MKStoler 2024-10-09 19:54:33 +08:00
parent c6db4ce047
commit f0a5fcc68a
2 changed files with 27 additions and 1 deletions

View File

@ -11,6 +11,7 @@
考试状态: <span :class="statusColor">{{ statusText }}</span>
</div>
<div v-if="isWarning" class="text-h5 text--warning">考试即将结束</div>
<div v-if="showRemainingTime" class="text-h5 text--info">剩余时间: {{ remainingTime }}</div>
</v-card-text>
</v-card>
@ -69,6 +70,27 @@ const isWarning = computed(() => {
return now.value >= fifteenMinutesBeforeEnd && now.value < end;
});
const showRemainingTime = computed(() => {
if (!props.exam) return false;
const start = new Date(props.exam.start);
const end = new Date(props.exam.end);
const fifteenMinutesBeforeStart = new Date(start.getTime() - 15 * 60 * 1000);
return now.value >= fifteenMinutesBeforeStart && now.value < end;
});
const remainingTime = computed(() => {
if (!props.exam) return '';
const end = new Date(props.exam.end);
const timeDiff = end.getTime() - now.value.getTime();
const minutes = Math.floor(timeDiff / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
return `${minutes}${seconds}`;
});
// Update the current time every second
const updateNow = () => {
now.value = new Date();
@ -86,6 +108,10 @@ updateNow();
color: #ffc107 !important; /* Vuetify's default warning color */
}
.text--info {
color: #17a2b8 !important; /* Info color */
}
.status-before {
color: orange;
}

View File

@ -12,7 +12,7 @@
<p>版本号 1.1.0-Malkuth</p>
<p>开发者Hello8963 & Mkstoler4096</p>
<v-btn
href="https://github.com/Hello8963/exam-board"
href="https://github.com/MKStoler4096/dsz-exam-showboard-next"
target="_blank"
color="primary"
class="mt-4"