update:vip完成

src/components/BowTarget.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  isSvip: {
+    type: Boolean,
+    default: false,
+  },
   mode: {
     type: String,
     default: "solo", // solo 单排，team 双排
@@ -79,7 +83,7 @@ function buildShotEffectKey(team, shot, index) {
 }
 
 function shouldPlayShotEffect(shot) {
-  return !!shot && Number(shot.ring) > 0;
+  return props.isSvip && !!shot && Number(shot.ring) > 0;
 }
 
 function clearTipTimer() {
@@ -272,6 +276,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(
@@ -404,6 +417,13 @@ onBeforeUnmount(() => {
         }}<text v-if="bluelatestOne.ring">环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
+        <image
+          v-if="pMode && isSvip && bow.ring > 0 && !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 ${
@@ -417,6 +437,13 @@ onBeforeUnmount(() => {
         >
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
+        <image
+          v-if="pMode && isSvip && bow.ring > 0 && !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 ${
@@ -528,17 +555,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;
@@ -554,6 +590,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);