From 6a78bf059ca2a9b5eedcca42f400830d4c3d5bb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 31 Oct 2024 10:13:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87UI=EF=BC=8C=E7=BB=B4=E6=8C=81=E5=90=8D=E7=89=87?=
 =?UTF-8?q?=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userAvatar/tua-avatar-box.vue | 44 ++++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/userAvatar/tua-avatar-box.vue b/src/components/userAvatar/tua-avatar-box.vue
index cd94df24..0e8e6dc6 100644
--- a/src/components/userAvatar/tua-avatar-box.vue
+++ b/src/components/userAvatar/tua-avatar-box.vue
@@ -27,19 +27,19 @@
           <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" />
-        <span>{{ props.modelValue.avatar.fetter }}</span>
-      </div>
-      <div class="tua-abl-other">
-        <span v-if="!isFetterMax">
-          <v-icon>mdi-lock-outline</v-icon>
-        </span>
-        <span v-if="props.modelValue.costumes.length > 0">
-          <v-icon>mdi-tshirt-crew-outline</v-icon>
-        </span>
+      <div class="tua-abl-bottom">
+        <div class="tua-abl-fetter">
+          <img src="/icon/material/105.webp" alt="fetter" />
+          <span>{{ props.modelValue.avatar.fetter }}</span>
+        </div>
+        <div class="tua-abl-other">
+          <span v-if="!isFetterMax">
+            <v-icon>mdi-lock-outline</v-icon>
+          </span>
+          <span v-if="props.modelValue.costumes.length > 0">
+            <v-icon>mdi-tshirt-crew-outline</v-icon>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -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;