🐞 fix: 底部组件随屏幕高度变化

 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 17:16:14
+ * @LastEditTime: 2024-09-27 20:32:41
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="">
+  <div style=" display: flex; flex-direction: column; min-height: 100vh;">
     <hager-header></hager-header>
-    <router-view style="margin-top: 3rem;"></router-view>
+    <router-view style="margin-top: 3rem; flex-grow: 1;"></router-view>
     <hager-footer></hager-footer>
   </div>
 </template>
@@ -50,6 +50,9 @@ body {
   }
 }
 
+body {
+}
+
 .global-center {
   position: relative;
   top: 50%;

 <!--
  * @Date: 2024-09-26 13:42:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-27 19:34:39
+ * @LastEditTime: 2024-09-27 20:31:41
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @Description: 文件描述
 -->
@@ -115,6 +115,7 @@ export default {
 <style lang="less" scoped>
 .hager-footer {
   background-color: #414141;
+  margin-top: auto;
   .link-box {
     .link-title {
       font-size: 1.15rem;