<template>
  <div class="topTime" style="display: block;width: 400px;">
    <a class="gradient-text">{{year}}</a>年<a class="gradient-text">{{mouth}}</a>月<a class="gradient-text">{{day}}</a>日
    <a class="gradient-text">{{time}}</a>
    <span style="text-align: right;float: right">{{week}}</span>
  </div>
</template>

<script>
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'Clock',
  data () {
    return {
      currentTime: null, // 定时器
      year: '0000', // 年
      mouth: '00', // 月
      day: '00', // 日
      time: '00:00:00', // 时间
      week: '星期一' // 星期
    }
  },
  created () {
    // 定时刷新时间
    this.currentTime = setInterval(() => {
      this.year = moment().format('YYYY')
      this.mouth = moment().format('MM')
      this.day = moment().format('DD')
      this.time = moment().format('HH:mm:ss')
      this.week = moment().format('dddd')
    }, 1000)
  },
  destroyed () {
    clearInterval(this.currentTime)
    this.currentTime = null
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 整体白色字
.topTime{
  color: #fff;
  font-size: 24px;
  width: 100px;
  letter-spacing: 2px;
  font-family: 黑体;
  padding-left: 5px;
  text-shadow: 0 0 5px #d1ffff;
}
.topTime a{
  font-weight: bolder;
  font-family: 黑体;
}
.topTime a{
  font-size: 24px;
}
.topTime span{
  font-size: 24px
}
</style>