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

💄 调整卡片UI，维持名片比例

Browse Source
This commit is contained in:
目棃
2024-10-31 10:13:24 +08:00
parent 41e71357ef
commit 6a78bf059c
1 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/userAvatar/tua-avatar-box.vue
View File

@@ -27,19 +27,19 @@
<span>Lv.{{ skill.level }}</span> <span>Lv.{{ skill.level }}</span>
</div> </div>
</div> </div>
</div> <div class="tua-abl-bottom">
<div class="tua-abl-bottom"> <div class="tua-abl-fetter">
<div class="tua-abl-fetter"> <img src="/icon/material/105.webp" alt="fetter" />
<img src="/icon/material/105.webp" alt="fetter" /> <span>{{ props.modelValue.avatar.fetter }}</span>
<span>{{ props.modelValue.avatar.fetter }}</span> </div>
</div> <div class="tua-abl-other">
<div class="tua-abl-other"> <span v-if="!isFetterMax">
<span v-if="!isFetterMax"> <v-icon>mdi-lock-outline</v-icon>
<v-icon>mdi-lock-outline</v-icon> </span>
</span> <span v-if="props.modelValue.costumes.length > 0">
<span v-if="props.modelValue.costumes.length > 0"> <v-icon>mdi-tshirt-crew-outline</v-icon>
<v-icon>mdi-tshirt-crew-outline</v-icon> </span>
</span> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -186,13 +186,17 @@ function getWeaponTitle(): string {
} }
.tua-abl-bottom { .tua-abl-bottom {
position: relative;
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;
border-radius: 5px; -webkit-backdrop-filter: blur(5px);
background: var(--box-bg-3); backdrop-filter: blur(5px);
background: rgb(0 0 0 / 40%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-family: var(--font-title); font-family: var(--font-title);
} }
@@ -211,10 +215,14 @@ function getWeaponTitle(): string {
.tua-abl-mid { .tua-abl-mid {
position: relative; position: relative;
display: flex;
overflow: hidden;
width: 100%; width: 100%;
height: 80px; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between;
border-radius: 5px; border-radius: 5px;
aspect-ratio: 21/10;
} }
.tua-abl-bg { .tua-abl-bg {
@@ -223,10 +231,10 @@ function getWeaponTitle(): string {
left: 0; left: 0;
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 5px; border-radius: 5px;
aspect-ratio: 21/10;
-webkit-backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background: var(--box-bg-3); background: var(--box-bg-3);
@@ -235,13 +243,13 @@ function getWeaponTitle(): string {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
object-fit: fill;
} }
} }
.tua-abl-skills { .tua-abl-skills {
position: relative; position: relative;
display: flex; display: flex;
width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;