You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
2 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<router-view></router-view>
|
||
|
|
<div class="time" id="time">{{ time }}</div>
|
||
|
|
<div class="date" id="date">{{ date }}</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {AppMain} from './components'
|
||
|
|
|
||
|
|
let getDateIntervalFun = null
|
||
|
|
export default {
|
||
|
|
name: 'BoardIndex',
|
||
|
|
components: {
|
||
|
|
AppMain,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
time: '1',
|
||
|
|
date: '1'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
const getDate = () => {
|
||
|
|
let date = new Date()
|
||
|
|
let YYYY = date.getFullYear()
|
||
|
|
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
|
||
|
|
let dd = (date.getDate() + 1).toString().length === 1 ? ('0' + (date.getDate() + 1)) : (date.getDate() + 1)
|
||
|
|
let HH = (date.getHours() + 1).toString().length === 1 ? ('0' + (date.getHours() + 1)) : (date.getHours() + 1)
|
||
|
|
let mm = (date.getMinutes() + 1).toString().length === 1 ? ('0' + (date.getMinutes() + 1)) : (date.getMinutes() + 1)
|
||
|
|
let ss = (date.getSeconds() + 1).toString().length === 1 ? ('0' + (date.getSeconds() + 1)) : (date.getSeconds() + 1)
|
||
|
|
this.date = `${YYYY} - ${MM} - ${dd}`
|
||
|
|
this.time = `${HH} : ${mm} : ${ss}`
|
||
|
|
}
|
||
|
|
getDateIntervalFun = setInterval(getDate,1000)
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
getDateIntervalFun = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.time, .date {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 0.8vw;
|
||
|
|
color: #fcfcfc;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time {
|
||
|
|
top: 3.2%;
|
||
|
|
left: 85.8%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
top: 3.2%;
|
||
|
|
left: 94.1%;
|
||
|
|
}
|
||
|
|
</style>
|