<!--
 * @Description: 显示时间组件，该组件已固定宽度和字体
 * @Author: 王晓颖
 * @Date: 2020-08-08
 -->
<template>
  <div class="topTime">
    <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>{{ 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{
    position:fixed;
    z-index:100;
    top:1rem;
    left:1rem;
    color: #fff;
    font-size: .7rem;
    margin-left: .05rem;
    letter-spacing: .1rem;
    font-family: DS-DigitalBold;
    padding-left: .1rem;
    a{
      font-weight: bolder;
      font-family: DS-DigitalBold;
      font-size: 1.2rem;
    }
    span{
      font-size: 1rem;
    }
  }
</style>