初次提交

src/components/BottomNav.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="bottom-nav">
+    <div 
+      class="nav-item" 
+      :class="{ active: isActive('/transfers') }"
+      @click="handleNavClick('/transfers')"
+    >
+      <Money class="nav-icon" />
+      <span class="nav-label">转账管理</span>
+    </div>
+    <div 
+      class="nav-item" 
+      :class="{ active: isActive('/matching') }"
+      @click="handleNavClick('/matching')"
+    >
+      <Connection class="nav-icon" />
+      <span class="nav-label">资金匹配</span>
+    </div>
+    <div 
+      class="nav-item" 
+      :class="{ active: isActive('/points-history') }"
+      @click="handleNavClick('/points-history')"
+    >
+      <Coin class="nav-icon" />
+      <span class="nav-label">积分记录</span>
+    </div>
+    <div 
+      class="nav-item" 
+      :class="{ active: isActive('/profile') }"
+      @click="handleNavClick('/profile')"
+    >
+      <User class="nav-icon" />
+      <span class="nav-label">个人中心</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { Money, Coin, User, Connection } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+const isActive = (path) => {
+  return route.path === path
+}
+
+const handleNavClick = (path) => {
+  if (!userStore.isAuthenticated) {
+    router.push('/login')
+    return
+  }
+  router.push(path)
+}
+</script>
+
+<style scoped>
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  border-top: 1px solid #e4e7ed;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 8px 0;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-radius: 12px;
+  min-width: 60px;
+}
+
+.nav-item:hover {
+  transform: translateY(-2px);
+  background: rgba(64, 158, 255, 0.1);
+}
+
+.nav-item:active {
+  transform: translateY(0);
+}
+
+.nav-item.active {
+  background: rgba(64, 158, 255, 0.15);
+}
+
+.nav-item.active .nav-icon {
+  color: #409eff;
+  transform: scale(1.1);
+}
+
+.nav-item.active .nav-label {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.nav-icon {
+  font-size: 20px;
+  color: #909399;
+  margin-bottom: 4px;
+  transition: all 0.3s ease;
+}
+
+.nav-item:hover .nav-icon {
+  color: #409eff;
+  transform: scale(1.1);
+}
+
+.nav-label {
+  font-size: 12px;
+  color: #606266;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.nav-item:hover .nav-label {
+  color: #409eff;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .bottom-nav {
+    padding: 6px 0;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+  }
+  
+  .nav-item {
+    padding: 6px 8px;
+    min-width: 50px;
+    min-height: 44px; /* 触摸友好的最小尺寸 */
+    justify-content: center;
+  }
+  
+  .nav-icon {
+    font-size: 18px;
+    margin-bottom: 2px;
+  }
+  
+  .nav-label {
+    font-size: 11px;
+    line-height: 1.2;
+  }
+}
+
+@media (max-width: 480px) {
+  .bottom-nav {
+    padding: 4px 0;
+    padding-bottom: max(6px, env(safe-area-inset-bottom));
+  }
+  
+  .nav-item {
+    padding: 4px 6px;
+    min-width: 45px;
+  }
+  
+  .nav-icon {
+    font-size: 16px;
+    margin-bottom: 1px;
+  }
+  
+  .nav-label {
+    font-size: 10px;
+  }
+}
+
+/* 横屏适配 */
+@media (max-height: 500px) and (orientation: landscape) {
+  .bottom-nav {
+    padding: 4px 0;
+  }
+  
+  .nav-item {
+    padding: 4px 8px;
+  }
+  
+  .nav-icon {
+    font-size: 16px;
+    margin-bottom: 1px;
+  }
+  
+  .nav-label {
+    font-size: 10px;
+  }
+}
+</style>