src/views/auth/LoginView.vue

@@ -30,16 +30,18 @@ async function handleLogin() {
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
-    <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
-      <section class="border border-slate-200 bg-[linear-gradient(135deg,#f0fdfa_0%,#ffffff_48%,#eff6ff_100%)] p-8 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)]">
-        <p class="text-sm uppercase tracking-[0.26em] text-teal-700">Sky Log In</p>
-        <h1 class="mt-4 max-w-xl text-5xl font-black leading-[1.05] text-slate-900">
-          登录后继续记录
-          <span class="block text-teal-700">你眼中的每一朵云</span>
-        </h1>
-        <!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
-          在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
-        </p> -->
+    <div class="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
+      <section class="flex h-full flex-col justify-between border border-slate-200 bg-[linear-gradient(135deg,#f0fdfa_0%,#ffffff_48%,#eff6ff_100%)] p-8 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)]">
+        <div>
+          <p class="text-sm uppercase tracking-[0.26em] text-teal-700">Sky Log In</p>
+          <h1 class="mt-4 max-w-xl text-5xl font-black leading-[1.05] text-slate-900">
+            登录后继续记录
+            <span class="block text-teal-700">你眼中的每一朵云</span>
+          </h1>
+          <!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
+            在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
+          </p> -->
+        </div>
         <div class="mt-8 flex gap-4">
           <div class="border border-slate-200 bg-white px-4 py-3">
             <div class="text-xs uppercase tracking-[0.2em] text-slate-500">Collection</div>
@@ -54,7 +56,7 @@ async function handleLogin() {
         </div>
       </section>
 
-      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
         <div class="mb-8">
           <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Member Access</div>
           <h2 class="mt-3 text-3xl font-bold text-slate-900">登录 OpenCloud</h2>