UI流程完善

src/App.vue

@@ -52,4 +52,36 @@ button.hover {
 .guide-tips > text:first-child {
   color: #fed847;
 }
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.scale-in {
+  animation: scaleIn 0.3s ease-out forwards;
+  transform-origin: center center;
+}
+
+@keyframes scaleOut {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+.scale-out {
+  animation: scaleOut 0.3s ease-out forwards;
+  transform-origin: center center;
+}
 </style>

src/components/AppBackground.vue

@@ -1,7 +1,18 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  type: {
+    type: Number,
+    default: 0,
+  },
+});
+const bgs = ref(["../static/app-bg.png", "../static/app-bg2.png"]);
+</script>
+
 <template>
   <view class="background">
-    <image class="bg-image" src="../static/app-bg.png" mode="aspectFill" />
-    <view class="bg-overlay"></view>
+    <image class="bg-image" :src="bgs[type]" mode="aspectFill" />
+    <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>
 
@@ -29,6 +40,10 @@
   height: 100%;
   left: 0;
   top: 0;
-  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.8), rgba(0, 0, 0, 0.8));
+  background: linear-gradient(
+    to bottom,
+    rgba(26, 26, 26, 0.8),
+    rgba(0, 0, 0, 0.8)
+  );
 }
-</style>
+</style>

src/components/BowTarget.vue

