初始化鸿蒙应用展示平台项目 - 前后端分离架构

templates/nav_bar.html

@@ -0,0 +1,76 @@
+<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>