使用CSS3 + Vue3 + js-tool-big-box工具，实现炫酷五一倒计时动效

<template>
  <div class="countdown-container">
    <big-box class="countdown-box">
      <div class="countdown-timer">
        <div class="timer-segment">
          <span class="timer-number">{{ days }}</span>
          <span class="timer-label">天</span>
        </div>
        <div class="timer-segment">
          <span class="timer-number">{{ hours }}</span>
          <span class="timer-label">时</span>
        </div>
        <div class="timer-segment">
          <span class="timer-number">{{ minutes }}</span>
          <span class="timer-label">分</span>
        </div>
        <div class="timer-segment">
          <span class="timer-number">{{ seconds }}</span>
          <span class="timer-label">秒</span>
        </div>
      </div>
    </big-box>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import BigBox from 'js-tool-big-box';
 
const countDownDate = ref(new Date('2023-05-01T23:59:59').getTime());
const timer = ref(null);
 
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
 
const updateClock = () => {
  const now = new Date().getTime();
  const distance = countDownDate.value - now;
 
  if (distance < 0) {
    clearInterval(timer.value);
    return;
  }
 
  days.value = Math.floor(distance / (1000 * 60 * 60 * 24));
  hours.value = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  minutes.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  seconds.value = Math.floor((distance % (1000 * 60)) / 1000);
};
 
onMounted(() => {
  timer.value = setInterval(updateClock, 1000);
});
 
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>
 
<style scoped>
.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.countdown-box {
  width: 300px;
  height: 150px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: ce