完善弓箭调试和相关组件

src/App.vue

@@ -5,6 +5,12 @@ onLaunch(() => {});
 </script>
 
 <style>
+page {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 button {
   margin: 0;
   padding: 0;
@@ -13,15 +19,37 @@ button {
   line-height: 1;
   outline: none;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent; /* 添加这行，去除点击高亮 */
 }
 
-/* 去除按钮点击时的默认效果 */
 button::after {
   border: none;
 }
 
-/* 去除按钮的默认边框 */
+/* 修改点击态样式 */
+button:active {
+  border: none;
+  background: none !important; /* 添加 !important 确保覆盖默认样式 */
+  opacity: 1 !important; /* 防止透明度变化 */
+}
+
+/* 去除按钮的默认边框和点击效果 */
 button[plain] {
   border: none;
+  background: none !important;
+}
+
+/* 去除点击态的所有效果 */
+button:hover,
+button.hover {
+  background: none !important;
+}
+
+.guide-tips {
+  display: flex;
+  flex-direction: column;
+}
+.guide-tips > text:first-child {
+  color: #fed847;
 }
 </style>

src/components/BowTarget.vue

@@ -0,0 +1,49 @@
+<script setup></script>
+
+<template>
+  <view class="container">
+    <view class="header">
+      <image src="../static/avatar.png" mode="widthFix" />
+      <view>
+        <image src="../static/b-power.png" mode="widthFix" />
+        <view>电量50%</view>
+      </view>
+    </view>
+    <image src="../static/bow-target.png" mode="widthFix" />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+  width: calc(100% - 30px);
+  padding: 50px 15px;
+}
+.container > image {
+  width: 100%;
+}
+.header {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: calc(100% - 30px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 15px;
+  font-size: 13px;
+}
+.header > image {
+  width: 40px;
+  height: 40px;
+}
+.header > view {
+  display: flex;
+  align-items: center;
+  color: #b9b9b9;
+}
+.header > view > image {
+  width: 22px;
+  margin-right: 5px;
+}
+</style>

src/components/Button.vue

@@ -0,0 +1,23 @@
+<script setup>
+</script>
+<template>
+  <view class="container">
+    <button><slot /></button>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+}
+.container > button {
+  margin: 0 auto;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+  width: calc(100% - 20px);
+  background-color: #fed847;
+  font-size: 15px;
+  border-radius: 10px;
+}
+</style>

src/components/Guide.vue

@@ -12,7 +12,7 @@ defineProps({
     <image src="../static/shooter.png" mode="widthFix" />
     <view>
       <image src="../static/long-bubble.png" mode="widthFix" />
-      <text>{{ title }}</text>
+      <slot />
     </view>
   </view>
 </template>
@@ -22,21 +22,25 @@ defineProps({
   display: flex;
   align-items: center;
   padding: 0 15px;
+  width: 100vw;
 }
 .container > image {
-  width: 40vw;
+  width: 20%;
 }
 .container > view {
   position: relative;
+  width: 80%;
+  padding-right: 22px;
+  min-height: 55px;
 }
 .container > view > image {
   position: absolute;
-  top: -10%;
+  top: -14%;
   left: -7%;
-  width: 75vw;
+  width: 100%;
 }
-.container > view > text {
+.container > view {
   color: #fff;
-  font-size: 13px;
+  font-size: 14px;
 }
 </style>

src/components/UserHeader.vue

@@ -35,7 +35,7 @@ const toUserPage = () => {
     </view>
     <view class="user-details">
       <view class="user-name">
-        <text>{{ containerWidth }}</text>
+        <text>{{ userInfo.name }}</text>
         <image src="../static/vip1.png" mode="widthFix" />
       </view>
       <view class="user-stats">
@@ -101,7 +101,7 @@ const toUserPage = () => {
 
 .user-name > image {
   margin-left: 5px;
-  width: 24px;
+  width: 20px;
 }
 
 .user-stats {

src/pages.json

@@ -24,6 +24,18 @@
         "navigationBarTitleText": "个人练习"
       }
     },
+    {
+      "path": "pages/practise-one",
+      "style": {
+        "navigationBarTitleText": "个人单组练习"
+      }
+    },
+    {
+      "path": "pages/practise-two",
+      "style": {
+        "navigationBarTitleText": "个人耐力挑战"
+      }
+    },
     {
       "path": "pages/friend-battle",
       "style": {
@@ -35,6 +47,12 @@
       "style": {
         "navigationBarTitleText": "排行榜"
       }
+    },
+    {
+      "path": "pages/equipment-debug",
+      "style": {
+        "navigationBarTitleText": "弓箭调试"
+      }
     }
   ],
   "globalStyle": {

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>