vue 制作 倒计时页，网页风格和工作相关，比较正式

以下是一个简单的 vue 倒计时页面示例，包含网页风格和工作相关的元素，比较正式：

<template>
  <div class="countdown-page">
    <div class="header">
      <h1>倒计时页面</h1>
      <p>距离下一个重要事件还有</p>
    </div>
    <div class="countdown">
      <div class="countdown-item">
        <div class="countdown-value">{{ days }}</div>
        <div class="countdown-label">天</div>
      </div>
      <div class="countdown-item">
        <div class="countdown-value">{{ hours }}</div>
        <div class="countdown-label">小时</div>
      </div>
      <div class="countdown-item">
        <div class="countdown-value">{{ minutes }}</div>
        <div class="countdown-label">分钟</div>
      </div>
      <div class="countdown-item">
        <div class="countdown-value">{{ seconds }}</div>
        <div class="countdown-label">秒</div>
      </div>
    </div>
    <div class="footer">
      <p>重要事件：公司年会</p>
      <p>日期：2022年1月1日</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "CountdownPage",
  data() {
    return {
      eventDate: new Date("January 1, 2022 00:00:00"),
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
    };
  },
  created() {
    setInterval(this.updateCountdown, 1000);
  },
  methods: {
    updateCountdown() {
      const now = new Date();
      const diff = this.eventDate - now;
      this.days = Math.floor(diff / (1000 * 60 * 60 * 24));
      this.hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      this.minutes = Math.floor((diff / 1000 / 60) % 60);
      this.seconds = Math.floor((diff / 1000) % 60);
    },
  },
};
</script>

<style scoped>
.countdown-page {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.header {
  margin-bottom: 50px;
}

.countdown {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.countdown-value {
  font-size: 60px;
  font-weight: bold;
  margin-bottom: 10px;
}

.countdown-label {
  font-size: 16px;
  text-transform: uppercase;
}

.footer {
  margin-top: 50px;
  font-size: 16px;
}
</style>

在这个示例中，我们首先定义了一个名为 `CountdownPage` 的组件，用于显示倒计时页面。在 `data` 中，我们定义了一个 `eventDate` 变量，表示重要事件的日期。我们还定义了 `days`、`hours`、`minutes` 和 `seconds` 变量，用于存储倒计时的天数、小时数、分钟数和秒数。

在 `created` 生命周期钩子中，我们使用 `setInterval` 方法每秒钟更新一次倒计时。在 `updateCountdown` 方法中，我们计算当前时间和重要事件日期之间的时间差，并将其转换为天数、小时数、分钟数和秒数，然后更新组件的数据。

在模板中，我们使用了一些 HTML 元素和 CSS 样式来显示倒计时页面。在 `header` 中，我们显示了一个标题和说明文字。在 `countdown` 中，我们显示了一个包含四个倒计时项的框架。在 `footer` 中，我们显示了一些关于重要事件的信息。

这个示例中的 CSS 样式使用了一些基本的布局和字体样式，使页面看起来比较正式。您可以根据自己的需求进行修改和定制。