Kisechan/Mainpage
1
0
Fork 0
mirror of https://github.com/Kisechan/Mainpage.git synced 2025-07-10 07:07:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加链接视图并更新路由，移除关于视图，集成 GitHub 贡献图

Browse Source
This commit is contained in:
Kisechan
2025-03-05 10:12:08 +08:00
parent d57b407df8
commit c360e53fed
9 changed files with 212 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/NavBar.vue
View File

@ -1,8 +1,16 @@
<template>
<el-menu mode="horizontal" router>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item @click="goToBlog">博客</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
<el-menu mode="horizontal" router class="custom-menu">
<!-- 左侧网站名 -->
<div class="website-name">
<span style="font-weight: bold">Kisechan </span>
</div>
<!-- 右侧导航选项 -->
<div class="menu-items">
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item @click="goToBlog">博客</el-menu-item>
<el-menu-item index="/links">链接</el-menu-item>
</div>
</el-menu>
</template>
@ -13,8 +21,27 @@ const goToBlog = () => {
</script>
<style scoped>
.el-menu {
.custom-menu {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.menu-items {
display: flex;
justify-content: center;
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
margin-right: auto;
}
.el-menu-item {
font-size: 16px;
}
.website-name {
font-size: 1.5em;
}
</style>