1

2023-12-30 22:44:36 +08:00
parent cf2ff28e58
commit b5dd4b6d7d
10 changed files with 267 additions and 136 deletions
--- a/app/templates/test.html
+++ b/app/templates/test.html
@@ -0,0 +1,76 @@
+<!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>