细节修改

src/components/BowTarget.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
-import StartCountdown from "@/components/StartCountdown.vue";
+// import StartCountdown from "@/components/StartCountdown.vue";
+import PointSwitcher from "@/components/PointSwitcher.vue";
+
 import { MESSAGETYPES } from "@/constants";
 import { simulShootAPI } from "@/apis";
 import useStore from "@/store";
@@ -17,10 +19,6 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  avatar: {
-    type: String,
-    default: "",
-  },
   scores: {
     type: Array,
     default: () => [],
@@ -43,6 +41,7 @@ const props = defineProps({
   },
 });
 
+const pMode = ref(true);
 const latestOne = ref(null);
 const bluelatestOne = ref(null);
 const prevScores = ref([]);
@@ -217,36 +216,36 @@ onBeforeUnmount(() => {
       <block v-for="(bow, index) in scores" :key="index">
         <view
           v-if="bow.ring > 0"
-          :class="`hit ${
+          :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === scores.length - 1 && latestOne ? 'pump-in' : ''
           }`"
           :style="{
-            left: calcRealX(bow.x),
-            top: calcRealY(bow.y),
+            left: calcRealX(bow.x, pMode ? '3.4' : '2'),
+            top: calcRealY(bow.y, pMode ? '3.4' : '2'),
             backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
           }"
-          ><text>{{ index + 1 }}</text></view
+          ><text v-if="pMode">{{ index + 1 }}</text></view
         >
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
         <view
           v-if="bow.ring > 0"
-          :class="`hit ${
+          :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
           }`"
           :style="{
-            left: calcRealX(bow.x),
-            top: calcRealY(bow.y),
+            left: calcRealX(bow.x, pMode ? '3.4' : '2'),
+            top: calcRealY(bow.y, pMode ? '3.4' : '2'),
             backgroundColor: '#1840FF',
           }"
         >
-          <text>{{ index + 1 }}</text>
+          <text v-if="pMode">{{ index + 1 }}</text>
         </view>
       </block>
       <image src="../static/bow-target.png" mode="widthFix" />
     </view>
-    <view v-if="avatar" class="footer">
-      <image :src="avatar" mode="widthFix" />
+    <view class="footer">
+      <PointSwitcher :onChange="(val) => (pMode = val)" />
     </view>
     <view class="simul" v-if="env !== 'release'">
       <button @click="simulShoot">模拟</button>
@@ -271,11 +270,10 @@ onBeforeUnmount(() => {
   margin: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 20px);
+  z-index: -1;
 }
 .e-value {
   position: absolute;
-  /* top: 30%;
-  left: 60%; */
   background-color: #0006;
   color: #fff;
   font-size: 12px;
@@ -287,8 +285,6 @@ onBeforeUnmount(() => {
 }
 .round-tip {
   position: absolute;
-  /* top: 38%; */
-  /* left: 60%; */
   color: #fff;
   font-size: 30px;
   font-weight: bold;
@@ -306,30 +302,39 @@ onBeforeUnmount(() => {
 }
 .hit {
   position: absolute;
+  border-radius: 50%;
+  z-index: 1;
+  color: #fff;
+  transition: all 0.3s ease;
+}
+.s-point {
+  width: 4px;
+  height: 4px;
+  min-width: 4px;
+  min-height: 4px;
+}
+.b-point {
   width: 10px;
   height: 10px;
   min-width: 10px;
   min-height: 10px;
-  border-radius: 50%;
   border: 1px solid #fff;
   z-index: 1;
-  color: #fff;
   box-sizing: border-box;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.hit > text {
+.b-point > text {
   font-size: 16rpx;
-  font-family: "DINCondensed", "PingFang SC", "Helvetica Neue", Arial,
-    sans-serif;
-  text-align: center;
+  color: #fff;
+  font-family: "DINCondensed";
+  /* text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  margin-top: 1px;
+  transform: translate(-50%, -50%);*/
+  margin-top: 2rpx;
 }
 .header {
   width: 100%;
@@ -353,6 +358,7 @@ onBeforeUnmount(() => {
   padding: 0 10px;
   display: flex;
   margin-top: -40px;
+  justify-content: flex-end;
 }
 .footer > image {
   width: 40px;
@@ -363,7 +369,7 @@ onBeforeUnmount(() => {
 }
 .simul {
   position: absolute;
-  bottom: 40px;
+  top: 0;
   right: 20px;
   margin-left: 20px;
   z-index: 999;