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

好的，以下是一个简单的实现方法：

1. 安装 ElementUI：在终端运行 `npm install element-ui -S`。

2. 在 main.js 中引入 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在组件中使用 ElementUI 的倒计时组件：

<template>
  <div class="countdown">
    <el-countdown :time="countdownTime" @finish="handleFinishCountdown">
      <template slot-scope="{ days, hours, minutes, seconds }">
        <div class="countdown-item">
          <span class="countdown-item-number">{{ days }}</span>
          <span class="countdown-item-label">天</span>
        </div>
        <div class="countdown-item">
          <span class="countdown-item-number">{{ hours }}</span>
          <span class="countdown-item-label">时</span>
        </div>
        <div class="countdown-item">
          <span class="countdown-item-number">{{ minutes }}</span>
          <span class="countdown-item-label">分</span>
        </div>
        <div class="countdown-item">
          <span class="countdown-item-number">{{ seconds }}</span>
          <span class="countdown-item-label">秒</span>
        </div>
      </template>
    </el-countdown>
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  data() {
    return {
      countdownTime: new Date('2022-09-10 00:00:00') // 亚运会开幕时间
    }
  },
  methods: {
    handleFinishCountdown() {
      console.log('倒计时结束')
    }
  }
}
</script>

<style scoped>
.countdown {
  display: flex;
  justify-content: center;
}

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

.countdown-item-number {
  font-size: 40px;
  font-weight: bold;
  color: #409EFF;
}

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

以上代码实现了一个简单的倒计时，显示亚运会开幕的剩余天、小时、分钟、秒数，并在倒计时结束时触发 `handleFinishCountdown` 方法。你可以根据自己的需求修改样式和倒计时结束后的操作。