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: () => [],
  },
  margin: {
    type: Number,
    default: 4,
  },
  fontSize: {
    type: Number,
    default: 25,
  },
});
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: 100 / (rowCount + 2) + 'vw',
        height: 100 / (rowCount + 2) + 'vw',
        lineHeight: 100 / (rowCount + 2) + 'vw',
        fontSize: fontSize + 'px',
        margin: margin + 'px',
      }"
    >
      <image src="../static/score-bg.png" mode="widthFix" />
      <text>{{ scores[index] }}</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 90vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  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;
  position: relative;
}
.score-item > image {
  position: absolute;
  width: 100%;
  top: 5%;
}
.score-item > text {
  position: relative;
}
</style>