diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 6e085c6..601d768 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -4,12 +4,26 @@
 
 <template>
     <div class="w-full h-screen relative flex justify-center items-center">
-        <img class="w-full h-full absolute left-0 top-0 -z-10 object-cover" src="../../assets/images/背景.png" alt="" />
+        <img class="w-full h-full absolute left-0 top-0 -z-10 object-cover" src="../../assets/images/背景.png" alt=""/>
 
-        <router-view></router-view>
+        <router-view v-slot="{ Component, route }">
+            <transition name="fade">
+                <component :is="Component" :key="route.path"/>
+            </transition>
+        </router-view>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+    position: relative;
+}
 
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+    position: absolute;
+}
 </style>