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 184e46cc1e
commit 706e80e286
5 changed files with 230 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
templates/index.html
View File

@@ -39,8 +39,8 @@
.header {
background: var(--md-primary);
color: var(--md-on-primary);
padding: 0 24px;
height: 56px;
padding: 0 16px;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
@@ -50,15 +50,17 @@
left: 0;
right: 0;
z-index: 1000;
flex-wrap: wrap;
gap: 8px;
}
.header-title { font-size: 20px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .btn { color: white; }
.header-title { font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.header-actions .btn { color: white; padding: 6px 12px; font-size: 13px; }
.header-actions .btn-outlined { border-color: rgba(255,255,255,0.7); }
.header-actions .btn-outlined:hover { background: rgba(255,255,255,0.1); }
.header-actions .btn-text:hover { background: rgba(255,255,255,0.1); }
.user-info { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.user-info { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.vip-badge { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.vip-badge:hover { box-shadow: 0 2px 8px rgba(255,215,0,0.5); }
.normal-badge { background: #E0E0E0; color: #616161; padding: 2px 8px; border-radius: 999px; font-size: 12px; cursor: pointer; }
@@ -177,7 +179,8 @@
.progress-details { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--md-on-surface-medium); }
.account-card-actions { display: flex; align-items: center; gap: 8px; padding: 16px; flex-wrap: wrap; }
.account-card-actions .select-inline { flex: 1; min-width: 100px; }
.account-card-actions .select-inline { flex: 1; min-width: 100px; max-width: 100%; }
.account-card-actions .btn { white-space: nowrap; }
.schedule-card { background: var(--md-surface); border-radius: 8px; box-shadow: var(--md-shadow-1); padding: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.schedule-info { flex: 1; min-width: 200px; }
@@ -194,14 +197,14 @@
.screenshot-time { font-size: 12px; color: var(--md-on-surface-medium); margin-bottom: 8px; }
.screenshot-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.2s; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.2s; padding: 16px; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--md-surface); border-radius: 16px; box-shadow: var(--md-shadow-3); width: 90%; max-width: 480px; max-height: 90vh; overflow: auto; transform: translateY(-20px); transition: transform 0.2s; }
.modal { background: var(--md-surface); border-radius: 16px; box-shadow: var(--md-shadow-3); width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; transform: translateY(-20px); transition: transform 0.2s; }
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header { padding: 24px; border-bottom: 1px solid var(--md-divider); }
.modal-title { font-size: 20px; font-weight: 500; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--md-divider); display: flex; justify-content: flex-end; gap: 8px; }
.modal-header { padding: 20px; border-bottom: 1px solid var(--md-divider); }
.modal-title { font-size: 18px; font-weight: 500; }
.modal-body { padding: 20px; }
.modal-footer { padding: 16px 20px; border-top: 1px solid var(--md-divider); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.weekday-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.weekday-chip { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--md-divider); border-radius: 999px; cursor: pointer; transition: all 0.2s; font-size: 13px; user-select: none; }
@@ -251,16 +254,62 @@
.feedback-status-closed { background: #ECEFF1; color: #546E7A; }
@media (max-width: 768px) {
.sidebar { width: 100%; position: fixed; top: auto; bottom: 0; height: 60px; border-right: none; border-top: 1px solid var(--md-divider); display: flex; overflow-x: auto; }
.nav-item { flex-direction: column; padding: 8px 16px; border-left: none; border-top: 3px solid transparent; min-width: 80px; text-align: center; }
.header { padding: 0 12px; min-height: auto; }
.header-title { font-size: 16px; }
.header-actions { gap: 4px; }
.header-actions .btn { padding: 5px 10px; font-size: 12px; }
.user-info { font-size: 12px; }
.sidebar { width: 100%; position: fixed; top: auto; bottom: 0; height: 60px; border-right: none; border-top: 1px solid var(--md-divider); display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-item { flex-direction: column; padding: 8px 12px; border-left: none; border-top: 3px solid transparent; min-width: 70px; text-align: center; flex-shrink: 0; }
.nav-item.active { border-left-color: transparent; border-top-color: var(--md-primary); }
.nav-label { font-size: 11px; }
.main-content { margin-left: 0; margin-bottom: 60px; max-width: 100%; }
.accounts-grid { grid-template-columns: 1fr; }
.toolbar { flex-direction: column; align-items: stretch; }
.nav-icon { font-size: 18px; }
.nav-label { font-size: 10px; }
.main-content { margin-left: 0; margin-bottom: 60px; max-width: 100%; padding: 16px; }
.accounts-grid { grid-template-columns: 1fr; gap: 12px; }
.card { padding: 16px; margin-bottom: 16px; }
.card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
.card-title { font-size: 16px; }
.stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card { padding: 12px; }
.stat-value { font-size: 24px; }
.stat-label { font-size: 11px; }
.toolbar { padding: 12px; gap: 12px; }
.toolbar-group { width: 100%; gap: 6px; }
.toolbar-group .select-inline { width: 100%; }
.toolbar-divider { display: none; }
.fab { bottom: 80px; }
.account-card-actions { padding: 12px; gap: 6px; }
.account-card-actions .select-inline { width: 100%; min-width: auto; }
.account-card-actions .btn-small { flex: 1; min-width: 60px; }
.schedule-card { padding: 12px; gap: 12px; }
.schedule-info { min-width: 100%; }
.schedule-actions { width: 100%; justify-content: flex-start; }
.modal { margin: 0; border-radius: 12px; }
.modal-header { padding: 16px; }
.modal-title { font-size: 16px; }
.modal-body { padding: 16px; }
.modal-footer { padding: 12px 16px; }
.fab { bottom: 80px; min-width: 120px; height: 48px; border-radius: 24px; font-size: 14px; }
.fab-icon { font-size: 20px; }
.fab-text { font-size: 14px; }
.preview-controls { bottom: 80px; }
.preview-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 20px; }
.zoom-info { top: 16px; font-size: 12px; padding: 6px 12px; }
.upgrade-banner { padding: 12px 16px; flex-direction: column; gap: 12px; text-align: center; }
.upgrade-banner-text { font-size: 13px; }
.upgrade-banner-text strong { font-size: 14px; }
.form-input, .form-select { font-size: 16px; } /* 防止iOS自动缩放 */
}
</style>
</head>