update

src/components/XCountdown.vue

@@ -0,0 +1,50 @@
+<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>