@@ -1,15 +1,50 @@
-<script setup></script>
+<script setup>
+defineProps({
+  totalRound: {
+    type: Number,
+    default: 0,
+  },
+  currentRound: {
+    type: Number,
+    default: 0,
+  },
+  avatar: {
+    type: String,
+    default: "",
+  },
+  power: {
+    type: Number,
+    default: 0,
+  },
+  tips: {
+    type: String,
+    default: "",
+  },
+  debug: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
 
 <template>
   <view class="container">
     <view class="header">
-      <image src="../static/avatar.png" mode="widthFix" />
+      <text v-if="debug" class="header-tips">大人，请射箭</text>
+      <image v-if="!debug" :src="avatar" mode="widthFix" />
       <view>
         <image src="../static/b-power.png" mode="widthFix" />
-        <view>电量50%</view>
+        <view>电量{{ power }}%</view>
       </view>
+      <text v-if="!tips && totalRound > 0">{{
+        currentRound + "/" + totalRound
+      }}</text>
     </view>
     <image src="../static/bow-target.png" mode="widthFix" />
+    <view v-if="debug" class="footer">
+      <image :src="avatar" mode="widthFix" />
+    </view>
+    <text v-if="tips">{{ tips }}</text>
   </view>
 </template>
 
@@ -17,33 +52,60 @@
 .container {
   position: relative;
   width: calc(100% - 30px);
-  padding: 50px 15px;
+  padding: 15px;
 }
 .container > image {
   width: 100%;
+  padding: 10px 0;
 }
 .header {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: calc(100% - 30px);
+  width: calc(100% - 20px);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 15px;
   font-size: 13px;
+  padding: 0 10px;
 }
-.header > image {
+.header > image:first-child {
   width: 40px;
   height: 40px;
 }
-.header > view {
+.header > view:nth-child(2) {
   display: flex;
   align-items: center;
   color: #b9b9b9;
 }
-.header > view > image {
+.header > view:nth-child(2) > image {
   width: 22px;
   margin-right: 5px;
 }
+.header > text:nth-child(3) {
+  position: absolute;
+  font-size: 20px;
+  color: #fed847;
+  top: 75px;
+  font-size: 16px;
+}
+.header-tips {
+  font-size: 20px;
+  color: #fed847;
+}
+.footer {
+  width: calc(100% - 20px);
+  padding: 0 10px;
+  display: flex;
+  margin-top: -40px;
+}
+.footer > image {
+  width: 40px;
+  height: 40px;
+}
+.container > text {
+  width: 100%;
+  color: #fed847;
+  text-align: center;
+  line-height: 40px;
+  display: block;
+  margin-top: 20px;
+}
 </style>

src/components/Button.vue

@@ -1,23 +0,0 @@
-<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/CoachComment.vue

@@ -0,0 +1,61 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  content: {
+    type: String,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in">
+      <image src="../static/coach-comment.png" mode="widthFix" />
+      <slot />
+    </view>
+    <IconButton
+      src="../static/close-gold-outline.png"
+      width="30"
+      :onClick="onClose"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 70vw;
+  color: #fff;
+  margin-bottom: 25vw;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 80vw;
+  left: -5vw;
+  bottom: -20vw;
+  z-index: -1;
+}
+</style>

src/components/Guide.vue

@@ -1,8 +1,8 @@
 <script setup>
 defineProps({
-  title: {
-    type: String,
-    default: "",
+  tall: {
+    type: Boolean,
+    default: false,
   },
 });
 </script>
@@ -11,7 +11,12 @@ defineProps({
   <view class="container">
     <image src="../static/shooter.png" mode="widthFix" />
     <view>
-      <image src="../static/long-bubble.png" mode="widthFix" />
+      <image
+        :src="
+          tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
+        "
+        mode="widthFix"
+      />
       <slot />
     </view>
   </view>

src/components/IconButton.vue

@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: "",
+  },
+  src: {
+    type: String,
+    default: "",
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  width: {
+    type: Number,
+    default: "22",
+  },
+});
+</script>
+<template>
+  <view class="container" @click="onClick">
+    <image :src="src" mode="widthFix" :style="{ width: width + 'px' }" />
+    <text>{{ name }}</text>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > text {
+  color: #666666;
+  font-size: 12px;
+  margin-top: 5px;
+}
+</style>

src/components/SButton.vue

@@ -0,0 +1,38 @@
+<script setup>
+const props = defineProps({
+  width: {
+    type: String,
+    default: "calc(100vw - 20px)",
+  },
+  rounded: {
+    type: Number,
+    default: 10,
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view
+    class="container"
+    :style="{ width: width, borderRadius: rounded + 'px' }"
+    @click="onClick"
+  >
+    <slot />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  margin: 0 auto;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+  background-color: #fed847;
+  font-size: 15px;
+  text-align: center;
+}
+</style>

src/components/ScorePanel.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const items = ref(new Array(props.total).fill(9));
+</script>
+<template>
+  <view class="container">
+    <view
+      v-for="(_, index) in items"
+      :key="index"
+      class="score-item"
+      :style="{ width: 90 / rowCount + 'vw', height: 90 / rowCount + 'vw' }"
+    >
+      {{ scores[index] }}
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 90vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 5vw;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+</style>

src/components/ScorePanel2.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const getSum = (a, b, c) => {
+  const sum = (Number(a) || 0) + (Number(b) || 0) + (Number(c) || 0);
+  return sum > 0 ? sum + "环" : "-";
+};
+</script>
+<template>
+  <view class="container">
+    <view>
+      <text>总成绩</text>
+      <text>23环</text>
+    </view>
+    <view
+      v-for="(title, index) in ['第一轮', '第二轮', '第三轮']"
+      :key="index"
+      class="score-item"
+    >
+      <text>{{ title }}</text>
+      <text>{{
+        scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
+      }}</text>
+      <text>{{
+        scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
+      }}</text>
+      <text>{{
+        scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
+      }}</text>
+      <text
+        >{{
+          getSum(
+            scores[index * 3 + 0],
+            scores[index * 3 + 1],
+            scores[index * 3 + 2]
+          )
+        }}</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.container > view {
+  width: 100%;
+  color: aliceblue;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #ffffff66;
+  font-size: 14px;
+  color: #fffc;
+}
+.container > view:first-child {
+  color: #fed847;
+  background-color: #ffffff33;
+}
+.container text {
+  display: block;
+  width: 20vw;
+  text-align: center;
+}
+</style>

src/components/ScoreResult.vue

@@ -0,0 +1,155 @@
+<script setup>
+import { ref } from "vue";
+import IconButton from "@/components/IconButton.vue";
+import SButton from "@/components/SButton.vue";
+import CoachComment from "@/components/CoachComment.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const items = ref(new Array(props.total).fill(9));
+const showPanel = ref(true);
+const showComment = ref(false);
+const closePanel = () => {
+  showPanel.value = false;
+  setTimeout(() => {
+    props.onClose();
+  }, 300);
+};
+setTimeout(() => {
+  showPanel.value = true;
+}, 300);
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'block' : 'none' }">
+    <view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
+      <image src="../static/finish-tip.png" mode="widthFix" />
+      <image src="../static/finish-frame.png" mode="widthFix" />
+      <text>完成36箭，获得36点经验</text>
+    </view>
+    <view
+      class="container-content"
+      :style="{ transform: `translateY(${showPanel ? '0%' : '100%'})` }"
+    >
+      <view>
+        <text>本剧成绩（共{{ total }}环）：</text>
+        <button>
+          <text>查看靶纸</text>
+          <image
+            src="../static/enter-arrow-blue.png"
+            mode="widthFix"
+            :style="{ width: '20px' }"
+          />
+        </button>
+      </view>
+      <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
+        <view v-for="(score, index) in items" :key="index">
+          {{ score }}<text>环</text>
+        </view>
+      </view>
+      <view>
+        <IconButton name="分享" src="../static/share.png" />
+        <IconButton
+          name="教练点评"
+          src="../static/review.png"
+          :onClick="() => (showComment = true)"
+        />
+        <SButton width="70vw" :rounded="30" :onClick="closePanel"
+          >下一步</SButton
+        >
+      </view>
+    </view>
+    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
+      您本次练习取得了 环的成绩，所有箭支上靶后的平均点间距为 ，成绩优秀。
+      针对您本次的练习，我们建议您将设备的瞄准器向左侧调整。
+    </CoachComment>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.container-header {
+  margin-top: 20vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0;
+}
+.container-header > text:last-child {
+  color: #fff;
+  text-align: center;
+  margin-top: -100px;
+}
+.container-content {
+  width: calc(100vw - 20px);
+  background-color: #fff;
+  position: absolute;
+  bottom: 0;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 10px;
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+.container-content > view:first-child {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.container-content > view:first-child > button {
+  display: flex;
+  align-items: center;
+  color: #287fff;
+  font-size: 14px;
+}
+.container-content > view:nth-child(2) {
+  display: grid;
+  row-gap: 10px;
+  column-gap: 5px;
+  justify-content: flex-start;
+  margin: 10px 0;
+}
+.container-content > view:nth-child(2) > view {
+  background: linear-gradient(#fbfbfb, #f5f5f5);
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 27px;
+  color: #333333;
+}
+.container-content > view:nth-child(2) > view > text {
+  font-size: 12px;
+  color: #666666;
+  margin-left: 3px;
+}
+.container-content > view:nth-child(3) {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/components/ShootProgress.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, onMounted } from "vue";
+const props = defineProps({
+  tips: {
+    type: String,
+    default: "",
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const remain = ref(0);
+onMounted(() => {
+  remain.value = props.total;
+  setInterval(() => {
+    if (remain.value > 0) {
+      remain.value--;
+    }
+  }, 1000);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <image src="../static/shooter.png" mode="widthFix" />
+      <text>{{ remain === 0 ? "射箭时间到！" : tips }}</text>
+      <button>
+        <image src="../static/sound-yellow.png" mode="widthFix" />
+      </button>
+    </view>
+    <view>
+      <view :style="{ width: `${((total - remain) / total) * 100}%` }" />
+      <text>剩余{{ remain }}秒</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  color: #fed847;
+  z-index: 1;
+}
+.container > view:first-child > image:first-child {
+  width: 80px;
+}
+.container > view:first-child > button:last-child > image {
+  width: 50px;
+}
+.container > view:last-child {
+  z-index: -1;
+  width: clac(100% - 30px);
+  margin: 0 15px;
+  text-align: center;
+  background-color: #ffffff80;
+  border-radius: 20px;
+  margin-top: -14px;
+  font-size: 12px;
+  height: 20px;
+  line-height: 20px;
+  position: relative;
+  transition: all 0.5s linear;
+  overflow: hidden;
+}
+.container > view:last-child > view {
+  position: absolute;
+  height: 20px;
+  background-color: #fed847;
+  border-radius: 20px;
+  z-index: -1;
+}
+.container > view:last-child > text {
+  z-index: 1;
+}
+</style>

src/components/Swiper.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  interval: {
+    type: Number,
+    default: 3000,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const currentIndex = ref(0);
+
+const handleChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+</script>
+
+<template>
+  <view>
+    <swiper
+      class="swiper-container"
+      v-if="data.length > 0"
+      :current="currentIndex"
+      @change="handleChange"
+      :autoplay="autoplay"
+      :interval="interval"
+    >
+      <swiper-item v-for="(imgSrc, index) in data" :key="index">
+        <image :src="imgSrc" mode="widthFix" />
+      </swiper-item>
+    </swiper>
+    <view class="dots">
+      <view
+        v-for="index in data.length"
+        :key="index"
+        class="dot"
+        :class="{ active: currentIndex === index - 1 }"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.swiper-container {
+  width: calc(100% - 20px);
+  margin: 10px;
+  height: 440px;
+  position: relative;
+}
+
+.swiper-container > swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-container image {
+  width: 100%;
+}
+
+.dots {
+  position: absolute;
+  bottom: 27%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.dot.active {
+  background-color: #fff;
+}
+</style>

src/pages/equipment-debug.vue

@@ -3,7 +3,7 @@ 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";
+import Button from "@/components/SButton.vue";
 </script>
 
 <template>
@@ -16,7 +16,7 @@ import Button from "@/components/Button.vue";
         <text>确保射击距离有5米</text>
       </view>
     </Guide>
-    <BowTarget />
+    <BowTarget avatar="../static/avatar.png" power="45" />
     <view>
       <text>本次射程5.2米，已达距离要求</text>
       <Button>准备好了直接开始</Button>

src/pages/first-try.vue

@@ -1,19 +1,120 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
-import Button from "@/components/Button.vue";
+import SButton from "@/components/SButton.vue";
+import Swiper from "@/components/Swiper.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+const scores = ref(new Array(10).fill(9));
+const step = ref(0);
+const stepButtonTexts = [
+  "开始",
+  "进入下一个任务",
+  "进入下一个任务",
+  "我准备好了，开始",
+  "",
+  "退出新手试炼",
+];
+const nextStep = () => {
+  if (step.value === 0) {
+    step.value = 1;
+  } else if (step.value === 1) {
+    step.value = 2;
+  } else if (step.value === 2) {
+    step.value = 3;
+  } else if (step.value === 3) {
+    step.value = 4;
+  } else if (step.value === 5) {
+    uni.navigateBack({
+      delta: 1,
+    });
+  }
+};
+const showScore = ref(false);
+setTimeout(() => {
+  showScore.value = true;
+}, 1000);
+const onClose = () => {
+  showScore.value = false;
+  setTimeout(() => {
+    step.value = 5;
+  }, 500);
+};
 </script>
 
 <template>
   <view>
     <AppBackground />
     <Header title="新手试炼场" />
-    <Guide>
-      hi，Rocker，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）</Guide
-    >
-    <image src="../static/first-try-tip.png" class="try-tip" mode="widthFix" />
-    <Button>开始</Button>
+    <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
+      <text v-if="step === 0">
+        hi，<text :style="{ color: '#fed847' }">Rocker</text>
+        ，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）
+      </text>
+      <text v-if="step === 1"
+        >这是我们人帅技高的高教练。首先，请按教练示范，尝试自己去做这些动作和手势吧。</text
+      >
+      <view v-if="step === 2">
+        <text :style="{ color: '#fed847' }">你知道5米射程有多远吗？</text>
+        <text>
+          在我们的排位赛中，射程小于5米的成绩无效、哦！建议平时练习距离至少5米。现在，来边射箭边调整你的站位点吧！
+        </text>
+      </view>
+      <view v-if="step === 3">
+        <text :style="{ color: '#fed847' }">一切准备就绪</text>
+        <text>试着完成一个真正的弓箭手任务吧！</text>
+      </view>
+      <view v-if="step === 5">
+        <text :style="{ color: '#fed847' }">新手试炼场通关啦，优秀！</text>
+        <text
+          >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
+        >
+      </view>
+    </Guide>
+    <image
+      src="../static/first-try-tip.png"
+      class="try-tip"
+      mode="widthFix"
+      v-if="step === 0 || step === 5"
+    />
+    <view style="height: 450px" v-if="step === 1">
+      <Swiper
+        :data="[
+          '../static/first-try-tip.png',
+          '../static/first-try-tip.png',
+          '../static/first-try-tip.png',
+        ]"
+      />
+    </view>
+    <ShootProgress v-if="step === 4" tips="请开始连续射箭" total="10" />
+    <BowTarget
+      avatar="../static/avatar.png"
+      power="45"
+      :debug="step === 2"
+      v-if="step === 2 || step === 4"
+      :tips="step === 4 ? '' : '本次射程5.2米，已达到距离要求'"
+    />
+    <ScorePanel v-if="step === 4" :scores="scores" :total="12" :rowCount="6" />
+    <ScoreResult
+      :total="12"
+      :rowCount="6"
+      :show="showScore"
+      v-if="step === 4"
+      :onClose="onClose"
+    />
+    <image
+      src="../static/first-try-tip.png"
+      class="try-tip"
+      mode="widthFix"
+      v-if="step === 3"
+    />
+    <SButton v-if="step !== 4" :onClick="nextStep">{{
+      stepButtonTexts[step]
+    }}</SButton>
   </view>
 </template>
 

src/pages/friend-battle.vue

@@ -2,6 +2,7 @@
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
+import SButton from "@/components/SButton.vue";
 </script>
 
 <template>
@@ -30,7 +31,9 @@ import Guide from "@/components/Guide.vue";
           <image src="../static/question-mark.png" mode="widthFix" />
         </view>
       </view>
-      <button>创建约战房</button>
+      <view>
+        <SButton width="70%" :rounded="30">创建约战房</SButton>
+      </view>
     </view>
   </view>
 </template>
@@ -74,6 +77,7 @@ import Guide from "@/components/Guide.vue";
   font-size: 14px;
   padding: 3px 0;
   font-weight: bold;
+  color: #000;
 }
 .create-room {
   position: relative;
@@ -111,13 +115,7 @@ import Guide from "@/components/Guide.vue";
 .create-room > view > view:nth-child(3) > image {
   width: 40%;
 }
-.create-room > button {
-  background-color: #fed847;
-  border-radius: 30px;
-  margin: 0 auto;
-  width: 70%;
-  font-size: 15px;
+.create-room > view:last-child {
   transform: translateY(-110%);
-  padding: 15px 0;
 }
 </style>

src/pages/practise-one.vue

@@ -1,13 +1,34 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel2 from "@/components/ScorePanel2.vue";
+const showScore = ref(false);
+
+setTimeout(() => {
+  showScore.value = true;
+}, 2000);
 </script>
 
 <template>
-  <view>
-    <AppBackground />
+  <view class="container">
+    <AppBackground type="1" />
     <Header title="个人单组练习" />
+    <ShootProgress tips="请连续射箭36支" total="120" />
+    <BowTarget
+      totalRound="10"
+      currentRound="4"
+      avatar="../static/avatar.png"
+      power="45"
+    />
+    <ScorePanel2 :scores="[1, 2, 3, 4, 5, 6]" />
   </view>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  position: relative;
+}
+</style>

src/pages/practise-two.vue

@@ -1,13 +1,42 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
+const scores = ref(new Array(32).fill(9));
+const showScore = ref(false);
+
+setTimeout(() => {
+  showScore.value = true;
+}, 2000);
 </script>
 
 <template>
-  <view>
+  <view class="container">
     <AppBackground />
     <Header title="个人耐力挑战" />
+    <ShootProgress tips="请连续射箭36支" total="120" />
+    <BowTarget
+      totalRound="10"
+      currentRound="4"
+      avatar="../static/avatar.png"
+      power="45"
+    />
+    <ScorePanel :scores="scores" :total="36" :rowCount="9" />
+    <ScoreResult
+      :total="36"
+      :rowCount="9"
+      :show="showScore"
+      :onClose="() => (showScore = false)"
+    />
   </view>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  position: relative;
+}
+</style>

src/pages/practise.vue

@@ -23,12 +23,12 @@ const toPractiseTwo = () => {
     <Guide>
       师傅领进门，修行靠自身，赶紧练起来吧。坚持练习就能你快速升级，早日加入全国排位赛！</Guide
     >
-    <button class="practise1" @click="toPractiseOne">
+    <view class="practise1" @click="toPractiseOne">
       <image src="../static/practise1.png" class="practise1" mode="widthFix" />
-    </button>
-    <button class="practise2" @click="toPractiseTwo">
+    </view>
+    <view class="practise2" @click="toPractiseTwo">
       <image src="../static/practise2.png" class="practise2" mode="widthFix" />
-    </button>
+    </view>
   </view>
 </template>