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

⚡️ 首页组件调整

Browse Source
This commit is contained in:
目棃
2024-03-13 15:43:03 +08:00
parent af989dddda
commit 094f7b69fe
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/home/t-pool.vue
View File

@@ -23,7 +23,7 @@
</div> </div>
<div class="pool-bottom"> <div class="pool-bottom">
<div class="pool-character"> <div class="pool-character">
<div class="pool-icon-grid"> <div class="pool-icons">
<div <div
v-for="character in pool.characters" v-for="character in pool.characters"
:key="character.url" :key="character.url"
@@ -346,14 +346,24 @@ onUnmounted(() => {
.pool-character { .pool-character {
display: flex; display: flex;
width: auto; width: auto;
max-width: 280px;
height: 60px; height: 60px;
margin: 10px; margin: 10px;
overflow: hidden auto;
} }
.pool-icon-grid { .pool-character::-webkit-scrollbar-thumb {
display: grid; border-radius: 10px;
grid-column-gap: 10px; background: var(--common-shadow-t-4);
grid-template-columns: repeat(4, 60px); }
.pool-icons {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin-bottom: 10px;
gap: 10px;
} }
.pool-icon { .pool-icon {
@@ -363,7 +373,7 @@ onUnmounted(() => {
} }
.pool-icon:hover { .pool-icon:hover {
transform: scale(1.1); transform: scale(0.95);
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
} }