Update login layout

layouts/main.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="common-layout">
+		<el-container>
+			<el-header>
+				<Header />
+			</el-header>
+			<el-main>
+				<div class="flex flex-col items-center justify-center">
+					<slot />
+				</div>
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<style scoped>
+.el-header {
+	--el-header-padding: 0;
+}
+</style>

pages/login/index.vue

@@ -1,7 +1,5 @@
 <template>
-	<App>
-		<Header />
-		<el-card>
+	<el-card class="w-fit">
 		<div
 			class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
 			<div class="flex w-full flex-col gap-2">
@@ -41,12 +39,12 @@
 			</button>
 		</div>
 	</el-card>
-	</App>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
 	middleware: ['auth'],
+	layout: 'main',
 })
 
 const credential = reactive({