82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
import getConfig from '@/utils/config'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const config = getConfig()
|
|
const router = useRouter()
|
|
|
|
let intervalId;
|
|
|
|
const updateTime = () => {
|
|
const now = new Date();
|
|
const timeString = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()]} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
|
|
document.getElementById('time').textContent = timeString;
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateTime();
|
|
intervalId = setInterval(updateTime, 1000);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(intervalId);
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="topbar">
|
|
<div class="logo">
|
|
<img src="@/assets/logo.svg" alt="logo" />
|
|
</div>
|
|
<div class="topbar-left">
|
|
<button>{{ config.title }}</button>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div id="time"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.topbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 32px;
|
|
background-color: rgba(255,255,255,0.15);
|
|
backdrop-filter: blur(3px);
|
|
-webkit-backdrop-filter: blur(3px);
|
|
z-index: 2;
|
|
}
|
|
.logo {
|
|
position: fixed;
|
|
top: 8px;
|
|
left: 10px;
|
|
}
|
|
.logo img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.topbar-left,
|
|
.topbar-right {
|
|
position: fixed;
|
|
top: 5px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
|
|
}
|
|
.topbar-left {
|
|
left: 35px;
|
|
}
|
|
.topbar-right {
|
|
right: 16px;
|
|
}
|
|
.topbar-left button,
|
|
.topbar-right button {
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
|
|
}
|
|
</style> |