shoot-miniprograms/src/components/ScorePanel.vue

<script setup>
import { ref, watch } 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));
watch(
  () => props.total,
  (newValue) => {
    items.value = new Array(newValue).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>