51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
|
<script setup>
|
||
|
|
import {ref} from "vue";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
|
||
|
|
const {time} = defineProps({
|
||
|
|
time: {
|
||
|
|
type: String,
|
||
|
|
default: '2025-03-28 10:10:00',
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const diff = ref(dayjs(time).diff(dayjs(new Date()), 'second'));
|
||
|
|
const hours = ref(null);
|
||
|
|
const minutes = ref(null);
|
||
|
|
const seconds = ref(null);
|
||
|
|
|
||
|
|
const timer = setInterval(() => {
|
||
|
|
diff.value = dayjs(time).diff(dayjs(new Date()), 'second');
|
||
|
|
hours.value = Math.floor(diff.value / 3600);
|
||
|
|
minutes.value = Math.floor((diff.value % 3600) / 60);
|
||
|
|
seconds.value = diff.value % 60;
|
||
|
|
}, 1000);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="!flex items-center gap-[20rpx]">
|
||
|
|
<slot></slot>
|
||
|
|
<view class="!flex gap-[16rpx] items-center">
|
||
|
|
<view class="time-block" v-if="hours">{{ hours < 10 ? `0${hours}` : hours }}</view>
|
||
|
|
<view v-if="hours">:</view>
|
||
|
|
<view class="time-block" v-if="minutes">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
|
||
|
|
<view v-if="minutes">:</view>
|
||
|
|
<view class="time-block" v-if="seconds">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.time-block {
|
||
|
|
background-color: #E8F3FF;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
padding: 4rpx;
|
||
|
|
color: rgb(22, 93, 255);
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 140%;
|
||
|
|
letter-spacing: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|