mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-10 07:07:18 +00:00
添加友链功能,加载 YAML 文件,优化样式和交互效果,更新依赖
This commit is contained in:
@ -1,13 +1,180 @@
|
||||
<template>
|
||||
<div class="about-container">
|
||||
<el-main>
|
||||
<p>Links</p>
|
||||
</el-main>
|
||||
<div class="friend-links">
|
||||
<!-- 友链列表 -->
|
||||
<el-card
|
||||
v-for="(category, categoryIndex) in friendLinks"
|
||||
:key="categoryIndex"
|
||||
class="category-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="category-header">{{ category.category }}</div>
|
||||
</template>
|
||||
<div class="links-container">
|
||||
<el-card
|
||||
v-for="(link, linkIndex) in category.links"
|
||||
:key="linkIndex"
|
||||
class="link-card"
|
||||
@mouseenter="hoverEffect(`${categoryIndex}-${linkIndex}`)"
|
||||
@mouseleave="resetEffect"
|
||||
:style="cardStyle(`${categoryIndex}-${linkIndex}`)"
|
||||
>
|
||||
<div class="link-content">
|
||||
<el-avatar :src="link.avatar" class="link-avatar" />
|
||||
<div class="link-info">
|
||||
<div class="link-title">{{ link.title }}</div>
|
||||
<div class="link-description">{{ link.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- <el-card class="add-link-card">
|
||||
<div class="add-link-header">添加友链</div>
|
||||
<div class="add-link-content">
|
||||
<p>请按照以下格式提交您的友链信息:</p>
|
||||
<pre>
|
||||
avatar: "您的头像链接"
|
||||
title: "您的博客标题"
|
||||
description: "您的博客描述"</pre
|
||||
>
|
||||
<p>
|
||||
并发送至:<a href="mailto:links@kisechan.space"
|
||||
>links@kisechan.space</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</el-card> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<script>
|
||||
import yaml from "js-yaml";
|
||||
import { ref } from "vue";
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
export default {
|
||||
name: "FriendLinks",
|
||||
setup() {
|
||||
const friendLinks = ref([]);
|
||||
const hoveredCardId = ref(null);
|
||||
|
||||
// 加载 YAML 文件
|
||||
fetch("/links.yml")
|
||||
.then((response) => response.text())
|
||||
.then((text) => {
|
||||
friendLinks.value = yaml.load(text);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to load YAML file:", error);
|
||||
});
|
||||
|
||||
const hoverEffect = (cardId) => {
|
||||
hoveredCardId.value = cardId;
|
||||
};
|
||||
|
||||
const resetEffect = () => {
|
||||
hoveredCardId.value = null;
|
||||
};
|
||||
|
||||
const cardStyle = (cardId) => {
|
||||
return {
|
||||
transform: hoveredCardId.value === cardId ? "scale(1.05)" : "scale(1)",
|
||||
transition: "transform 0.3s ease",
|
||||
};
|
||||
};
|
||||
|
||||
return {
|
||||
friendLinks,
|
||||
hoverEffect,
|
||||
resetEffect,
|
||||
cardStyle,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.friend-links {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.add-link-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.add-link-header {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.add-link-content {
|
||||
font-size: 1em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.add-link-content pre {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.add-link-content a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.add-link-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.links-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.link-card {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.link-card:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.link-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.link-avatar {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.link-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.link-title {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.link-description {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user