<template>
  <div class="timeKeeper">
    <div class="he-sjzt">
      <div class="he-nyr">{{ yearTime }}{{ dateTime }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "timeKeeper",
  data() {
    return {
      timer: null,
      dateTime: "",
      yearTime: "",
    };
  },
  mounted() {
    this.time();
  },
  methods: {
    time() {
      // 获取当前时间
      this.timer = window.setInterval(() => {
        const yy = new Date().getFullYear();
        const mm =
          new Date().getMonth() + 1 < 10
            ? "0" + (new Date().getMonth() + 1)
            : new Date().getMonth() + 1;
        const dd =
          new Date().getDate() < 10
            ? "0" + new Date().getDate()
            : new Date().getDate();
        const hh = new Date().getHours();
        const mf =
          new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
        const ss =
          new Date().getSeconds() < 10
            ? "0" + new Date().getSeconds()
            : new Date().getSeconds();
        this.yearTime = yy + "年" + mm + "月" + dd + "日 ";
        this.dateTime = hh + ":" + mf + ":" + ss;
      }, 1000);
    },
  },
  computed: {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.timeKeeper {
  width: 200px;
  height: 50px;
  display: flex;
  color: #ffffff;
  align-items: center;
}
.he-sjzt {
  position: absolute;
  display: inline-block;
}
.he-xs {
  font-size: 22px;
  font-weight: 400;
  text-align: center;
}
.he-nyr {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}
</style>
