UI优化

src/components/ScoreResult.vue

@@ -22,6 +22,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  tipSrc: {
+    type: String,
+    default: "",
+  },
 });
 const showPanel = ref(true);
 const showComment = ref(false);
@@ -40,7 +44,7 @@ setTimeout(() => {
 <template>
   <view v-if="result.arrows && result.arrows.length > 0" class="container">
     <view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
-      <image src="../static/finish-tip.png" mode="widthFix" />
+      <image :src="tipSrc" mode="widthFix" />
       <image src="../static/finish-frame.png" mode="widthFix" />
       <text
         >完成<text class="gold-text">{{ total }}</text

src/components/ShootProgress.vue

@@ -24,9 +24,9 @@ const props = defineProps({
 });
 
 const barColor = ref("#fed847");
-
 const remain = ref(props.total);
 const timer = ref(null);
+const sound = ref(true);
 
 watch(
   () => props.tips,
@@ -87,8 +87,11 @@ onUnmounted(() => {
     <view>
       <image src="../static/shooter.png" mode="widthFix" />
       <text>{{ remain === 0 ? "射箭时间到！" : tips }}</text>
-      <button>
-        <image src="../static/sound-yellow.png" mode="widthFix" />
+      <button hover-class="none" @click="() => (sound = !sound)">
+        <image
+          :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
+          mode="widthFix"
+        />
       </button>
     </view>
     <view>

src/pages/first-try.vue

@@ -227,6 +227,7 @@ const onClose = () => {
         :rowCount="6"
         :onClose="onClose"
         :result="practiseResult"
+        tipSrc="../static/first-try-finish-tip.png"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
     </view>

src/pages/practise-one.vue

@@ -106,6 +106,7 @@ onUnmounted(() => {
         :rowCount="6"
         :onClose="onComplete"
         :result="practiseResult"
+        tipSrc="../static/finish-tip.png"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
     </view>

src/pages/practise-two.vue

@@ -113,6 +113,7 @@ onUnmounted(() => {
         :rowCount="9"
         :onClose="onComplete"
         :result="practiseResult"
+        tipSrc="../static/finish-tip.png"
       />
       <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
     </view>