优化移动端UI布局,修复按钮和内容超出屏幕问题

主要改进: - 优化header布局,支持flex-wrap防止内容溢出 - 改进工具栏和按钮组的响应式布局 - 优化表格在移动端的显示(添加横向滚动) - 调整模态窗口在小屏幕上的尺寸和间距 - 优化表单输入框字体大小(防止iOS自动缩放) - 改进统计卡片、导航栏等组件的移动端适配 - 为登录/注册页面添加移动端优化样式受影响文件: - templates/index.html - 用户主界面移动端优化 - templates/admin.html - 管理员界面移动端优化 - templates/login.html - 登录页面移动端优化 - templates/register.html - 注册页面移动端优化 - templates/admin_login.html - 管理员登录页面移动端优化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-11 12:38:18 +08:00
parent 48124db411
commit 94e716b6b1
5 changed files with 230 additions and 26 deletions
--- a/templates/admin_login.html
+++ b/templates/admin_login.html
@@ -143,6 +143,19 @@
            margin-bottom: 20px;
            font-size: 13px;
        }
+
+        @media (max-width: 480px) {
+            body { padding: 12px; align-items: flex-start; padding-top: 20px; }
+            .login-container { width: 100%; max-width: 100%; padding: 28px 20px; }
+            .login-header h1 { font-size: 24px; }
+            .login-header p { font-size: 13px; }
+            .admin-badge { font-size: 11px; padding: 4px 12px; }
+            .form-group { margin-bottom: 18px; }
+            .form-group label { font-size: 13px; }
+            .form-group input { padding: 11px; font-size: 16px; } /* iOS防止自动缩放 */
+            .btn-login { padding: 13px; font-size: 15px; }
+            .back-link { margin-top: 16px; font-size: 14px; }
+        }
    </style>
 </head>
 <body>