细节修改

2025-12-30 18:10:31 +08:00
parent 44913a6f2e
commit 910530748d
7 changed files with 270 additions and 72 deletions
--- a/src/components/BowTarget.vue
+++ b/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;
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -59,14 +59,19 @@ const hideGlobalHint = () => {
  showHint.value = false;
 };

+const restart = () => {
+  uni.restartMiniProgram({
+    path: "/pages/index",
+  });
+};
+
 const checkAudioProgress = async () => {
  return new Promise((resolve, reject) => {
    try {
      audioInitProgress.value = AudioManager.getLoadProgress();
      if (audioInitProgress.value === 1) return resolve();
      audioTimer.value = setInterval(() => {
-        const result = AudioManager.getLoadProgress();
-        audioProgress.value = result;
+        audioProgress.value = AudioManager.getLoadProgress();
        if (audioProgress.value === 1) {
          setTimeout(() => {
            audioInitProgress.value = 1;
@@ -220,17 +225,15 @@ const goCalibration = async () => {
      />
      <view>
        <view :style="{ width: `${audioFinalProgress * 100}%` }">
-          <image
+          <!-- <image
            src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
            mode="widthFix"
-          />
+          /> -->
        </view>
      </view>
      <view>
        <text>若加载时间过长，请</text>
-        <button hover-class="none" @click="AudioManager.reloadAll">
-          点击这里重启
-        </button>
+        <button hover-class="none" @click="restart">点击这里重启</button>
      </view>
    </view>
  </view>
@@ -290,7 +293,7 @@ const goCalibration = async () => {
  position: fixed;
  top: 0;
  left: 0;
-  background: rgb(0 0 0 / 0.6);
+  background: rgb(0 0 0 / 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -304,7 +307,7 @@ const goCalibration = async () => {
 .audio-progress > view:nth-child(2) {
  width: 380rpx;
  height: 6rpx;
-  background: #000000;
+  background: #595959;
  border-radius: 4rpx;
  display: flex;
  flex-direction: column;
@@ -328,7 +331,6 @@ const goCalibration = async () => {
  display: flex;
  align-items: center;
  justify-content: center;
-  margin-top: 20rpx;
 }
 .audio-progress > view:nth-child(3) > text {
  font-size: 22rpx;
@@ -340,5 +342,6 @@ const goCalibration = async () => {
  font-size: 22rpx;
  color: #ffe431;
  line-height: 32rpx;
+  padding: 20rpx 0;
 }
 </style>
--- a/src/components/PlayerScore.vue
+++ b/src/components/PlayerScore.vue
@@ -1,30 +1,34 @@
 <script setup>
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const { user } = storeToRefs(useStore());
+
 defineProps({
-  avatar: {
-    type: String,
-    default: "",
-  },
-  name: {
-    type: String,
-    default: "",
+  player: {
+    type: Object,
+    default: () => ({}),
  },
  scores: {
    type: Array,
    default: () => [],
  },
 });
+
 const rowCount = new Array(6).fill(0);
 </script>

 <template>
-  <view class="container">
+  <view
+    class="container"
+    :style="{ borderColor: player.id === user.id ? '#FED847' : '#fff3' }"
+  >
    <image
      :style="{ opacity: scores.length === 12 ? 1 : 0 }"
      src="../static/checked-green.png"
      mode="widthFix"
    />
-    <image :src="avatar || '../static/user-icon.png'" mode="widthFix" />
-    <text>{{ name }}</text>
+    <image :src="player.avatar || '../static/user-icon.png'" mode="widthFix" />
+    <text>{{ player.name }}</text>
    <view>
      <view>
        <view v-for="(_, index) in rowCount" :key="index">
--- a/src/components/PointSwitcher.vue
+++ b/src/components/PointSwitcher.vue
@@ -0,0 +1,70 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const mode = ref(true);
+
+const onClick = () => {
+  mode.value = !mode.value;
+  props.onChange(mode.value);
+};
+</script>
+
+<template>
+  <view
+    class="point-switcher"
+    :style="{ borderColor: mode ? '#D8D8D8' : '#53EF56' }"
+  >
+    <view
+      @click="onClick"
+      :style="{ transform: 'translateX(' + (mode ? '-58' : '2') + 'rpx)' }"
+    >
+      <text>放大</text>
+      <view :style="{ background: mode ? '#D8D8D8' : '#53EF56' }"></view>
+      <text>真实</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.point-switcher {
+  width: 100rpx;
+  height: 40rpx;
+  border-radius: 22rpx;
+  border: 2rpx solid;
+  display: flex;
+  overflow: hidden;
+}
+.point-switcher > view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  line-height: 40rpx;
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 20rpx;
+  word-break: keep-all;
+  padding: 0 12rpx;
+  transition: all 0.3s ease;
+}
+.point-switcher > view > text:first-child {
+  color: #53ef56;
+}
+.point-switcher > view > view {
+  width: 36rpx;
+  height: 36rpx;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  margin: 0 10rpx;
+  transition: all 0.3s ease;
+}
+.point-switcher > view > text:last-child {
+  color: #d8d8d8;
+}
+</style>