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

about debug: 因为没有放avatar.jpg所以出了bug

Browse Source
This commit is contained in:
Kisechan
2025-03-04 11:11:24 +08:00
parent 5350defdc3
commit 90c0c9002a
6 changed files with 86 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/App.vue
View File

@ -2,20 +2,33 @@
</script>
<template>
<router-view />
<div>
<!-- 全局导航栏 -->
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</nav>
<!-- 路由匹配的组件会渲染在这里 -->
<router-view />
</div>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
/* 全局样式 */
nav {
padding: 10px;
background-color: #f0f0f0;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
nav a {
margin-right: 10px;
text-decoration: none;
color: #333;
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
nav a.router-link-active {
color: #42b983;
font-weight: bold;
}
</style>
</style>

79
src/components/AppFooter.vue
View File

@ -1,51 +1,30 @@
<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>
</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>
.app-footer {
background: #f5f7fa;
text-align: center;
padding: 2rem;
margin-top: auto;
}
.social-links {
margin-bottom: 1rem;
}
.social-links a {
margin: 0 10px;
color: #606266;
transition: color 0.3s;
}
.social-links a:hover {
color: #409eff;
}
.copyright p {
margin: 5px 0;
font-size: 0.9rem;
color: #909399;
}
</style>
<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>
</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>

44
src/components/NavBar.vue
View File

@ -1,30 +1,16 @@
<template>
<el-menu
mode="horizontal"
:router="true"
class="nav-menu"
:default-active="$route.path"
>
<el-menu-item index="/">主页</el-menu-item>
<el-menu-item>
<a href="https://blog.kisechan.space/" target="_blank">博客</a>
</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
</el-menu>
</template>
<style scoped>
.nav-menu {
border-bottom: none !important;
height: 60px;
}
.el-menu-item {
font-size: 16px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<el-menu
mode="horizontal"
:router="true"
class="nav-menu"
:default-active="$route.path"
>
<el-menu-item index="/">主页</el-menu-item>
<el-menu-item>
<a href="https://blog.kisechan.space/" target="_blank">博客</a>
</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
</el-menu>
</template>
<style scoped></style>

5
src/router/index.js
View File

@ -1,16 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
component: () => import('@/views/HomeView.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
component: () => import('@/views/AboutView.vue')
}
]

33
src/views/AboutView.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="about-container">
<NavBar />
<!-- <NavBar /> -->
<el-main>
<el-row :gutter="20">
<!-- 左侧正文 -->
<el-col :span="16">
<el-card>
<h2>关于我</h2>
<p>这里是正文内容...</p>
<h2>ABOUT</h2>
<p>passage...</p>
</el-card>
</el-col>
<!-- 右侧作者信息 -->
<el-col :span="8">
<div class="author-info">
<el-avatar :size="150" :src="require('@/assets/avatar.jpg')" />
<h3>作者姓名</h3>
<p>这里是作者简介...</p>
<!-- <el-avatar :size="150" :src="require('@/assets/avatar.jpg')" /> -->
<h3>name</h3>
<p>info...</p>
</div>
</el-col>
</el-row>
@ -26,20 +26,9 @@
</template>
<style scoped>
.about-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.author-info {
text-align: center;
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
}
.el-card {
margin-bottom: 20px;
}
</style>
<script setup>
import NavBar from '@/components/NavBar.vue'
import AppFooter from '@/components/AppFooter.vue'
</script>

22
src/views/HomeView.vue
View File

@ -1,9 +1,10 @@
<template>
<div class="home-container">
<NavBar />
<!-- <NavBar /> -->
<el-main>
<div class="content">
<h1>test</h1>
<h3>Make By Vue + Vite + Element Plus</h3>
<p>Building...</p>
</div>
</el-main>
@ -12,21 +13,8 @@
</template>
<script setup>
import NavBar from '@/components/NavBar.vue'
import AppFooter from '@/components/AppFooter.vue'
import NavBar from "@/components/NavBar.vue";
import AppFooter from "@/components/AppFooter.vue";
</script>
<style scoped>
.home-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
</style>
<style scoped></style>