UI流程完善

src/components/ScorePanel2.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref } from "vue";
+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>23环</text>
+    </view>
+    <view
+      v-for="(title, index) in ['第一轮', '第二轮', '第三轮']"
+      :key="index"
+      class="score-item"
+    >
+      <text>{{ title }}</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
+        >{{
+          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: 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>