shoot-miniprograms/src/components/ScorePanel2.vue

<script setup>
const props = defineProps({
  scores: {
    type: Array,
    default: () => [],
  },
});
const getSum = (a, b, c) => {
  const sum = (Number(a) || 0) + (Number(b) || 0) + (Number(c) || 0);
  return sum > 0 ? sum + "环" : "-";
};
const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
</script>
<template>
  <view class="container">
    <view>
      <text :style="{ transform: 'translateX(-10%)' }">总成绩</text>
      <text>{{ scores.reduce((last, next) => last + next, 0) }}环</text>
    </view>
    <view
      v-for="(_, index) in new Array(Math.ceil(scores.length / 3)).fill(1)"
      :key="index"
      class="score-item"
    >
      <text>{{ roundsName[index] }}</text>
      <text>{{
        scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
      }}</text>
      <text>{{
        scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
      }}</text>
      <text>{{
        scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
      }}</text>
      <text :style="{ width: '40%', transform: 'translateX(20%)' }">{{
        getSum(
          scores[index * 3 + 0],
          scores[index * 3 + 1],
          scores[index * 3 + 2]
        )
      }}</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.container > view {
  width: calc(100% - 30px);
  color: aliceblue;
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #ffffff66;
  font-size: 14px;
  color: #fffc;
}
.container > view:first-child {
  color: #fed847;
  background-color: #ffffff33;
}
.container text {
  display: block;
  width: 20%;
  text-align: center;
}
</style>