mirror of
https://github.com/ExamAware/ExamSchedule.git
synced 2025-04-29 19:16:33 +00:00
feat: 添加试卷和答题卡数量控制功能,优化信息显示样式
This commit is contained in:
parent
3ced2cf789
commit
7a2fbf0603
@ -8,7 +8,25 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
const statusElem = document.getElementById("status");
|
||||
const examTableBodyElem = document.getElementById("exam-table-body");
|
||||
const roomElem = document.getElementById("room");
|
||||
const infoToggleBtn = document.getElementById("info-toggle-btn");
|
||||
const paperInfoElem = document.getElementById("paper-info");
|
||||
const examPapersElem = document.getElementById("exam-papers");
|
||||
const answerSheetsElem = document.getElementById("answer-sheets");
|
||||
let offsetTime = getCookie("offsetTime") || 0;
|
||||
let showPaperInfo = getCookie("showPaperInfo") === "true";
|
||||
|
||||
// 初始化显示状态
|
||||
if (showPaperInfo) {
|
||||
currentSubjectElem.style.display = "none";
|
||||
paperInfoElem.style.display = "block";
|
||||
}
|
||||
|
||||
infoToggleBtn.addEventListener("click", () => {
|
||||
showPaperInfo = !showPaperInfo;
|
||||
setCookie("showPaperInfo", showPaperInfo, 365);
|
||||
currentSubjectElem.style.display = showPaperInfo ? "none" : "block";
|
||||
paperInfoElem.style.display = showPaperInfo ? "block" : "none";
|
||||
});
|
||||
|
||||
function fetchData() {
|
||||
// 优先使用本地配置
|
||||
@ -83,9 +101,40 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
}
|
||||
});
|
||||
|
||||
// 清空原有内容
|
||||
if (paperInfoElem) paperInfoElem.style.display = showPaperInfo ? "block" : "none";
|
||||
if (currentSubjectElem) currentSubjectElem.style.display = showPaperInfo ? "none" : "block";
|
||||
|
||||
if (currentExam) {
|
||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
if (showPaperInfo) {
|
||||
// 加载本地保存的页数信息
|
||||
const paperCount = document.getElementById('paper-count');
|
||||
const paperPages = document.getElementById('paper-pages');
|
||||
const sheetCount = document.getElementById('sheet-count');
|
||||
const sheetPages = document.getElementById('sheet-pages');
|
||||
|
||||
if (paperCount && paperPages && sheetCount && sheetPages) {
|
||||
try {
|
||||
const savedInfo = localStorage.getItem('paperInfo');
|
||||
if (savedInfo) {
|
||||
const info = JSON.parse(savedInfo);
|
||||
paperCount.value = info.paperCount || 0;
|
||||
paperPages.value = info.paperPages || 0;
|
||||
sheetCount.value = info.sheetCount || 0;
|
||||
sheetPages.value = info.sheetPages || 0;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载页数信息失败:', e);
|
||||
}
|
||||
}
|
||||
} else if (currentSubjectElem) {
|
||||
currentSubjectElem.textContent = `当前科目: ${currentExam.name}`;
|
||||
}
|
||||
|
||||
if (examTimingElem) {
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(currentExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(currentExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
}
|
||||
|
||||
const remainingTime = (new Date(currentExam.end).getTime() - now.getTime() + 1000) / 1000;
|
||||
const remainingHours = Math.floor(remainingTime / 3600);
|
||||
const remainingMinutes = Math.floor((remainingTime % 3600) / 60);
|
||||
@ -93,35 +142,46 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
const remainingTimeText = `${remainingHours}时 ${remainingMinutes}分 ${remainingSeconds}秒`;
|
||||
|
||||
if (remainingHours === 0 && remainingMinutes <= 14) {
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "red";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
statusElem.textContent = "状态: 即将结束";
|
||||
statusElem.style.color = "red";
|
||||
if (remainingTimeElem) {
|
||||
remainingTimeElem.textContent = `倒计时: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "red";
|
||||
remainingTimeElem.style.fontWeight = "bold";
|
||||
}
|
||||
if (statusElem) {
|
||||
statusElem.textContent = "状态: 即将结束";
|
||||
statusElem.style.color = "red";
|
||||
}
|
||||
|
||||
// 在剩余15分钟时显示提醒
|
||||
if (isnotificated === false && remainingMinutes === 14 && remainingSeconds === 59) {
|
||||
isnotificated = true;
|
||||
const overlay = document.getElementById('reminder-overlay');
|
||||
overlay.classList.add('show');
|
||||
setTimeout(() => {
|
||||
overlay.classList.remove('show');
|
||||
}, 5000);
|
||||
if (overlay) {
|
||||
overlay.classList.add('show');
|
||||
setTimeout(() => {
|
||||
overlay.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "#93b4f7";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
statusElem.textContent = "状态: 进行中";
|
||||
statusElem.style.color = "#5ba838";
|
||||
if (remainingTimeElem) {
|
||||
remainingTimeElem.textContent = `剩余时间: ${remainingTimeText}`;
|
||||
remainingTimeElem.style.color = "#93b4f7";
|
||||
remainingTimeElem.style.fontWeight = "normal";
|
||||
}
|
||||
if (statusElem) {
|
||||
statusElem.textContent = "状态: 进行中";
|
||||
statusElem.style.color = "#5ba838";
|
||||
}
|
||||
}
|
||||
} else if (lastExam && now < new Date(lastExam.end).getTime() + 60000) {
|
||||
const timeSinceEnd = (now.getTime() - new Date(lastExam.end).getTime()) / 1000;
|
||||
currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = ``;
|
||||
statusElem.textContent = "状态: 已结束";
|
||||
statusElem.style.color = "red";
|
||||
if (currentSubjectElem) currentSubjectElem.textContent = `上场科目: ${lastExam.name}`;
|
||||
if (examTimingElem) examTimingElem.textContent = "";
|
||||
if (remainingTimeElem) remainingTimeElem.textContent = "";
|
||||
if (statusElem) {
|
||||
statusElem.textContent = "状态: 已结束";
|
||||
statusElem.style.color = "red";
|
||||
}
|
||||
} else if (nextExam) {
|
||||
const timeUntilStart = ((new Date(nextExam.start).getTime() - now.getTime()) / 1000) + 1;
|
||||
const remainingHours = Math.floor(timeUntilStart / 3600);
|
||||
@ -146,11 +206,13 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
examTimingElem.textContent = `起止时间: ${formatTimeWithoutSeconds(new Date(nextExam.start).toLocaleTimeString('zh-CN', { hour12: false }))} - ${formatTimeWithoutSeconds(new Date(nextExam.end).toLocaleTimeString('zh-CN', { hour12: false }))}`;
|
||||
} else {
|
||||
currentSubjectElem.textContent = "考试均已结束";
|
||||
examTimingElem.textContent = "";
|
||||
remainingTimeElem.textContent = "";
|
||||
statusElem.textContent = "状态: 空闲";
|
||||
statusElem.style.color = "#3946AF";
|
||||
if (currentSubjectElem) currentSubjectElem.textContent = "考试均已结束";
|
||||
if (examTimingElem) examTimingElem.textContent = "";
|
||||
if (remainingTimeElem) remainingTimeElem.textContent = "";
|
||||
if (statusElem) {
|
||||
statusElem.textContent = "状态: 空闲";
|
||||
statusElem.style.color = "#3946AF";
|
||||
}
|
||||
}
|
||||
|
||||
examTableBodyElem.innerHTML = "";
|
||||
@ -219,9 +281,66 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('更新考试信息失败:', e);
|
||||
errorSystem.show('更新考试信息失败: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加页数控制处理
|
||||
document.querySelectorAll('.count-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const target = document.getElementById(btn.dataset.target);
|
||||
const action = btn.dataset.action;
|
||||
const currentValue = parseInt(target.value) || 0;
|
||||
|
||||
if (action === 'increase') {
|
||||
target.value = currentValue + 1;
|
||||
} else if (action === 'decrease' && currentValue > 0) {
|
||||
target.value = currentValue - 1;
|
||||
}
|
||||
|
||||
// 保存到localStorage
|
||||
updatePaperInfo();
|
||||
});
|
||||
});
|
||||
|
||||
// 监听输入框直接输入
|
||||
['paper-count', 'paper-pages', 'sheet-count', 'sheet-pages'].forEach(id => {
|
||||
const input = document.getElementById(id);
|
||||
input.addEventListener('change', () => {
|
||||
const value = parseInt(input.value) || 0;
|
||||
input.value = Math.max(0, value); // 确保不小于0
|
||||
updatePaperInfo();
|
||||
});
|
||||
});
|
||||
|
||||
function updatePaperInfo() {
|
||||
const paperInfo = {
|
||||
paperCount: parseInt(document.getElementById('paper-count').value) || 0,
|
||||
paperPages: parseInt(document.getElementById('paper-pages').value) || 0,
|
||||
sheetCount: parseInt(document.getElementById('sheet-count').value) || 0,
|
||||
sheetPages: parseInt(document.getElementById('sheet-pages').value) || 0
|
||||
};
|
||||
localStorage.setItem('paperInfo', JSON.stringify(paperInfo));
|
||||
}
|
||||
|
||||
// 初始化加载保存的页数信息
|
||||
function loadPaperInfo() {
|
||||
try {
|
||||
const savedInfo = localStorage.getItem('paperInfo');
|
||||
if (savedInfo) {
|
||||
const info = JSON.parse(savedInfo);
|
||||
document.getElementById('paper-count').value = info.paperCount || 0;
|
||||
document.getElementById('paper-pages').value = info.paperPages || 0;
|
||||
document.getElementById('sheet-count').value = info.sheetCount || 0;
|
||||
document.getElementById('sheet-pages').value = info.sheetPages || 0;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载页数信息失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
loadPaperInfo();
|
||||
|
||||
fetchData();
|
||||
});
|
||||
|
@ -105,7 +105,7 @@ h1 {
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #aaaaaa;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -164,7 +164,7 @@ table {
|
||||
|
||||
th, td {
|
||||
padding: 3px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #555555;
|
||||
}
|
||||
@ -266,7 +266,7 @@ tr:hover {
|
||||
|
||||
#settings-modal-content input[type="number"],
|
||||
#settings-modal-content input[type="text"] {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0 24px;
|
||||
width: 100%;
|
||||
@ -560,3 +560,86 @@ input:checked + .slider:before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #404040;
|
||||
color: #E6E1E5;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #4A4A4A;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.paper-count-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.paper-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.count-control input {
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
background-color: #212121;
|
||||
color: #E6E1E5;
|
||||
border: 2px solid #404040;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #404040;
|
||||
color: #E6E1E5;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.count-btn:hover {
|
||||
background-color: #4A4A4A;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.count-btn .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
@ -105,7 +105,7 @@ h1 {
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #6750A4;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -266,7 +266,7 @@ tr:hover {
|
||||
|
||||
#settings-modal-content input[type="number"],
|
||||
#settings-modal-content input[type="text"] {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0 24px;
|
||||
width: 100%;
|
||||
@ -559,3 +559,86 @@ input:checked + .slider:before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #E8DEF8;
|
||||
color: #1C1B1F;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #D0BCFF;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.paper-count-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.paper-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.count-control input {
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
background-color: #FFFFFF;
|
||||
color: #1C1B1F;
|
||||
border: 2px solid #E8DEF8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #E8DEF8;
|
||||
color: #1C1B1F;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.count-btn:hover {
|
||||
background-color: #D0BCFF;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.count-btn .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
@ -106,7 +106,7 @@ h1 {
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #D0BCFF;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -267,7 +267,7 @@ tr:hover {
|
||||
|
||||
#settings-modal-content input[type="number"],
|
||||
#settings-modal-content input[type="text"] {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0 24px;
|
||||
width: 100%;
|
||||
@ -560,3 +560,124 @@ input:checked + .slider:before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
background-color: #4A4458;
|
||||
color: #E6E1E5;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #635B70;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#paper-info {
|
||||
font-size: 3rem;
|
||||
margin: 16px 0;
|
||||
text-align: left;
|
||||
color: #E6E1E5;
|
||||
}
|
||||
|
||||
#exam-papers, #answer-sheets {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.paper-count-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.paper-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.count-control input {
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
background-color: #332D41;
|
||||
color: #E6E1E5;
|
||||
border: 2px solid #4A4458;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #4A4458;
|
||||
color: #E6E1E5;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.count-btn:hover {
|
||||
background-color: #635B70;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.count-btn .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #4A4458;
|
||||
color: #E6E1E5;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #635B70;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
@ -106,7 +106,7 @@ h1 {
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #6750A4;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -138,6 +138,10 @@ h1 {
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#current-time {
|
||||
font-size: 8rem;
|
||||
text-align: center;
|
||||
@ -153,6 +157,17 @@ h1 {
|
||||
color: #1C1B1F;
|
||||
}
|
||||
|
||||
#paper-info {
|
||||
font-size: 3rem;
|
||||
margin: 16px 0;
|
||||
text-align: left;
|
||||
color: #1C1B1F;
|
||||
}
|
||||
|
||||
#exam-papers, #answer-sheets {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
@ -267,7 +282,7 @@ tr:hover {
|
||||
|
||||
#settings-modal-content input[type="number"],
|
||||
#settings-modal-content input[type="text"] {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0 24px;
|
||||
width: 100%;
|
||||
@ -528,6 +543,85 @@ input:checked + .slider:before {
|
||||
color: #FF9500;
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #E8DEF8;
|
||||
color: #1C1B1F;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #D0BCFF;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.paper-count-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.paper-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.count-control input {
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
background-color: #FFFFFF;
|
||||
color: #1C1B1F;
|
||||
border: 2px solid #E8DEF8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #E8DEF8;
|
||||
color: #1C1B1F;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.count-btn:hover {
|
||||
background-color: #D0BCFF;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.count-btn .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
@ -96,7 +96,7 @@ h1 {
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #16a3d1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -303,7 +303,7 @@ td:last-child {
|
||||
#settings-modal-content input[type="text"] {
|
||||
flex-grow: 1;
|
||||
margin-left: 10px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
@ -585,3 +585,86 @@ input:checked + .slider:before {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #1f1f1f;
|
||||
color: #e0e0e0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.paper-count-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.paper-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.count-control input {
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
background-color: #1f1f1f;
|
||||
color: #e0e0e0;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #1f1f1f;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.count-btn:hover {
|
||||
background-color: #333;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.count-btn .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
@ -95,7 +95,7 @@ h1 {
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 1.5rem; /* 字体大小 */
|
||||
font-size: 1.8rem; /* 字体大小 */
|
||||
color: #16a3d1; /* 文字颜色 */
|
||||
margin-bottom: 20px; /* 下边距 */
|
||||
}
|
||||
@ -311,7 +311,7 @@ td:last-child {
|
||||
|
||||
#settings-modal-content input[type="number"],
|
||||
#settings-modal-content input[type="text"] {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
@ -593,3 +593,86 @@ theme-toggle-container {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-toggle-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.info-toggle-btn:hover {
|
||||
background-color: #ccc;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.info-toggle-btn .material-icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.paper-count-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.paper-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.count-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.count-control input {
|
||||
width: 60px;
|
||||
padding: 5px;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.count-btn:hover {
|
||||
background-color: #ccc;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.count-btn .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
@ -20,8 +20,8 @@
|
||||
},
|
||||
{
|
||||
"name": "历史",
|
||||
"start": "2025-03-10T23:55:00",
|
||||
"end": "2025-04-12T01:32:00"
|
||||
"start": "2025-04-12T23:55:00",
|
||||
"end": "2025-04-13T01:32:00"
|
||||
},
|
||||
{
|
||||
"name": "数学",
|
||||
|
@ -27,7 +27,60 @@
|
||||
<div id="current-time"></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<button id="info-toggle-btn" class="info-toggle-btn" title="切换显示模式">
|
||||
<span class="material-icons">swap_horiz</span>
|
||||
</button>
|
||||
<div id="current-subject"></div>
|
||||
<div id="paper-info" style="display: none;">
|
||||
<div class="paper-count-container">
|
||||
<div class="paper-input-group">
|
||||
<label>试卷:</label>
|
||||
<div class="count-control">
|
||||
<button class="count-btn" data-target="paper-count" data-action="decrease">
|
||||
<span class="material-icons">remove</span>
|
||||
</button>
|
||||
<input type="number" id="paper-count" min="0" value="0">
|
||||
<button class="count-btn" data-target="paper-count" data-action="increase">
|
||||
<span class="material-icons">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>张</span>
|
||||
<div class="count-control">
|
||||
<button class="count-btn" data-target="paper-pages" data-action="decrease">
|
||||
<span class="material-icons">remove</span>
|
||||
</button>
|
||||
<input type="number" id="paper-pages" min="0" value="0">
|
||||
<button class="count-btn" data-target="paper-pages" data-action="increase">
|
||||
<span class="material-icons">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>页</span>
|
||||
</div>
|
||||
<div class="paper-input-group">
|
||||
<label>答题卡:</label>
|
||||
<div class="count-control">
|
||||
<button class="count-btn" data-target="sheet-count" data-action="decrease">
|
||||
<span class="material-icons">remove</span>
|
||||
</button>
|
||||
<input type="number" id="sheet-count" min="0" value="0">
|
||||
<button class="count-btn" data-target="sheet-count" data-action="increase">
|
||||
<span class="material-icons">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>张</span>
|
||||
<div class="count-control">
|
||||
<button class="count-btn" data-target="sheet-pages" data-action="decrease">
|
||||
<span class="material-icons">remove</span>
|
||||
</button>
|
||||
<input type="number" id="sheet-pages" min="0" value="0">
|
||||
<button class="count-btn" data-target="sheet-pages" data-action="increase">
|
||||
<span class="material-icons">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<span>页</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="exam-timing"></div>
|
||||
<div id="remaining-time"></div>
|
||||
<div id="status"></div>
|
||||
|
@ -29,7 +29,7 @@ body {
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 32px;
|
||||
color: #E6E1E5;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user