new fonts

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "element-plus": "^2.9.5",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -500,6 +501,14 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "element-plus": "^2.9.5",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

src/App.vue

@@ -11,4 +11,20 @@ import AppFooter from "./components/AppFooter.vue";
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1; /* 占据剩余空间 */
+}
+</style>

src/assets/styles/global.css

@@ -1,12 +1,55 @@
+/* 定义 LXGW WenKai 字体 */
 @font-face {
-  font-family: "jx";
+  font-family: 'LXGW WenKai';
-  src: url("@/assets/fonts/jx.ttf") format("truetype");
+  src: url('@/assets/fonts/LXGWWenKai-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'LXGW WenKai';
+  src: url('@/assets/fonts/LXGWWenKai-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'LXGW WenKai';
+  src: url('@/assets/fonts/LXGWWenKai-Light.ttf') format('truetype');
+  font-weight: 300; /* Light 通常对应 font-weight: 300 */
+  font-style: normal;
+}
+
+/* 定义 LXGW WenKai Mono 字体 */
+@font-face {
+  font-family: 'LXGW WenKai Mono';
+  src: url('@/assets/fonts/LXGWWenKaiMono-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'LXGW WenKai Mono';
+  src: url('@/assets/fonts/LXGWWenKaiMono-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'LXGW WenKai Mono';
+  src: url('@/assets/fonts/LXGWWenKaiMono-Light.ttf') format('truetype');
+  font-weight: 300; /* Light 通常对应 font-weight: 300 */
+  font-style: normal;
+}
+
+/* 设置全局字体 */
 body {
-  font-family: "jx", sans-serif;
+  font-family: 'LXGW WenKai', sans-serif;
   margin: 0;
   padding: 0;
 }
+
+/* 设置代码或等宽文本的字体 */
+code, pre, .monospace {
+  font-family: 'LXGW WenKai Mono', monospace;
+}

src/components/AppFooter.vue

@@ -3,6 +3,17 @@
     <div class="footer-content">
       <p>© 2023 Kisechan</p>
       <p>还在做还在做还在做还在做</p>
+      <div class="social-icons">
+        <a href="https://twitter.com" target="_blank">
+          <i class="fab fa-twitter"></i>
+        </a>
+        <a href="https://facebook.com" target="_blank">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://github.com" target="_blank">
+          <i class="fab fa-github"></i>
+        </a>
+      </div>
     </div>
   </el-footer>
 </template>
@@ -21,4 +32,18 @@
   max-width: 1200px;
   margin: 0 auto;
 }
+
+.social-icons {
+  margin-top: 10px;
+}
+
+.social-icons a {
+  color: #b9b7b7;
+  margin: 0 10px;
+  font-size: 24px;
+}
+
+.social-icons a:hover {
+  color: #dddade;
+}
 </style>

src/main.js

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

src/views/AboutView.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="about-container">
-    <!-- <NavBar /> -->
     <el-main>
       <el-row :gutter="20">
         <!-- 左侧正文 -->