页面优化

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>
   </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,9 +54,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground :type="1" />
-    <Header title="个人单组练习" />
+  <Container :bgType="1" title="个人单组练习">
+    <view>
       <ShootProgress
         :tips="`${
           scores.length === 12
@@ -74,15 +77,12 @@ onUnmounted(() => {
         :total="total"
         :rowCount="6"
         :show="showScore"
-      :onClose="() => (showScore = false)"
+        :onClose="onComplete"
         :result="practiseResult"
       />
-    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
     </view>
+    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+  </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,9 +53,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground :type="1" />
-    <Header title="个人耐力挑战" />
+  <Container :bgType="1" title="个人单组练习">
+    <view>
       <ShootProgress :tips="`请连续射箭${total}支`" :total="120" />
       <BowTarget
         :totalRound="total"
@@ -70,15 +73,12 @@ onUnmounted(() => {
         :total="total"
         :rowCount="9"
         :show="showScore"
-      :onClose="() => (showScore = false)"
+        :onClose="onComplete"
         :result="practiseResult"
       />
-    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
     </view>
+    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+  </Container>
 </template>
 
-<style scoped>
-.container {
-  position: relative;
-}
-</style>
+<style scoped></style>