From a44bf0f5ba7dc9d20673b2f542be30977f834bdc Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Mon, 8 Dec 2025 23:13:28 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E6=B7=BB=E5=8A=A0=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E4=BB=A5=E6=8F=90=E5=8D=87=E5=8F=AF=E8=A7=81=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/userGacha/gbr-data-line.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/userGacha/gbr-data-line.vue b/src/components/userGacha/gbr-data-line.vue
index 4d5b5013..d93b49e8 100644
--- a/src/components/userGacha/gbr-data-line.vue
+++ b/src/components/userGacha/gbr-data-line.vue
@@ -3,7 +3,8 @@
   <div class="gbr-dl-box">
     <div class="gbr-dl-progress" />
     <div class="gbr-dl-icon">
-      <img :alt="props.data.name" :src="getIcon()" />
+      <img :src="`/icon/bg/${props.data.rank}-BGC.webp`" alt="bg" class="bg" />
+      <img :alt="props.data.name" :src="getIcon()" class="icon" />
     </div>
     <div class="gbr-dl-base">
       <div class="gbr-dl-name">{{ props.data.name }}</div>
@@ -81,14 +82,30 @@ const progressWidth = computed<string>(() => {
 }
 
 .gbr-dl-icon {
+  position: relative;
   display: flex;
+  overflow: hidden;
   width: 32px;
   height: 32px;
+  box-sizing: border-box;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
+  padding: 2px;
+  border-radius: 4px;
 
-  img {
+  .bg {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon {
+    position: relative;
+    z-index: 1;
     width: 100%;
     height: 100%;
   }