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-04-01 19:18:16 +08:00
parent 8ffb95ed90
commit 62744aed3c
1 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/GCG.vue
View File

@@ -30,8 +30,12 @@
class="card-cls" class="card-cls"
@click="toOuter(item.name, item.id)" @click="toOuter(item.name, item.id)"
> >
<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-border"></v-img> <div class="GCG-border">
<v-img :src="item.icon.normal" class="GCG-cover"></v-img> <img src="/source/GCG/base/bg-normal.webp" alt="border" />
</div>
<div class="GCG-cover">
<img :src="item.icon.normal" alt="cover" />
</div>
<div class="GCG-content"> <div class="GCG-content">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
@@ -46,8 +50,12 @@
class="card-cls" class="card-cls"
@click="toOuter(item.name, item.id)" @click="toOuter(item.name, item.id)"
> >
<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-border"></v-img> <div class="GCG-border">
<v-img :src="item.icon.normal" class="GCG-cover"></v-img> <img src="/source/GCG/base/bg-normal.webp" alt="border" />
</div>
<div class="GCG-cover">
<img :src="item.icon.normal" alt="cover" />
</div>
<div class="GCG-content"> <div class="GCG-content">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
@@ -62,8 +70,12 @@
class="card-cls" class="card-cls"
@click="toOuter(item.name, item.id)" @click="toOuter(item.name, item.id)"
> >
<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-border"></v-img> <div class="GCG-border">
<v-img :src="item.icon.normal" class="GCG-cover"></v-img> <img src="/source/GCG/base/bg-normal.webp" alt="border" />
</div>
<div class="GCG-cover">
<img :src="item.icon.normal" alt="cover" />
</div>
<div class="GCG-content"> <div class="GCG-content">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
@@ -74,18 +86,22 @@
</div> </div>
<div v-else> <div v-else>
<div class="GCG-grid"> <div class="GCG-grid">
<v-card <div
v-for="item in CardsInfoS" v-for="item in CardsInfoS"
:key="item.id" :key="item.id"
class="card-cls" class="card-cls"
@click="toOuter(item.name, item.id)" @click="toOuter(item.name, item.id)"
> >
<v-img src="/source/GCG/base/bg-normal.webp" class="GCG-border"></v-img> <div class="GCG-border">
<v-img :src="item.icon.normal" class="GCG-cover"></v-img> <img src="/source/GCG/base/bg-normal.webp" alt="border" />
</div>
<div class="GCG-cover">
<img :src="item.icon.normal" alt="cover" />
</div>
<div class="GCG-content"> <div class="GCG-content">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
</v-card> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -143,7 +159,7 @@ async function searchCard() {
} }
} }
</script> </script>
<style lang="css"> <style lang="css" scoped>
.GCG-grid { .GCG-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
@@ -158,40 +174,44 @@ async function searchCard() {
width: 140px; width: 140px;
height: 240px; height: 240px;
overflow: hidden; overflow: hidden;
transition: all 0.3s;
border-radius: 10px;
}
.card-cls:hover .GCG-cover {
transform: scale(1.1);
transition: all 0.3s;
} }
.GCG-border { .GCG-border {
position: absolute; position: absolute;
border-radius: 10px;
top: 0; top: 0;
left: 0; left: 0;
width: 140px;
height: 240px;
overflow: hidden; overflow: hidden;
} }
.GCG-border img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.GCG-cover { .GCG-cover {
position: absolute; position: absolute;
transition: all 0.3s; transition: all 0.3s;
top: 0; top: 0;
left: 0; left: 0;
width: 140px; width: 100%;
height: 240px; height: 100%;
z-index: -1; z-index: -1;
} }
.GCG-cover img { .GCG-cover img {
height: 240px; width: 100%;
width: auto; height: 100%;
} border-radius: 10px;
object-fit: cover;
.GCG-grid :hover {
cursor: pointer;
}
.GCG-grid :hover .GCG-cover {
transform: scale(1.1);
transition: all 0.3s;
overflow: hidden;
} }
.GCG-content { .GCG-content {
@@ -204,6 +224,7 @@ async function searchCard() {
color: white; color: white;
display: flex; display: flex;
font-size: small; font-size: small;
overflow: hidden;
font-family: Genshin, serif; font-family: Genshin, serif;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
justify-content: center; justify-content: center;