new fonts

This commit is contained in:
2025-03-04 21:29:51 +08:00
parent ebff70fea3
commit 166a6d8171
7 changed files with 99 additions and 5 deletions

9
package-lock.json generated
View File

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

View File

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

View File

@ -11,4 +11,20 @@ import AppFooter from "./components/AppFooter.vue";
</div> </div>
</template> </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>

View File

@ -1,12 +1,55 @@
/* 定义 LXGW WenKai 字体 */
@font-face { @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-weight: normal;
font-style: 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 { body {
font-family: "jx", sans-serif; font-family: 'LXGW WenKai', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* 设置代码或等宽文本的字体 */
code, pre, .monospace {
font-family: 'LXGW WenKai Mono', monospace;
}

View File

@ -3,6 +3,17 @@
<div class="footer-content"> <div class="footer-content">
<p>© 2023 Kisechan</p> <p>© 2023 Kisechan</p>
<p>还在做还在做还在做还在做</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> </div>
</el-footer> </el-footer>
</template> </template>
@ -21,4 +32,18 @@
max-width: 1200px; max-width: 1200px;
margin: 0 auto; 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> </style>

View File

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

View File

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