From 504954619abace12ee88254ea84320d9d89ec0a6 Mon Sep 17 00:00:00 2001 From: MKStoler1024 <158786854+MKStoler1024@users.noreply.github.com> Date: Sun, 30 Mar 2025 16:29:17 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=80=83=E8=AF=95?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=87=E7=AD=BE=E5=92=8C=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E5=88=86=E7=BB=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- exam/Scripts/examInfo.js | 75 +++++++++++++++++++++++++++++++--------- exam/Styles/dark.css | 69 ++++++++++++++++++++++-------------- exam/Styles/light.css | 67 ++++++++++++++++++++++------------- exam/index.html | 6 ++-- 4 files changed, 150 insertions(+), 67 deletions(-) diff --git a/exam/Scripts/examInfo.js b/exam/Scripts/examInfo.js index 55f3952..d0d89c9 100644 --- a/exam/Scripts/examInfo.js +++ b/exam/Scripts/examInfo.js @@ -124,26 +124,69 @@ document.addEventListener("DOMContentLoaded", () => { } examTableBodyElem.innerHTML = ""; + + // 预处理日期和时间段 + const dateGroups = {}; data.examInfos.forEach(exam => { const start = new Date(exam.start); - const end = new Date(exam.end); - let status = ""; - if (now < start) { - status = "即将开始"; - } else if (now > end) { - status = "已结束"; - } else { - status = "进行中"; + const hour = start.getHours(); + const dateStr = `${start.getMonth() + 1}月${start.getDate()}日
${hour < 12 ? '上午' : (hour < 18 ? '下午' : '晚上')}`; + + if (!dateGroups[dateStr]) { + dateGroups[dateStr] = []; } + dateGroups[dateStr].push(exam); + }); - const row = document.createElement("tr"); - row.className = `exam-status-${status}`; - row.innerHTML = ` - ${exam.name} - ${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))} - `; - examTableBodyElem.appendChild(row); + // 生成表格 + Object.entries(dateGroups).forEach(([dateStr, exams]) => { + let isFirstRow = true; + // 计算实际需要的行数（考虑科目名称中的斜杠） + const totalRows = exams.reduce((acc, exam) => { + return acc + (exam.name.includes('/') ? exam.name.split('/').length : 1); + }, 0); + + exams.forEach(exam => { + const start = new Date(exam.start); + const end = new Date(exam.end); + const now = new Date(new Date().getTime() + offsetTime * 1000); + + let status = "未开始"; + if (now < start) { + status = now > new Date(start.getTime() - 15 * 60 * 1000) ? "即将开始" : "未开始"; + } else if (now > end) { + status = "已结束"; + } else { + status = "进行中"; + } + + // 处理包含斜杠的科目名称 + const subjects = exam.name.split('/'); + subjects.forEach((subject, index) => { + const row = document.createElement("tr"); + let cells = ''; + + if (isFirstRow) { + cells = `${dateStr}`; + isFirstRow = false; + } + + // 仅在第一个科目行添加时间和状态 + if (index === 0) { + cells += ` + ${subject.trim()} + ${formatTimeWithoutSeconds(start.toLocaleTimeString('zh-CN', { hour12: false }))} + ${formatTimeWithoutSeconds(end.toLocaleTimeString('zh-CN', { hour12: false }))} + ${status} + `; + } else { + cells += `${subject.trim()}`; + } + + row.innerHTML = cells; + examTableBodyElem.appendChild(row); + }); + }); }); } catch (e) { errorSystem.show('更新考试信息失败: ' + e.message); diff --git a/exam/Styles/dark.css b/exam/Styles/dark.css index 92be060..691ea81 100644 --- a/exam/Styles/dark.css +++ b/exam/Styles/dark.css @@ -51,7 +51,7 @@ body::-webkit-scrollbar { padding: 20px; max-width: 1400px; /* 增加主体部分宽度 */ margin: auto; - background-color: rgba(255, 255, 255, 0); /* 使用rgba设置背景透明度为80% */ + background-color: rgba(0, 0, 0, 0.4); /* 使用rgba设置背景透明度为80% */ } h1 { @@ -87,10 +87,17 @@ h1 { } .left-column, .right-column { - width: 48%; display: flex; flex-direction: column; - gap: 3px; /* 板块间隔3px */ + gap: 3px; +} + +.left-column { + width: 45%; +} + +.right-column { + width: 50%; } .clock-section, .info-section, .right-column { @@ -121,14 +128,14 @@ table { width: 100%; border-collapse: collapse; margin-top: 20px; - border: 1px solid #333; + border: 1px solid rgba(255, 255, 255, 0.75); background-color: rgba(31, 31, 31, 0.5); } th, td { - border: 1px solid #333; - padding: 2px; /* 缩短行高 */ - font-size: 2rem; + border: 1px solid #fff; + padding: 0px; /* 缩短行高 */ + font-size: 1.8rem; text-align: center; } @@ -136,23 +143,7 @@ th { background-color: #333; color: #7cc3fb; font-weight: bold; - border-bottom: 2px solid #2b71ad; -} - -.exam-status-进行中 td { - color: #5ba838 !important; /* 绿色字体 */ -} - -.exam-status-即将开始 td { - color: #fe9901 !important; /* 橙色字体 */ -} - -.exam-status-已结束 td { - color: #ec0434 !important; /* 红色字体 */ -} - -.exam-status-空闲 td { - color: blue !important; /* 蓝色字体 */ + border-bottom: 2px solid #fff; } tr:hover { @@ -165,7 +156,7 @@ table { } td { - border-bottom: 1px solid #333; + border-bottom: 1px solid #fff; } td:first-child { @@ -178,6 +169,34 @@ td:last-child { border-bottom-right-radius: 8px; } +.exam-status-tag { + padding: 3px 6px; + border-radius: 4px; + font-size: 1.2rem; + display: inline-block; + min-width: 60px; +} + +.exam-status-进行中 { + background-color: rgba(91, 168, 56, 0.2); + color: #5ba838; +} + +.exam-status-即将开始 { + background-color: rgba(254, 153, 1, 0.2); + color: #fe9901; +} + +.exam-status-已结束 { + background-color: rgba(236, 4, 52, 0.2); + color: #ec0434; +} + +.exam-status-未开始 { + background-color: rgba(238, 238, 91, 0.2); + color: #eeee5b; +} + #settings-modal { display: none; position: fixed; diff --git a/exam/Styles/light.css b/exam/Styles/light.css index 9830369..95c7691 100644 --- a/exam/Styles/light.css +++ b/exam/Styles/light.css @@ -50,7 +50,7 @@ body::-webkit-scrollbar { padding: 20px; max-width: 1400px; margin: auto; - background-color: rgba(255, 255, 255, 0); + background-color: rgba(255, 255, 255, 0.4); } h1 { @@ -86,12 +86,19 @@ h1 { } .left-column, .right-column { - width: 48%; display: flex; flex-direction: column; gap: 3px; } +.left-column { + width: 45%; +} + +.right-column { + width: 50%; +} + .clock-section, .info-section, .right-column { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); @@ -123,14 +130,14 @@ table { width: 100%; border-collapse: collapse; margin-top: 20px; - border: 1px solid #ccc; + border: 1px solid #000; background-color: rgba(255, 255, 255, 0.5); } th, td { - border: 1px solid #ccc; - padding: 2px; - font-size: 2rem; + border: 1px solid #000; + padding: 0px; + font-size: 1.8rem; text-align: center; } @@ -138,23 +145,7 @@ th { background-color: #f0f0f0; color: #333; font-weight: bold; - border-bottom: 2px solid #ccc; -} - -.exam-status-进行中 td { - color: #5ba838 !important; -} - -.exam-status-即将开始 td { - color: #fe9901 !important; -} - -.exam-status-已结束 td { - color: #ec0434 !important; -} - -.exam-status-空闲 td { - color: blue !important; + border-bottom: 2px solid #000; } tr:hover { @@ -167,7 +158,7 @@ table { } td { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #000; } td:first-child { @@ -180,6 +171,34 @@ td:last-child { border-bottom-right-radius: 8px; } +.exam-status-tag { + padding: 3px 6px; + border-radius: 4px; + font-size: 1.2rem; + display: inline-block; + min-width: 60px; +} + +.exam-status-进行中 { + background-color: rgba(91, 168, 56, 0.1); + color: #5ba838; +} + +.exam-status-即将开始 { + background-color: rgba(254, 153, 1, 0.1); + color: #fe9901; +} + +.exam-status-已结束 { + background-color: rgba(236, 4, 52, 0.1); + color: #ec0434; +} + +.exam-status-未开始 { + background-color: rgba(238, 238, 91, 0.1); + color: #d4b106; +} + #settings-modal { display: none; position: fixed; diff --git a/exam/index.html b/exam/index.html index 55b0564..606075d 100644 --- a/exam/index.html +++ b/exam/index.html @@ -35,9 +35,11 @@ + - - + + +
时间 科目开始时间结束时间开始结束状态