77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>签到提醒仪表板</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
|
|
|
|
<style>
|
|
.course-card {
|
|
padding: 10px;
|
|
border: 1px solid #DDD;
|
|
border-radius: 5px;
|
|
margin: 10px 0;
|
|
background-color: #FFF;
|
|
}
|
|
|
|
.course-card .layui-field-box {
|
|
padding: 10px;
|
|
}
|
|
|
|
.course-card button {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layui-container">
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs12">
|
|
<h1>签到提醒仪表板</h1>
|
|
</div>
|
|
</div>
|
|
<div id="course-list" class="layui-row">
|
|
<!-- 课程列表将在这里生成 -->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// 模拟从后端获取的课程数据
|
|
let courses = [
|
|
{name: "数学", time: "14:00", description: "关于几何和代数的深入学习", teacher: "张老师", room: "101教室"},
|
|
{name: "物理", time: "15:00", description: "探索物质世界的基本规律", teacher: "李老师", room: "102教室"},
|
|
{name: "化学", time: "16:00", description: "化合物与元素的神秘世界", teacher: "王老师", room: "103教室"}
|
|
];
|
|
|
|
// 获取课程列表容器
|
|
let courseListDiv = document.getElementById('course-list');
|
|
|
|
// 遍历课程数组，为每门课创建一个卡片
|
|
courses.forEach(course => {
|
|
let courseDiv = document.createElement('div');
|
|
courseDiv.className = 'layui-col-md4';
|
|
courseDiv.innerHTML = `<div class="course-card layui-elem-field">
|
|
<legend>${course.name} - ${course.teacher}</legend>
|
|
<div class="layui-field-box">
|
|
<p><strong>时间:</strong> ${course.time}</p>
|
|
<p><strong>教室:</strong> ${course.room}</p>
|
|
<p><strong>描述:</strong> ${course.description}</p>
|
|
<p><strong>剩余时间:</strong> <span class="countdown">计算中...</span></p>
|
|
<button class="layui-btn layui-btn-normal">签到</button>
|
|
</div>
|
|
</div>`;
|
|
courseListDiv.appendChild(courseDiv);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|