优化移动端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>

templates/admin.html

@@ -20,7 +20,7 @@
         .header {
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
             color: white;
-            padding: 15px;
+            padding: 12px 15px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
 
@@ -30,22 +30,25 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
+            flex-wrap: wrap;
         }
 
         .header h1 {
-            font-size: 18px;
+            font-size: 16px;
+            white-space: nowrap;
         }
 
         .header-actions {
             display: flex;
-            gap: 10px;
+            gap: 8px;
             align-items: center;
+            flex-wrap: wrap;
         }
 
         .header-actions > span {
             display: inline;
-            font-size: 13px;
+            font-size: 12px;
         }
 
         .btn {
@@ -319,7 +322,112 @@
         .action-buttons {
             display: flex;
             flex-wrap: wrap;
-            gap: 3px;
+            gap: 4px;
+        }
+
+        /* 移动端优化 */
+        @media (max-width: 767px) {
+            * { -webkit-tap-highlight-color: transparent; }
+
+            .header { padding: 10px 12px; }
+            .header h1 { font-size: 15px; }
+            .header-actions { gap: 6px; }
+            .header-actions > span { font-size: 11px; }
+            .btn { padding: 5px 10px; font-size: 11px; }
+            .btn-logout { padding: 5px 10px; }
+
+            .container { padding: 12px; }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 8px;
+                margin-bottom: 15px;
+            }
+            .stat-card { padding: 12px 10px; }
+            .stat-value { font-size: 24px; }
+            .stat-label { font-size: 11px; }
+
+            .panel { padding: 12px; margin-bottom: 12px; }
+            .panel-title { font-size: 15px; margin-bottom: 12px; padding-bottom: 6px; }
+
+            .tabs {
+                gap: 3px;
+                margin-bottom: 12px;
+                padding-bottom: 0;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+            }
+            .tab {
+                padding: 8px 12px;
+                font-size: 12px;
+                flex-shrink: 0;
+            }
+
+            .table-container {
+                margin: -12px;
+                padding: 12px 0;
+            }
+            table {
+                min-width: 800px;
+                font-size: 11px;
+            }
+            th { padding: 8px 6px; font-size: 11px; }
+            td { padding: 8px 6px; font-size: 11px; }
+
+            .status-badge { padding: 3px 8px; font-size: 10px; }
+
+            .btn-small { padding: 4px 6px; font-size: 10px; margin: 1px; }
+
+            .form-group { margin-bottom: 12px; }
+            .form-group label { font-size: 12px; margin-bottom: 5px; }
+            .form-group input,
+            .form-group select {
+                padding: 8px;
+                font-size: 14px;
+                max-width: 100%;
+            }
+
+            .notification {
+                top: 10px;
+                right: 10px;
+                left: 10px;
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+
+            .user-info { font-size: 10px; margin-top: 2px; }
+            .vip-badge-inline, .normal-badge-inline {
+                font-size: 9px;
+                padding: 2px 6px;
+            }
+
+            .action-buttons { gap: 3px; }
+
+            .empty-message { padding: 20px 10px; font-size: 12px; }
+
+            /* 系统状态卡片优化 */
+            [style*="display: flex"][style*="justify-content: space-between"] {
+                gap: 10px !important;
+            }
+
+            /* 系统配置表单优化 */
+            #scheduleWeekdaysGroup label {
+                font-size: 12px;
+                padding: 4px 8px;
+            }
+
+            /* 分页控件优化 */
+            #logsPagination {
+                gap: 5px;
+                padding: 10px 0;
+            }
+            #logsPagination button {
+                padding: 5px 8px;
+                font-size: 11px;
+            }
+            #logsPagination span {
+                font-size: 11px;
+            }
         }
 
         /* 平板及以上屏幕 */