237899745/zsglpt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
主要改进:
- 优化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>
This commit is contained in:
yuyx
2025-12-11 12:38:18 +08:00
parent 48124db411
commit 94e716b6b1
5 changed files with 230 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
templates/login.html
View File

@@ -139,6 +139,27 @@
.btn-secondary:hover { background: #EEEEEE; }
.btn-primary { padding: 12px 24px; background: var(--md-primary); color: var(--md-on-primary); border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--md-primary-dark); }
@media (max-width: 480px) {
body { padding: 12px; }
.login-card { max-width: 100%; }
.login-header { padding: 24px 20px; }
.login-header .logo { font-size: 40px; margin-bottom: 10px; }
.login-header h1 { font-size: 20px; }
.login-header p { font-size: 13px; }
.login-body { padding: 24px 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { font-size: 13px; }
.form-group input { padding: 12px 14px; font-size: 16px; } /* iOS防止自动缩放 */
.captcha-code { padding: 8px 12px; font-size: 18px; letter-spacing: 3px; }
.captcha-refresh { padding: 8px 12px; font-size: 16px; }
.btn-login { padding: 14px; font-size: 15px; }
.modal { max-width: 100%; }
.modal-header, .modal-body { padding: 20px; }
.modal-header h2 { font-size: 18px; }
.modal-footer { padding: 14px 20px; flex-direction: column; }
.modal-footer button { width: 100%; }
}
</style>
</head>
<body>