feat(CP活动): 取消网络图片的图片指令,减少请求负担
This commit is contained in:
parent
b7c5f9cc48
commit
fff92b6c3d
@ -24,7 +24,6 @@
|
|||||||
>
|
>
|
||||||
<div :style="{ width: avatarWidth }">
|
<div :style="{ width: avatarWidth }">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
@ -79,8 +78,8 @@
|
|||||||
ranking == '1'
|
ranking == '1'
|
||||||
? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
|
? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
|
||||||
: ranking == '2'
|
: ranking == '2'
|
||||||
? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
|
? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
|
||||||
: `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
|
: `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|||||||
@ -203,7 +203,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.avatar || ''"
|
:src="listItem?.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -306,7 +305,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖励图片 -->
|
<!-- 奖励图片 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 70%; object-fit: cover"
|
style="display: block; width: 70%; object-fit: cover"
|
||||||
@ -363,7 +361,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.avatar || ''"
|
:src="myRanking.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -27,7 +27,6 @@
|
|||||||
@animationend="handleAnimationEnd(item.id)"
|
@animationend="handleAnimationEnd(item.id)"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="item.avatar || ''"
|
:src="item.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -24,7 +24,6 @@
|
|||||||
>
|
>
|
||||||
<div :style="{ width: avatarWidth }">
|
<div :style="{ width: avatarWidth }">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
|
|||||||
@ -102,7 +102,7 @@
|
|||||||
style="width: 30%; display: flex; flex-direction: column"
|
style="width: 30%; display: flex; flex-direction: column"
|
||||||
>
|
>
|
||||||
<itemCenter :imgUrl="imageUrl('giftBg')">
|
<itemCenter :imgUrl="imageUrl('giftBg')">
|
||||||
<img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
|
<img :src="gift.giftPhoto" alt="" width="50%" />
|
||||||
</itemCenter>
|
</itemCenter>
|
||||||
<div
|
<div
|
||||||
style="display: flex; justify-content: center; align-items: center; gap: 2px"
|
style="display: flex; justify-content: center; align-items: center; gap: 2px"
|
||||||
@ -356,7 +356,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.avatar || ''"
|
:src="listItem?.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -481,7 +480,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 预览图 -->
|
<!-- 预览图 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
v-if="item.cover != ''"
|
v-if="item.cover != ''"
|
||||||
:src="item.cover"
|
:src="item.cover"
|
||||||
alt=""
|
alt=""
|
||||||
@ -538,7 +536,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.avatar || ''"
|
:src="listItem?.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -705,7 +702,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="prize.prizeImage || ''"
|
:src="prize.prizeImage || ''"
|
||||||
:alt="prize.prizeName || ''"
|
:alt="prize.prizeName || ''"
|
||||||
width="70%"
|
width="70%"
|
||||||
@ -904,7 +900,6 @@
|
|||||||
<!-- 奖励图 -->
|
<!-- 奖励图 -->
|
||||||
<img
|
<img
|
||||||
v-for="Badge in RechargeBadgeInfo.rewardProps"
|
v-for="Badge in RechargeBadgeInfo.rewardProps"
|
||||||
v-smart-img
|
|
||||||
:src="Badge.cover || ''"
|
:src="Badge.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 18vw"
|
style="display: block; width: 18vw"
|
||||||
@ -1139,7 +1134,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="userInfo.userAvatar || ''"
|
:src="userInfo.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -1297,7 +1291,6 @@
|
|||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<div style="position: relative; width: 50px; margin-right: 12px">
|
<div style="position: relative; width: 50px; margin-right: 12px">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="selectedPayee.avatar || ''"
|
:src="selectedPayee.avatar || ''"
|
||||||
:alt="selectedPayee.name || ''"
|
:alt="selectedPayee.name || ''"
|
||||||
style="width: 100%; object-fit: cover; border-radius: 50%"
|
style="width: 100%; object-fit: cover; border-radius: 50%"
|
||||||
@ -1588,7 +1581,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.avatar || ''"
|
:src="myRanking.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -1664,7 +1656,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖品展示 -->
|
<!-- 奖品展示 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="topReward.cover"
|
:src="topReward.cover"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 60%; display: block; object-fit: cover"
|
style="width: 60%; display: block; object-fit: cover"
|
||||||
@ -1736,7 +1727,6 @@
|
|||||||
|
|
||||||
<!-- 奖品 -->
|
<!-- 奖品 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="result[resultShowIndex]?.prize?.prizeImage"
|
:src="result[resultShowIndex]?.prize?.prizeImage"
|
||||||
alt=""
|
alt=""
|
||||||
width="50%"
|
width="50%"
|
||||||
@ -1830,7 +1820,6 @@
|
|||||||
>
|
>
|
||||||
<div style="display: flex; align-items: center; gap: 4px">
|
<div style="display: flex; align-items: center; gap: 4px">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="record?.prize?.prizeImage || ''"
|
:src="record?.prize?.prizeImage || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 10vw; min-width: 0; object-fit: cover; display: block"
|
style="width: 10vw; min-width: 0; object-fit: cover; display: block"
|
||||||
|
|||||||
@ -1,10 +1,20 @@
|
|||||||
<!-- Barrage.vue 优化版 -->
|
<!-- Barrage.vue 优化版 -->
|
||||||
<template>
|
<template>
|
||||||
<div style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none">
|
<div
|
||||||
|
style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
|
||||||
|
>
|
||||||
<!-- 双行弹幕轨道 -->
|
<!-- 双行弹幕轨道 -->
|
||||||
<div v-for="(track, index) in visibleTracks" :key="index" style="position: absolute; width: 100%; height: 50px"
|
<div
|
||||||
:style="{ top: `calc(${index} * 16vw)` }">
|
v-for="(track, index) in visibleTracks"
|
||||||
<div v-for="item in track" :key="item.id" class="barrage-item" style="
|
:key="index"
|
||||||
|
style="position: absolute; width: 100%; height: 50px"
|
||||||
|
:style="{ top: `calc(${index} * 16vw)` }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="item in track"
|
||||||
|
:key="item.id"
|
||||||
|
class="barrage-item"
|
||||||
|
style="
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 26px;
|
border-radius: 26px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@ -12,21 +22,36 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
backdrop-filter: blur(1px);
|
backdrop-filter: blur(1px);
|
||||||
" :style="getBarrageStyle(item)" @animationend="handleAnimationEnd(item.id)">
|
"
|
||||||
<img v-smart-img :src="item.avatar || ''" alt="" style="
|
:style="getBarrageStyle(item)"
|
||||||
|
@animationend="handleAnimationEnd(item.id)"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="item.avatar || ''"
|
||||||
|
alt=""
|
||||||
|
style="
|
||||||
width: 10vw;
|
width: 10vw;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
" @error="handleAvatarImageError" />
|
"
|
||||||
<div style="
|
@error="handleAvatarImageError"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-image: linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)
|
background-image: linear-gradient(
|
||||||
">
|
180deg,
|
||||||
|
#fff9a9 26.92%,
|
||||||
|
#ed7d0a 52.08%,
|
||||||
|
#fffab5 73.08%
|
||||||
|
);
|
||||||
|
"
|
||||||
|
>
|
||||||
{{ barrageText(item) }}
|
{{ barrageText(item) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -35,227 +60,226 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
||||||
|
|
||||||
const { locale, t } = useI18n()
|
const { locale, t } = useI18n()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
barrageList: {
|
barrageList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
|
|
||||||
speed: {
|
speed: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 80, // 基础速度系数
|
default: 80, // 基础速度系数
|
||||||
},
|
},
|
||||||
|
|
||||||
maxItems: {
|
maxItems: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 4, // 每行最大弹幕数
|
default: 4, // 每行最大弹幕数
|
||||||
},
|
},
|
||||||
|
|
||||||
loopInterval: {
|
loopInterval: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 2000, // 弹幕生成间隔(ms)
|
default: 2000, // 弹幕生成间隔(ms)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const tracks = ref([[], []]) // 弹幕轨道数据
|
const tracks = ref([[], []]) // 弹幕轨道数据
|
||||||
const idCounter = ref(0) // 弹幕ID计数器
|
const idCounter = ref(0) // 弹幕ID计数器
|
||||||
const currentIndex = ref(0) // 用于取下一项弹幕的索引
|
const currentIndex = ref(0) // 用于取下一项弹幕的索引
|
||||||
|
|
||||||
// 计算实际显示的轨道(过滤空轨道)
|
// 计算实际显示的轨道(过滤空轨道)
|
||||||
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
|
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
|
||||||
|
|
||||||
// 显示的文本
|
// 显示的文本
|
||||||
const barrageText = (item) => {
|
const barrageText = (item) => {
|
||||||
const params = { nickname: item.nickname, prizeName: item.prizeName }
|
const params = { nickname: item.nickname, prizeName: item.prizeName }
|
||||||
return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
|
return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
|
||||||
? t('barrage_won_prize', params)
|
? t('barrage_won_prize', params)
|
||||||
: t('barrage_won_the_prize', params)
|
: t('barrage_won_the_prize', params)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取弹幕样式
|
// 获取弹幕样式
|
||||||
const getBarrageStyle = (item) => {
|
const getBarrageStyle = (item) => {
|
||||||
const isRTL = locale.value === 'ar'
|
const isRTL = locale.value === 'ar'
|
||||||
|
|
||||||
return {
|
return {
|
||||||
animationDuration: `${item.duration}s`,
|
animationDuration: `${item.duration}s`,
|
||||||
animationDelay: `${item.delay}s`,
|
animationDelay: `${item.delay}s`,
|
||||||
'--start-pos': `${item.startPos}px`,
|
'--start-pos': `${item.startPos}px`,
|
||||||
border: item.prizeType == 'MONEY' ? '1px solid #FFF1B2' : '1px solid #BAD0FF',
|
border: item.prizeType == 'MONEY' ? '1px solid #FFF1B2' : '1px solid #BAD0FF',
|
||||||
background:
|
background:
|
||||||
item.prizeType == 'MONEY'
|
item.prizeType == 'MONEY'
|
||||||
? 'linear-gradient(270deg, rgba(255, 222, 77, 0.65) 0%, rgba(117, 95, 0, 0.20) 93.75%)'
|
? 'linear-gradient(270deg, rgba(255, 222, 77, 0.65) 0%, rgba(117, 95, 0, 0.20) 93.75%)'
|
||||||
: 'linear-gradient(270deg, rgba(103, 152, 255, 0.65) 0%, rgba(32, 77, 173, 0.20) 93.75%)',
|
: 'linear-gradient(270deg, rgba(103, 152, 255, 0.65) 0%, rgba(32, 77, 173, 0.20) 93.75%)',
|
||||||
// RTL布局支持
|
// RTL布局支持
|
||||||
...(isRTL
|
...(isRTL
|
||||||
? {
|
? {
|
||||||
right: '0',
|
right: '0',
|
||||||
left: 'auto',
|
left: 'auto',
|
||||||
transform: 'translateX(-100vw)',
|
transform: 'translateX(-100vw)',
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
left: '0',
|
left: '0',
|
||||||
right: 'auto',
|
right: 'auto',
|
||||||
transform: 'translateX(100vw)',
|
transform: 'translateX(100vw)',
|
||||||
}),
|
}),
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 生成随机弹幕属性
|
// 生成随机弹幕属性
|
||||||
const generateBarrageProps = (item) => {
|
const generateBarrageProps = (item) => {
|
||||||
const textLength = barrageText(item).length
|
const textLength = barrageText(item).length
|
||||||
return {
|
return {
|
||||||
duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间(每字符减少0.2秒,持续时间不低于5秒)
|
duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间(每字符减少0.2秒,持续时间不低于5秒)
|
||||||
startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置(得到-10到10之间的随机整数,避免所有弹幕都从完全相同的起点开始移动)
|
startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置(得到-10到10之间的随机整数,避免所有弹幕都从完全相同的起点开始移动)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 添加弹幕到轨道
|
// 添加弹幕到轨道
|
||||||
const addToTrack = (item) => {
|
const addToTrack = (item) => {
|
||||||
// 寻找最短的轨道的下标值
|
// 寻找最短的轨道的下标值
|
||||||
const trackIndex = tracks.value.reduce(
|
const trackIndex = tracks.value.reduce(
|
||||||
(minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
|
(minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
|
||||||
0
|
0,
|
||||||
)
|
|
||||||
|
|
||||||
if (tracks.value[trackIndex].length < props.maxItems) {
|
|
||||||
tracks.value[trackIndex].push({
|
|
||||||
...item,
|
|
||||||
id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
|
|
||||||
delay: Math.random() * 4, // 随机延迟(0-4秒)
|
|
||||||
...generateBarrageProps(item),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清理完成动画的弹幕(根据动画结束状态遍历)
|
|
||||||
const cleanCompleted = () => {
|
|
||||||
tracks.value.forEach((track) => {
|
|
||||||
for (let i = track.length - 1; i >= 0; i--) {
|
|
||||||
if (track[i].completed) {
|
|
||||||
track.splice(i, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置弹幕动画结束状态
|
|
||||||
const handleAnimationEnd = (id) => {
|
|
||||||
tracks.value.forEach((track) => {
|
|
||||||
const item = track.find((item) => item.id === id)
|
|
||||||
if (item) item.completed = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取下一项弹幕(循环逻辑)
|
|
||||||
const getNextBarrage = () => {
|
|
||||||
if (props.barrageList.length === 0) return null
|
|
||||||
|
|
||||||
const item = props.barrageList[currentIndex.value] // 取得下一项弹幕项
|
|
||||||
currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //索引达到最大时则重置为0
|
|
||||||
|
|
||||||
return { ...item } // 返回副本避免污染原始数据
|
|
||||||
}
|
|
||||||
|
|
||||||
// 弹幕循环逻辑
|
|
||||||
let barrageInterval = null
|
|
||||||
|
|
||||||
// 根据设置的时间间隔自动获取下一项弹幕
|
|
||||||
const startBarrage = () => {
|
|
||||||
barrageInterval = setInterval(() => {
|
|
||||||
cleanCompleted() // 清理完成动画的弹幕
|
|
||||||
|
|
||||||
const nextBarrage = getNextBarrage() // 获取下一项弹幕
|
|
||||||
if (nextBarrage) {
|
|
||||||
addToTrack(nextBarrage) // 添加弹幕到轨道
|
|
||||||
}
|
|
||||||
}, props.loopInterval)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
startBarrage() // 开启弹幕循环
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
clearInterval(barrageInterval) // 清空弹幕
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听数据源变化
|
|
||||||
watch(
|
|
||||||
() => props.barrageList,
|
|
||||||
(newList) => {
|
|
||||||
currentIndex.value = 0 // 重置索引,确保重新开始循环
|
|
||||||
clearInterval(barrageInterval) // 清空弹幕
|
|
||||||
|
|
||||||
// 如果列表为空,停止生成新弹幕
|
|
||||||
if (newList.length !== 0) {
|
|
||||||
startBarrage() // 重启弹幕循环
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if (tracks.value[trackIndex].length < props.maxItems) {
|
||||||
|
tracks.value[trackIndex].push({
|
||||||
|
...item,
|
||||||
|
id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
|
||||||
|
delay: Math.random() * 4, // 随机延迟(0-4秒)
|
||||||
|
...generateBarrageProps(item),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理完成动画的弹幕(根据动画结束状态遍历)
|
||||||
|
const cleanCompleted = () => {
|
||||||
|
tracks.value.forEach((track) => {
|
||||||
|
for (let i = track.length - 1; i >= 0; i--) {
|
||||||
|
if (track[i].completed) {
|
||||||
|
track.splice(i, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置弹幕动画结束状态
|
||||||
|
const handleAnimationEnd = (id) => {
|
||||||
|
tracks.value.forEach((track) => {
|
||||||
|
const item = track.find((item) => item.id === id)
|
||||||
|
if (item) item.completed = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取下一项弹幕(循环逻辑)
|
||||||
|
const getNextBarrage = () => {
|
||||||
|
if (props.barrageList.length === 0) return null
|
||||||
|
|
||||||
|
const item = props.barrageList[currentIndex.value] // 取得下一项弹幕项
|
||||||
|
currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //索引达到最大时则重置为0
|
||||||
|
|
||||||
|
return { ...item } // 返回副本避免污染原始数据
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹幕循环逻辑
|
||||||
|
let barrageInterval = null
|
||||||
|
|
||||||
|
// 根据设置的时间间隔自动获取下一项弹幕
|
||||||
|
const startBarrage = () => {
|
||||||
|
barrageInterval = setInterval(() => {
|
||||||
|
cleanCompleted() // 清理完成动画的弹幕
|
||||||
|
|
||||||
|
const nextBarrage = getNextBarrage() // 获取下一项弹幕
|
||||||
|
if (nextBarrage) {
|
||||||
|
addToTrack(nextBarrage) // 添加弹幕到轨道
|
||||||
|
}
|
||||||
|
}, props.loopInterval)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
startBarrage() // 开启弹幕循环
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(barrageInterval) // 清空弹幕
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听数据源变化
|
||||||
|
watch(
|
||||||
|
() => props.barrageList,
|
||||||
|
(newList) => {
|
||||||
|
currentIndex.value = 0 // 重置索引,确保重新开始循环
|
||||||
|
clearInterval(barrageInterval) // 清空弹幕
|
||||||
|
|
||||||
|
// 如果列表为空,停止生成新弹幕
|
||||||
|
if (newList.length !== 0) {
|
||||||
|
startBarrage() // 重启弹幕循环
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* 样式保持不变(同之前版本) */
|
||||||
|
.barrage-item {
|
||||||
|
will-change: transform;
|
||||||
|
animation: moveLeft linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
/* 样式保持不变(同之前版本) */
|
@keyframes moveLeft {
|
||||||
.barrage-item {
|
0% {
|
||||||
will-change: transform;
|
transform: translateX(100vw);
|
||||||
animation: moveLeft linear forwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes moveLeft {
|
100% {
|
||||||
0% {
|
transform: translateX(-100%);
|
||||||
transform: translateX(100vw);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
/* RTL支持 - 镜像弹幕动画 */
|
||||||
transform: translateX(-100%);
|
[dir='rtl'] .barrage-item {
|
||||||
}
|
animation: moveRight linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes moveRight {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* RTL支持 - 镜像弹幕动画 */
|
100% {
|
||||||
[dir='rtl'] .barrage-item {
|
transform: translateX(100%);
|
||||||
animation: moveRight linear forwards;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes moveRight {
|
@media screen and (max-width: 360px) {
|
||||||
0% {
|
* {
|
||||||
transform: translateX(-100vw);
|
font-size: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 360px) {
|
@media screen and (min-width: 360px) {
|
||||||
* {
|
* {
|
||||||
font-size: 10px;
|
font-size: 14px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 360px) {
|
@media screen and (min-width: 768px) {
|
||||||
* {
|
* {
|
||||||
font-size: 14px;
|
font-size: 24px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 1024px) {
|
||||||
* {
|
* {
|
||||||
font-size: 24px;
|
font-size: 32px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) {
|
|
||||||
* {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -24,7 +24,6 @@
|
|||||||
>
|
>
|
||||||
<div :style="{ width: avatarWidth }">
|
<div :style="{ width: avatarWidth }">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
|
|||||||
@ -213,7 +213,6 @@
|
|||||||
style="width: 20vw; position: relative; z-index: 2"
|
style="width: 20vw; position: relative; z-index: 2"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRechargeRecode?.userAvatar"
|
:src="myRechargeRecode?.userAvatar"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -321,7 +320,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖励图片 -->
|
<!-- 奖励图片 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -478,7 +476,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.userAvatar || ''"
|
:src="listItem?.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -581,7 +578,6 @@
|
|||||||
:style="[getGridPosition(index)]"
|
:style="[getGridPosition(index)]"
|
||||||
>
|
>
|
||||||
<!-- <img
|
<!-- <img
|
||||||
v-smart-img
|
|
||||||
:src="prize.prizeImage || ''"
|
:src="prize.prizeImage || ''"
|
||||||
:alt="prize.prizeName || ''"
|
:alt="prize.prizeName || ''"
|
||||||
width="60%"
|
width="60%"
|
||||||
@ -729,7 +725,6 @@
|
|||||||
<div style="display: flex; align-items: center; gap: 4vw">
|
<div style="display: flex; align-items: center; gap: 4vw">
|
||||||
<img
|
<img
|
||||||
v-for="Badge in RechargeBadgeInfo.rewardProps"
|
v-for="Badge in RechargeBadgeInfo.rewardProps"
|
||||||
v-smart-img
|
|
||||||
:src="Badge.cover || ''"
|
:src="Badge.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 18vw"
|
style="display: block; width: 18vw"
|
||||||
@ -965,7 +960,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="userInfo.userAvatar || ''"
|
:src="userInfo.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -1116,7 +1110,6 @@
|
|||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<div style="position: relative; width: 50px; margin-right: 12px">
|
<div style="position: relative; width: 50px; margin-right: 12px">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="selectedPayee.avatar || ''"
|
:src="selectedPayee.avatar || ''"
|
||||||
:alt="selectedPayee.name || ''"
|
:alt="selectedPayee.name || ''"
|
||||||
style="width: 100%; object-fit: cover; border-radius: 50%"
|
style="width: 100%; object-fit: cover; border-radius: 50%"
|
||||||
@ -1405,7 +1398,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking?.userAvatar || ''"
|
:src="myRanking?.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -52,7 +52,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="userInfo.userAvatar || ''"
|
:src="userInfo.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -101,7 +101,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.userAvatar || ''"
|
:src="listItem?.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -34,7 +34,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖励图片 -->
|
<!-- 奖励图片 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
|
style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
|
||||||
|
|||||||
@ -10,7 +10,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRechargeRecode?.userAvatar || ''"
|
:src="myRechargeRecode?.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -136,7 +135,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖励图片 -->
|
<!-- 奖励图片 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
|
style="display: block; min-width: 0; width: 80%; height: 100%; object-fit: contain"
|
||||||
|
|||||||
@ -97,7 +97,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="prize.prizeImage || ''"
|
:src="prize.prizeImage || ''"
|
||||||
:alt="prize.prizeName || ''"
|
:alt="prize.prizeName || ''"
|
||||||
width="50%"
|
width="50%"
|
||||||
@ -225,7 +224,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="userInfo.userAvatar || ''"
|
:src="userInfo.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -404,7 +402,6 @@
|
|||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<div style="position: relative; width: 50px; margin-right: 12px">
|
<div style="position: relative; width: 50px; margin-right: 12px">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="selectedPayee.avatar || ''"
|
:src="selectedPayee.avatar || ''"
|
||||||
:alt="selectedPayee.name || ''"
|
:alt="selectedPayee.name || ''"
|
||||||
style="width: 100%; object-fit: cover; border-radius: 50%"
|
style="width: 100%; object-fit: cover; border-radius: 50%"
|
||||||
|
|||||||
@ -24,7 +24,6 @@
|
|||||||
>
|
>
|
||||||
<div :style="{ width: avatarWidth }">
|
<div :style="{ width: avatarWidth }">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
|
|||||||
@ -279,7 +279,6 @@
|
|||||||
:contentStyle="`top:2vw`"
|
:contentStyle="`top:2vw`"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking?.userAvatar || ''"
|
:src="myRanking?.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -410,7 +409,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 奖品 -->
|
<!-- 奖品 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="result[resultShowIndex]?.prize?.prizeImage"
|
:src="result[resultShowIndex]?.prize?.prizeImage"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 40vw"
|
style="display: block; width: 40vw"
|
||||||
@ -506,7 +504,6 @@
|
|||||||
>
|
>
|
||||||
<div style="display: flex; align-items: center; gap: 4px">
|
<div style="display: flex; align-items: center; gap: 4px">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="record?.prize?.prizeImage || ''"
|
:src="record?.prize?.prizeImage || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 10vw; min-width: 0; object-fit: cover; display: block"
|
style="width: 10vw; min-width: 0; object-fit: cover; display: block"
|
||||||
|
|||||||
@ -111,7 +111,6 @@
|
|||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<div style="width: 20%">
|
<div style="width: 20%">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="member.memberProfile?.userAvatar || ''"
|
:src="member.memberProfile?.userAvatar || ''"
|
||||||
:alt="member.memberProfile?.userNickname"
|
:alt="member.memberProfile?.userNickname"
|
||||||
@error="handleAvatarImageError"
|
@error="handleAvatarImageError"
|
||||||
@ -283,7 +282,7 @@ const performSearch = async () => {
|
|||||||
hasSearched.value = false
|
hasSearched.value = false
|
||||||
|
|
||||||
let ResultUser = members.value.find(
|
let ResultUser = members.value.find(
|
||||||
(member) => member.memberProfile.account == searchQuery.value.trim()
|
(member) => member.memberProfile.account == searchQuery.value.trim(),
|
||||||
)
|
)
|
||||||
|
|
||||||
if (ResultUser) {
|
if (ResultUser) {
|
||||||
@ -416,7 +415,7 @@ watch(
|
|||||||
console.log('Language changed in header:', newLang)
|
console.log('Language changed in header:', newLang)
|
||||||
updateTypeShowText()
|
updateTypeShowText()
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true },
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@ -429,7 +428,7 @@ watch(
|
|||||||
searchResults.value = members.value
|
searchResults.value = members.value
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true },
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@ -456,7 +455,7 @@ watch(
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
}
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
// 组件挂载时获取政策数据
|
// 组件挂载时获取政策数据
|
||||||
|
|||||||
@ -470,7 +470,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="70%"
|
width="70%"
|
||||||
|
|||||||
@ -24,7 +24,6 @@
|
|||||||
>
|
>
|
||||||
<div :style="{ width: avatarWidth }">
|
<div :style="{ width: avatarWidth }">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
|
|||||||
@ -373,7 +373,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem?.avatar || ''"
|
:src="listItem?.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -492,7 +491,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖励图片 -->
|
<!-- 奖励图片 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 70%; object-fit: cover"
|
style="display: block; width: 70%; object-fit: cover"
|
||||||
@ -569,7 +567,6 @@
|
|||||||
>
|
>
|
||||||
<!-- 奖励图片 -->
|
<!-- 奖励图片 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="reward.cover || ''"
|
:src="reward.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="display: block; width: 70%; object-fit: cover"
|
style="display: block; width: 70%; object-fit: cover"
|
||||||
@ -635,7 +632,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.avatar || ''"
|
:src="myRanking.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -77,7 +77,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
v-if="topUser.userInfo.userAvatar"
|
v-if="topUser.userInfo.userAvatar"
|
||||||
:src="topUser.userInfo.userAvatar || ''"
|
:src="topUser.userInfo.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
@ -158,7 +157,7 @@
|
|||||||
style="width: 30%; display: flex; flex-direction: column"
|
style="width: 30%; display: flex; flex-direction: column"
|
||||||
>
|
>
|
||||||
<itemCenter :imgUrl="imageUrl('gift')">
|
<itemCenter :imgUrl="imageUrl('gift')">
|
||||||
<img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
|
<img :src="gift.giftPhoto" alt="" width="50%" />
|
||||||
</itemCenter>
|
</itemCenter>
|
||||||
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
|
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
|
||||||
<img
|
<img
|
||||||
@ -266,7 +265,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem.userAvatar || ''"
|
:src="listItem.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -412,7 +410,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="topOne.userInfo.userAvatar"
|
:src="topOne.userInfo.userAvatar"
|
||||||
alt=""
|
alt=""
|
||||||
width="70%"
|
width="70%"
|
||||||
@ -700,7 +697,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.userAvatar || ''"
|
:src="myRanking.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -218,7 +218,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="userInfo.avatar || ''"
|
:src="userInfo.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -332,7 +331,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.avatar || ''"
|
:src="myRanking.avatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -26,7 +26,6 @@
|
|||||||
>
|
>
|
||||||
<div style="width: 70%">
|
<div style="width: 70%">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
@ -148,7 +147,7 @@ watch(
|
|||||||
() => props.Type,
|
() => props.Type,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
console.log('Type 变化 =>', '新值:', newVal, '旧值:', oldVal)
|
console.log('Type 变化 =>', '新值:', newVal, '旧值:', oldVal)
|
||||||
}
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
// 头像盒子高度
|
// 头像盒子高度
|
||||||
|
|||||||
@ -236,7 +236,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="listItem.userAvatar || ''"
|
:src="listItem.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -358,7 +357,6 @@
|
|||||||
>
|
>
|
||||||
<!-- gift图 -->
|
<!-- gift图 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="gift.cover || ''"
|
:src="gift.cover || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 50%; display: block"
|
style="width: 50%; display: block"
|
||||||
@ -443,7 +441,6 @@
|
|||||||
<itemCenter :imgUrl="imageUrl('giftItemBg')">
|
<itemCenter :imgUrl="imageUrl('giftItemBg')">
|
||||||
<!-- gift图 -->
|
<!-- gift图 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="goods.propsGroup.activityRewardProps[0].cover"
|
:src="goods.propsGroup.activityRewardProps[0].cover"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 68%; display: block; margin-bottom: 7%"
|
style="width: 68%; display: block; margin-bottom: 7%"
|
||||||
@ -516,7 +513,6 @@
|
|||||||
|
|
||||||
<!-- 头像 -->
|
<!-- 头像 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="myRanking.userAvatar || ''"
|
:src="myRanking.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -640,7 +636,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="showTopOne.userAvatar || ''"
|
:src="showTopOne.userAvatar || ''"
|
||||||
alt=""
|
alt=""
|
||||||
style="
|
style="
|
||||||
@ -752,7 +747,6 @@
|
|||||||
<itemCenter :imgUrl="imageUrl('giftItemBg')">
|
<itemCenter :imgUrl="imageUrl('giftItemBg')">
|
||||||
<!-- 礼物 -->
|
<!-- 礼物 -->
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="gift.giftPhoto"
|
:src="gift.giftPhoto"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
|
||||||
@ -817,7 +811,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="selectedGood.propsGroup.activityRewardProps[0].cover"
|
:src="selectedGood.propsGroup.activityRewardProps[0].cover"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 50%; display: block"
|
style="width: 50%; display: block"
|
||||||
|
|||||||
@ -25,7 +25,6 @@
|
|||||||
>
|
>
|
||||||
<div :style="{ width: isTopOne ? '50%' : '80%' }">
|
<div :style="{ width: isTopOne ? '50%' : '80%' }">
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="avatarUrl || ''"
|
:src="avatarUrl || ''"
|
||||||
alt=""
|
alt=""
|
||||||
width="100%"
|
width="100%"
|
||||||
|
|||||||
@ -85,7 +85,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
v-smart-img
|
|
||||||
:src="selectedPayee.avatar || ''"
|
:src="selectedPayee.avatar || ''"
|
||||||
:alt="selectedPayee.name"
|
:alt="selectedPayee.name"
|
||||||
style="
|
style="
|
||||||
@ -356,7 +355,7 @@ const transfer = async () => {
|
|||||||
t('transfer_success', {
|
t('transfer_success', {
|
||||||
price: selectedCoinData.price,
|
price: selectedCoinData.price,
|
||||||
name: selectedPayee.name,
|
name: selectedPayee.name,
|
||||||
})
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
selectedCoin.value = null // 重置选择
|
selectedCoin.value = null // 重置选择
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user