Rocky/DDUp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 阅读页面 H5 移动端适配增强

Browse Source 
- 表单输入框: 增大到 48px 高度，font-size 16px 防止 iOS 缩放
- 按钮触摸目标: 最小 48px 高度
- 时长预设按钮: 44px 触摸目标
- 心情选择器: 48px 触摸目标
- 底部导航: 添加 safe-area-inset-bottom 支持
- 更多菜单: 触摸目标优化
- 模态框: 移动端边距和滚动优化
- 图表容器: 移动端布局优化

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
liweiliang0905@gmail.com
2026-01-23 18:05:22 +08:00
parent 35b481a1ca
commit 3831ed6580
1 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/vitals/web/app.py
View File

@@ -6665,17 +6665,55 @@ def get_reading_page_html() -> str:
/* 移动端适配 */
@media (max-width: 768px) {
.nav { display: none !important; }
body { padding-bottom: 80px; }
body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.container { padding: 12px; }
header { padding: 20px 16px; margin-bottom: 20px; }
header h1 { font-size: 1.5rem; }
.section { padding: 16px; }
.section { padding: 16px; margin-bottom: 20px; }
.section h2 { font-size: 1.25rem; margin-bottom: 16px; }
.book-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.book-cover { height: 140px; }
.modal-content { padding: 20px; }
.modal-content { padding: 20px; margin: 12px; max-height: calc(100vh - 24px); }
/* 表单输入框增大 - 防止 iOS 缩放 */
.form-group input, .form-group select, .form-group textarea {
font-size: 16px !important;
min-height: 48px;
padding: 14px 16px;
}
.form-group textarea { min-height: 80px; }
/* 按钮触摸目标 44px */
.btn {
min-height: 48px;
padding: 14px 20px;
font-size: 1rem;
}
.modal-footer { flex-direction: column; gap: 10px; }
.modal-footer .btn { width: 100%; }
/* 时长预设按钮 */
.duration-presets { flex-wrap: wrap; }
.duration-preset {
min-height: 44px;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
}
/* 心情选择器 */
.mood-option {
min-width: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
/* 图表容器 */
.chart-container { padding: 16px; min-height: 160px; }
.pie-chart { flex-direction: column; gap: 16px; align-items: center; }
}
@media (max-width: 400px) {
.book-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
}
</style>
</head>
@@ -7175,15 +7213,15 @@ def get_reading_page_html() -> str:
<a href="/admin" class="more-menu-item" id="admin-link" style="display:none">管理</a>
</div>
<style>
.mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: white; border-top: 1px solid #E2E8F0; display: none; justify-content: space-around; align-items: center; z-index: 50; }
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; color: #64748B; text-decoration: none; cursor: pointer; }
.mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: white; border-top: 1px solid #E2E8F0; display: none; justify-content: space-around; align-items: flex-start; padding-top: 8px; z-index: 50; }
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; color: #64748B; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobile-nav-item.active { color: #3B82F6; }
.nav-icon { width: 24px; height: 24px; margin-bottom: 2px; }
.nav-label { font-size: 10px; font-weight: 500; }
.more-menu { position: fixed; bottom: 72px; right: 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 8px 0; z-index: 51; }
.more-menu { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 8px 0; z-index: 51; }
.more-menu.hidden { display: none; }
.more-menu-item { display: block; padding: 12px 24px; color: #1E293B; text-decoration: none; }
.more-menu-item:hover { background: #F1F5F9; }
.more-menu-item { display: block; padding: 14px 24px; color: #1E293B; text-decoration: none; min-height: 44px; }
.more-menu-item:hover, .more-menu-item:active { background: #F1F5F9; }
@media (max-width: 768px) { .mobile-nav { display: flex; } }
</style>
<script>