This commit is contained in:
2024-03-01 14:32:22 +08:00
parent 9bcaf877f0
commit 9401c2908f

View File

@@ -1,109 +0,0 @@
<template>
<header>
<p>{{title}}</p>
<div class="data_box clearfix">
<div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div>
<div class="date_item time clearfix">
<div class="tiem_item hours">{{hours}}</div>
<div class="colon">:</div>
<div class="tiem_item minutes">{{minutes}}</div>
<div class="colon">:</div>
<div class="tiem_item seconds">{{seconds}}</div>
</div>
</div>
<slot></slot>
</header>
</template>
<script>
export default {
name: 'Header',
data () {
return {
timer: null,
time: '',
hours: '',
minutes: '',
seconds: '',
date: '',
week: ''
}
},
props: {
title: String
},
created () {
this.updateTime()
this.timer = window.setInterval(this.updateTime, 1000)
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
})
},
methods: {
updateTime () {
let cd = new Date()
let year = cd.getFullYear()
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let myddy = new Date().getDay()
let week = weekday[myddy]
this.time = `${hh}:${mm}:${ss}`
this.hours = `${hh}`
this.minutes = `${mm}`
this.seconds = `${ss}`
this.date = `${year}${month}${date}`
this.week = `${week}`
}
}
}
</script>
<style lang="stylus" scoped>
@import '../css/mixin'
header
position relative
width 100%
// height 1rem
height 60px
position relative
background center center / 100% 100% url(../images/screen1/header.png) no-repeat
p
font-family "PangMenZhengDao"
_font(.4rem, 1rem, #ffffff, lighter, center)
font-size 28px
line-height 60px
font-weight bold
letter-spacing .05rem
text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
.data_box
position absolute
// right 0
right 20px
// top .14rem
top 1.3rem
height .37rem
.date, .week
padding-right .2rem
.time
// width 1.7rem
text-align center
.date_item
float left
_font(.2rem, .37rem, #fff,,)
font-size 20px
.tiem_item
float left
_font(.32rem, .37rem, #fff,,)
font-size 20px
.colon
float left
_font(.32rem, .37rem, #fff,,)
font-size 20px
</style>