update:vip完成

src/pages/team-battle/components/BowTarget.vue

@@ -35,6 +35,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
   latestShotFlash: {
     type: Object,
     default: null,
@@ -92,8 +100,17 @@ function buildShotEffectKey(team, shot, fallbackKey = "") {
   );
 }
 
-function shouldPlayShotEffect(shot) {
-  return !!shot && Number(shot.ring) > 0;
+function findShotPlayer(shot, team) {
+  const players = team === "red" ? props.redTeam : props.blueTeam;
+  return players.find((player) => String(player?.id) === String(shot?.playerId));
+}
+
+function isSvipShot(shot, team) {
+  return findShotPlayer(shot, team)?.sVip === true;
+}
+
+function shouldPlayShotEffect(shot, team) {
+  return !!shot && Number(shot.ring) > 0 && isSvipShot(shot, team);
 }
 
 function clearTipTimer() {
@@ -204,7 +221,7 @@ function showShotFlash(flash) {
   }
 
   const team = flash.team === "red" ? "red" : "blue";
-  if (shouldPlayShotEffect(shootData)) {
+  if (shouldPlayShotEffect(shootData, team)) {
     triggerShotEffect(team, shootData, flash.key);
     return;
   }
@@ -310,6 +327,15 @@ function getHitStyle(shot) {
   };
 }
 
+function getSvipHitBgStyle(shot) {
+  const radius = currentHitRadiusPx.value;
+  const point = getShotPoint(shot);
+
+  return {
+    ...getTargetPositionStyle(point, radius),
+  };
+}
+
 function getRoundTipStyle(shot) {
   const point = getShotPoint(shot, true);
   return getTargetPositionStyle(
@@ -445,6 +471,18 @@ onBeforeUnmount(() => {
         }}<text v-if="bluelatestOne.ring">环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
+        <image
+          v-if="
+            pMode &&
+            bow.ring > 0 &&
+            isSvipShot(bow, 'red') &&
+            !shouldHideRedHit(index)
+          "
+          class="svip-hit-bg"
+          src="../../../static/vip/svip-xuan.png"
+          :style="getSvipHitBgStyle(bow)"
+          mode="aspectFit"
+        />
         <view
           v-if="bow.ring > 0 && !shouldHideRedHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
@@ -458,6 +496,18 @@ onBeforeUnmount(() => {
         >
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
+        <image
+          v-if="
+            pMode &&
+            bow.ring > 0 &&
+            isSvipShot(bow, 'blue') &&
+            !shouldHideBlueHit(index)
+          "
+          class="svip-hit-bg"
+          src="../../../static/vip/svip-xuan.png"
+          :style="getSvipHitBgStyle(bow)"
+          mode="aspectFit"
+        />
         <view
           v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
@@ -572,17 +622,26 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
 }
+.svip-hit-bg {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  z-index: 1;
+  pointer-events: none;
+  transform-origin: center center;
+  animation: svip-hit-xuan 1.2s linear infinite;
+}
 .hit {
   position: absolute;
   border-radius: 50%;
-  z-index: 1;
+  z-index: 2;
   color: #fff;
   transition: transform 0.2s ease, opacity 0.2s ease;
   box-sizing: border-box;
 }
 .b-point {
   border: 1px solid #fff;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -598,6 +657,20 @@ onBeforeUnmount(() => {
   transform: translate(-50%, -50%);*/
   margin-top: 2rpx;
 }
+@keyframes svip-hit-xuan {
+  0% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
+  }
+}
 @keyframes target-pump-in {
   from {
     transform: translate(-50%, -50%) scale(2);