feat: 更新考试信息提醒逻辑,优化样式以适应不同屏幕宽度

This commit is contained in:
MKStoler1024 2025-04-10 17:40:08 +00:00
parent 27a7a760ad
commit 55fecdf88b
3 changed files with 14 additions and 17 deletions

View File

@ -67,7 +67,6 @@ document.addEventListener("DOMContentLoaded", () => {
let currentExam = null; let currentExam = null;
let nextExam = null; let nextExam = null;
let lastExam = null; let lastExam = null;
let isnotificated = false;
data.examInfos.forEach(exam => { data.examInfos.forEach(exam => {
const start = new Date(exam.start); const start = new Date(exam.start);
@ -99,15 +98,15 @@ document.addEventListener("DOMContentLoaded", () => {
remainingTimeElem.style.fontWeight = "bold"; remainingTimeElem.style.fontWeight = "bold";
statusElem.textContent = "状态: 即将结束"; statusElem.textContent = "状态: 即将结束";
statusElem.style.color = "red"; statusElem.style.color = "red";
// 在剩余15分钟时显示提醒 // 在剩余15分钟时显示提醒
if (isnotificated === false) { if (isnotificated === false && remainingMinutes === 14 && remainingSeconds === 59) {
isnotificated = true;
const overlay = document.getElementById('reminder-overlay'); const overlay = document.getElementById('reminder-overlay');
overlay.classList.add('show'); overlay.classList.add('show');
setTimeout(() => { setTimeout(() => {
overlay.classList.remove('show'); overlay.classList.remove('show');
}, 5000); }, 5000);
isnotificated = true;
} }
} else { } else {
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`; remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;

View File

@ -42,10 +42,9 @@ body::-webkit-scrollbar {
.container { .container {
padding: 24px; padding: 24px;
max-width: 1400px; max-width: 100%;
margin: auto; margin: auto;
background-color: #333333; background-color: #1f1f1f;
border-radius: 28px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2); box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} }
@ -94,9 +93,9 @@ h1 {
} }
.clock-section, .info-section, .right-column { .clock-section, .info-section, .right-column {
background-color: #404040; background-color: #292929;
padding: 24px; padding: 24px;
border-radius: 28px; border-radius: 14px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.2);
} }
@ -120,8 +119,8 @@ table {
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
margin-top: 24px; margin-top: 24px;
background-color: #4A4A4A; background-color: #292929;
border-radius: 16px; border-radius: 14px;
overflow: hidden; overflow: hidden;
} }
@ -145,7 +144,7 @@ tr:hover {
.exam-status-tag { .exam-status-tag {
padding: 6px 12px; padding: 6px 12px;
border-radius: 8px; border-radius: 8px;
font-size: 1.2rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
} }

View File

@ -42,10 +42,9 @@ body::-webkit-scrollbar {
.container { .container {
padding: 24px; padding: 24px;
max-width: 1400px; max-width: 100%;
margin: auto; margin: auto;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 28px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
} }
@ -129,11 +128,11 @@ th, td {
padding: 1px; padding: 1px;
font-size: 1.8rem; font-size: 1.8rem;
text-align: center; text-align: center;
border-bottom: 1px solid #E8DEF8; border-bottom: 1px solid #ffffff;
} }
th { th {
background-color: #E8DEF8; background-color: #ffffff;
color: #1C1B1F; color: #1C1B1F;
font-weight: 500; font-weight: 500;
} }
@ -145,7 +144,7 @@ tr:hover {
.exam-status-tag { .exam-status-tag {
padding: 6px 12px; padding: 6px 12px;
border-radius: 8px; border-radius: 8px;
font-size: 1.2rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
} }