完善UI

web/src/views/auth/LoginView.vue

@@ -1,15 +1,10 @@
 <template>
-  <div
-    class="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-100 px-4"
-  >
-    <div
-      class="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,rgba(53,109,255,0.12),transparent_34%),radial-gradient(circle_at_80%_90%,rgba(14,165,233,0.12),transparent_32%)]"
-    ></div>
-    <n-card class="relative z-10 w-full max-w-md rounded-2xl border border-slate-200 shadow-panel">
+  <div class="login-page">
+    <div class="login-background"></div>
+    <n-card class="login-card">
       <template #header>
         <div class="text-center">
           <div class="text-2xl font-semibold text-slate-900">通用管理平台</div>
-          <div class="mt-1 text-sm text-slate-500">中后台管理系统</div>
         </div>
       </template>
 
@@ -29,8 +24,6 @@
           >登录</n-button
         >
       </n-form>
-
-      <div class="mt-4 text-xs text-slate-500">默认账号：admin / Admin@123456</div>
     </n-card>
   </div>
 </template>
@@ -50,8 +43,8 @@ const authStore = useAuthStore()
 const loading = ref(false)
 const formRef = ref<FormInst | null>(null)
 const form = reactive({
-  username: 'admin',
-  password: 'Admin@123456'
+  username: '',
+  password: ''
 })
 
 const rules: FormRules = {
@@ -72,3 +65,83 @@ async function onSubmit() {
   }
 }
 </script>
+
+<style scoped>
+.login-page {
+  position: relative;
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: flex-end;
+  overflow: hidden;
+  padding: 24px clamp(24px, 9vw, 128px) 24px 16px;
+  background:
+    linear-gradient(
+      42deg,
+      rgba(226, 252, 244, 0.98),
+      rgba(224, 244, 255, 0.96),
+      rgba(241, 255, 250, 0.98),
+      rgba(230, 247, 255, 0.96),
+      rgba(226, 252, 244, 0.98)
+    ),
+    #f5fbff;
+  background-size: 320% 320%;
+  animation: loginGradientFlow 18s ease-in-out infinite;
+}
+
+.login-background {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(14, 116, 144, 0.05) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(15, 118, 110, 0.04) 1px, transparent 1px),
+    linear-gradient(145deg, transparent 0%, rgba(255, 255, 255, 0.76) 46%, transparent 74%);
+  background-size:
+    42px 42px,
+    42px 42px,
+    100% 100%;
+  opacity: 0.72;
+}
+
+.login-page::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(115deg, rgba(255, 255, 255, 0.82), transparent 35%),
+    linear-gradient(295deg, rgba(204, 251, 241, 0.34), transparent 42%);
+}
+
+.login-card {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 448px;
+  border: 1px solid rgba(255, 255, 255, 0.78);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 24px 60px rgba(15, 118, 110, 0.12);
+  backdrop-filter: blur(18px);
+}
+
+@keyframes loginGradientFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@media (max-width: 768px) {
+  .login-page {
+    justify-content: center;
+    padding: 24px 16px;
+  }
+}
+</style>