<template>
  <el-card class="box-card">
    <div class="clock">
      <span class="title">中国，北京时间</span>
      <span class="hours">{{ hours }}</span>:
      <span class="minutes">{{ minutes }}</span>:
      <span class="seconds">{{ seconds }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Clock',
  data() {
    return {
      date: new Date()
    }
  },
  computed: {
    hours() {
      const date = this.date
      return date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    },
    minutes() {
      const date = this.date
      return date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    },
    seconds() {
      const date = this.date
      return date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    }
  },
  mounted() {
    const _this = this
    this.timer = setInterval(() => {
      _this.date = new Date()
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card{
    .clock{
      text-align: right;
      font-size:30px;
      font-weight: 600;
      margin: 10px 25px;
      .title{
        font-size: 16px;
        color:#409EFF;
        font-weight:300;
        margin-right:20px;
      }
    }
  }
</style>