管理端_考勤管理页面样式优化

This commit is contained in:
2026-06-01 10:34:12 +08:00
parent 65ba0e7086
commit 0488373a44
2 changed files with 35 additions and 37 deletions

View File

@@ -33,44 +33,37 @@ include __DIR__ . '/../includes/header.php';
<div class="container"> <div class="container">
<!-- 考勤操作工具栏 --> <!-- 考勤操作工具栏 -->
<div class="card"> <div class="card">
<div class="attendance-toolbar" style="flex-direction:column;gap:8px;"> <div class="attendance-toolbar">
<!-- 第一行:日期 + 时段 + 状态按钮 + 提交考勤 --> <div class="form-group" style="margin:0">
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;"> <label>日期</label>
<div class="form-group" style="margin:0"> <input type="date" id="attendanceDate" value="<?php echo date('Y-m-d'); ?>">
<label>日期</label>
<input type="date" id="attendanceDate" value="<?php echo date('Y-m-d'); ?>">
</div>
<div class="form-group" style="margin:0">
<label>时段</label>
<select id="attendanceSlot">
<option value="morning">早上 7:15</option>
<option value="afternoon">中午 14:00</option>
<option value="evening">晚修 19:30</option>
</select>
</div>
<div class="status-group">
<button class="status-btn active" data-status="absent" onclick="selectStatus(this)" id="btnAbsent">缺勤</button>
<button class="status-btn" data-status="late" onclick="selectStatus(this)" id="btnLate">迟到</button>
<button class="status-btn" data-status="leave" onclick="selectStatus(this)" id="btnLeave">请假</button>
</div>
<div style="margin-left:auto;">
<button class="btn btn-danger" onclick="submitAttendance()">提交考勤</button>
</div>
</div> </div>
<!-- 第二行:自定义扣分 + 原因 + 全选/取消 --> <div class="form-group" style="margin:0">
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;"> <label>时段</label>
<div class="form-group" style="margin:0"> <select id="attendanceSlot">
<label>扣分</label> <option value="morning">早上 7:15</option>
<input type="number" id="customDeduction" placeholder="默认值" min="0" max="20" style="width:80px;" title="留空或0使用默认值"> <option value="afternoon">中午 14:00</option>
</div> <option value="evening">晚修 19:30</option>
<div class="form-group" style="margin:0;flex:1;min-width:180px;"> </select>
<label>原因</label> </div>
<input type="text" id="attendanceReason" placeholder="选填"> <div class="status-group">
</div> <button class="status-btn active" data-status="absent" onclick="selectStatus(this)" id="btnAbsent">缺勤</button>
<div style="margin-left:auto;"> <button class="status-btn" data-status="late" onclick="selectStatus(this)" id="btnLate">迟到</button>
<button class="btn btn-primary" onclick="selectAllStudents()">全选</button> <button class="status-btn" data-status="leave" onclick="selectStatus(this)" id="btnLeave">请假</button>
<button class="btn" onclick="deselectAllStudents()">取消全选</button> </div>
</div> <button class="btn btn-danger" style="margin-left:auto;" onclick="submitAttendance()">提交考勤</button>
<span class="toolbar-break"></span>
<div class="form-group" style="margin:0">
<label>扣分</label>
<input type="number" id="customDeduction" placeholder="默认值" min="0" max="20" style="width:80px;" title="留空或0使用默认值">
</div>
<div class="form-group" style="margin:0;flex:1;min-width:180px;">
<label>原因</label>
<input type="text" id="attendanceReason" placeholder="选填">
</div>
<div style="margin-left:auto;">
<button class="btn btn-primary" onclick="selectAllStudents()">全选</button>
<button class="btn" onclick="deselectAllStudents()">取消全选</button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -185,6 +185,11 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.toolbar-break {
flex-basis: 100%;
height: 0;
}
.attendance-toolbar .status-group { .attendance-toolbar .status-group {
display: flex; display: flex;
gap: 8px; gap: 8px;