hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hzj 2026-01-19 21:46:21 +08:00
parent a985b45945
commit b65b295ec8
1 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/Ranking/Couple/components/Barrage.vue
View File

@ -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,