111

src/components/AppTabBar.vue

@@ -14,11 +14,11 @@ const currentTab = computed(() => {
 
 function navigate(target: string) {
   if (target === 'home' && route.path !== '/dashboard') {
-    router.push('/dashboard')
+    router.replace('/dashboard')
   } else if (target === 'assessment' && route.path !== '/assessment') {
-    router.push('/assessment')
+    router.replace('/assessment')
   } else if (target === 'profile' && route.path !== '/profile') {
-    router.push('/profile')
+    router.replace('/profile')
   }
 }
 </script>
@@ -80,15 +80,19 @@ function navigate(target: string) {
   transform: translateX(-50%);
   width: 100%;
   max-width: 480px;
-  height: 60px;
-  background: rgba(255, 255, 255, 0.96);
+  min-height: 56px;
+  height: calc(56px + env(safe-area-inset-bottom, 0px));
+  box-sizing: border-box;
+  background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   border-top: 1px solid rgba(18, 63, 55, 0.08);
   display: flex;
   justify-content: space-around;
-  align-items: center;
-  z-index: 99;
+  align-items: flex-start;
+  padding-top: 6px;
   padding-bottom: env(safe-area-inset-bottom, 0px);
+  z-index: 999;
   box-shadow: 0 -4px 16px rgba(18, 63, 55, 0.04);
 }
 
@@ -98,35 +102,33 @@ function navigate(target: string) {
   align-items: center;
   justify-content: center;
   flex: 1;
-  height: 100%;
+  height: 44px;
   color: #7d8e87;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
   user-select: none;
 }
 
 .tab-icon {
-  margin-bottom: 2px;
+  width: 22px;
+  height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.2s ease;
 }
 
 .tab-label {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.02em;
+  margin-top: 2px;
+  line-height: 1.2;
 }
 
 .tab-item.active {
   color: #0c5045;
 }
 
-.tab-item.active .tab-icon {
-  transform: translateY(-1px);
-}
-
 .tab-item.active .tab-label {
   font-weight: 700;
 }