<template>
  <div>
    <div class="top">
      <div class="time">{{date}}</div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from "../utils/index.js";
export default {
  data() {
    return {
       date: `${
         new Date().getFullYear()}年${ (new Date().getMonth()+1 >9 ? new Date().getMonth()+1 :  new Date().getMonth()+1)}月${(new Date().getDate()>9 ? new Date().getDate() : '0' + new Date().getDate())}日 
         ${new Date().getHours()>9 ? new Date().getHours(): '0' + new Date().getHours()}:${  new Date().getMinutes()>9 ? new Date().getMinutes(): '0' + new Date().getMinutes()}:${  new Date().getSeconds()>9 ? new Date().getSeconds(): '0' + new Date().getSeconds()
         }`
    };
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = dateFormat(Date.parse(_this.date), "Y年m月d日 H:i:s"); // 修改数据date
      // _this.date = dateFormat(Date.parse(_this.date), "Y m-d H:i:s"); // 修改数据date
      // dateFormat(Date.parse(_this.date), "Y年m月d日 H:i:s");
      console.log('22')
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  components: {}
};
</script>
<style lang='' scoped>
.top {
  height: 25vh;
  width: 30vw;
  margin: 0 auto;
}
.title {
    width: 100%;
    height: 40%;
    background-image: url("../assets/title.jpg");
  }
</style>