调整移动端页面UI布局

web/src/views/mobile/Home.vue

@@ -1,7 +1,13 @@
 <template>
   <van-config-provider :theme="theme">
     <div class="mobile-home">
-      <router-view />
+      <div class="page-content">
+        <router-view :key="routerViewKey" v-slot="{ Component }">
+          <transition name="move" mode="out-in">
+            <component :is="Component"></component>
+          </transition>
+        </router-view>
+      </div>
 
       <van-tabbar route v-model="active" :safe-area-inset-bottom="true">
         <van-tabbar-item to="/mobile/index" name="home" icon="home-o">
@@ -41,11 +47,23 @@
 
 <script setup>
 import { useSharedStore } from '@/store/sharedata'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 const active = ref('home')
 const store = useSharedStore()
 const theme = ref(store.theme)
+const route = useRoute()
+const router = useRouter()
+const routerViewKey = ref(0)
+
+// 监听路由变化，强制刷新组件
+watch(
+  () => route.path,
+  () => {
+    routerViewKey.value += 1
+  }
+)
 
 watch(
   () => store.theme,
@@ -53,30 +71,36 @@ watch(
     theme.value = val
   }
 )
+
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  // 可以在这里添加路由权限检查等逻辑
+  next()
+})
+
+onMounted(() => {
+  // 组件挂载时的初始化逻辑
+})
 </script>
 
 <style lang="scss">
 @use '../../assets/iconfont/iconfont.css' as *;
 
 .mobile-home {
-  .container {
-    .van-nav-bar {
-      position: fixed;
-      width: 100%;
-    }
-    padding: 0 10px;
+  .page-content {
+    padding-bottom: 60px;
   }
 
   .van-tabbar {
     box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
-    
+
     .van-tabbar-item {
       .active-icon {
         color: var(--van-primary-color) !important;
         transform: scale(1.1);
         transition: all 0.3s ease;
       }
-      
+
       &--active {
         .van-tabbar-item__text {
           color: var(--van-primary-color);
@@ -84,7 +108,7 @@ watch(
         }
       }
     }
-    
+
     .iconfont {
       font-size: 20px;
       transition: all 0.3s ease;
@@ -97,8 +121,25 @@ watch(
   background: #1c1c1e;
 }
 
-.van-nav-bar {
-  position: fixed;
-  width: 100%;
+// 路由切换动画
+.move-enter-active,
+.move-leave-active {
+  transition: all 0.3s ease;
+}
+
+.move-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.move-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.move-enter-to,
+.move-leave-from {
+  opacity: 1;
+  transform: translateX(0);
 }
 </style>