From b65b295ec813226190c5392f66d7d5810d93c10c Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 19 Jan 2026 21:46:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(cp=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E5=BC=B9=E5=B9=95=E6=83=85=E4=BE=A3=E5=A4=B4=E5=83=8F=E4=B8=AD?=
 =?UTF-8?q?=E9=97=B4=E6=98=BE=E7=A4=BA=E7=88=B1=E5=BF=83=E5=9B=BE=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Ranking/Couple/components/Barrage.vue     | 88 +++++++++++++------
 1 file changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/views/Ranking/Couple/components/Barrage.vue b/src/views/Ranking/Couple/components/Barrage.vue
index b042025..55a7cab 100644
--- a/src/views/Ranking/Couple/components/Barrage.vue
+++ b/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
-          v-smart-img
-          :src="item.senderAvatar || ''"
-          alt=""
+        <!-- 情侣头像 -->
+        <div
           style="
-            width: 8vw;
-            border-radius: 50%;
-            display: block;
-            aspect-ratio: 1/1;
-            object-fit: cover;
+            position: relative;
+
+            display: flex;
+            align-items: center;
+            gap: 2vw;
           "
-          @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
+            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
+            :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,