Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-16 09:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(GCG): 样式优化

Browse Source
This commit is contained in:
BTMuli
2023-03-22 18:05:07 +08:00
parent 0c615fd707
commit cff0d0a19a
1 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/GCG.vue
View File

@@ -16,19 +16,12 @@
@click:append="searchCard" @click:append="searchCard"
></v-text-field> ></v-text-field>
</v-app-bar> </v-app-bar>
<div class="cards-grid"> <div class="GCG-grid">
<v-card v-for="item in CardsInfo" :key="item.id" width="280" height="480"> <div v-for="item in CardsInfo" :key="item.id" class="card-cls" @click="toOuter(item)">
<!-- 外部卡牌边框 --> <!-- 外部卡牌边框 -->
<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-cover"></v-img> <v-img src="/source/GCG/base/bg-normal.webp" class="GCG-border"></v-img>
<v-img :src="item.icon" class="GCG-cover" style="z-index: -1"></v-img> <v-img :src="item.icon" class="GCG-cover"></v-img>
<!-- todo 样式优化 --> </div>
<v-card-actions class="GCG-content">
<span>{{ item.name }}</span>
<v-btn @click="toOuter(item)" prepend-icon="mdi-arrow-right-circle" class="ms-2 card-btn"
>查看</v-btn
>
</v-card-actions>
</v-card>
</div> </div>
</div> </div>
</template> </template>
@@ -71,26 +64,42 @@ async function searchCard() {
} }
</script> </script>
<style lang="css"> <style lang="css">
.cards-grid { /* 多排卡牌 */
.GCG-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 1rem; grid-gap: 10px;
padding: 1rem; padding: 10px;
}
.card-cls {
position: relative;
width: 140px;
height: 240px;
border-radius: 10px;
overflow: hidden;
}
.GCG-border {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 240px;
} }
.GCG-cover { .GCG-cover {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 280px; width: 140px;
height: 480px; height: 240px;
z-index: -1;
} }
.GCG-content { .GCG-grid :hover {
position: absolute; cursor: pointer;
bottom: 0; }
background: rgba(0, 0, 0, 0.5);
color: #f4d8a8; .GCG-grid :hover .GCG-cover {
font-size: 20px; transform: scale(1.1);
width: 100%; transition: all 0.3s;
border-radius: 0 0 10px 10px; overflow: hidden;
} }
</style> </style>