From 8b23f0bb2efb04bfa06d34adf7faa4fd073a404a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 14 May 2025 14:35:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=AD=E4=BC=98=E5=8C=96=E8=83=8C=E6=99=AF=E6=A8=A1=E7=B3=8A?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/login.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/pages/login.vue b/src/pages/login.vue
index 4510ea13..798c79f9 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -10,6 +10,7 @@ import logo from '@images/logo.png'
 import { urlBase64ToUint8Array } from '@/@core/utils/navigator'
 import { SUPPORTED_LOCALES, SupportedLocale } from '@/types/i18n'
 import { getCurrentLocale, setI18nLanguage } from '@/plugins/i18n'
+import { useTheme } from 'vuetify'
 
 // 国际化
 const { t } = useI18n()
@@ -42,9 +43,18 @@ const usernameInput = ref()
 
 // 语言选择菜单
 const langMenu = ref(false)
+
 // 当前语言
 const currentLocale = ref(getCurrentLocale())
 
+// 当前主题
+const vuetifyTheme = useTheme()
+
+// 判断是否为透明主题
+const isTransparentTheme = computed(() => {
+  return vuetifyTheme.name.value === 'transparent'
+})
+
 // 可用的语言列表
 const locales = Object.values(SUPPORTED_LOCALES)
 
@@ -187,7 +197,12 @@ onMounted(async () => {
   <div class="relative flex min-h-screen flex-col items-center justify-center">
     <!-- 登录表单 -->
     <div class="auth-wrapper d-flex align-center justify-center">
-      <VCard class="auth-card px-7 py-3 w-full h-full" max-width="24rem" border>
+      <VCard
+        class="auth-card px-7 py-3 w-full h-full"
+        :class="{ 'glass-effect': !isTransparentTheme }"
+        max-width="24rem"
+        border
+      >
         <VCardItem class="justify-center">
           <template #prepend>
             <div class="d-flex pe-0">
@@ -295,4 +310,9 @@ onMounted(async () => {
   inset-block-start: 8px;
   inset-inline-end: 8px;
 }
+
+.glass-effect {
+  backdrop-filter: blur(10px) !important;
+  background: rgba(var(--v-theme-surface), 0.7) !important;
+}
 </style>