个人练习流程优化

src/components/ScorePanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   rowCount: {
     type: Number,
@@ -13,25 +13,54 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  margin: {
-    type: Number,
-    default: 4,
-  },
   fontSize: {
     type: Number,
     default: 25,
   },
 });
 const items = ref(new Array(props.total).fill(9));
+const width = ref(92);
+const itemWidth = ref(0);
+const bgImages = [
+  "../static/complete-light1.png",
+  "../static/complete-light2.png",
+];
+const bgIndex = ref(0);
 watch(
   () => props.total,
   (newValue) => {
     items.value = new Array(newValue).fill(9);
   }
 );
+const timer = ref(null);
+onMounted(() => {
+  timer.value = setInterval(() => {
+    bgIndex.value = bgIndex.value === 0 ? 1 : 0;
+  }, 500);
+});
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+  }
+});
 </script>
 <template>
   <view class="container">
+    <image
+      v-if="total > 0 && scores.length === total"
+      :src="bgImages[bgIndex]"
+      class="complete-light"
+      :style="{
+        width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
+          (100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
+        }px)`,
+        height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
+          (100 / (total * 2)) *
+          ((total / rowCount) * 2 + (total === 12 ? 7 : 24))
+        }px)`,
+        top: `${total === 12 ? -2 : -3}vw`,
+      }"
+    />
     <view
       v-for="(_, index) in items"
       :key="index"
@@ -41,7 +70,7 @@ watch(
         height: 100 / (rowCount + 2) + 'vw',
         lineHeight: 100 / (rowCount + 2) + 'vw',
         fontSize: fontSize + 'px',
-        margin: margin + 'px',
+        margin: 100 / (total * 2) + 'px',
       }"
     >
       <image src="../static/score-bg.png" mode="widthFix" />
@@ -52,11 +81,13 @@ watch(
 
 <style scoped>
 .container {
-  width: 90vw;
+  width: 92vw;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0 5vw;
+  position: relative;
+  padding: 1vw 0;
 }
 .score-item {
   /* background-image: url("../static/score-bg.png");
@@ -77,4 +108,7 @@ watch(
 .score-item > text {
   position: relative;
 }
+.complete-light {
+  position: absolute;
+}
 </style>