mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
fonts
This commit is contained in:
30
src/App.vue
30
src/App.vue
@ -1,34 +1,14 @@
|
||||
<script setup>
|
||||
import NavBar from "./components/NavBar.vue";
|
||||
import AppFooter from "./components/AppFooter.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 全局导航栏 -->
|
||||
<nav>
|
||||
<router-link to="/">首页</router-link> |
|
||||
<router-link to="/about">关于</router-link>
|
||||
</nav>
|
||||
|
||||
<!-- 路由匹配的组件会渲染在这里 -->
|
||||
<NavBar />
|
||||
<router-view />
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 全局样式 */
|
||||
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>
|
||||
<style scoped></style>
|
||||
|
BIN
src/assets/fonts/LXGWWenKai-Bold.ttf
Normal file
BIN
src/assets/fonts/LXGWWenKai-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/LXGWWenKai-Light.ttf
Normal file
BIN
src/assets/fonts/LXGWWenKai-Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/LXGWWenKai-Regular.ttf
Normal file
BIN
src/assets/fonts/LXGWWenKai-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/LXGWWenKaiMono-Bold.ttf
Normal file
BIN
src/assets/fonts/LXGWWenKaiMono-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/LXGWWenKaiMono-Light.ttf
Normal file
BIN
src/assets/fonts/LXGWWenKaiMono-Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/LXGWWenKaiMono-Regular.ttf
Normal file
BIN
src/assets/fonts/LXGWWenKaiMono-Regular.ttf
Normal file
Binary file not shown.
12
src/assets/styles/global.css
Normal file
12
src/assets/styles/global.css
Normal file
@ -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;
|
||||
}
|
@ -1,30 +1,24 @@
|
||||
<template>
|
||||
<el-footer class="app-footer">
|
||||
<div class="social-links">
|
||||
<a
|
||||
v-for="item in socialLinks"
|
||||
: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>
|
||||
<el-footer>
|
||||
<div class="footer-content">
|
||||
<p>© 2023 Kisechan</p>
|
||||
<p>还在做还在做还在做还在做</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>
|
@ -1,16 +1,22 @@
|
||||
<template>
|
||||
<el-menu
|
||||
mode="horizontal"
|
||||
:router="true"
|
||||
class="nav-menu"
|
||||
:default-active="$route.path"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="/">主页</el-menu-item>
|
||||
<el-menu-item>
|
||||
<a href="https://blog.kisechan.space/" target="_blank">博客</a>
|
||||
<el-menu-item index="/">首页</el-menu-item>
|
||||
<el-menu-item >
|
||||
<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>
|
@ -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)
|
||||
|
||||
|
@ -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>
|
@ -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>
|
||||
|
Reference in New Issue
Block a user