<script lang="ts" setup>
const worldTime = ref('')
const getTime = () => {
  worldTime.value = new Date().toLocaleString()
  requestAnimationFrame(getTime)
}
onMounted(() => {
  getTime()
})
</script>

<template>
  <div class="header-bg absolute z-20 h-[100px] w-full"></div>
  <div
    class="time-bg z-20 mb-1 flex h-[30px] w-full items-center justify-between px-5 text-2xl"
  >
    <div class="time-container">
      <div class="time-title">世界时</div>
      <div class="bgc-animation">
        {{ worldTime }}
      </div>
    </div>
    <div class="time-container bgc-animation">
      <div class="bgc-animation">{{ worldTime }}</div>
      <div class="time-title">作战时</div>
    </div>
  </div>
  <div class="title-container bgc-animation">xxxxx平台</div>
</template>

<style type="scss" scoped>
.time-bg {
  background-color: var(--color-bg);
  .time-container {
    @apply flex items-center justify-center gap-2;
    font-family: Digital;
    .time-title {
      @apply h-6 border border-[#29baf1] px-2 text-sm leading-5 text-[#29baf1];
    }
  }
}

.bgc-animation {
  background: var(--gradient-bg);
  background-size: 200% 200%;

  animation: gradientAnimation 3s ease infinite alternate;
  background-clip: text;
  color: transparent;
}

@keyframes gradientAnimation {
  0% {
    background-position: 200% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.header-bg {
  background: url('./header.svg') no-repeat;
  background-size: 100% 100%;
}

.title-container {
  @apply absolute left-[50%] top-3 z-20 h-20 text-5xl font-bold tracking-[18px];

  transform: translateX(-50%);
}
</style>
