style: 设置页面移动端适配
This commit is contained in:
@@ -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; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<div class="nav desktop-nav">
|
||||
<a href="/">首页</a>
|
||||
<a href="/exercise">运动</a>
|
||||
<a href="/meal">饮食</a>
|
||||
@@ -8398,7 +8495,62 @@ def get_settings_page_html() -> str:
|
||||
document.getElementById('profile-height').addEventListener('input', calculateBMI);
|
||||
document.getElementById('profile-weight').addEventListener('input', calculateBMI);
|
||||
});
|
||||
|
||||
// 移动端更多菜单
|
||||
function toggleMoreMenu() {
|
||||
const menu = document.getElementById('more-menu');
|
||||
menu.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
// 点击其他地方关闭菜单
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.more-trigger') && !e.target.closest('.more-menu')) {
|
||||
const menu = document.getElementById('more-menu');
|
||||
if (menu) menu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- 移动端底部导航 -->
|
||||
<nav class="mobile-nav">
|
||||
<a href="/" class="mobile-nav-item">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
<span class="nav-label">首页</span>
|
||||
</a>
|
||||
<a href="/exercise" class="mobile-nav-item">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
||||
</svg>
|
||||
<span class="nav-label">运动</span>
|
||||
</a>
|
||||
<a href="/meal" class="mobile-nav-item">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/>
|
||||
</svg>
|
||||
<span class="nav-label">饮食</span>
|
||||
</a>
|
||||
<a href="/sleep" class="mobile-nav-item">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
||||
</svg>
|
||||
<span class="nav-label">睡眠</span>
|
||||
</a>
|
||||
<div class="mobile-nav-item more-trigger" onclick="toggleMoreMenu()">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>
|
||||
</svg>
|
||||
<span class="nav-label">更多</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="more-menu" class="more-menu hidden">
|
||||
<a href="/weight" class="more-menu-item">体重</a>
|
||||
<a href="/reading" class="more-menu-item">阅读</a>
|
||||
<a href="/report" class="more-menu-item">报告</a>
|
||||
<a href="/settings" class="more-menu-item" style="color: #3B82F6; font-weight: 600;">设置</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
|
||||
Reference in New Issue
Block a user