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

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

@@ -20,12 +20,40 @@
           padding: 8px;
           display: flex;
           align-items: center;
-          gap: 4px;
+          gap: 2vw;
           backdrop-filter: blur(1px);
         "
         :style="getBarrageStyle(item)"
         @animationend="handleAnimationEnd(item.id)"
       >
+        <!-- 情侣头像 -->
+        <div
+          style="
+            position: relative;
+
+            display: flex;
+            align-items: center;
+            gap: 2vw;
+          "
+        >
+          <!-- 爱心图形 -->
+          <div
+            style="
+              position: absolute;
+              inset: 0;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              :src="imageUrl('coupleSign')"
+              alt=""
+              style="width: 5vw; display: block; object-fit: cover"
+            />
+          </div>
+
           <!-- 发送人 -->
           <img
             v-smart-img
@@ -54,6 +82,8 @@
             "
             @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,