优化：底部导航菜单

src/components/SimpleH5TabBar.scss

@@ -0,0 +1,209 @@
+/* H5专用TabBar样式 */
+.simple-h5-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #ffffff;
+  border-top: 1px solid #e5e5e5;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+
+  .h5-tabbar-container {
+    display: flex;
+    height: 60px;
+    align-items: center;
+    justify-content: space-around;
+    padding: 0 16px;
+    width: 100%;
+
+    .h5-tabbar-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      position: relative;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      // 普通图标样式
+      .h5-normal-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        margin-bottom: 4px;
+        transition: transform 0.3s ease;
+
+        .h5-icon-emoji {
+          font-size: 20px;
+          transition: transform 0.3s ease;
+        }
+      }
+
+      // 特殊AI按钮样式
+      .h5-special-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: -8px;
+
+        .h5-ai-circle {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          background: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          top: -20px;
+          transition: all 0.3s ease;
+
+          .h5-ai-text {
+            color: #ffffff;
+            font-size: 14px;
+            font-weight: bold;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+          }
+
+          // 光晕效果
+          &::before {
+            content: '';
+            position: absolute;
+            top: -4px;
+            left: -4px;
+            right: -4px;
+            bottom: -4px;
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+          }
+
+          &:active {
+            transform: scale(0.95);
+          }
+        }
+      }
+
+      // 文字样式
+      .h5-tabbar-text {
+        font-size: 12px;
+        color: #8a8a8a;
+        transition: color 0.3s ease;
+        text-align: center;
+        line-height: 1.2;
+
+        &.selected {
+          color: #d81e06;
+          font-weight: 500;
+        }
+
+        &.special-text {
+          color: #ff6b35;
+          font-weight: 500;
+          margin-top: -12px;
+        }
+      }
+
+      // 选中状态
+      &.selected {
+        .h5-normal-icon {
+          transform: translateY(-2px);
+
+          .h5-icon-emoji {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      // 特殊项目样式
+      &.special {
+        .h5-special-icon .h5-ai-circle {
+          &::before {
+            opacity: 1;
+          }
+        }
+
+        &.selected {
+          .h5-special-icon .h5-ai-circle {
+            background: linear-gradient(135deg, #ff6b35 0%, #ff4500 100%);
+            box-shadow: 0 6px 16px rgba(255, 69, 0, 0.5);
+
+            &::before {
+              background: linear-gradient(135deg, rgba(255, 107, 53, 0.5) 0%, rgba(255, 69, 0, 0.5) 100%);
+            }
+          }
+        }
+      }
+
+      // 点击效果
+      &:active {
+        .h5-tabbar-text {
+          transform: scale(0.95);
+        }
+      }
+    }
+  }
+}
+
+// H5全屏适配 - 移除PC端限制，因为项目只用于H5端
+
+// 暗色主题支持
+@media (prefers-color-scheme: dark) {
+  .simple-h5-tabbar {
+    background-color: #1a1a1a;
+    border-top-color: #333;
+
+    .h5-tabbar-container .h5-tabbar-item {
+      .h5-tabbar-text {
+        color: #999;
+
+        &.selected {
+          color: #d81e06;
+        }
+
+        &.special-text {
+          color: #ff6b35;
+        }
+      }
+    }
+  }
+}
+
+// 动画效果
+@keyframes h5-bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-4px);
+  }
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+// 选中时的弹跳效果
+.simple-h5-tabbar .h5-tabbar-container .h5-tabbar-item.selected .h5-normal-icon {
+  animation: h5-bounce 0.6s ease;
+}
+
+// AI按钮的脉冲效果
+@keyframes h5-pulse {
+  0% {
+    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
+  }
+  50% {
+    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.6);
+  }
+  100% {
+    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
+  }
+}
+
+.simple-h5-tabbar .h5-tabbar-container .h5-tabbar-item.special.selected .h5-special-icon .h5-ai-circle {
+  animation: h5-pulse 2s infinite;
+}