126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import moment from 'moment-timezone'
|
|
import { useRoute } from 'vue-router'
|
|
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()
|
|
})
|
|
|
|
const route = useRoute()
|
|
</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 v-if="route.path === '\/'" />
|
|
<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>
|