<template>
  <div class="countdown-widget">
    <div class="title">下班还有</div>
    <div class="time-display">02:37:46</div>
    <div class="footer">
      <!-- 这里后续可改为动态数据 -->
      <span>发薪 19 天</span>
      <span>周五 1 天</span>
      <span>腊八节 4 天</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/tokens.scss';
.countdown-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  
  .title {
    font-size: 13px;
    color: $color-text-secondary;
  }
  .time-display {
    font-size: 28px;
    font-weight: bold;
    color: $color-text-primary;
  }
  .footer {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: $color-text-secondary;
  }
}
</style>
