完善弓箭调试和相关组件

src/pages/equipment-debug.vue

@@ -0,0 +1,45 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+import Guide from "@/components/Guide.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import Button from "@/components/Button.vue";
+</script>
+
+<template>
+  <view class="container">
+    <AppBackground />
+    <Header title="弓箭调试" />
+    <Guide>
+      <view class="guide-tips">
+        <text>请预先射几箭测试</text>
+        <text>确保射击距离有5米</text>
+      </view>
+    </Guide>
+    <BowTarget />
+    <view>
+      <text>本次射程5.2米，已达距离要求</text>
+      <Button>准备好了直接开始</Button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+  height: 100vh;
+}
+.container > view:last-child {
+  position: absolute;
+  width: 100%;
+  bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > view:last-child > text {
+  color: #fed847;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+</style>

src/pages/first-try.vue

@@ -2,17 +2,18 @@
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
+import Button from "@/components/Button.vue";
 </script>
 
 <template>
   <view>
     <AppBackground />
     <Header title="新手试炼场" />
-    <Guide
-      title="hi，Rocker，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）"
-    />
+    <Guide>
+      hi，Rocker，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）</Guide
+    >
     <image src="../static/first-try-tip.png" class="try-tip" mode="widthFix" />
-    <button class="start-btn">开始</button>
+    <Button>开始</Button>
   </view>
 </template>
 
@@ -21,13 +22,4 @@ import Guide from "@/components/Guide.vue";
   width: calc(100% - 20px);
   margin: 10px 10px;
 }
-.start-btn {
-  margin: 0 10px;
-  padding: 15px 0;
-  font-weight: bold;
-  width: calc(100% - 20px);
-  background-color: #fed847;
-  font-size: 15px;
-  border-radius: 10px;
-}
 </style>

src/pages/friend-battle.vue

@@ -8,9 +8,12 @@ import Guide from "@/components/Guide.vue";
   <view>
     <AppBackground />
     <Header title="好友约战" />
-    <Guide
-      title="约上朋友开几局，欢乐多，不寂寞，一起练升级更快，早日加入全国排位赛！"
-    />
+    <Guide>
+      <view class="guide-tips">
+        <text>约上朋友开几局，欢乐多，不寂寞</text>
+        <text>一起练升级更快，早日加入全国排位赛！</text>
+      </view>
+    </Guide>
     <view class="founded-room">
       <image src="../static/founded-room.png" mode="widthFix" />
       <view>

src/pages/index.vue

@@ -32,6 +32,12 @@ const toPractisePage = () => {
     url: "/pages/practise",
   });
 };
+
+const toQquipmentPage = () => {
+  uni.navigateTo({
+    url: "/pages/equipment-debug",
+  });
+};
 </script>
 
 <template>
@@ -40,11 +46,9 @@ const toPractisePage = () => {
     <UserHeader showRank />
 
     <view class="container">
-      <!-- 功能区域 -->
       <view class="feature-grid">
-        <!-- 我的弓箭区域 -->
         <view class="bow-card">
-          <image src="../static/bow-bg.png" mode="widthFix" />
+          <image src="../static/bow-bg.png" mode="widthFix" @click="toQquipmentPage" />
           <text>我的弓箭</text>
           <image
             src="../static/a2@2x.png"
@@ -53,18 +57,15 @@ const toPractisePage = () => {
           />
         </view>
 
-        <!-- 个人练习区域 -->
         <view class="practice-card" @click="toPractisePage">
           <image src="../static/a2@2x(1).png" mode="widthFix" />
         </view>
 
-        <!-- 好友约战区域 -->
         <view class="friend-card" @click="toFriendBattlePage">
           <image src="../static/a3@2x.png" mode="widthFix" />
         </view>
       </view>
 
-      <!-- 排位赛区域 -->
       <view class="ranking-section" @click="toRankingPage">
         <image src="../static/a4@2x.png" mode="widthFix" />
         <view class="ranking-players">
@@ -144,14 +145,11 @@ const toPractisePage = () => {
   padding-top: 45px;
 }
 
-/* 用户信息样式 */
-
 .container {
   height: calc(100vh - 220px);
   padding: 20px 10px;
 }
 
-/* 功能区网格样式 */
 .feature-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -197,7 +195,6 @@ const toPractisePage = () => {
   width: 100%;
 }
 
-/* 排位赛区域样式 */
 .ranking-section {
   border-radius: 15px;
   padding: 15px;

src/pages/practise-one.vue

@@ -0,0 +1,13 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+</script>
+
+<template>
+  <view>
+    <AppBackground />
+    <Header title="个人单组练习" />
+  </view>
+</template>
+
+<style scoped></style>

src/pages/practise-two.vue

@@ -0,0 +1,13 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+</script>
+
+<template>
+  <view>
+    <AppBackground />
+    <Header title="个人耐力挑战" />
+  </view>
+</template>
+
+<style scoped></style>

src/pages/practise.vue

@@ -2,19 +2,31 @@
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
+
+const toPractiseOne = () => {
+  uni.navigateTo({
+    url: "/pages/practise-one",
+  });
+};
+
+const toPractiseTwo = () => {
+  uni.navigateTo({
+    url: "/pages/practise-two",
+  });
+};
 </script>
 
 <template>
   <view>
     <AppBackground />
     <Header title="个人练习" />
-    <Guide
-      title="师傅领进门，修行靠自身，赶紧练起来吧。坚持练习就能你快速升级，早日加入全国排位赛！"
-    />
-    <button class="practise1">
+    <Guide>
+      师傅领进门，修行靠自身，赶紧练起来吧。坚持练习就能你快速升级，早日加入全国排位赛！</Guide
+    >
+    <button class="practise1" @click="toPractiseOne">
       <image src="../static/practise1.png" class="practise1" mode="widthFix" />
     </button>
-    <button class="practise2">
+    <button class="practise2" @click="toPractiseTwo">
       <image src="../static/practise2.png" class="practise2" mode="widthFix" />
     </button>
   </view>