canglan/SharedClassManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对手机端优化

Browse Source
This commit is contained in:
canglan
2026-04-27 03:02:10 +08:00
parent 17cc08071c
commit c2ba8b05fd
8 changed files with 478 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/admin/dashboard.php
View File

@@ -35,7 +35,7 @@ include __DIR__ . '/../includes/header.php';
<div class="card">
<div class="card-title">操行分排行榜</div>
<div class="table-wrapper">
<div style="display: flex; align-items: center; margin-bottom: 12px; gap: 8px;">
<div style="display: flex; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap;">
<span style="font-size: 14px; color: #666;">显示前</span>
<input type="number" id="percentileFilter" style="width: 70px; padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px;" min="1" max="100" value="100" placeholder="1-100">
<span style="font-size: 14px; color: #666;">% 的学生</span>

150
frontend/assets/css/admin.css
View File

@@ -128,6 +128,13 @@
height: 18px;
cursor: pointer;
}
/* 扣分类型按钮组 */
.deduction-types {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* 考勤学生方格网格 */
.student-grid {
display: flex;
@@ -199,14 +206,155 @@
color: #4338ca;
}
/* ========== 响应式 — 平板 (≤768px) ========== */
@media (max-width: 768px) {
.student-cell {
width: calc(100% / 4 - 10px);
min-height: 54px;
font-size: 13px;
}
.batch-bar {
flex-direction: column;
gap: 8px;
text-align: center;
}
.filter-bar {
flex-direction: column;
gap: 10px;
padding: 12px;
}
.filter-group {
min-width: 100%;
}
.attendance-toolbar {
gap: 8px;
}
.attendance-toolbar .status-group {
flex-wrap: wrap;
gap: 6px;
}
.attendance-toolbar .status-btn {
padding: 8px 14px;
font-size: 13px;
min-height: 40px;
}
.assignment-header {
flex-direction: column;
align-items: flex-start;
}
.import-area {
padding: 20px;
}
}
/* ========== 响应式 — 手机 (≤480px) ========== */
@media (max-width: 480px) {
.student-cell {
width: calc(100% / 3 - 10px);
width: calc(100% / 3 - 8px);
min-height: 50px;
font-size: 12px;
padding: 6px 2px;
border-radius: 6px;
}
.student-cell-name {
font-size: 12px;
}
.student-cell-no {
font-size: 10px;
}
.student-grid {
gap: 6px;
margin: 10px 0;
}
.batch-bar {
padding: 10px 12px;
border-radius: 6px;
}
.filter-bar {
padding: 10px;
border-radius: 6px;
gap: 8px;
}
.filter-group input,
.filter-group select {
font-size: 16px; /* 防止 iOS 自动缩放 */
padding: 10px 8px;
min-height: 40px;
}
.attendance-toolbar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.attendance-toolbar .form-group {
width: 100%;
}
.attendance-toolbar .form-group input,
.attendance-toolbar .form-group select {
font-size: 16px;
}
.attendance-toolbar .status-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: space-between;
}
.attendance-toolbar .status-btn {
flex: 1 1 calc(33% - 6px);
min-width: 0;
text-align: center;
padding: 10px 8px;
}
.attendance-toolbar input[type="text"],
.attendance-toolbar input[type="number"] {
font-size: 16px;
width: 100% !important;
min-width: 0 !important;
}
.attendance-toolbar .btn {
width: 100%;
}
.status-select {
font-size: 16px; /* 防止 iOS 自动缩放 */
padding: 8px;
min-height: 40px;
}
.import-area {
padding: 16px;
}
.preview-table {
max-height: 200px;
}
.assignment-card {
margin-bottom: 12px;
}
.assignment-title {
font-size: 14px;
}
}

303
frontend/assets/css/style.css
View File

