UI优化

src/components/ScorePanel.vue

@@ -13,6 +13,14 @@ 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));
 watch(
@@ -28,7 +36,12 @@ watch(
       v-for="(_, index) in items"
       :key="index"
       class="score-item"
-      :style="{ width: 90 / rowCount + 'vw', height: 90 / rowCount + 'vw' }"
+      :style="{
+        width: 100 / (rowCount + 2) + 'vw',
+        height: 100 / (rowCount + 2) + 'vw',
+        fontSize: fontSize + 'px',
+        margin: margin + 'px',
+      }"
     >
       {{ scores[index] }}
     </view>
@@ -40,7 +53,7 @@ watch(
   width: 90vw;
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: center;
   margin: 0 5vw;
 }
 .score-item {
@@ -52,6 +65,5 @@ watch(
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 20px;
 }
 </style>

src/pages/practise-two.vue

@@ -85,6 +85,8 @@ onUnmounted(() => {
         :scores="scores.map((s) => s.ring)"
         :total="total"
         :rowCount="total / 4"
+        :margin="1.5"
+        :font-size="20"
       />
       <ScoreResult
         :total="total"