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

src/views/Activities/NewYear/components/Barrage.vue

@@ -26,9 +26,9 @@
         @animationend="handleAnimationEnd(item.id)"
       >
         <img
-          :src="item.avatar"
+          v-smart-img
+          :src="item.avatar || ''"
           alt=""
-          @error="defaultAvatarUrl"
           style="
             width: 10vw;
             border-radius: 50%;
@@ -36,6 +36,7 @@
             aspect-ratio: 1/1;
             object-fit: cover;
           "
+          @error="handleAvatarImageError"
         />
         <div
           style="
@@ -61,6 +62,7 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
 
 const { locale } = useI18n()
 
@@ -78,7 +80,7 @@ const props = defineProps({
 
   maxItems: {
     type: Number,
-    default: 6, // 每行最大弹幕数
+    default: 4, // 每行最大弹幕数
   },
 
   loopInterval: {
@@ -87,12 +89,9 @@ const props = defineProps({
   },
 })
 
-// 弹幕轨道数据
-const tracks = ref([[], []])
-// 弹幕ID计数器
-const idCounter = ref(0)
-// 当前播放索引（用于循环）
-const currentIndex = ref(0)
+const tracks = ref([[], []]) // 弹幕轨道数据
+const idCounter = ref(0) // 弹幕ID计数器
+const currentIndex = ref(0) // 当前播放索引（用于循环）
 
 // 计算实际显示的轨道（过滤空轨道）
 const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
@@ -104,12 +103,6 @@ const barrageText = (item) => {
     : `${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 isRTL = locale.value === 'ar'
@@ -118,11 +111,11 @@ const getBarrageStyle = (item) => {
     animationDuration: `${item.duration}s`,
     animationDelay: `${item.delay}s`,
     '--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:
-      item.type != ''
-        ? '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%)',
+      item.prizeType == 'MONEY'
+        ? '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布局支持
     ...(isRTL
       ? {
@@ -142,8 +135,8 @@ const getBarrageStyle = (item) => {
 const generateBarrageProps = (item) => {
   const textLength = barrageText(item).length
   return {
-    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed),
-    startPos: Math.floor(Math.random() * 21) - 10,
+    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间
+    startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置
   }
 }
 
@@ -273,7 +266,7 @@ watch(
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 14px;
   }
 }