feat(cp排行榜): 弹幕情侣头像中间显示爱心图像

src/views/Ranking/Couple/components/Barrage.vue

@@ -20,40 +20,70 @@
           padding: 8px;
           display: flex;
           align-items: center;
-          gap: 4px;
+          gap: 2vw;
           backdrop-filter: blur(1px);
         "
         :style="getBarrageStyle(item)"
         @animationend="handleAnimationEnd(item.id)"
       >
-        <!-- 发送人 -->
+        <!-- 情侣头像 -->
-        <img
+        <div
-          v-smart-img
-          :src="item.senderAvatar || ''"
-          alt=""
           style="
-            width: 8vw;
+            position: relative;
-            border-radius: 50%;
+
-            display: block;
+            display: flex;
-            aspect-ratio: 1/1;
+            align-items: center;
-            object-fit: cover;
+            gap: 2vw;
           "
-          @error="handleAvatarImageError"
+        >
-        />
+          <!-- 爱心图形 -->
-        <!-- 接收人 -->
+          <div
-        <img
+            style="
-          v-smart-img
+              position: absolute;
-          :src="item.receiverAvatar || ''"
+              inset: 0;
-          alt=""
+
-          style="
+              display: flex;
-            width: 8vw;
+              justify-content: center;
-            border-radius: 50%;
+              align-items: center;
-            display: block;
+            "
-            aspect-ratio: 1/1;
+          >
-            object-fit: cover;
+            <img
-          "
+              :src="imageUrl('coupleSign')"
-          @error="handleAvatarImageError"
+              alt=""
-        />
+              style="width: 5vw; display: block; object-fit: cover"
+            />
+          </div>
+
+          <!-- 发送人 -->
+          <img
+            v-smart-img
+            :src="item.senderAvatar || ''"
+            alt=""
+            style="
+              width: 8vw;
+              border-radius: 50%;
+              display: block;
+              aspect-ratio: 1/1;
+              object-fit: cover;
+            "
+            @error="handleAvatarImageError"
+          />
+          <!-- 接收人 -->
+          <img
+            v-smart-img
+            :src="item.receiverAvatar || ''"
+            alt=""
+            style="
+              width: 8vw;
+              border-radius: 50%;
+              display: block;
+              aspect-ratio: 1/1;
+              object-fit: cover;
+            "
+            @error="handleAvatarImageError"
+          />
+        </div>
+
         <div
           style="
             white-space: nowrap;
@@ -79,10 +109,14 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
 import { handleAvatarImageError } from '@/utils/imageHandler.js'
 
 const { locale, t } = useI18n()
 
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
 const props = defineProps({
   barrageList: {
     type: Array,