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

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

@@ -27,7 +27,6 @@
<span>Lv.{{ skill.level }}</span>
</div>
</div>
</div>
<div class="tua-abl-bottom">
<div class="tua-abl-fetter">
<img src="/icon/material/105.webp" alt="fetter" />
@@ -43,6 +42,7 @@
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
@@ -186,13 +186,17 @@ function getWeaponTitle(): string {
}
.tua-abl-bottom {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 5px;
border-radius: 5px;
background: var(--box-bg-3);
-webkit-backdrop-filter: blur(5px);
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);
}
@@ -211,10 +215,14 @@ function getWeaponTitle(): string {
.tua-abl-mid {
position: relative;
display: flex;
overflow: hidden;
width: 100%;
height: 80px;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 5px;
aspect-ratio: 21/10;
}
.tua-abl-bg {
@@ -223,10 +231,10 @@ function getWeaponTitle(): string {
left: 0;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 5px;
aspect-ratio: 21/10;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: var(--box-bg-3);
@@ -235,13 +243,13 @@ function getWeaponTitle(): string {
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: fill;
}
}
.tua-abl-skills {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 5px;