<!-- 顶部的时间  -->

<script setup>
import { ref, watch, onMounted } from "vue";
const time = ref(new Date().toLocaleTimeString());
const date = ref(new Date().toLocaleDateString().replaceAll("/", "."));

onMounted(() => {
  setInterval(() => {
    time.value = new Date().toLocaleTimeString();
    date.value = new Date().toLocaleDateString().replaceAll("/", ".");
  }, 1000);
});
</script>

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

<style scoped>
.datetime {
  padding: 8px;
  position: absolute;
  top: 50px;
  right: 420px;
  font-size: 24px;
  color: #69B4FF;
  line-height: 1;
}
</style>
