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 + "环" : "-";
};
</script>
<template>
  <view class="container">
    <view>
      <text>总成绩</text>
      <text>{{ scores.reduce((last, next) => last + next, 0) }}环</text>
    </view>
    <view
      v-for="(title, index) in ['第一轮', '第二轮', '第三轮']"
      :key="index"
      class="score-item"
    >
      <text>{{ title }}</text>
      <text>{{
        scores[index * 4 + 0] ? scores[index * 4 + 0] + "环" : "-"
      }}</text>
      <text>{{
        scores[index * 4 + 1] ? scores[index * 4 + 1] + "环" : "-"
      }}</text>
      <text>{{
        scores[index * 4 + 2] ? scores[index * 4 + 2] + "环" : "-"
      }}</text>
      <text>{{
        scores[index * 4 + 3] ? scores[index * 4 + 3] + "环" : "-"
      }}</text>
      <text>{{
        getSum(
          scores[index * 4 + 0],
          scores[index * 4 + 1],
          scores[index * 4 + 2],
          scores[index * 4 + 3]
        )
      }}</text>
    </view>
  </view>
</template>

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