75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
|
<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>
|