UI调整

src/components/ScorePanel2.vue

@@ -9,37 +9,34 @@ 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>总成绩</text>
+      <text :style="{ transform: 'translateX(-10%)' }">总成绩</text>
       <text>{{ scores.reduce((last, next) => last + next, 0) }}环</text>
     </view>
     <view
-      v-for="(title, index) in ['第一轮', '第二轮', '第三轮']"
+      v-for="(_, index) in new Array(Math.ceil(scores.length / 3)).fill(1)"
       :key="index"
       class="score-item"
     >
-      <text>{{ title }}</text>
+      <text>{{ roundsName[index] }}</text>
       <text>{{
-        scores[index * 4 + 0] ? scores[index * 4 + 0] + "环" : "-"
+        scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
       }}</text>
       <text>{{
-        scores[index * 4 + 1] ? scores[index * 4 + 1] + "环" : "-"
+        scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
       }}</text>
       <text>{{
-        scores[index * 4 + 2] ? scores[index * 4 + 2] + "环" : "-"
+        scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
       }}</text>
-      <text>{{
-        scores[index * 4 + 3] ? scores[index * 4 + 3] + "环" : "-"
-      }}</text>
-      <text>{{
+      <text :style="{ width: '40%', transform: 'translateX(20%)' }">{{
         getSum(
-          scores[index * 4 + 0],
-          scores[index * 4 + 1],
-          scores[index * 4 + 2],
-          scores[index * 4 + 3]
+          scores[index * 3 + 0],
+          scores[index * 3 + 1],
+          scores[index * 3 + 2]
         )
       }}</text>
     </view>
@@ -54,11 +51,11 @@ const getSum = (a, b, c) => {
   justify-content: flex-start;
 }
 .container > view {
-  width: 100%;
+  width: calc(100% - 30px);
   color: aliceblue;
   display: flex;
   justify-content: space-between;
-  padding: 12px 0;
+  padding: 12px 15px;
   border-bottom: 1px solid #ffffff66;
   font-size: 14px;
   color: #fffc;
@@ -69,7 +66,7 @@ const getSum = (a, b, c) => {
 }
 .container text {
   display: block;
-  width: 20vw;
+  width: 20%;
   text-align: center;
 }
 </style>