vue element-ui 写一个亚运会倒计时

好的，下面是一个简单的倒计时示例：

1. 安装 Element UI

首先需要安装 Element UI，可以使用以下命令：

npm install element-ui -S

2. 创建倒计时组件

在 Vue 组件中，我们可以使用 `setInterval` 函数来实现倒计时，然后将倒计时的结果渲染到页面上。下面是一个简单的倒计时组件：

<template>
  <div class="countdown">
    <el-row>
      <el-col :span="6">
        <div class="countdown-item">
          <div class="countdown-value">{{ days }}</div>
          <div class="countdown-label">Days</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="countdown-item">
          <div class="countdown-value">{{ hours }}</div>
          <div class="countdown-label">Hours</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="countdown-item">
          <div class="countdown-value">{{ minutes }}</div>
          <div class="countdown-label">Minutes</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="countdown-item">
          <div class="countdown-value">{{ seconds }}</div>
          <div class="countdown-label">Seconds</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdownDate: new Date("2022-09-10T00:00:00.000Z")
    };
  },
  computed: {
    days() {
      return Math.floor(this.remainingTime / (1000 * 60 * 60 * 24));
    },
    hours() {
      return Math.floor(
        (this.remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
    },
    minutes() {
      return Math.floor((this.remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    },
    seconds() {
      return Math.floor((this.remainingTime % (1000 * 60)) / 1000);
    },
    remainingTime() {
      return this.countdownDate - new Date();
    }
  },
  mounted() {
    setInterval(() => {
      this.$forceUpdate();
    }, 1000);
  }
};
</script>

<style scoped>
.countdown {
  text-align: center;
  font-size: 24px;
  margin-top: 50px;
}

.countdown-item {
  margin-bottom: 20px;
}

.countdown-value {
  font-size: 48px;
  color: #409eff;
  font-weight: bold;
}

.countdown-label {
  font-size: 18px;
  color: #666;
}
</style>

在这个组件中，我们定义了一个 `countdownDate` 变量来表示倒计时的结束时间。在 `computed` 中，我们计算了剩余时间，然后根据剩余时间计算天数、小时数、分钟数和秒数。最后，我们使用 `setInterval` 函数每秒钟更新一次组件。

3. 在页面中使用组件

最后，我们可以在页面中使用这个组件：

<template>
  <div class="countdown-page">
    <countdown />
  </div>
</template>

<script>
import Countdown from "@/components/Countdown.vue";

export default {
  components: {
    Countdown
  }
};
</script>

<style>
.countdown-page {
  padding: 20px;
}
</style>

这个页面只是一个简单的容器，将倒计时组件放在其中。运行应用程序后，你将会看到一个简单的倒计时器。