jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-10 04:37:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: homepage layout

Browse Source
This commit is contained in:
tim
2025-07-06 11:22:50 +08:00
parent 5bcabfd0f6
commit 75d7fb174e
1 changed files with 23 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
open-isle-cli/src/views/HomePageView.vue
View File

@@ -20,30 +20,30 @@
<div class="article-container"> <div class="article-container">
<div class="header-container"> <div class="header-container">
<div class="header-item main"> <div class="header-item main-item">
话题 <div class="header-item-text">话题</div>
</div> </div>
<div class="header-item avatars"> <div class="header-item avatars">
参与人员 <div class="header-item-text">参与人员</div>
</div> </div>
<div class="header-item comments"> <div class="header-item">
回复 <div class="header-item-text">回复</div>
</div> </div>
<div class="header-item views"> <div class="header-item">
浏览 <div class="header-item-text">浏览</div>
</div> </div>
<div class="header-item activity"> <div class="header-item">
活动 <div class="header-item-text">活动</div>
</div> </div>
</div> </div>
<div class="article-item" v-for="article in articles" :key="article.id"> <div class="article-item" v-for="article in articles" :key="article.id">
<div class="article-main-container"> <div class="article-main-container">
<router-link class="article-item-title" :to="`/posts/${article.id}`"> <router-link class="article-item-title main-item" :to="`/posts/${article.id}`">
{{ article.title }} {{ article.title }}
</router-link> </router-link>
<div class="article-item-description">{{ sanitizeDescription(article.description) }}</div> <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
<div class="article-info-container"> <div class="article-info-container main-item">
<div class="article-info-item"> <div class="article-info-item">
<i class="fas fa-user"></i> <i class="fas fa-user"></i>
<div class="article-info-item-text">{{ article.category }}</div> <div class="article-info-item-text">{{ article.category }}</div>
@@ -199,10 +199,10 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
overflow-y: auto; overflow-y: auto;
/* width variables shared between header and article rows */ /* width variables shared between header and article rows */
--main-width: 60%; --main-width: 60%;
--avatars-width: 150px; --avatars-width: 20%;
--comments-width: 80px; --comments-width: 5%;
--views-width: 80px; --views-width: 5%;
--activity-width: 120px; --activity-width: 10%;
} }
.search-container { .search-container {
@@ -283,6 +283,9 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
grid-template-columns: var(--main-width) var(--avatars-width) var(--comments-width) var(--views-width) var(--activity-width); grid-template-columns: var(--main-width) var(--avatars-width) var(--comments-width) var(--views-width) var(--activity-width);
align-items: center; align-items: center;
width: 100%; width: 100%;
color: gray;
border-bottom: 1px solid lightgray;
padding-bottom: 10px;
} }
.article-item { .article-item {
@@ -293,30 +296,12 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
border-bottom: 1px solid lightgray; border-bottom: 1px solid lightgray;
} }
.header-item { .header-item.avatars {
}
.header-item.main {
margin-left: 20px; margin-left: 20px;
} }
.header-item.main, .main-item {
.article-main-container, padding-left: 20px;
.header-item.avatars,
.article-member-avatars-container,
.header-item.comments,
.article-comments,
.header-item.views,
.article-views,
.header-item.activity,
.article-time {
width: 100%;
}
.article-main-container {
margin-left: 20px;
padding: 10px 0;
} }
.article-item-title { .article-item-title {
@@ -374,6 +359,7 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 3px; gap: 3px;
margin-left: 20px;
} }
.article-member-avatar-item { .article-member-avatar-item {
@@ -388,33 +374,4 @@ L 站的愿景是成为新的**理想型社区**，让每一个一身疲惫的
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.article-comments {
margin-left: 20px;
}
.article-views {
margin-left: 20px;
}
.article-time {
margin-left: 20px;
margin-right: 20px;
}
.header-item.avatars {
}
.header-item.comments {
margin-left: 20px;
}
.header-item.views {
margin-left: 20px;
}
.header-item.activity {
margin-left: 20px;
margin-right: 20px;
}
</style> </style>