Count Down 倒计时 ​

<script lang="ts" setup>
  import { FMessage } from 'fighting-design'

  const timeStamp = 10 * 1000

  const handelFinish = (): void => {
    FMessage.primary('倒计时结束')
  }
</script>

<template>
  <f-count-down format="DD : HH : mm: ss" :time="timeStamp" :on-finish="handelFinish" />
</template>

<template>
  <f-count-down format="DD 天 HH 小时 mm 分钟 ss 秒" :time="2 * 24 * 60 * 60 * 1000" />
</template>

<template>
  <f-count-down
    millisecond
    format="DD 天 HH 小时 mm 分钟 ss 秒 SSS 毫秒"
    :time="2 * 24 * 60 * 60 * 1000"
  />
</template>

<template>
  <f-count-down :time="24 * 60 * 60 * 1000">
    <template #default="currentTime">
      <span class="block">{{ currentTime.hours }}</span>
      <span class="colon">:</span>
      <span class="block">{{ currentTime.minutes }}</span>
      <span class="colon">:</span>
      <span class="block">{{ currentTime.seconds }}</span>
    </template>
  </f-count-down>
</template>

<style>
  .colon {
    display: inline-block;
    color: #ee0a24;
    margin-left: calc(var(--count-down-text-size) / 2);
  }

  .block {
    display: inline-block;
    width: calc(var(--count-down-text-size) * 2);
    margin-left: var(--count-down-text-size);
    font-size: var(--count-down-text-size);
    color: #fff;
    text-align: center;
    background-color: #087ed3;
    border-radius: 4px * 2;
  }
</style>