133 lines
2.6 KiB
Vue
133 lines
2.6 KiB
Vue
<template>
|
|
<a-layout-header>
|
|
<view class="status_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<a-row justify="space-between" type="flex">
|
|
<a-col :span="12" @click="openDrawer">
|
|
<div class="title">
|
|
智能内镜储存柜
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="12" align="center">
|
|
<div class="time">{{ currentTime }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-layout-header>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'page-header',
|
|
data() {
|
|
return {
|
|
currentTime: this.setTime(),
|
|
signal: '4',
|
|
wifi: '3',
|
|
isWifi: false,
|
|
clickTimes: 0,
|
|
|
|
visible: false
|
|
}
|
|
},
|
|
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
this.interval = setInterval(() => this.setTime(), 1000)
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.interval)
|
|
},
|
|
methods: {
|
|
// back() {
|
|
// this.$emit('backEvent')
|
|
// },
|
|
setTime() {
|
|
this.currentTime = this.getCurrentTime()
|
|
},
|
|
getCurrentTime() {
|
|
const now = new Date();
|
|
|
|
// 获取时分秒
|
|
let hours = now.getHours();
|
|
let minutes = now.getMinutes();
|
|
let seconds = now.getSeconds();
|
|
|
|
// 格式化为两位数
|
|
hours = hours.toString().padStart(2, '0');
|
|
minutes = minutes.toString().padStart(2, '0');
|
|
seconds = seconds.toString().padStart(2, '0');
|
|
let year = now.getFullYear()+'-'+(now.getMonth()+1) +'-'+now.getDate()+' '
|
|
return `${year} ${hours}:${minutes}:${seconds}`;
|
|
},
|
|
openDrawer() {
|
|
this.clickTimes++
|
|
if (this.clickTimes == 5) {
|
|
this.visible = true
|
|
}
|
|
setTimeout(() => {
|
|
this.clickTimes = 0
|
|
}, 3000)
|
|
},
|
|
onClose() {
|
|
this.visible = false
|
|
},
|
|
quitApp() {
|
|
// ipc.invoke('controller.example.exitApp');
|
|
},
|
|
quitFull() {
|
|
// ipc.invoke('controller.example.exitFullWindow');
|
|
},
|
|
enterFull() {
|
|
// ipc.invoke('controller.example.setFullWindow');
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.status_bar{
|
|
height: 0;
|
|
}
|
|
.ant-layout-header{
|
|
height: 50px;
|
|
line-height: 48px;
|
|
padding: 0;
|
|
background: black;
|
|
}
|
|
|
|
.icon-signal{
|
|
display: inline-block;
|
|
margin: 4px 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
/* background-image: url('@/assets/icon/signal0.png'); */
|
|
background-position: center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
.top-icon{
|
|
font-size:30px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
/* margin-top: 3px; */
|
|
}
|
|
.time{
|
|
color: #777D90;
|
|
line-height: 50px;
|
|
font-size: 18px;
|
|
letter-spacing: 2px;
|
|
}
|
|
.title{
|
|
color: #777D90;
|
|
line-height: 50px;
|
|
font-size: 18px;
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
}
|
|
</style> |