73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
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>
|