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

feat: add some buttons

Browse Source
This commit is contained in:
tim
2025-07-11 11:02:01 +08:00
parent 8d4d4e62ae
commit d8f420d0a6
1 changed files with 105 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
open-isle-cli/src/views/PostPageView.vue
View File

@@ -5,10 +5,36 @@
</div> </div>
<div v-else class="post-page-main-container" ref="mainContainer" @scroll="onScroll"> <div v-else class="post-page-main-container" ref="mainContainer" @scroll="onScroll">
<div class="article-title-container"> <div class="article-title-container">
<div class="article-title">{{ title }}</div> <div class="article-title-container-left">
<div class="article-info-container"> <div class="article-title">{{ title }}</div>
<ArticleCategory :category="category" /> <div class="article-info-container">
<ArticleTags :tags="tags" /> <ArticleCategory :category="category" />
<ArticleTags :tags="tags" />
</div>
</div>
<div class="article-title-container-right">
<div class="article-pending-button">
PENDING
</div>
<div class="article-block-button">
BLOCK
</div>
<div class="article-subscribe-button">
<i class="fas fa-user-plus"></i>
订阅文章
</div>
<div class="article-unsubscribe-button">
<i class="fas fa-user-minus"></i>
取消订阅
</div>
<div class="article-arrow-button">
<i class="fas fa-arrow-right"></i>
通过审核
</div>
<div class="article-reject-button">
<i class="fas fa-times"></i>
驳回
</div>
</div> </div>
</div> </div>
@@ -422,15 +448,90 @@ export default {
} }
.article-title-container { .article-title-container {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.article-title-container-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.article-title-container-right {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.article-subscribe-button {
background-color: var(--primary-color);
color: white;
padding: 5px 10px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
.article-subscribe-button:hover {
background-color: var(--primary-color-hover);
}
.article-unsubscribe-button {
background-color: var(--background-color);
color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 5px 10px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
.article-pending-button {
background-color: var(--background-color);
color: orange;
border: 1px solid orange;
padding: 5px 10px;
border-radius: 8px;
font-size: 14px;
}
.article-block-button {
background-color: var(--background-color);
color: red;
border: 1px solid red;
padding: 5px 10px;
border-radius: 8px;
font-size: 14px;
}
.article-title { .article-title {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
} }
.article-arrow-button {
background-color: green;
color: white;
border: 1px solid green;
padding: 5px 10px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
.article-reject-button {
background-color: red;
color: white;
border: 1px solid red;
padding: 5px 10px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
.article-info-container { .article-info-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;