LLLLLLLLLLLLLLLLL

app.vue

@@ -3,17 +3,20 @@
     <TopNav />
     <NuxtRouteAnnouncer />
     <NuxtPage />
+    <Footer />
   </div>
 </template>
 
 
 <script>
+import Footer from './components/Footer.vue';
 import TopNav from './components/TopNav.vue'
 
 export default {
   name: 'main',
   components: {
-    TopNav
+    TopNav,
+    Footer
   }
 }
 </script>

components/Footer.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class='footer'>
+        <span class="scroll"></span>
+        AutoInstall是开源的 <el-link href="https://github.com/jdnjk/AutoInstall" target="_blank">Github</el-link>
+        <br/>
+        <span class="copyright">Copyright © 2024 - 现在 jdnjk. All Rights Reserved.</span>
+    </div>
+  </template>
+  <style>
+    .el-divider{
+      background-color: rgb(84, 92, 100);
+    }
+  </style>
+  <style scoped>
+      .footer{
+          height: 250px;
+          text-align: center;
+          font-size: 16px;
+          padding: 0px 100px;
+          position: relative;
+      }
+      .footer{
+        cursor: pointer;
+      }
+      .copyright{
+        font-size: 12px;
+      }
+      .info{
+        font-size: 14px;
+        color: #72767b;
+        line-height: 25px;
+      }
+  </style>
+  <script>
+  export default {
+    name: 'Footer',
+    data () {
+      return {
+        drawer: false,
+        direction: 'btt'
+      }
+    },
+    methods: {
+      handleClose (done) {
+        done()
+      }
+    }
+  }
+  </script>

components/TopNav.vue

@@ -4,7 +4,7 @@
     <div class="header">
       <div class="logo">AutoInstall</div>
       <!-- 水平一级菜单 -->
-      <div style="float:left;">
+      <div style="float:center;">
         <el-menu 
           mode="horizontal"
           text-color="#000000"
@@ -62,21 +62,21 @@ export default {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  height: 70px;
+  height: 50px;
   font-size: 22px;
 }
 .header .logo {
   float: left;
-  margin-left: 60px;
-  margin-top: 17.5px;
+  margin-left: 30px;
+  margin-top: 9.5px;
   height: 29px;
   width: 160px;
   vertical-align: middle;
 }
 /* --------------- 水平一级菜单栏的样式--------------------- */
 .el-menu.el-menu--horizontal {
   border-bottom: none !important;
-  float: left;
+  float: center;
   margin-left: 50px;
   background: transparent;
 }
@@ -86,7 +86,7 @@ export default {
   font-weight: bold;
 }
 .el-menu--horizontal > .el-menu-item {
-  font-size: 16px;
-  margin: 0 15px;
+  font-size: 15px;
+  margin: 1 6px;
 }
 </style>

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "element-plus": "^2.8.0",
+    "element-plus": "^2.8.3",
     "nuxt": "^3.12.4",
     "vue": "latest"
   },

yarn.lock

@@ -2410,10 +2410,10 @@ electron-to-chromium@^1.5.4:
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.7.tgz#425d2a7f76ecfa564fdca1040d11fb1979851f3c"
   integrity sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==
 
-element-plus@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.0.tgz#122685f9f1e01784f511dd4858fe005677ad1b95"
-  integrity sha512-7ngapVlVlQAjocVqD4MUKvKXlBneT9DSDk2mmBOSLRFWNm/HLDT15ozmsvUBfy18sajnyUeSIHTtINE8gfrGMg==
+element-plus@^2.8.3:
+  version "2.8.3"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.3.tgz#8697027f8b4a4b39d445eba0b87d6935a1481fe0"
+  integrity sha512-BXQOyDf0s7JHyNEV8iaO+iaOzTZPsBXVKMzMI967vLCodUBDLrtiY5vglAn1YEebQcUOEUMhGcttTpIvEkcBjQ==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.3.1"