From eb160731da1ad46571a2416e300bc747bb741dbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Wed, 20 Jul 2022 18:26:38 +0800
Subject: [PATCH] feat: login page compatible mobile

---
 src/components/common/AppFooter.vue | 10 ++++++++++
 src/views/login/index.vue           | 24 +++++++++++-------------
 2 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 src/components/common/AppFooter.vue

diff --git a/src/components/common/AppFooter.vue b/src/components/common/AppFooter.vue
new file mode 100644
index 0000000..55c21a6
--- /dev/null
+++ b/src/components/common/AppFooter.vue
@@ -0,0 +1,10 @@
+<template>
+  <footer text-16 h-60 f-c-c flex-col color="#6a6a6a">
+    <p>Copyright © 2022 <span hover:color-primary cursor-pointer>大脸怪</span></p>
+    <p>
+      <a href="http://beian.miit.gov.cn/" hover="decoration-underline color-primary">赣ICP备2020015008号-1</a>
+    </p>
+  </footer>
+</template>
+
+<script setup></script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b972aeb..80140a4 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,16 +1,13 @@
 <template>
-  <div class="login-bg" f-c-c h-full>
-    <div class="login-wrapper" flex w-full max-w-1020>
-      <div p-40 border-r border-gray-200>
-        <img src="@/assets/images/login_banner.png" height="380" alt="login_banner" />
+  <div class="login-bg cur-scroll" h-full flex-col overflow-auto>
+    <div class="login-wrapper" m-auto p-15 f-c-c min-w-345 rounded-10>
+      <div w-380 hidden md:block px-20 py-35>
+        <img src="@/assets/images/login_banner.png" w-full alt="login_banner" />
       </div>
 
-      <div w-full f-c-c flex-col>
-        <h5 f-c-c w-full p-15 text-24 font-normal color="#6a6a6a">
-          <icon-custom-logo mr30 text-50 />
-          {{ title }}
-        </h5>
-        <div mt-30 w-full max-w-360>
+      <div w-320 flex-col px-20 py-35>
+        <h5 f-c-c text-24 font-normal color="#6a6a6a"><icon-custom-logo mr-30 text-50 />{{ title }}</h5>
+        <div mt-30>
           <n-input
             v-model:value="loginInfo.name"
             autofocus
@@ -20,7 +17,7 @@
           >
           </n-input>
         </div>
-        <div mt-30 w-full max-w-360>
+        <div mt-30>
           <n-input
             v-model:value="loginInfo.password"
             class="text-16 items-center h-50 pl-10"
@@ -32,15 +29,16 @@
           />
         </div>
 
-        <div mt-20 w-full max-w-360>
+        <div mt-20>
           <n-checkbox :checked="isRemember" label="记住我" :on-update:checked="(val) => (isRemember = val)" />
         </div>
 
-        <div mt-20 w-full max-w-360>
+        <div mt-20>
           <n-button w-full h-50 rounded-5 text-16 type="primary" :loading="loging" @click="handleLogin">登录</n-button>
         </div>
       </div>
     </div>
+    <AppFooter />
   </div>
 </template>