fix login ui

src/pages/login.vue

@@ -34,6 +34,9 @@ const errorMessage = ref('')
 // 背景图片
 const backgroundImageUrl = ref('')
 
+// 所有的背景图片
+const backgroundImages = ref<string[]>([])
+
 // 背景图片加载状态
 const isImageLoaded = ref(false)
 
@@ -43,17 +46,21 @@ const isOTP = ref(false)
 // 用户名称输入框
 const usernameInput = ref()
 
+// Interval定时器
+let intervalTimer: NodeJS.Timeout | null = null
+
 // 获取背景图片
 async function fetchBackgroundImage() {
-  api
+  try {
-    .get('/login/wallpaper')
+    backgroundImages.value = await api.get('/login/wallpapers')
-    .then((response: any) => {
+    if (backgroundImages.value && backgroundImages.value.length > 0) {
-      backgroundImageUrl.value = response.message
+      backgroundImageUrl.value = backgroundImages.value[0]
-    })
+    }
-    .catch((error: any) => {
+  } catch (e) {
-      console.log(error)
+    console.log(e)
-    })
+  }
 }
+
 // 查询是否开启双重验证
 const fetchOTP = debounce(async () => {
   const userid = usernameInput.value?.value
@@ -176,7 +183,7 @@ function login() {
 }
 
 // 自动登录
-onMounted(() => {
+onMounted(async () => {
   // 从Vuex Store中获取token和remember状态
   const token = store.state.auth.token
   const remember = store.state.auth.remember
@@ -186,26 +193,44 @@ onMounted(() => {
     router.push('/')
   } else {
     // 获取背景图片
-    fetchBackgroundImage()
+    await fetchBackgroundImage()
+
+    // 每隔5秒更换一次背景图片
+    intervalTimer = setInterval(() => {
+      if (backgroundImages.value.length > 0) {
+        const index = Math.floor(Math.random() * backgroundImages.value.length)
+        backgroundImageUrl.value = backgroundImages.value[index]
       }
+    }, 5000)
+  }
+})
+
+onUnmounted(() => {
+  if (intervalTimer) clearInterval(intervalTimer)
 })
 </script>
 
 <template>
-  <VImg
+  <template v-for="image in backgroundImages">
-    aspect-ratio="4/3"
+    <div v-if="backgroundImageUrl == image" class="absolute inset-0">
-    :src="backgroundImageUrl"
+      <VImg :src="image" class="w-full h-full" cover position="center top" @load="isImageLoaded = true">
-    class="w-full h-full overflow-hidden"
+        <template #placeholder>
-    cover
+          <VSkeletonLoader v-if="!isImageLoaded" class="object-cover" />
-    @load="isImageLoaded = true"
+        </template>
-  >
         <div
           class="absolute inset-0"
-      style="background-image: linear-gradient(rgba(45, 55, 72, 7%) 0%, rgb(26, 32, 46) 100%)"
+          style="background-image: linear-gradient(rgba(45, 55, 72, 33%) 0%, rgb(26, 32, 46) 100%)"
-    ></div>
+        />
+      </VImg>
+    </div>
+  </template>
   <div class="auth-wrapper d-flex align-center justify-center pa-4">
-      <VCard class="auth-card pa-7 w-full h-full rounded-lg backdrop-opacity-10 opacity-80" max-width="25rem">
+    <VCard
-        <VCardItem class="justify-center mb-7">
+      class="auth-card px-7 py-3 w-full h-full rounded-lg"
+      :class="{ 'opacity-85': isImageLoaded }"
+      max-width="24rem"
+    >
+      <VCardItem class="justify-center">
         <template #prepend>
           <div class="d-flex pe-0">
             <VImg :src="logo" width="64" height="64" />
@@ -259,7 +284,6 @@ onMounted(() => {
       </VCardText>
     </VCard>
   </div>
-  </VImg>
 </template>
 
 <style lang="scss">