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

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

@@ -1,57 +1,32 @@
 <!-- Barrage.vue 优化版 -->
 <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"
-      :style="{ top: `calc(${index} * 16vw)` }"
-    >
-      <div
-        v-for="item in track"
-        :key="item.id"
-        class="barrage-item"
-        style="
+    <div v-for="(track, index) in visibleTracks" :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;
-          border-radius: 48px;
+          border-radius: 26px;
           padding: 4px;
           display: flex;
           align-items: center;
           gap: 4px;
-        "
-        :style="getBarrageStyle(item)"
-        @animationend="handleAnimationEnd(item.id)"
-      >
-        <img
-          v-smart-img
-          :src="item.avatar || ''"
-          alt=""
-          style="
+          backdrop-filter: blur(1px);
+        " :style="getBarrageStyle(item)" @animationend="handleAnimationEnd(item.id)">
+        <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"
-        />
-        <div
-          style="
+          " @error="handleAvatarImageError" />
+        <div style="
             font-weight: 700;
             background-clip: text;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-          "
-          :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%)',
-          }"
-        >
+            background-image: linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)
+          ">
           {{ barrageText(item) }}
         </div>
       </div>
@@ -112,11 +87,11 @@ const getBarrageStyle = (item) => {
       animationDuration: `${item.duration}s`,
       animationDelay: `${item.delay}s`,
       '--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:
         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%)',
+          ? '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%)',
       // RTL布局支持
       ...(isRTL
         ? {
@@ -228,6 +203,7 @@ watch(
 </script>
 
 <style scoped>
+
   /* 样式保持不变（同之前版本） */
   .barrage-item {
     will-change: transform;
@@ -238,6 +214,7 @@ watch(
     0% {
       transform: translateX(100vw);
     }
+
     100% {
       transform: translateX(-100%);
     }
@@ -252,6 +229,7 @@ watch(
     0% {
       transform: translateX(-100vw);
     }
+
     100% {
       transform: translateX(100%);
     }