页面优化

src/components/BowTarget.vue

@@ -75,7 +75,7 @@ function calcRealY(num) {
 <style scoped>
 .container {
   width: calc(100% - 30px);
-  margin: 15px;
+  padding: 15px;
   overflow: hidden;
 }
 .target {

src/components/Container.vue

@@ -26,11 +26,12 @@ defineProps({
 <style scoped>
 .content {
   width: 100%;
-  height: calc(100vh - 96px);
+  height: calc(100vh - 116px);
   overflow: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 10px;
 }
 </style>

src/components/Guide.vue

@@ -33,15 +33,14 @@ defineProps({
   display: flex;
   align-items: center;
   padding: 0 15px;
-  width: 100%;
+  width: clac(100% - 30px);
 }
 .container > image {
   width: 20%;
 }
 .container > view {
   position: relative;
-  width: 75%;
-  padding-right: 25px;
+  width: 80%;
   min-height: 55px;
   display: flex;
   flex-direction: column;
@@ -49,7 +48,7 @@ defineProps({
 .container > view > image {
   position: absolute;
   left: -7%;
-  width: 98%;
+  width: 108%;
 }
 .container > view {
   color: #fff;

src/components/ScoreResult.vue

@@ -97,7 +97,7 @@ setTimeout(() => {
           :onClick="() => (showComment = true)"
         />
         <SButton width="70vw" :rounded="30" :onClick="closePanel"
-          >下一步</SButton
+          >完成</SButton
         >
       </view>
     </view>

src/pages/battle-room.vue

@@ -117,7 +117,7 @@ onUnmounted(() => {
     <view v-if="step === 3">
       <ShootProgress tips="请红队射箭-第一轮" />
       <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget :power="45" :currentRound="1" :totalRound="3" debug />
+      <BowTarget :power="45" :currentRound="1" :totalRound="3" />
       <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
     </view>
   </Container>

src/pages/first-try.vue

@@ -194,11 +194,9 @@ const onClose = () => {
         :result="practiseResult"
       />
     </view>
-    <view :style="{ marginBottom: '25px' }">
-      <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
-        stepButtonTexts[step]
-      }}</SButton>
-    </view>
+    <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
+      stepButtonTexts[step]
+    }}</SButton>
   </Container>
 </template>
 

src/pages/practise-one.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel2 from "@/components/ScorePanel2.vue";
@@ -24,7 +23,7 @@ const onReady = async () => {
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
-    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+    if (start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
       power.value = msg.target.battery;
       if (scores.value.length === total) {
@@ -40,6 +39,11 @@ async function onReceiveMessage(content) {
   });
 }
 
+function onComplete() {
+  uni.navigateBack();
+  showScore.value = false;
+}
+
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -50,39 +54,35 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground :type="1" />
-    <Header title="个人单组练习" />
-    <ShootProgress
-      :tips="`${
-        scores.length === 12
-          ? ''
-          : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
-      }`"
-      :start="start"
-      :total="120"
-    />
-    <BowTarget
-      :totalRound="total"
-      :currentRound="scores.length + 1"
-      avatar="../static/avatar.png"
-      :power="power"
-      :scores="scores"
-    />
-    <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
-    <ScoreResult
-      :total="total"
-      :rowCount="6"
-      :show="showScore"
-      :onClose="() => (showScore = false)"
-      :result="practiseResult"
-    />
+  <Container :bgType="1" title="个人单组练习">
+    <view>
+      <ShootProgress
+        :tips="`${
+          scores.length === 12
+            ? ''
+            : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
+        }`"
+        :start="start"
+        :total="120"
+      />
+      <BowTarget
+        :totalRound="total"
+        :currentRound="scores.length + 1"
+        avatar="../static/avatar.png"
+        :power="power"
+        :scores="scores"
+      />
+      <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
+      <ScoreResult
+        :total="total"
+        :rowCount="6"
+        :show="showScore"
+        :onClose="onComplete"
+        :result="practiseResult"
+      />
+    </view>
     <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-  </view>
+  </Container>
 </template>
 
-<style scoped>
-.container {
-  position: relative;
-}
-</style>
+<style scoped></style>

src/pages/practise-two.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+import Container from "@/components/Container.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel from "@/components/ScorePanel.vue";
@@ -24,7 +23,7 @@ const onReady = async () => {
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
-    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+    if (start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
       if (scores.value.length === total) {
         showScore.value = true;
@@ -39,6 +38,11 @@ async function onReceiveMessage(content) {
   });
 }
 
+function onComplete() {
+  uni.navigateBack();
+  showScore.value = false;
+}
+
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -49,36 +53,32 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground :type="1" />
-    <Header title="个人耐力挑战" />
-    <ShootProgress :tips="`请连续射箭${total}支`" :total="120" />
-    <BowTarget
-      :totalRound="total"
-      :currentRound="scores.length + 1"
-      avatar="../static/avatar.png"
-      :power="power"
-      :scores="scores"
-    />
-    <ScorePanel
-      v-if="start"
-      :scores="scores.map((s) => s.ring)"
-      :total="total"
-      :rowCount="total / 4"
-    />
-    <ScoreResult
-      :total="total"
-      :rowCount="9"
-      :show="showScore"
-      :onClose="() => (showScore = false)"
-      :result="practiseResult"
-    />
+  <Container :bgType="1" title="个人单组练习">
+    <view>
+      <ShootProgress :tips="`请连续射箭${total}支`" :total="120" />
+      <BowTarget
+        :totalRound="total"
+        :currentRound="scores.length + 1"
+        avatar="../static/avatar.png"
+        :power="power"
+        :scores="scores"
+      />
+      <ScorePanel
+        v-if="start"
+        :scores="scores.map((s) => s.ring)"
+        :total="total"
+        :rowCount="total / 4"
+      />
+      <ScoreResult
+        :total="total"
+        :rowCount="9"
+        :show="showScore"
+        :onClose="onComplete"
+        :result="practiseResult"
+      />
+    </view>
     <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
-  </view>
+  </Container>
 </template>
 
-<style scoped>
-.container {
-  position: relative;
-}
-</style>
+<style scoped></style>