@@ -622,7 +622,25 @@ tr:hover {
color: #667eea;
}
/* ========== 响应式 ========== */
/* ========== 触控友好 ========== */
.btn,
.btn-login,
.btn-logout,
.status-btn,
.nav-item {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.form-group input,
.form-group select,
.form-group textarea {
min-height: 44px;
}
/* ========== 响应式 — 平板 (≤768px) ========== */
@media (max-width: 768px) {
.container {
padding: 0 16px;
@@ -644,11 +662,18 @@ tr:hover {
.nav {
padding: 0 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.nav::-webkit-scrollbar {
display: none;
}
.nav-item {
padding: 10px 14px;
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.action-bar {
@@ -663,4 +688,280 @@ tr:hover {
.search-bar input {
flex: 1;
}
.header {
padding: 10px 16px;
flex-wrap: wrap;
gap: 8px;
}
.header h1 {
font-size: 16px;
}
.login-container {
margin: 40px auto;
padding: 24px;
}
.modal-content {
width: 92%;
max-height: 85vh;
}
.table-wrapper {
-webkit-overflow-scrolling: touch;
}
.stat-value {
font-size: 28px;
}
.pagination a, .pagination span {
padding: 8px 10px;
min-height: 36px;
}
.action-buttons {
width: 100%;
}
.action-buttons .btn {
flex: 1;
min-width: 0;
}
}
/* ========== 响应式 — 手机 (≤480px) ========== */
@media (max-width: 480px) {
body {
font-size: 13px;
}
.header {
flex-direction: column;
align-items: flex-start;
padding: 8px 12px;
}
.header-info {
width: 100%;
justify-content: space-between;
}
.header h1 {
font-size: 15px;
margin-bottom: 4px;
}
.user-name {
font-size: 13px;
}
.btn-logout {
padding: 6px 12px;
font-size: 12px;
}
.container {
padding: 0 10px;
margin: 12px auto;
}
.card {
padding: 12px;
border-radius: 8px;
margin-bottom: 12px;
}
.card-title {
font-size: 15px;
margin-bottom: 12px;
padding-bottom: 8px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.stat-card {
padding: 12px 8px;
border-radius: 8px;
}
.stat-value {
font-size: 24px;
margin: 6px 0;
}
.stat-label {
font-size: 12px;
}
.score-number {
font-size: 48px;
}
/* 登录页 */
.login-container {
margin: 20px 12px;
padding: 20px 16px;
border-radius: 12px;
max-width: 100%;
width: auto;
}
.login-header h1 {
font-size: 20px;
}
.login-header p {
font-size: 13px;
}
.login-form input {
padding: 14px 12px;
font-size: 16px; /* 防止 iOS 自动缩放 */
}
.btn-login {
padding: 14px;
font-size: 16px;
}
/* 导航 */
.nav {
padding: 0 8px;
}
.nav-item {
padding: 8px 12px;
font-size: 13px;
}
/* 表格 */
th, td {
padding: 6px 8px;
font-size: 12px;
}
/* 模态框 */
.modal-content {
width: 100%;
max-width: 100%;
border-radius: 12px 12px 0 0;
max-height: 90vh;
position: fixed;
bottom: 0;
left: 0;
}
.modal {
align-items: flex-end;
}
/* 按钮 */
.btn {
padding: 10px 14px;
font-size: 13px;
}
.btn-sm {
padding: 6px 10px;
font-size: 12px;
min-height: 36px;
}
/* 表单 */
.form-group input,
.form-group select,
.form-group textarea {
font-size: 16px; /* 防止 iOS 自动缩放 */
padding: 10px 12px;
}
/* 记录项 */
.record-item {
flex-wrap: wrap;
gap: 4px;
padding: 10px 0;
}
.record-reason {
margin: 0 8px;
flex: 1 1 100%;
order: 3;
font-size: 13px;
}
.record-time {
font-size: 11px;
}
/* 搜索栏 */
.search-bar {
flex-direction: column;
gap: 8px;
}
.search-bar input {
width: 100%;
}
/* 操作栏 */
.action-buttons {
flex-wrap: wrap;
gap: 8px;
}
.action-buttons .btn {
flex: 1 1 calc(50% - 8px);
min-width: 0;
}
/* 分页 */
.pagination {
gap: 4px;
flex-wrap: wrap;
}
.pagination a, .pagination span {
padding: 6px 10px;
font-size: 12px;
}
/* 底部 */
.footer {
padding: 16px 12px;
}
/* 状态标签 */
.status-badge {
padding: 3px 8px;
font-size: 11px;
}
/* Toast */
.toast {
left: 12px;
right: 12px;
bottom: 12px;
transform: none;
font-size: 13px;
padding: 10px 16px;
border-radius: 8px;
animation: fadeInUpMobile 0.3s ease;
}
@keyframes fadeInUpMobile {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}

BIN
frontend/assets/icons/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
frontend/assets/icons/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

11
frontend/assets/icons/icon.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea"/>
<stop offset="100%" style="stop-color:#764ba2"/>
</linearGradient>
</defs>
<rect width="512" height="512" rx="96" fill="url(#bg)"/>
<text x="256" y="200" text-anchor="middle" fill="white" font-family="Arial,sans-serif" font-size="120" font-weight="bold">操</text>
<text x="256" y="360" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-family="Arial,sans-serif" font-size="100" font-weight="bold">分</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 630 B

4
frontend/includes/header.php
View File

@@ -23,8 +23,10 @@ $page_title = $page_title ?? '首页';
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="theme-color" content="#667eea">
<title><?php echo SITE_NAME; ?> - <?php echo $page_title; ?></title>
<link rel="icon" href="/assets/icons/icon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/assets/css/style.css">
<?php if ($user_type === 'admin'): ?>
<link rel="stylesheet" href="/assets/css/admin.css">

5
frontend/index.php
View File

@@ -26,8 +26,10 @@ if (isset($_SESSION['user_id']) && isset($_SESSION['user_type'])) {
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="theme-color" content="#667eea">
<title><?php echo SITE_NAME; ?> - 登录</title>
<link rel="icon" href="/assets/icons/icon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
@@ -133,5 +135,6 @@ if (isset($_SESSION['user_id']) && isset($_SESSION['user_type'])) {
}, 3000);
}
</script>
</script>
</body>
</html>