118 lines
2.6 KiB
Vue
118 lines
2.6 KiB
Vue
<template>
|
|
<view class="header">
|
|
<view class="header-title">车间物流监控</view>
|
|
<view class="data_box">
|
|
<view class="time">{{time}}</view>
|
|
<view class="date_item">
|
|
<view class="year">{{year}}</view>
|
|
<view class="year">{{ date }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="exit_btn iconfont" @tap="toBack"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"MyHeader",
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
time: '',
|
|
year: '',
|
|
date: '',
|
|
week: ''
|
|
};
|
|
},
|
|
mounted () {
|
|
this.timer = window.setInterval(this.updateTime, 1000)
|
|
},
|
|
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.year = `${year}`
|
|
this.date = `${month}.${date}`
|
|
this.week = `${week}`
|
|
},
|
|
toBack () {
|
|
uni.redirectTo({
|
|
url: '/pages/setup'
|
|
})
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(this.timer)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.header
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
width 100%
|
|
height 96px
|
|
background center / 100% url('../static/image/header_bg.png') no-repeat
|
|
.header-title
|
|
width: 50%;
|
|
height: 100%;
|
|
padding-top: 14px;
|
|
font-size: 30px;
|
|
font-family: 'YouSheBiaoTiHei';
|
|
font-weight: 400;
|
|
color: transparent;
|
|
line-height: 24px;
|
|
opacity: 0.89;
|
|
letter-spacing 5px
|
|
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
|
filter: drop-shadow(#092F6D 1px 4px 1px);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
text-align center
|
|
margin: 0 auto;
|
|
.exit_btn
|
|
position absolute
|
|
left 10px
|
|
top 10px
|
|
height 28px
|
|
width 28px
|
|
line-height 28px
|
|
font-size 20px
|
|
color #aecaf5
|
|
text-align: center;
|
|
cursor: pointer;
|
|
.data_box
|
|
position absolute
|
|
right 10px
|
|
top 10px
|
|
display: flex
|
|
justify-content: flex-end
|
|
.time
|
|
font-size: 28px;
|
|
line-height: 28px;
|
|
font-family: 'YouSheBiaoTiHei';
|
|
color: #AECAF5;
|
|
.date_item
|
|
margin-left 5px
|
|
.year
|
|
font-size: 12px;
|
|
font-family: 'YouSheBiaoTiHei';
|
|
color: #AECAF5;
|
|
line-height: 21px;
|
|
opacity: 0.7;
|
|
&:last-child
|
|
line-height: 0px
|
|
</style> |