<template>
  <div class="main_header">
    <div class="left">Smart tourism management platform</div>
    <div class="right">{{ currentTime }}</div>
  </div>
  <div class="main_title">靖安智慧旅游管理平台</div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import moment from "moment";

// 当前时间
const currentTime = ref<string>("");
// 定时器标识
const timer = ref();

onMounted(() => {
  currentTime.value = moment().format("YYYY-MM-DD hh:mm:ss");

  timer.value = setInterval(() => {
    currentTime.value = moment().format("YYYY-MM-DD hh:mm:ss");
  }, 1000);
});

// 页面卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
.main_header {
  position: relative;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  padding: 0 78px 0 55px;
  width: 7072px;
  height: 151px;
  color: #fff;
  background-image: url(@/assets/images/main-header-background.png);
  background-size: 100% 100%;

  .left {
    margin-top: 28px;
    font-size: 35px;
  }

  .right {
    margin-top: 28px;
    font-size: 40px;
  }
}

.main_title {
  position: absolute;
  z-index: 999;
  top: 26px;
  left: 3114px;
  color: #6ed8ff;
  font-size: 80px;
  font-family: "庞门正道标题体";
}
</style>
