From ac8274f791063de11197f624ad7c68b357bf96cf Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 14 Dec 2021 20:32:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/naive.ts       |   6 +-
 src/styles/common/var.scss |   6 ++
 src/views/login/index.vue  | 166 +++++++++++++++++++++----------------
 3 files changed, 104 insertions(+), 74 deletions(-)

diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts
index 75d4e3ef..9cb6be04 100644
--- a/src/plugins/naive.ts
+++ b/src/plugins/naive.ts
@@ -66,7 +66,8 @@ import {
   NTimePicker,
   NBackTop,
   NSkeleton,
-  NCarousel
+  NCarousel,
+  NCollapseTransition
 } from 'naive-ui';
 
 const naive = create({
@@ -136,7 +137,8 @@ const naive = create({
     NTimePicker,
     NBackTop,
     NSkeleton,
-    NCarousel
+    NCarousel,
+    NCollapseTransition
   ],
 });
 
diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss
index 5979a6f3..1083cae4 100644
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@@ -4,6 +4,12 @@ $--color-red: #fc625d;
 $--color-warn: #fcbc40;
 $--color-success: #34c749;
 
+// 文字
+$--color-text-1: hsla(0, 0%, 100%, 0.9);
+$--color-text-2: hsla(0, 0%, 100%, 0.7);
+$--color-text-3: hsla(0, 0%, 100%, 0.5);
+$--color-text-4: hsla(0, 0%, 100%, 0.3);
+
 // 顶部距离
 $--header-height: 60px;
 // 模糊
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ec40ef96..c7861d27 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -15,78 +15,82 @@
       </div>
       <div class="login-account">
         <div class="login-account-container">
-          <n-card title="登录">
-            <div class="login-account-top">
-              <div class="login-account-top-logo">
-                <img src="~@/assets/images/logo.png" alt="" />
+          <n-collapse-transition :appear="true" :show="show">
+            <n-card title="登录">
+              <div class="login-account-top">
+                <img
+                  class="login-account-top-logo"
+                  src="~@/assets/images/logo.png"
+                  alt="logo"
+                />
               </div>
-              <div class="login-account-top-desc">
-                欢迎使用 GoView !
-              </div>
-            </div>
-            <n-form
-              ref="formRef"
-              label-placement="left"
-              size="large"
-              :model="formInline"
-              :rules="rules"
-            >
-              <n-form-item path="username">
-                <n-input
-                  v-model:value="formInline.username"
-                  placeholder="请输入用户名"
-                >
-                  <template #prefix>
-                    <n-icon size="18">
-                      <PersonOutline />
-                    </n-icon>
-                  </template>
-                </n-input>
-              </n-form-item>
-              <n-form-item path="password">
-                <n-input
-                  v-model:value="formInline.password"
-                  type="password"
-                  show-password-toggle
-                  placeholder="请输入密码"
-                >
-                  <template #prefix>
-                    <n-icon size="18">
-                      <LockClosedOutline />
-                    </n-icon>
-                  </template>
-                </n-input>
-              </n-form-item>
-              <n-form-item>
-                <div class="flex justify-between">
-                  <div class="flex-initial">
-                    <n-checkbox v-model:checked="autoLogin">
-                      自动登录
-                    </n-checkbox>
+              <n-form
+                ref="formRef"
+                label-placement="left"
+                size="large"
+                :model="formInline"
+                :rules="rules"
+              >
+                <n-form-item path="username">
+                  <n-input
+                    v-model:value="formInline.username"
+                    placeholder="请输入用户名"
+                  >
+                    <template #prefix>
+                      <n-icon size="18">
+                        <PersonOutline />
+                      </n-icon>
+                    </template>
+                  </n-input>
+                </n-form-item>
+                <n-form-item path="password">
+                  <n-input
+                    v-model:value="formInline.password"
+                    type="password"
+                    show-password-toggle
+                    placeholder="请输入密码"
+                  >
+                    <template #prefix>
+                      <n-icon size="18">
+                        <LockClosedOutline />
+                      </n-icon>
+                    </template>
+                  </n-input>
+                </n-form-item>
+                <n-form-item>
+                  <div class="flex justify-between">
+                    <div class="flex-initial">
+                      <n-checkbox v-model:checked="autoLogin">
+                        自动登录
+                      </n-checkbox>
+                    </div>
                   </div>
-                </div>
-              </n-form-item>
-              <n-form-item>
-                <n-button
-                  type="primary"
-                  @click="handleSubmit"
-                  size="large"
-                  :loading="loading"
-                  block
-                >
-                  登录
-                </n-button>
-              </n-form-item>
-            </n-form>
-          </n-card>
+                </n-form-item>
+                <n-form-item>
+                  <n-button
+                    type="primary"
+                    @click="handleSubmit"
+                    size="large"
+                    :loading="loading"
+                    block
+                  >
+                    登录
+                  </n-button>
+                </n-form-item>
+              </n-form>
+            </n-card>
+          </n-collapse-transition>
         </div>
       </div>
     </div>
+    <div class="go-login-box-footer">
+      文档地址: http://www.mtruning.club/
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
@@ -103,6 +107,13 @@ const formRef = ref()
 const message = useMessage()
 const loading = ref(false)
 const autoLogin = ref(true)
+const show = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    show.value = true
+  }, 100)
+})
 
 const formInline = reactive({
   username: 'admin',
@@ -137,14 +148,22 @@ const handleSubmit = (e: Event) => {
 
 <style lang="scss" scoped>
 $width: 450px;
+$account-img-height: 270px;
+$footer-height: 50px;
+$account-height: calc(100vh - $footer-height);
+
+* {
+  box-sizing: border-box;
+}
 @include go(login-box) {
   height: 100vh;
   overflow: hidden;
   background-image: linear-gradient(120deg, #17171a 0%, #232324 100%);
   &-header {
     margin: 0px;
-    margin-top: $--header-height;
+    padding-top: $--header-height;
   }
+
   @include go(login) {
     display: flex;
     justify-content: space-evenly;
@@ -160,8 +179,7 @@ $width: 450px;
       z-index: 1;
       display: flex;
       flex-direction: column;
-      height: 100vh;
-      overflow: auto;
+      height: $account-height;
       &-container {
         flex: 1;
         padding: 32px 0;
@@ -171,17 +189,21 @@ $width: 450px;
       }
 
       &-top {
-        padding: 32px 0;
+        padding-top: 10px;
         text-align: center;
-
-        &-desc {
-          font-size: 16px;
-          color: #fff;
-        }
+        height: $account-img-height;
+        margin-bottom: 20px;
       }
     }
   }
 
+  &-footer {
+    text-align: center;
+    height: $footer-height;
+    line-height: $footer-height;
+    color: $--color-text-2;
+  }
+
   @media (min-width: 768px) {
     .login-account {
       background-repeat: no-repeat;