<template>
  <div class="header">
    <div class="time">
      {{ NowTime }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
let NowTime: any = ref(0);
const timer = setInterval(() => {
  // 创建一个 Date 对象
  let currentDate = new Date();
  // 获取当前时间的年、月、日、时、分、秒
  let year = currentDate.getFullYear();
  let month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，需要加 1
  let day = currentDate.getDate();
  let hours = currentDate.getHours();
  let minutes = currentDate.getMinutes();
  let seconds = currentDate.getSeconds();
  // 格式化输出当前时间
  NowTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} `;
}, 1000);
// 组件销毁结束定时任务
onMounted(() => {
  // window.addEventListener()
});
</script>
<style scoped>
.header {
  width: 100%;
  height: 100%;
  background: pink;
  background: url("@/assets/DataVisualization/header.png") no-repeat;
  background-size: 100% 100%;
}
.header .time {
  position: absolute;
  right: 10px;
  top: 00px;
  font-size: 20px;
  color: white;
  font-weight: 700;
  font-family: "黑体";

  background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
