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

好的，我来给您写一个基于 Vue 和 ElementUI 的亚运会倒计时。

首先 Vue 项目中安装 ElementUI：

npm install element-ui --save

然后在 main.js 中引入 ElementUI：

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

Vue.use(ElementUI)

接着，我们在组件中使用 ElementUI 的 CountDown 组件来实现倒计时功能：

<template>
  <div class="countdown">
    <el-count-down :time="countdownTime" :auto-start="false" @finish="handleFinish">
      <template slot-scope="{ days, hours, minutes, seconds }">
        <div class="countdown-item">
          <span class="countdown-value">{{ days }}</span>
          <span class="countdown-label">天</span>
        </div>
        <div class="countdown-item">
          <span class="countdown-value">{{ hours }}</span>
          <span class="countdown-label">时</span>
        </div>
        <div class="countdown-item">
          <span class="countdown-value">{{ minutes }}</span>
          <span class="countdown-label">分</span>
        </div>
        <div class="countdown-item">
          <span class="countdown-value">{{ seconds }}</span>
          <span class="countdown-label">秒</span>
        </div>
      </template>
    </el-count-down>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdownTime: new Date('2022-09-10T00:00:00Z') // 2022年9月10日亚运会开幕时间
    }
  },
  methods: {
    handleFinish() {
      // 倒计时结束的回调函数
      console.log('倒计时结束')
    }
  }
}
</script>

<style scoped>
.countdown {
  display: flex;
}

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

.countdown-value {
  font-size: 24px;
  font-weight: bold;
}

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

以上代码实现了一个简单的亚运会倒计时，其中我们使用了 ElementUI 的 CountDown 组件，并设置了倒计时结束的回调函数 handleFinish。在模板中使用了 slot-scope 来获取倒计时的天数、小时数、分钟数和秒数，并将它们渲染到页面上。

希望对您有所帮助！