From 4273682d51601a503cb03a83bcc5b2e7545e1745 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Fri, 17 Dec 2021 14:19:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8A=BD=E7=A6=BB=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Footer/index.ts  |  3 +++
 src/layout/components/Footer/index.vue | 23 +++++++++++++++++++++++
 src/styles/common/var.scss             |  2 ++
 src/views/login/index.vue              | 12 +++---------
 4 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 src/layout/components/Footer/index.ts
 create mode 100644 src/layout/components/Footer/index.vue

diff --git a/src/layout/components/Footer/index.ts b/src/layout/components/Footer/index.ts
new file mode 100644
index 00000000..6ce298b4
--- /dev/null
+++ b/src/layout/components/Footer/index.ts
@@ -0,0 +1,3 @@
+import Footer from './index.vue'
+
+export { Footer }
\ No newline at end of file
diff --git a/src/layout/components/Footer/index.vue b/src/layout/components/Footer/index.vue
new file mode 100644
index 00000000..0feb901e
--- /dev/null
+++ b/src/layout/components/Footer/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="go-footer">
+    <slot>
+      <n-a>{{ $t('global.doc_addr') }}: </n-a>
+      <n-a italic href="http://www.mtruning.club/">
+        http://www.mtruning.club/
+      </n-a>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(footer) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 0 40px;
+  height: $--footer-height;
+}
+</style>
diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss
index e5a37c31..7daacdbd 100644
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@@ -30,6 +30,8 @@ $--color-dark-border: #333335;
 $--max-width: 1920px;
 // 顶部距离
 $--header-height: 60px;
+// 底部距离
+$--footer-height: 50px;
 // 模糊
 $--filter-blur-base: blur(20px);
 // 毛玻璃
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index e10600ad..8c8377d3 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -105,10 +105,7 @@
     </div>
 
     <div class="go-login-box-footer">
-      <n-a>{{ $t('global.doc_addr') }}: </n-a>
-      <n-a italic href="http://www.mtruning.club/">
-        http://www.mtruning.club/
-      </n-a>
+      <Footer />
     </div>
   </div>
 </template>
@@ -126,6 +123,7 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { ThemeSelect } from '@/components/ThemeSelect'
 import { LangSelect } from '@/components/LangSelect'
 import { Header } from '@/layout/components/Header'
+import { Footer } from '@/layout/components/Footer'
 import { PageEnum } from '@/enums/pageEnum'
 import {
   PersonOutline as PersonOutlineIcon,
@@ -292,12 +290,8 @@ $carousel-image-height: 60vh;
   &-footer {
     z-index: 2;
     position: fixed;
-    bottom: 0;
     width: 100%;
-    height: $footer-height;
-    text-align: center;
-    line-height: $footer-height;
-    color: $--color-text-2;
+    bottom: 0;
   }
 
   &-bg {