UI调整

src/components/BowTarget.vue

@@ -90,9 +90,7 @@ function calcRealY(num) {
         class="e-value fade-in"
         >经验 +1</view
       >
-      <view
-        v-if="scores.length && showRoundTips && scores[scores.length - 1].ring"
-        class="round-tip fade-in"
+      <view v-if="scores.length && showRoundTips" class="round-tip fade-in"
         >{{ scores[scores.length - 1].ring }}<text>环</text></view
       >
       <image

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>

src/components/ShootProgress.vue

@@ -95,6 +95,7 @@ watch(
   padding: 0 15px;
   color: #fed847;
   z-index: 1;
+  transform: translateX(-10px);
 }
 .container > view:first-child > image:first-child {
   width: 80px;

src/pages/practise-one.vue

@@ -6,6 +6,8 @@ import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel2 from "@/components/ScorePanel2.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
+import Avatar from "@/components/Avatar.vue";
+import BowPower from "@/components/BowPower.vue";
 import { createPractiseAPI } from "@/apis";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
@@ -16,8 +18,9 @@ const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
 const total = 12;
+const currentRound = ref(0);
 const practiseResult = ref({});
-const power = ref(0);
+const power = ref(10);
 
 const onReady = async () => {
   await createPractiseAPI(total);
@@ -30,6 +33,10 @@ async function onReceiveMessage(content) {
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
+      currentRound.value += 1;
+      if (currentRound.value === 4) {
+        currentRound.value = 1;
+      }
       power.value = msg.target.battery;
       if (scores.value.length === total) {
         showScore.value = true;
@@ -65,16 +72,18 @@ onUnmounted(() => {
         :tips="`${
           !start || scores.length === 12
             ? ''
-            : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
+            : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 3)]}轮`
         }`"
         :start="start"
         :total="120"
       />
+      <view class="infos">
+        <Avatar :src="user.avatarUrl" :size="35" />
+        <BowPower :power="power" />
+      </view>
       <BowTarget
-        :totalRound="total"
-        :currentRound="start ? scores.length + 1 : 0"
-        :avatar="user.avatarUrl"
-        :power="power"
+        :totalRound="total / 4"
+        :currentRound="currentRound"
         :scores="scores"
         :tips="
           !start && scores.length > 0
@@ -99,4 +108,12 @@ onUnmounted(() => {
   </Container>
 </template>
 
-<style scoped></style>
+<style scoped>
+.infos {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  padding-top: 15px;
+}
+</style>