1v1流程调试完成

src/components/Timer.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  seq: {
+    type: Number,
+    default: 0,
+  },
+  countdown: {
+    type: Number,
+    default: 15,
+  },
+  callBack: {
+    type: Function,
+    default: () => {},
+  },
+});
+const show = ref(false);
+const count = ref(0);
+const timer = ref(null);
+watch(
+  () => props.seq,
+  () => {
+    if (props.seq > 0) {
+      if(show.value) return;
+      if (timer.value) clearInterval(timer.value);
+      count.value = props.countdown;
+      show.value = true;
+      timer.value = setInterval(() => {
+        if (count.value === 0) {
+          show.value = false;
+          clearInterval(timer.value);
+          props.callBack();
+        } else {
+          count.value -= 1;
+        }
+      }, 1000);
+    } else {
+      if (timer.value) clearInterval(timer.value);
+      show.value = false;
+    }
+  }
+);
+</script>
+
+<template>
+  <view
+    class="container"
+    :style="{ transform: `translateX(${show ? '0' : '100'}%)` }"
+  >
+    <view>距离正式比赛</view>
+    <view>
+      <text>开始还有</text>
+      <text>{{ count }}</text>
+      <text>秒</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  transform: translateX(100%);
+  position: fixed;
+  bottom: 20%;
+  right: 0;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: #fff9;
+  font-size: 14px;
+  padding: 10px;
+  background-color: #00000066;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.container > view {
+  display: flex;
+  align-items: center;
+}
+.container > view:last-child > text:nth-child(2) {
+  color: #fed847;
+  font-size: 16px;
+  width: 16px;
+  text-align: center;
+}
+</style>