UI调整

src/components/TestDistance.vue

@@ -15,12 +15,33 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isBattle: {
+    type: Boolean,
+    default: false,
+  },
 });
 const arrow = ref({});
 const power = ref(0);
 const distance = ref(0);
 const debugInfo = ref("");
 const showsimul = ref(false);
+const count = ref(15);
+const timer = ref(null);
+
+const updateTimer = (value) => {
+  count.value = Math.round(value);
+};
+onMounted(() => {
+  timer.value = setInterval(() => {
+    if (count.value > 0) count.value -= 1;
+    else clearInterval(timer.value);
+  }, 1000);
+  uni.$on("update-timer", updateTimer);
+});
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+  uni.$off("update-timer", updateTimer);
+});
 
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
@@ -52,7 +73,7 @@ onUnmounted(() => {
 
 <template>
   <view class="container">
-    <Guide v-if="guide">
+    <Guide v-show="guide">
       <view
         :style="{
           display: 'flex',
@@ -67,34 +88,41 @@ onUnmounted(() => {
         </view>
       </view>
     </Guide>
-    <view class="user-row">
-      <Avatar :src="user.avatar" :size="35" />
-      <BowPower :power="power" />
-    </view>
-    <image
-      class="text-bg"
-      src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
-      mode="widthFix"
-    />
-    <view class="warnning-text">
-      <block v-if="distance > 0">
-        <text>当前距离{{ distance }}米</text>
-        <text v-if="distance >= 5">已达到距离要求</text>
-        <text v-else>请调整站位</text>
-      </block>
-      <block v-else>
-        <text>请射箭，测试站距</text>
-      </block>
-    </view>
-    <!-- <view class="debug-text">{{ debugInfo }}</view> -->
-    <view>
-      <view
+    <view class="test-area">
+      <image
+        class="text-bg"
+        src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
+        mode="widthFix"
+      />
+      <button
         class="simul"
         @click="simulShoot"
-        :style="{ color: '#fff' }"
+        hover-class="none"
         v-if="showsimul"
       >
         模拟射箭
+      </button>
+      <view class="warnning-text">
+        <block v-if="distance > 0">
+          <text>当前距离{{ distance }}米</text>
+          <text v-if="distance >= 5">已达到距离要求</text>
+          <text v-else>请调整站位</text>
+        </block>
+        <block v-else>
+          <text>请射箭，测试站距</text>
+        </block>
+      </view>
+      <view class="user-row">
+        <Avatar :src="user.avatar" :size="35" />
+        <BowPower :power="power" />
+      </view>
+    </view>
+    <view v-if="isBattle" class="ready-timer">
+      <image src="../static/test-tip.png" mode="widthFix" />
+      <view>
+        <text>具体正式比赛还有</text>
+        <text>{{ count }}</text>
+        <text>秒</text>
       </view>
     </view>
   </view>
@@ -103,41 +131,69 @@ onUnmounted(() => {
 <style scoped>
 .container {
   width: 100vw;
-  display: flex;
-  flex-direction: column;
+  max-height: 70vh;
 }
-.text-bg {
-  width: 100%;
-  transform: translateY(-50px);
-}
-.warnning-text {
-  position: absolute;
-  color: #fed847;
-  font-size: 30px;
+.ready-timer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 54vw;
-  left: calc(50% - 27vw);
-  top: 34%;
+  transform: translateY(-10vw);
+}
+.ready-timer > image:first-child {
+  width: 40%;
+}
+.ready-timer > view {
+  width: 80%;
+  height: 45px;
+  background-color: #545454;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(-8vw);
+  color: #bebebe;
+  font-size: 15px;
+}
+.ready-timer > view > text:nth-child(2) {
+  color: #fed847;
+  font-size: 20px;
+  width: 22px;
+  text-align: center;
+}
+.test-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 112vw;
+  position: relative;
+}
+.test-area > view:last-child {
+  padding: 15px;
+  width: calc(100% - 30px);
+}
+.text-bg {
+  width: 100%;
+  position: absolute;
+  top: -14.4%;
+  left: 0;
+}
+.warnning-text {
+  color: #fed847;
+  font-size: 27px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 40%;
 }
 .warnning-text > text {
   width: 70vw;
   text-align: center;
 }
-.container > view:last-child {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  margin-top: -40vw;
-  position: relative;
-}
-.debug-text {
-  position: fixed;
-  left: calc(50% - 45vw);
-  top: 66%;
+.simul {
+  position: absolute;
   color: #fff;
-  font-size: 14px;
+  right: 10px;
 }
 </style>