From 7efcc2d2b87a59a9fc2a294ca3e16aa39bb1f303 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 22 Apr 2025 11:34:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=99=BB=E5=BD=95=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BC=98=E5=8C=962?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.vue | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/pages/Login/index.vue b/src/pages/Login/index.vue
index 2889288..53589cb 100644
--- a/src/pages/Login/index.vue
+++ b/src/pages/Login/index.vue
@@ -98,7 +98,7 @@ const  back = () => {
 </script>
 <template>
   <div class="login-box">
-    <p class="login-title">登录</p>
+    <transition name="flip-card" mode="out-in">
     <div class="user-box" v-if="!showPassword">
       <p class="title">选择用户</p>
       <div class="user-list">
@@ -138,6 +138,7 @@ const  back = () => {
         <el-icon><Back /></el-icon>
       </div>
     </div>
+    </transition>
   </div>
 
 </template>
@@ -172,6 +173,7 @@ const  back = () => {
   font-weight: bold;
 }
 .login-box {
+  perspective: 1000px;
   width: 100%;
   height: 100%;
   background: #A0CEF2;
@@ -318,4 +320,42 @@ const  back = () => {
     color: #fff;
   }
 }
+
+
+.flip-card-leave-active,
+.flip-card-enter-active {
+  transition: all 0.5s ease;
+  backface-visibility: hidden; /* 隐藏背面 */
+}
+
+.flip-card-enter-from,
+.flip-card-leave-to {
+  transform: rotateY(90deg);
+  opacity: 0;
+}
+
+.flip-card-enter-active .user-box,
+.flip-card-leave-active .user-box,
+.flip-card-enter-active .password-box,
+.flip-card-leave-active .password-box {
+  position: absolute;
+  backface-visibility: hidden;
+  transition: transform 0.5s ease;
+}
+
+.flip-card-enter .user-box {
+  transform: rotateY(-90deg);
+}
+
+.flip-card-leave-to .user-box {
+  transform: rotateY(90deg);
+}
+
+.flip-card-enter .password-box {
+  transform: rotateY(90deg);
+}
+
+.flip-card-leave-to .password-box {
+  transform: rotateY(-90deg);
+}
 </style>
\ No newline at end of file