diff --git a/src/vitals/web/app.py b/src/vitals/web/app.py index 65aa74f..ea28bcf 100644 --- a/src/vitals/web/app.py +++ b/src/vitals/web/app.py @@ -7655,6 +7655,7 @@ def get_settings_page_html() -> str: @media (max-width: 768px) { .container { padding: 15px; + padding-bottom: 100px; } .section { padding: 20px; @@ -7671,12 +7672,108 @@ def get_settings_page_html() -> str: width: 100%; justify-content: flex-start; } + /* 隐藏桌面导航 */ + .nav { + display: none; + } + /* 表单输入框加大 */ + .form-group input, + .form-group select { + height: 48px; + font-size: 16px; + } + /* 按钮符合触摸标准 */ + .btn { + min-height: 44px; + padding: 12px 20px; + } + .btn-small { + min-height: 44px; + padding: 10px 16px; + } + /* 模态框适配 */ + .modal-content { + width: 95%; + max-height: 90vh; + margin: 20px; + } + header { + padding: 20px 16px; + margin-bottom: 20px; + } + header h1 { + font-size: 1.5rem; + } + } + + /* 移动端底部导航 */ + .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; + padding-bottom: env(safe-area-inset-bottom, 0); + } + .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-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.hidden { + display: none; + } + .more-menu-item { + display: block; + padding: 12px 24px; + color: #1E293B; + text-decoration: none; + } + .more-menu-item:hover { + background: #F1F5F9; + } + @media (max-width: 768px) { + .mobile-nav { display: flex; } }