|
<template>
|
<div class="box">
|
<div class="title">
|
<div class="dateTime">
|
<div class="time1">{{ dateTime }}</div>
|
<div class="time2">{{ calendarTime }}</div>
|
<div class="time3">{{ weekTime }}</div>
|
<div class="time4">{{ hourTime }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getLunar } from 'chinese-lunar-calendar'
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
timer: null, //定时器
|
dateTime: '',
|
calendarTime: '',
|
weekTime: '',
|
hourTime: ''
|
}
|
},
|
//方法集合
|
methods: {},
|
created() {},
|
mounted() {
|
this.timer = setInterval(() => {
|
var nowDate = new Date()
|
var year = nowDate.getFullYear()
|
var month =
|
nowDate.getMonth() + 1 > 10
|
? nowDate.getMonth() + 1
|
: '0' + (nowDate.getMonth() + 1)
|
var date =
|
nowDate.getDate() > 10 ? nowDate.getDate() : '0' + nowDate.getDate()
|
var hours =
|
nowDate.getHours() < 10 ? '0' + nowDate.getHours() : nowDate.getHours()
|
var minutes =
|
nowDate.getMinutes() < 10
|
? '0' + nowDate.getMinutes()
|
: nowDate.getMinutes()
|
var seconds =
|
nowDate.getSeconds() < 10
|
? '0' + nowDate.getSeconds()
|
: nowDate.getSeconds()
|
let wk = nowDate.getDay()
|
let weeks = [
|
'星期日',
|
'星期一',
|
'星期二',
|
'星期三',
|
'星期四',
|
'星期五',
|
'星期六'
|
]
|
this.weekTime = weeks[wk]
|
this.calendarTime = getLunar(year, month, date).dateStr
|
this.dateTime = year + '年' + month + '月' + date + '日'
|
this.hourTime = hours + ':' + minutes + ':' + seconds
|
}, 1000)
|
},
|
beforeDestroy() {
|
if (this.timer) {
|
clearInterval(this.timer)
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
// display: flex;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: url('../../../assets/img/Rectangle 871.png') no-repeat center;
|
background-size: 100% 100%;
|
.title {
|
width: 100%;
|
height: 116px;
|
position: absolute;
|
background: url('../../../assets/img/Mask Group.png') no-repeat center;
|
background-size: 100% 100%;
|
padding-top: 10px;
|
|
.dateTime {
|
margin-right: 24px;
|
|
font-family: SourceHanSansCN;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 16px;
|
line-height: 20px;
|
|
float: right;
|
|
color: #ffffff;
|
|
flex: none;
|
order: 0;
|
flex-grow: 0;
|
|
.time1 {
|
float: left;
|
margin-right: 16px;
|
}
|
.time2 {
|
float: left;
|
margin-right: 16px;
|
}
|
.time3 {
|
float: left;
|
margin-right: 16px;
|
}
|
.time4 {
|
float: left;
|
}
|
}
|
}
|
}
|
</style>
|
