mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
💄 调整搜索浮窗样式&帖子卡片样式
This commit is contained in:
@@ -325,6 +325,7 @@ async function toForum(forum: TGApp.Plugins.Mys.News.RenderForum): Promise<void>
|
||||
backdrop-filter: blur(20px);
|
||||
background: var(--common-shadow-2);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
box-shadow: 0 0 10px var(--tgc-dark-1);
|
||||
color: var(--tgc-white-1);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -8,10 +8,14 @@
|
||||
加载更多({{ results.length }})
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="tops-divider" />
|
||||
<div class="tops-list">
|
||||
<div v-for="item in results" :key="item.post.post_id">
|
||||
<TPostCard :model-value="item" />
|
||||
</div>
|
||||
<TPostCard
|
||||
class="tops-item"
|
||||
:model-value="item"
|
||||
v-for="item in results"
|
||||
:key="item.post.post_id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TOverlay>
|
||||
@@ -113,13 +117,24 @@ async function searchPosts(): Promise<void> {
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.tops-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--box-bg-1);
|
||||
row-gap: 8px;
|
||||
}
|
||||
|
||||
.tops-top {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
@@ -130,25 +145,38 @@ async function searchPosts(): Promise<void> {
|
||||
}
|
||||
|
||||
.tops-act {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid var(--common-shadow-2);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tops-divider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--common-shadow-2);
|
||||
}
|
||||
|
||||
.tops-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
max-height: 400px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
padding-right: 10px;
|
||||
padding-right: 8px;
|
||||
padding-bottom: 8px;
|
||||
overflow-y: auto;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.tops-item {
|
||||
height: fit-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tops-btn {
|
||||
width: fit-content;
|
||||
background: var(--tgc-btn-1);
|
||||
|
||||
Reference in New Issue
Block a user