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/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>
@@ -70,7 +104,7 @@

            if (response.msg === "ok") {
                // 如果后端返回课程名
-                $("#course-info").text("课程：" +  response.data.course_name + "。在上课时间内，请及时签到!");
+                $("#course-info").text("课程：" + response.data.course_name + "。在上课时间内，请及时签到!");
                // 启用签到按钮
                $("#sign-in-btn").prop('disabled', false);
                courseData = response.data;
@@ -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('签到成功!');