Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28: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> <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" />
@@ -43,6 +42,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
@@ -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;