完善弓箭调试和相关组件

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 {