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.
70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<router-view></router-view>
|
|
<div class="time" id="time">{{ time }}</div>
|
|
<div class="date" id="date">{{ date }}</div>
|
|
<div class="logo"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
let getDateIntervalFun = null
|
|
export default {
|
|
name: 'BoardIndex',
|
|
data() {
|
|
return {
|
|
time: '',
|
|
date: ''
|
|
}
|
|
},
|
|
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().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
|
|
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
|
|
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
|
|
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
|
|
this.date = `${YYYY} - ${MM} - ${dd}`
|
|
this.time = `${HH} : ${mm} : ${ss}`
|
|
}
|
|
getDate()
|
|
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%;
|
|
}
|
|
.logo{
|
|
background-image: url("../assets/board/logo.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 8vw;
|
|
height:3vw;
|
|
position: absolute;
|
|
top: 1%;
|
|
left: 1%;
|
|
}
|
|
</style>
|