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

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

@@ -1,57 +1,32 @@
 <!-- Barrage.vue 优化版 -->
 <template>
-  <div
+  <div style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none">
-    style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
-  >
     <!-- 双行弹幕轨道 -->
-    <div
+    <div v-for="(track, index) in visibleTracks" :key="index" style="position: absolute; width: 100%; height: 50px"
-      v-for="(track, index) in visibleTracks"
+      :style="{ top: `calc(${index} * 16vw)` }">
-      :key="index"
+      <div v-for="item in track" :key="item.id" class="barrage-item" style="
-      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;
-          border-radius: 48px;
+          border-radius: 26px;
           padding: 4px;
           display: flex;
           align-items: center;
           gap: 4px;
-        "
+          backdrop-filter: blur(1px);
-        :style="getBarrageStyle(item)"
+        " :style="getBarrageStyle(item)" @animationend="handleAnimationEnd(item.id)">
-        @animationend="handleAnimationEnd(item.id)"
+        <img v-smart-img :src="item.avatar || ''" alt="" style="
-      >
-        <img
-          v-smart-img
-          :src="item.avatar || ''"
-          alt=""
-          style="
             width: 10vw;
             border-radius: 50%;
             display: block;
             aspect-ratio: 1/1;
             object-fit: cover;
-          "
+          " @error="handleAvatarImageError" />
-          @error="handleAvatarImageError"
+        <div style="
-        />
-        <div
-          style="
             font-weight: 700;
             background-clip: text;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-          "
+            background-image: linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)
-          :style="{
+          ">
-            backgroundImage:
-              item.type != ''
-                ? '-webkit-linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
-                : '-webkit-linear-gradient(180deg, #A9FFA9 26.92%, #0AED47 52.08%, #B5FFC5 73.08%)',
-          }"
-        >
           {{ barrageText(item) }}
         </div>
       </div>
@@ -60,224 +35,227 @@
 </template>
 
 <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' ? '0.667px solid #77FF87' : '0.667px solid #FFF677',
+      border: item.prizeType == 'MONEY' ? '1px solid #FFF1B2' : '1px solid #BAD0FF',
-    background:
+      background:
-      item.prizeType == 'MONEY'
+        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(255, 222, 77, 0.65) 0%, rgba(117, 95, 0, 0.20) 93.75%)'
-        : 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)',
+          : 'linear-gradient(270deg, rgba(103, 152, 255, 0.65) 0%, rgba(32, 77, 173, 0.20) 93.75%)',
-    // RTL布局支持
+      // RTL布局支持
-    ...(isRTL
+      ...(isRTL
-      ? {
+        ? {
           right: '0',
           left: 'auto',
           transform: 'translateX(-100vw)',
         }
-      : {
+        : {
           left: '0',
           right: 'auto',
           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) {
+    if (tracks.value[trackIndex].length < props.maxItems) {
-    tracks.value[trackIndex].push({
+      tracks.value[trackIndex].push({
-      ...item,
+        ...item,
-      id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
+        id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
-      delay: Math.random() * 4, // 随机延迟（0-4秒）
+        delay: Math.random() * 4, // 随机延迟（0-4秒）
-      ...generateBarrageProps(item),
+        ...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 cleanCompleted = () => {
+  const handleAnimationEnd = (id) => {
-  tracks.value.forEach((track) => {
+    tracks.value.forEach((track) => {
-    for (let i = track.length - 1; i >= 0; i--) {
+      const item = track.find((item) => item.id === id)
-      if (track[i].completed) {
+      if (item) item.completed = true
-        track.splice(i, 1)
+    })
+  }
+
+  // 获取下一项弹幕（循环逻辑）
+  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(() => {
-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) {
+  watch(
-      startBarrage() // 重启弹幕循环
+    () => props.barrageList,
-    }
+    (newList) => {
-  },
+      currentIndex.value = 0 // 重置索引，确保重新开始循环
-  { deep: true }
+      clearInterval(barrageInterval) // 清空弹幕
-)
+
+      // 如果列表为空，停止生成新弹幕
+      if (newList.length !== 0) {
+        startBarrage() // 重启弹幕循环
+      }
+    },
+    { deep: true }
+  )
 </script>
 
 <style scoped>
-/* 样式保持不变（同之前版本） */
-.barrage-item {
-  will-change: transform;
-  animation: moveLeft linear forwards;
-}
 
-@keyframes moveLeft {
+  /* 样式保持不变（同之前版本） */
-  0% {
+  .barrage-item {
-    transform: translateX(100vw);
+    will-change: transform;
+    animation: moveLeft linear forwards;
   }
-  100% {
-    transform: translateX(-100%);
-  }
-}
 
-/* RTL支持 - 镜像弹幕动画 */
+  @keyframes moveLeft {
-[dir='rtl'] .barrage-item {
+    0% {
-  animation: moveRight linear forwards;
+      transform: translateX(100vw);
-}
+    }
 
-@keyframes moveRight {
+    100% {
-  0% {
+      transform: translateX(-100%);
-    transform: translateX(-100vw);
+    }
   }
-  100% {
-    transform: translateX(100%);
-  }
-}
 
-@media screen and (max-width: 360px) {
+  /* RTL支持 - 镜像弹幕动画 */
-  * {
+  [dir='rtl'] .barrage-item {
-    font-size: 10px;
+    animation: moveRight linear forwards;
   }
-}
 
-@media screen and (min-width: 360px) {
+  @keyframes moveRight {
-  * {
+    0% {
-    font-size: 14px;
+      transform: translateX(-100vw);
-  }
+    }
-}
 
-@media screen and (min-width: 768px) {
+    100% {
-  * {
+      transform: translateX(100%);
-    font-size: 24px;
+    }
   }
-}
 
-@media screen and (min-width: 1024px) {
+  @media screen and (max-width: 360px) {
-  * {
+    * {
-    font-size: 32px;
+      font-size: 10px;
+    }
+  }
+
+  @media screen and (min-width: 360px) {
+    * {
+      font-size: 14px;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    * {
+      font-size: 24px;
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    * {
+      font-size: 32px;
+    }
   }
-}
 </style>