登录页面美化

app/app/(auth)/layout.tsx

@@ -22,7 +22,7 @@ export default async function AuthLayout({
   }
 
   return (
-    <div className="container mx-auto signin">
+    <div className="container1 w-full signin">
       <div className="flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8">
         {children}
       </div>

app/app/(auth)/login/page.tsx

@@ -5,7 +5,7 @@ import { Suspense } from "react";
 
 export default function LoginPage() {
   return (
-    <div className="mx-5 border border-stone-200 py-10 dark:border-stone-700 sm:mx-auto sm:w-full sm:max-w-md sm:rounded-lg sm:shadow-md ">
+    <div className="login-form border border-stone-200 py-10 dark:border-stone-700 sm:mx-auto sm:w-full sm:max-w-md sm:rounded-lg sm:shadow-md ">
       <Image
         alt="Platforms Starter Kit"
         width={100}

app/app/login.scss

@@ -56,4 +56,34 @@
 
 .signin .provider+.provider {
   margin-top: 1rem
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.container1 {
+  height: 100%;
+  background: linear-gradient(to right, #fbc2eb, #a6c1ee);
+}
+
+.login-form {
+  background-color: #fff;
+  width: 350px;
+  height: 500px;
+  border-radius: 15px;
+
+  /* 定位到中心 */
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  /* 毛玻璃 */
+  backdrop-filter: blur(10px); /* 应用模糊效果 */
+  background-color: rgba(255, 255, 255, 0.5); /* 半透明的白色背景 */
 }