76 lines
1.8 KiB
HTML
Executable File
76 lines
1.8 KiB
HTML
Executable File
<nav class="bottom-nav">
|
|
<a href="{{ url_for('explore') }}" class="nav-item {% if request.endpoint == 'explore' %}active{% endif %}">
|
|
<i class=" fas fa-compass"></i>
|
|
<span>探索</span>
|
|
</a>
|
|
<a href="{{ url_for('index') }}" class="nav-item {% if request.endpoint == 'index' or request.endpoint == 'catch_all' %}active{% endif %}">
|
|
<i class="fas fa-th-large"></i>
|
|
<span>应用</span>
|
|
</a>
|
|
<a href="{{ url_for('more') }}" class="nav-item {% if request.endpoint == 'more' %}active{% endif %}">
|
|
<i class=" fas fa-solid fa-bars"></i>
|
|
<span>我的</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<style>
|
|
.bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 8px 0;
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: #666;
|
|
font-size: 12px;
|
|
gap: 4px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-item i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: #007AFF;
|
|
}
|
|
|
|
/* 暗色模式适配 */
|
|
[data-theme="dark"] .bottom-nav {
|
|
background: rgba(26, 26, 26, 0.7);
|
|
border-top: none;
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* 确保在 Safari 上也有毛玻璃效果 */
|
|
@supports not (backdrop-filter: blur(10px)) {
|
|
.bottom-nav {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
[data-theme="dark"] .bottom-nav {
|
|
background: rgba(26, 26, 26, 0.85);
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] .nav-item {
|
|
color: #999;
|
|
}
|
|
|
|
[data-theme="dark"] .nav-item.active {
|
|
color: #007AFF;
|
|
}
|
|
</style> |