fix: 修改首页

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
   ],
 });
 

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;
 // 模糊

src/views/login/index.vue

@@ -15,14 +15,14 @@
       </div>
       <div class="login-account">
         <div class="login-account-container">
+          <n-collapse-transition :appear="true" :show="show">
             <n-card title="登录">
               <div class="login-account-top">
-              <div class="login-account-top-logo">
+                <img
-                <img src="~@/assets/images/logo.png" alt="" />
+                  class="login-account-top-logo"
-              </div>
+                  src="~@/assets/images/logo.png"
-              <div class="login-account-top-desc">
+                  alt="logo"
-                欢迎使用 GoView !
+                />
-              </div>
               </div>
               <n-form
                 ref="formRef"
@@ -79,14 +79,18 @@
                 </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;
+      height: $account-height;
-      overflow: auto;
       &-container {
         flex: 1;
         padding: 32px 0;
@@ -171,15 +189,19 @@ $width: 450px;
       }
 
       &-top {
-        padding: 32px 0;
+        padding-top: 10px;
         text-align: center;
+        height: $account-img-height;
+        margin-bottom: 20px;
+      }
+    }
+  }
 
-        &-desc {
+  &-footer {
-          font-size: 16px;
+    text-align: center;
-          color: #fff;
+    height: $footer-height;
-        }
+    line-height: $footer-height;
-      }
+    color: $--color-text-2;
-    }
   }
 
   @media (min-width: 768px) {