1

2023-12-30 22:44:36 +08:00 · 2023-12-30 22:44:36 +08:00 · b5dd4b6d7d
parent cf2ff28e58
commit b5dd4b6d7d
10 changed files with 267 additions and 136 deletions
--- a/app/static/css/layui.css
+++ b/app/static/css/layui.css
--- a/app/static/js/menu.js
+++ b/app/static/js/menu.js
@ -8,4 +8,4 @@ $.get('/api/menu', function (menuItems) {
    });

    layui.element.render('nav', 'test');
-    });
+});
--- a/app/templates/announcement.html
+++ b/app/templates/announcement.html
@ -7,6 +7,47 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="static/css/layui.css" rel="stylesheet"/>
+
+    <style>
+        /* 容器样式 */
+        .layui-container {
+            padding: 20px;
+            background-color: #f7f7f7;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+
+        /* 标题样式 */
+        .layui-header {
+            margin-bottom: 20px;
+            font-size: 2em; /* 更大的标题字体 */
+            color: #333;
+            border-bottom: 2px solid #e2e2e2;
+            padding-bottom: 10px;
+        }
+
+        /* 课程信息样式 */
+        .layui-field-box p {
+            font-size: 1.2em; /* 更大的文字 */
+            margin: 10px 0; /* 调整段落间距 */
+            padding: 10px; /* 内边距 */
+            background-color: #fff; /* 背景色 */
+            border-radius: 4px; /* 轻微的圆角 */
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 细微的阴影 */
+        }
+
+        /* 字段集合样式调整 */
+        fieldset.layui-elem-field {
+            border-color: #ddd; /* 更淡的边框颜色 */
+        }
+
+        legend {
+            font-size: 1.4em; /* Legend文字大小 */
+            color: #333; /* 文字颜色 */
+        }
+    </style>
+
 </head>

 <body>
--- a/app/templates/attendance-reminder.html
+++ b/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>
--- a/app/templates/attendance.html
+++ b/app/templates/attendance.html
@ -7,6 +7,40 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="static/css/layui.css" rel="stylesheet">
+    <style>
+        #sign-in-reminder {
+            max-width: 600px; /* 限制最大宽度 */
+            margin: 50px auto; /* 上下保留空间，左右自动以居中显示 */
+            padding: 20px; /* 内边距 */
+            border-radius: 8px; /* 轻微的圆角 */
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 给予阴影以突出层次 */
+            background-color: #f7f7f7; /* 浅灰色背景 */
+        }
+
+        #title {
+            text-align: center; /* 标题居中 */
+            color: #333; /* 标题颜色 */
+            font-size: 24px; /* 字号大小 */
+        }
+
+        #course-info {
+            text-align: center; /* 课程信息文本居中 */
+            margin-bottom: 20px; /* 与下方元素保持距离 */
+        }
+
+        .layui-btn {
+            width: 100%; /* 使按钮宽度填满容器 */
+            background-color: #009688; /* 设定一个现代感的按钮颜色 */
+            color: white; /* 文字颜色为白色 */
+            border-radius: 4px; /* 轻微的圆角 */
+            padding: 10px 0; /* 上下填充，增加按钮触摸面积 */
+            text-align: center; /* 文字水平居中 */
+            display: block; /* 转换为块级元素以应用宽度 */
+            line-height: 1.5; /* 调整行高以垂直居中文字 */
+            font-size: 16px; /* 设定文字大小 */
+        }
+    </style>
+
 </head>

 <body>
@ -44,7 +78,7 @@
    </div>
    <div class="layui-body">
        <div id="sign-in-reminder" class="layui-container">
-            <blockquote class="layui-elem-quote layui-text" id="title">
+            <blockquote class="layui-card-header" id="title">
                课程签到
            </blockquote>
            <div class="layui-text" id="course-info"></div>
