UI完善

src/components/BowTarget.vue

@@ -59,12 +59,11 @@ defineProps({
   padding: 10px 0;
 }
 .header {
-  width: calc(100% - 20px);
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 13px;
-  padding: 0 10px;
 }
 .header > image:first-child {
   width: 40px;

src/components/Guide.vue

@@ -15,6 +15,7 @@ defineProps({
         :src="
           tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
         "
+        :style="{ top: tall ? '-9%' : '-14%' }"
         mode="widthFix"
       />
       <slot />
@@ -35,12 +36,13 @@ defineProps({
 .container > view {
   position: relative;
   width: 80%;
-  padding-right: 22px;
+  padding-right: 25px;
   min-height: 55px;
+  display: flex;
+  flex-direction: column;
 }
 .container > view > image {
   position: absolute;
-  top: -14%;
   left: -7%;
   width: 100%;
 }

src/pages/equipment-debug.vue

@@ -8,7 +8,7 @@ import Button from "@/components/SButton.vue";
 
 <template>
   <view class="container">
-    <AppBackground />
+    <AppBackground type="1" />
     <Header title="弓箭调试" />
     <Guide>
       <view class="guide-tips">
@@ -16,9 +16,12 @@ import Button from "@/components/SButton.vue";
         <text>确保射击距离有5米</text>
       </view>
     </Guide>
-    <BowTarget avatar="../static/avatar.png" power="45" />
+    <BowTarget
+      avatar="../static/avatar.png"
+      power="45"
+      tips="本次射程5.2米，已达距离要求"
+    />
     <view>
-      <text>本次射程5.2米，已达距离要求</text>
       <Button>准备好了直接开始</Button>
     </view>
   </view>
@@ -37,9 +40,4 @@ import Button from "@/components/SButton.vue";
   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

@@ -48,7 +48,7 @@ const onClose = () => {
 
 <template>
   <view>
-    <AppBackground />
+    <AppBackground type="1" />
     <Header title="新手试炼场" />
     <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
       <text v-if="step === 0">

src/pages/practise-two.vue

@@ -16,7 +16,7 @@ setTimeout(() => {
 
 <template>
   <view class="container">
-    <AppBackground />
+    <AppBackground type="1" />
     <Header title="个人耐力挑战" />
     <ShootProgress tips="请连续射箭36支" total="120" />
     <BowTarget

src/pages/practise.vue

@@ -21,8 +21,10 @@ const toPractiseTwo = () => {
     <AppBackground />
     <Header title="个人练习" />
     <Guide>
-      师傅领进门，修行靠自身，赶紧练起来吧。坚持练习就能你快速升级，早日加入全国排位赛！</Guide
-    >
+      <text :style="{ color: '#fed847' }">师傅领进门，修行靠自身，赶紧练起来吧。</text
+      >
+      <text :style="{ fontSize: '12px' }">坚持练习就能你快速升级，早日加入全国排位赛！</text>
+    </Guide>
     <view class="practise1" @click="toPractiseOne">
       <image src="../static/practise1.png" class="practise1" mode="widthFix" />
     </view>

src/pages/ranking.vue

@@ -11,7 +11,7 @@ const handleSelect = (index) => {
 </script>
 
 <template>
-  <view>
+  <view class="container">
     <AppBackground />
     <Header title="排行赛" />
     <view class="ranking-my-data">
@@ -105,6 +105,9 @@ const handleSelect = (index) => {
 </template>
 
 <style scoped>
+.container {
+  padding-bottom: 15px;
+}
 .ranking-my-data,
 .ranking-data {
   display: flex;