fix login

src/pages/login.vue

@@ -26,6 +26,9 @@ const errorMessage = ref("");
 // 背景图片
 const backgroundImageUrl = ref("");
 
+// 背景图片加载状态
+const isImageLoaded = ref(false);
+
 // 获取背景图片
 const fetchBackgroundImage = async () => {
   api
@@ -100,11 +103,20 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="auth-wrapper d-flex align-center justify-center pa-4 w-full h-full overflow-hidden"
-    :style="{ backgroundImage: `url(${backgroundImageUrl})` }"
+  <VImg
+    aspect-ratio="4/3"
+    :src="backgroundImageUrl"
+    class="w-full h-full overflow-hidden"
+    @load="isImageLoaded = true"
+    cover
+  >
+    <div class="auth-wrapper d-flex align-center justify-center pa-4">
+      <VCard
+        class="auth-card pa-7 w-full h-full"
+        :class="isImageLoaded ? 'backdrop-blur-xl bg-white/50' : ''"
+        max-width="25rem"
+        :theme="isImageLoaded ? 'light' : ''"
       >
-    <VCard class="auth-card pa-7 backdrop-blur-xl bg-white/50" width="25rem" theme="light">
         <VCardItem class="justify-center mb-7">
           <template #prepend>
             <div class="d-flex">
@@ -148,7 +160,9 @@ onMounted(() => {
                 </div>
 
                 <!-- remember me checkbox -->
-              <div class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4">
+                <div
+                  class="d-flex align-center justify-space-between flex-wrap mt-1 mb-4"
+                >
                   <VCheckbox v-model="form.remember" label="保持登录" required />
                 </div>
 
@@ -160,6 +174,7 @@ onMounted(() => {
         </VCardText>
       </VCard>
     </div>
+  </VImg>
 </template>
 
 <style lang="scss">