@ -86,7 +120,7 @@
        $("#sign-in-btn").click(function () {
            if (!$(this).prop('disabled')) {
                // 发送签到请求到后端
-                $.post("/api/student-sign-in",courseData,function (response) {
+                $.post("/api/student-sign-in", courseData, function (response) {
                    // 处理签到后的响应
                    if (response.msg === 'ok') {
                        layer.msg('签到成功!');
--- a/app/templates/course-category.html
+++ b/app/templates/course-category.html
@ -9,9 +9,10 @@
    <link href="static/css/layui.css" rel="stylesheet"/>
 </head>

+
 <body>
 <div class="layui-layout layui-layout-admin">
-    <div class="layui-header">
+    <div class="layui-header layui-bg-black">
        <div class="layui-logo layui-hide-xs layui-bg-black">网上上课点名系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
@ -82,7 +83,7 @@
                data: tableData  // 使用处理后的数据
            });
        });
-});
+    });
 </script>
 </body>
 </html>
--- a/app/templates/course-info.html
+++ b/app/templates/course-info.html
@ -7,6 +7,34 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="static/css/layui.css" rel="stylesheet"/>
+    <style>
+        .custom-table {
+            border-collapse: collapse;
+            width: 100%;
+            border: 1px solid #ddd; /* 轻灰色边框 */
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
+        }
+
+        .custom-table th, .custom-table td {
+            text-align: left;
+            padding: 12px 15px;
+            border-bottom: 1px solid #ddd; /* 每行之间的分割线 */
+        }
+
+        .custom-table th {
+            background-color: #f2f2f2; /* 轻灰色背景 */
+            color: #333; /* 深色文字 */
+        }
+
+        .custom-table tr:hover {
+            background-color: #f5f5f5; /* 鼠标悬浮时的背景色 */
+        }
+
+        .custom-table td {
+            color: #555; /* 内容的文字颜色 */
+        }
+    </style>
+
 </head>

 <body>
@ -45,27 +73,21 @@
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
-            <blockquote class="layui-elem-quote layui-text">
-                课程信息
-            </blockquote>
-            <table class="layui-table">
+            <table class="layui-table custom-table">
+                <!-- 略去colgroup中课程代码的列 -->
                <colgroup>
+                    <col width="200">
                    <col width="150">
-                    <col width="150">
-                    <col width="150">
-                    <col width="100">
-                    <col>
+                    <col width="200">
                </colgroup>
                <thead>
                <tr>
                    <th>课程名称</th>
-                    <th>课程代码</th>
                    <th>学分</th>
                    <th>课程描述</th>
                </tr>
                </thead>
                <tbody>
-                <!-- 动态生成的课程信息将填充在这里 -->
                </tbody>
            </table>
        </div>
@ -77,6 +99,7 @@
 <script src="static/layui.js"></script>
 <script src="/static/js/menu.js"></script>
 <script src="/static/js/logout.js"></script>
+
 <script>
    $.get('/api/get-course-info', function (courses) {
            var tbody = $('.layui-table tbody');
@ -84,13 +107,14 @@
            courses.forEach(function (course) {
                var row = '<tr>' +
                    '<td>' + course.course_name + '</td>' +
-                '<td>' + course.course_code + '</td>' +
+                    // 移除课程代码的数据
                    '<td>' + course.credits + '</td>' +
                    '<td>' + course.description + '</td>' +
                    '</tr>';
                tbody.append(row); // 将新行添加到表格中
            });
-    });
+        }
+    );
 </script>
 </body>
 </html>
--- a/app/templates/login.html
+++ b/app/templates/login.html
@ -23,7 +23,7 @@
    }
 </style>
 <form class="layui-form" id="loginForm">
-    <h1 style="text-align:center; color: #1E90FF; font-family: 'Arial', sans-serif; text-shadow: 2px 2px 4px #aaa;">
+    <h1 style="text-align:center; color: #1E90FF; font-family: 'Arial', sans-serif; text-shadow: 2px 2px 4px;">
        网上上课点名系统</h1>
    <div class="demo-login-container">
        <div class="layui-form-item">
--- a/app/templates/register.html
+++ b/app/templates/register.html
@ -18,7 +18,7 @@
    }
 </style>

-<h1 style="text-align:center; color: #16baaa;">注册</h1>
+<h1 style="text-align:center; color: #1E90FF;">注册</h1>

 <form class="layui-form">
    <div class="demo-reg-container">
@ -60,7 +60,8 @@
            </div>
        </div>
        <div class="layui-form-item">
-            <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="btnRegister">注册</button>
+            <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="btnRegister" style="background-color: #1E90FF; color: white;">注册</button>
+
        </div>
    </div>
 </form>
--- 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>