UI细节调整

src/components/Avatar.vue

@@ -21,15 +21,10 @@ defineProps({
     default: 45,
   },
   borderColor: {
-    type: Number,
-    default: 0,
+    type: String,
+    default: "",
   },
 });
-const borderColors = {
-  0: "#fff",
-  1: "#64BAFF",
-  2: "#FF6767",
-};
 </script>
 
 <template>
@@ -70,7 +65,7 @@ const borderColors = {
         width: size + 'px',
         height: size + 'px',
         minHeight: size + 'px',
-        borderColor: borderColors[borderColor],
+        borderColor: borderColor || '#fff',
       }"
       class="avatar-image"
     />

src/components/BowTarget.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
 import BowPower from "@/components/BowPower.vue";
+import StartCountdown from "@/components/StartCountdown.vue";
 import { simulShootAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -28,10 +29,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  debug: {
-    type: Boolean,
-    default: false,
-  },
   scores: {
     type: Array,
     default: () => [],
@@ -52,12 +49,29 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  start: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const showRoundTips = ref(false);
+const startCount = ref(false);
 const prevLength = ref(0);
 const timer = ref(null);
 
+watch(
+  () => props.start,
+  (newVal) => {
+    if (newVal) {
+      startCount.value = true;
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
 watch(
   () => props.scores,
   (newVal) => {
@@ -90,8 +104,7 @@ const simulShoot = async () => {
 
 <template>
   <view class="container">
-    <view class="header" v-if="debug || totalRound > 0 || power">
-      <text v-if="debug" class="header-tips">大人，请射箭</text>
+    <view class="header" v-if="totalRound > 0 || power">
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
         "/" +
@@ -150,6 +163,7 @@ const simulShoot = async () => {
     <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
       模拟射箭
     </view>
+    <StartCountdown :start="startCount" />
   </view>
 </template>
 
@@ -162,7 +176,7 @@ const simulShoot = async () => {
 }
 .target {
   position: relative;
-  padding: 5px;
+  padding: 10px;
 }
 .e-value {
   position: absolute;
@@ -212,10 +226,6 @@ const simulShoot = async () => {
   color: #fed847;
   top: 75px;
 }
-.header-tips {
-  font-size: 20px;
-  color: #fed847;
-}
 .footer {
   width: calc(100% - 20px);
   padding: 0 10px;

src/components/Header.vue

@@ -29,7 +29,24 @@ onMounted(() => {
     <view class="back-btn" @click="onClick">
       <image src="../static/back.png" mode="widthFix" />
     </view>
-    <text>{{ title }}</text>
+    <view>
+      <block v-if="'凹造型，感知距离，小试牛刀'.indexOf(title) === -1">
+        <text>{{ title }}</text>
+      </block>
+      <block v-else>
+        <view class="first-try-steps">
+          <text :class="title === '凹造型' ? 'current-step' : ''">凹造型</text>
+          <text>—</text>
+          <text :class="title === '感知距离' ? 'current-step' : ''"
+            >感知距离</text
+          >
+          <text>—</text>
+          <text :class="title === '小试牛刀' ? 'current-step' : ''"
+            >小试牛刀</text
+          >
+        </view>
+      </block>
+    </view>
   </view>
 </template>
 
@@ -42,6 +59,8 @@ onMounted(() => {
   height: 60px;
   /* margin-top: var(--status-bar-height); */
   padding-left: 15px;
+  color: #fff;
+  font-size: 16px;
 }
 .back-btn {
   display: flex;
@@ -52,7 +71,21 @@ onMounted(() => {
   height: 22px;
   margin-right: 10px;
 }
-.container > text {
+.first-try-steps {
+  display: flex;
+  align-items: center;
+  color: #fff6;
+  font-size: 14px;
+}
+.first-try-steps > text {
+  transition: all 0.3s ease;
+}
+.first-try-steps > text:nth-child(2),
+.first-try-steps > text:nth-child(4) {
+  margin: 0 5px;
+}
+.current-step {
+  font-size: 16px;
   color: #fff;
 }
 </style>

src/components/ShootProgress.vue

@@ -57,18 +57,23 @@ watch(
     if (newVal === false) {
       if (timer.value) clearInterval(timer.value);
     }
-    if (oldVal === false && newVal === true) {
-      remain.value = props.total;
-      timer.value = setInterval(() => {
-        if (remain.value > 0) {
-          remain.value--;
-        } else {
-          props.onTimeIsUp();
-        }
-      }, 1000);
+    if (!oldVal && newVal === true) {
+      setTimeout(() => {
+        remain.value = props.total;
+        timer.value = setInterval(() => {
+          if (remain.value > 0) {
+            remain.value--;
+          } else {
+            props.onTimeIsUp();
+          }
+        }, 1000);
+      }, 3000);
     } else {
       if (timer.value) clearInterval(timer.value);
     }
+  },
+  {
+    immediate: true,
   }
 );
 

src/components/StartCountdown.vue

@@ -5,10 +5,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  onFinish: {
-    type: Function,
-    default: () => {},
-  },
 });
 
 const count = ref(4);
@@ -20,7 +16,6 @@ watch(
       if (timer.value) clearInterval(timer.value);
       timer.value = setInterval(() => {
         if (count.value <= 1) {
-          props.onFinish();
           clearInterval(timer.value);
         }
         count.value -= 1;
@@ -46,8 +41,8 @@ onUnmounted(() => {
 
 <style scoped>
 .container {
-  position: fixed;
-  top: 120px;
+  position: absolute;
+  top: calc(50% - 50px);
   left: calc(50% - 30px);
 }
 .number {

src/components/UserHeader.vue

@@ -136,7 +136,7 @@ watch(
 
 .user-name > text:first-child {
   font-size: 13px;
-  max-width: 100px;
+  max-width: 180rpx;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -176,8 +176,7 @@ watch(
 .rank-tag {
   position: relative;
   background-color: #00000038;
-  width: 50px;
-  height: 16px;
+  width: 100rpx;
 }
 
 .rank-tag-progress {
@@ -200,7 +199,7 @@ watch(
   position: relative;
   color: #b3b3b3;
   padding-left: 8px;
-  margin-left: 8px;
+  margin-left: 15rpx;
   display: flex;
   flex-direction: column;
 }