1

app/templates/attendance-reminder.html

@@ -91,32 +91,11 @@
         </div>
     </div>
     <div class="layui-body">
-        <div>
-            <!-- 动态显示当前时间的标题 -->
-            <h2 id="attendance-reminder">签到提醒 </h2>
-            <h2 id="current-time">当前时间</h2>
-            <table class="layui-table calendar-table" id="calendar">
-                <!-- 日历的头部 -->
-                <thead>
-                <tr>
-                    <th>日</th>
-                    <th>一</th>
-                    <th>二</th>
-                    <th>三</th>
-                    <th>四</th>
-                    <th>五</th>
-                    <th>六</th>
-                </tr>
-                </thead>
-                <!-- 日历的主体部分 -->
-                <tbody id="calendar-body">
-                <!-- 动态生成日历的日期部分 -->
-                </tbody>
-            </table>
-            <!-- 提醒内容 -->
-            <div class="reminder">
-                <span><span class="color-box" style="background-color: green;"></span>绿色代表当月已签到</span><br>
-                <span><span class="color-box" style="background-color: #FFA07A;"></span>颜色代表本月需要签到</span>
+        <div class="layui-container">
+            <div class="layui-row">
+            </div>
+            <div id="course-list" class="layui-row">
+                <!-- 课程列表将在这里生成 -->
             </div>
         </div>
     </div>
@@ -127,59 +106,34 @@
 <script src="/static/js/menu.js"></script>
 <script src="/static/js/logout.js"></script>
 <script>
-    layui.use(['layer'], function () {
-        var layer = layui.layer;
+    document.addEventListener("DOMContentLoaded", function () {
+        // 模拟从后端获取的课程数据
+        let courses = [
+            {name: "线性代数", time: "14:00", description: "线性代数是数学的一个基础分支，关注线性方程组、向量空间、矩阵理论及线性变换等概念。本课程将带领学生探索向量和矩阵的运算，理解行列式、特征值和特征向量的计算，以及线性空间和子空间的概念。透过一系列的应用实例，如图像处理和机器学习，学生将学会如何将理论应用于实际问题中，为进一步学习高等数学和工程应用打下坚实的基础。", room: "101教室"},
+            {name: "数据结构", time: "15:00", description: "数据结构是计算机科学中的一个重要领域，涉及组织、管理和存储数据的方式，以便高效地访问和修改。本课程覆盖了从基本的数据结构如数组、链表、栈和队列，到更高级的结构如树、图、散列表和堆。通过理论学习与实际编程相结合的方式，学生将掌握如何选择合适的数据结构解决特定问题，以及对各种数据结构进行效率分析和比较。", room: "102教室"},
+            {name: "计算机网络", time: "16:00", description: "计算机网络是研究计算机之间的连接方式及其通信协议的科学。本课程提供计算机网络的综合介绍，包括网络架构、协议、网络通信理论、实际应用等内容。学生将了解网络层次结构，包括物理层、数据链路层、网络层、传输层和应用层。课程重点讲解TCP/IP模型，以及它在网络通信中的关键作用。通过本课程的学习，学生将获得设计、实施、管理和维护网络的基本知识和技能。", room: "103教室"}
+        ];
 
-        // 假设的已签到日期数据
-        var signedDays = [1, 5, 9]; // 这里仅为示例，实际应从服务器获取
-        var requiredSignDays = [2, 6, 15, 23];
+        // 获取课程列表容器
+        let courseListDiv = document.getElementById('course-list');
 
-        // 动态生成日历
-        function generateCalendar() {
-            var today = new Date();
-            var currentMonth = today.getMonth();
-            var currentYear = today.getFullYear();
-
-            var firstDay = new Date(currentYear, currentMonth, 1).getDay();
-            var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
-
-            var calendarHtml = '';
-            var day = 1;
-
-            for (var i = 0; i < 6; i++) {
-                calendarHtml += '<tr>';
-                for (var j = 0; j < 7; j++) {
-                    if (i === 0 && j < firstDay) {
-                        calendarHtml += '<td></td>';
-                    } else if (day > daysInMonth) {
-                        break;
-                    } else {
-                        var classes = '';
-                        if (signedDays.includes(day)) classes += 'signed '; // 已签到
-                        if (requiredSignDays.includes(day)) classes += 'required-sign'; // 需要签到
-                        calendarHtml += `<td class="${classes}">${day}</td>`;
-                        day++;
-                    }
-                }
-                calendarHtml += '</tr>';
-                if (day > daysInMonth) {
-                    break;
-                }
-            }
-
-            document.getElementById('calendar-body').innerHTML = calendarHtml;
-        }
-
-        function updateTime() {
-            var now = new Date();
-            var timeStr = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日';
-            document.getElementById('current-time').innerText = '当前时间: ' + timeStr;
-        }
-
-        // 页面加载时生成日历
-        generateCalendar();
-        updateTime();
+        // 遍历课程数组，为每门课创建一个卡片
+        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}</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>
+                                    </div>
+                               </div>`;
+            courseListDiv.appendChild(courseDiv);
+        });
     });
+
 </script>
 </body>
 </html>