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

feat(新年活动-->弹幕组件): 调整money类型样式

Browse Source
This commit is contained in:
hzj 2026-01-04 15:52:02 +08:00
parent 777d964b50
commit 996e5dbd5f
1 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/Activities/NewYear/components/Barrage.vue
View File

@ -26,9 +26,9 @@
@animationend="handleAnimationEnd(item.id)" @animationend="handleAnimationEnd(item.id)"
> >
<img <img
:src="item.avatar" v-smart-img
:src="item.avatar || ''"
alt="" alt=""
@error="defaultAvatarUrl"
style=" style="
width: 10vw; width: 10vw;
border-radius: 50%; border-radius: 50%;
@ -36,6 +36,7 @@
aspect-ratio: 1/1; aspect-ratio: 1/1;
object-fit: cover; object-fit: cover;
" "
@error="handleAvatarImageError"
/> />
<div <div
style=" style="
@ -61,6 +62,7 @@
<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'
const { locale } = useI18n() const { locale } = useI18n()
@ -78,7 +80,7 @@ const props = defineProps({
maxItems: { maxItems: {
type: Number, type: Number,
default: 6, // 每行最大弹幕数 default: 4, // 每行最大弹幕数
}, },
loopInterval: { loopInterval: {
@ -87,12 +89,9 @@ const props = defineProps({
}, },
}) })
// 弹幕轨道数据 const tracks = ref([[], []]) // 弹幕轨道数据
const tracks = ref([[], []]) const idCounter = ref(0) // 弹幕ID计数器
// 弹幕ID计数器 const currentIndex = ref(0) // 当前播放索引（用于循环）
const idCounter = 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))
@ -104,12 +103,6 @@ const barrageText = (item) => {
: `${item.nickname} won the ${item.prizeName}` : `${item.nickname} won the ${item.prizeName}`
} }
const defaultAvatarUrl = (e) => {
console.log('头像资源出错')
e.target.onerror = null //防止循环
e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
}
// 获取弹幕样式 // 获取弹幕样式
const getBarrageStyle = (item) => { const getBarrageStyle = (item) => {
const isRTL = locale.value === 'ar' const isRTL = locale.value === 'ar'
@ -118,11 +111,11 @@ const getBarrageStyle = (item) => {
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.type != '' ? '0.667px solid #FFF677' : '0.667px solid #77FF87', border: item.prizeType == 'MONEY' ? '0.667px solid #77FF87' : '0.667px solid #FFF677',
background: background:
item.type != '' item.prizeType == 'MONEY'
? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)' ? 'linear-gradient(270deg, rgba(2, 218, 60, 0.60) -16.85%, rgba(0, 124, 54, 0.60) 82.7%)'
: 'linear-gradient(270deg, rgba(2, 218, 60, 0.60) -16.85%, rgba(0, 124, 54, 0.60) 82.7%)', : 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)',
// RTL布局支持 // RTL布局支持
...(isRTL ...(isRTL
? { ? {
@ -142,8 +135,8 @@ const getBarrageStyle = (item) => {
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), duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间
startPos: Math.floor(Math.random() * 21) - 10, startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置
} }
} }
@ -273,7 +266,7 @@ watch(
@media screen and (min-width: 360px) { @media screen and (min-width: 360px) {
* { * {
font-size: 16px; font-size: 14px;
} }
} }