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

优化博客文章展示，替换图标为 Font Awesome，添加“前往博客”提示，调整样式和交互效果

Browse Source
This commit is contained in:
Kisechan
2025-03-06 15:40:09 +08:00
parent bc2d6c59bb
commit 223aa5998b
1 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/HomeView.vue
View File

@ -23,27 +23,18 @@
<el-col v-for="item in feedItems" :key="item.link" :span="24"> <el-col v-for="item in feedItems" :key="item.link" :span="24">
<el-card class="blog-card" shadow="hover"> <el-card class="blog-card" shadow="hover">
<div class="blog-header"> <div class="blog-header">
<font-awesome-icon <i class="fa-solid fa-newspaper"></i>
:icon="['fas', 'file-lines']"
class="icon"
/>
<a :href="item.link" target="_blank" class="blog-title">{{ <a :href="item.link" target="_blank" class="blog-title">{{
item.title item.title
}}</a> }}</a>
</div> </div>
<div class="blog-meta"> <div class="blog-meta">
<i class="fa-solid fa-clock-rotate-left"></i>
<span class="update-time"> <span class="update-time">
<font-awesome-icon
:icon="['fas', 'clock']"
class="icon"
/>
{{ formatDate(item.pubDate) }} {{ formatDate(item.pubDate) }}
</span> </span>
<span class="tags"> <span class="tags">
<font-awesome-icon <i class="fa-solid fa-tags"></i>
:icon="['fas', 'tags']"
class="icon"
/>
<el-tag <el-tag
v-for="(tag, index) in item.tags" v-for="(tag, index) in item.tags"
:key="index" :key="index"
@ -60,12 +51,22 @@
</el-row> </el-row>
</div> </div>
<div class="read-more-container"> <div class="read-more-container">
<el-card class="read-more-card" shadow="hover" @click="goToBlog"> <el-tooltip
<div class="read-more-content"> content="前往博客查看更多文章"
<span>Read More</span> placement="top"
<i class="fa-brands fa-readme"></i> class="read-more-tooltip"
</div> >
</el-card> <el-card
class="read-more-card"
shadow="hover"
@click="goToBlog"
>
<div class="read-more-content">
<span>Read More</span>
<i class="fa-brands fa-readme"></i>
</div>
</el-card>
</el-tooltip>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@ -313,28 +314,32 @@ onUnmounted(() => {
.read-more-container { .read-more-container {
display: flex; display: flex;
justify-content: flex-end; /* 靠右排版 */ justify-content: flex-end; /* 靠右排版 */
margin-top: 10px; /* 调整上边距 */
} }
.read-more-card { .read-more-card {
display: flex; /* 使用 flexbox */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
cursor: pointer; cursor: pointer;
width: 150px; /* 调整宽度 */ width: 135px; /* 调整宽度 */
padding: 10px; /* 调整内边距 */ height: 35px; /* 调整高度 */
padding: 6px; /* 调整内边距 */
text-align: center; text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.read-more-card:hover { .read-more-card:hover,
.read-more-tooltip {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
.read-more-content { .read-more-content {
display: flex; display: flex; /* 使用 flexbox */
align-items: center; align-items: center; /* 垂直居中 */
justify-content: center; justify-content: center; /* 水平居中 */
gap: 10px; gap: 2px;
font-size: 1em; /* 调整字体大小 */ font-size: 0.85em; /* 调整字体大小 */
color: #409eff; color: #409eff;
} }