UI流程完善

src/components/ScorePanel.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const items = ref(new Array(props.total).fill(9));
+</script>
+<template>
+  <view class="container">
+    <view
+      v-for="(_, index) in items"
+      :key="index"
+      class="score-item"
+      :style="{ width: 90 / rowCount + 'vw', height: 90 / rowCount + 'vw' }"
+    >
+      {{ scores[index] }}
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 90vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 5vw;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+</style>