77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<script setup>
|
|
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
|
const props = defineProps({
|
|
countdown: {
|
|
type: Number,
|
|
default: 15,
|
|
},
|
|
});
|
|
const show = ref(false);
|
|
const count = ref(props.countdown);
|
|
const timer = ref(null);
|
|
const updateTimer = (value) => {
|
|
count.value = Math.round(value);
|
|
};
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
show.value = true;
|
|
timer.value = setInterval(() => {
|
|
if (count.value === 0) {
|
|
show.value = false;
|
|
clearInterval(timer.value);
|
|
} else {
|
|
count.value -= 1;
|
|
}
|
|
}, 1000);
|
|
}, 300);
|
|
uni.$on("update-timer", updateTimer);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (timer.value) clearInterval(timer.value);
|
|
uni.$off("update-timer", updateTimer);
|
|
});
|
|
</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: 18px;
|
|
text-align: center;
|
|
}
|
|
</style>
|