<!--
 * @Description: 显示时间组件，该组件已固定宽度和字体
 * @Author: 王晓颖
 * @Date: 2020-08-08
 -->
<template>
  <div class="topTime" style="display: block;">
    <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>
  @import '../../assets/css/variable.scss';
  // 整体白色字
  .topTime{
    position: absolute;
    right: 10px;
    top: 20px;
    color: #fff;
    font-size: 20px;
    width: 400px;
    letter-spacing: 5px;
    font-family: $digitalFamily;
    padding-left: 10px;
    font-weight: bold;
  }
  .topTime a{
    font-weight: bolder;
    font-family: $digitalFamily;
  }
  .topTime a{
    font-size: 20px;
  }
  .topTime span{
    font-size: 20px;
  }
</style>