fonts

src/App.vue

@@ -1,34 +1,14 @@
 <script setup>
+import NavBar from "./components/NavBar.vue";
+import AppFooter from "./components/AppFooter.vue";
 </script>
 
 <template>
   <div>
-    <!-- 全局导航栏 -->
+    <NavBar />
-    <nav>
-      <router-link to="/">首页</router-link> |
-      <router-link to="/about">关于</router-link>
-    </nav>
-
-    <!-- 路由匹配的组件会渲染在这里 -->
     <router-view />
+    <AppFooter />
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-/* 全局样式 */
-nav {
-  padding: 10px;
-  background-color: #f0f0f0;
-}
-
-nav a {
-  margin-right: 10px;
-  text-decoration: none;
-  color: #333;
-}
-
-nav a.router-link-active {
-  color: #42b983;
-  font-weight: bold;
-}
-</style>

src/assets/styles/global.css

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: "jx";
+  src: url("@/assets/fonts/jx.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  font-family: "jx", sans-serif;
+  margin: 0;
+  padding: 0;
+}

src/components/AppFooter.vue

@@ -1,30 +1,24 @@
 <template>
-  <el-footer class="app-footer">
+  <el-footer>
-    <div class="social-links">
+    <div class="footer-content">
-      <a
+      <p>© 2023 Kisechan</p>
-        v-for="item in socialLinks"
+      <p>还在做还在做还在做还在做</p>
-        :key="item.name"
-        :href="item.url"
-        target="_blank"
-      >
-        <el-icon :size="24">
-          <component :is="item.icon" />
-        </el-icon>
-        <span class="link-name">{{ item.name }}</span>
-      </a>
-    </div>
-
-    <div class="copyright">
-      <p>2024 - 2025 Kisechan</p>
     </div>
   </el-footer>
 </template>
 
 <script setup>
-const socialLinks = [
+// 可以在这里定义一些逻辑
-  { name: "github", icon: "Github", url: "https://github.com" },
-  { name: "email", icon: "Message", url: "mailto:your@email.com" },
-];
 </script>
 
-<style scoped></style>
+<style scoped>
+.el-footer {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+</style>

src/components/NavBar.vue

@@ -1,16 +1,22 @@
 <template>
   <el-menu
     mode="horizontal"
-    :router="true"
+    router
-    class="nav-menu"
-    :default-active="$route.path"
   >
-    <el-menu-item index="/">主页</el-menu-item>
+    <el-menu-item index="/">首页</el-menu-item>
-    <el-menu-item>
+    <el-menu-item >
-      <a href="https://blog.kisechan.space/" target="_blank">博客</a>
+      <a href="blog.kisechan.space" target="_blank">博客</a>
     </el-menu-item>
     <el-menu-item index="/about">关于</el-menu-item>
   </el-menu>
 </template>
 
-<style scoped></style>
+<script setup>
+</script>
+
+<style scoped>
+.el-menu {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import './assets/styles/global.css'
 
 const app = createApp(App)
 

src/views/AboutView.vue

@@ -21,7 +21,6 @@
         </el-col>
       </el-row>
     </el-main>
-    <AppFooter />
   </div>
 </template>
 
@@ -29,6 +28,4 @@
 </style>
 
 <script setup>
-import NavBar from '@/components/NavBar.vue'
-import AppFooter from '@/components/AppFooter.vue'
 </script>

src/views/HomeView.vue

@@ -8,13 +8,10 @@
         <p>Building...</p>
       </div>
     </el-main>
-    <AppFooter />
   </div>
 </template>
 
 <script setup>
-import NavBar from "@/components/NavBar.vue";
-import AppFooter from "@/components/AppFooter.vue";
 </script>
 
 <style scoped></style>