ts/src/views/Content/components/Header/index.vue

<script lang="ts" setup>
import moment from 'moment-timezone'
import { time2FormatWithTimezone } from '@/utils/date'
import WidgetNav from '../WidgetNav'

const timeZoneList = [
  { label: '中国/北京', value: 'Asia/Shanghai' },
  { label: '日本/东京', value: 'Asia/Tokyo' },
  { label: '韩国/首尔', value: 'Asia/Seoul' },
  { label: '越南/胡志明市', value: 'Asia/Ho_Chi_Minh' },
  { label: '马来西亚/吉隆坡', value: 'Asia/Kuala_Lumpur' },
  { label: '新加坡/新加坡', value: 'Asia/Singapore' },
  { label: '夏威夷时间(HST)', value: 'HST' },
  { label: '美国/纽约(EST)', value: 'EST' },
  { label: '美国/芝加哥(CST)', value: 'CST' },
  { label: '美国/洛杉矶(PST)', value: 'PST' },
  { label: '英国/伦敦', value: 'Europe/London' },
  { label: '法国/巴黎', value: 'Europe/Paris' },
  { label: '俄罗斯/莫斯科', value: 'Europe/Moscow' },
  { label: '澳大利亚/悉尼', value: 'Australia/Sydney' },
]
const timezone = ref('Asia/Shanghai')
const worldTime = ref('')
const getTime = () => {
  // const date = moment(new Date()).tz(timezone.value)
  // console.log(date)
  worldTime.value = time2FormatWithTimezone(new Date(), timezone.value)
  requestAnimationFrame(getTime)
}

const localeTime = ref('')
const getLocalTime = () => {
  localeTime.value = time2FormatWithTimezone(new Date(), 'Asia/Shanghai')
  requestAnimationFrame(getLocalTime)
}
onMounted(() => {
  // console.log(moment.tz.names())
  getTime()
  getLocalTime()
})
</script>

<template>
  <div class="absolute z-20 w-full"></div>
  <div
    class="time-bg z-20 mb-1 flex h-[30px] w-full items-center justify-between px-2 text-2xl"
  >
    <div class="time-container">
      <!-- <div class="time-title">世界时</div> -->
      <n-popselect
        class="time-title"
        v-model:value="timezone"
        :options="timeZoneList"
        trigger="click"
      >
        <div class="time-title cursor-pointer">
          {{
            timeZoneList.find(item => item.value === timezone).label ||
            '中国/北京'
          }}
        </div>
      </n-popselect>
      <div class="bgc-animation">
        {{ worldTime }}
      </div>
    </div>
    <widget-nav />
    <div class="time-container bgc-animation">
      <div class="bgc-animation">{{ localeTime }}</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);
  box-shadow: 0 0 0 4px linear-gradient(to right, #ff0000, #00ff00);
  border-bottom: 2px solid;
  border-image: var(--gradient-bg) 1;
  .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>