Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-05-21 05:25:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 调整搜索浮窗样式&帖子卡片样式

Browse Source
This commit is contained in:
目棃
2025-02-28 16:50:57 +08:00
parent 3ac68c1fd9
commit aeca190f2c
2 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/app/t-postcard.vue
View File

@@ -325,6 +325,7 @@ async function toForum(forum: TGApp.Plugins.Mys.News.RenderForum): Promise<void>
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
background: var(--common-shadow-2); background: var(--common-shadow-2);
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 10px var(--tgc-dark-1); box-shadow: 0 0 10px var(--tgc-dark-1);
color: var(--tgc-white-1); color: var(--tgc-white-1);
cursor: pointer; cursor: pointer;

46
src/components/viewPost/vp-overlay-search.vue
View File

@@ -8,10 +8,14 @@
加载更多({{ results.length }}) 加载更多({{ results.length }})
</v-btn> </v-btn>
</div> </div>
<div class="tops-divider" />
<div class="tops-list"> <div class="tops-list">
<div v-for="item in results" :key="item.post.post_id"> <TPostCard
<TPostCard :model-value="item" /> class="tops-item"
</div> :model-value="item"
v-for="item in results"
:key="item.post.post_id"
/>
</div> </div>
</div> </div>
</TOverlay> </TOverlay>
@@ -113,13 +117,24 @@ async function searchPosts(): Promise<void> {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.tops-box { .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; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: var(--box-bg-1); background-color: var(--box-bg-1);
row-gap: 8px;
} }
.tops-top { .tops-top {
position: relative;
display: flex; display: flex;
width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -130,25 +145,38 @@ async function searchPosts(): Promise<void> {
} }
.tops-act { .tops-act {
position: relative;
display: flex; display: flex;
width: 100%;
align-items: center; align-items: center;
justify-content: space-between; 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 { .tops-list {
position: relative; position: relative;
display: flex; display: flex;
width: 400px; width: 100%;
max-height: 400px; height: 100%;
box-sizing: border-box;
flex-direction: column; flex-direction: column;
padding-right: 10px; padding-right: 8px;
padding-bottom: 8px;
overflow-y: auto; overflow-y: auto;
row-gap: 10px; row-gap: 10px;
} }
.tops-item {
height: fit-content;
flex-shrink: 0;
}
.tops-btn { .tops-btn {
width: fit-content; width: fit-content;
background: var(--tgc-btn-1); background: var(--tgc-btn-1);