60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
||
<div class='header'>
|
||
<span class='title'>生产驾驶舱</span>
|
||
<span class='time'>刷新时间：{{time}}</span>
|
||
<svg-icon icon-class="refresh" class='refresh-btn' @click='refreshData'/>
|
||
<el-button type="text" class="screen-btn" @click="changeFullScreen">
|
||
<svg-icon v-if="isFullScreen" icon-class="unFullscreen" />
|
||
<svg-icon v-else icon-class="fullscreen" />
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import moment from 'moment/moment';
|
||
export default {
|
||
props: {
|
||
isFullScreen: false
|
||
},
|
||
data() {
|
||
return {
|
||
time: moment().format('HH:mm:ss YYYY.MM.DD')
|
||
}
|
||
},
|
||
methods: {
|
||
changeFullScreen() {
|
||
this.$emit('screenfullChange');
|
||
},
|
||
refreshData() {
|
||
this.time = moment().format('HH:mm:ss YYYY.MM.DD')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
.header {
|
||
position: relative;
|
||
.title {
|
||
font-size: 28px;
|
||
color:'#000';
|
||
letter-spacing: 2px;
|
||
margin-right: 10px;
|
||
}
|
||
.time {
|
||
font-size: 14px;
|
||
color:'#000';
|
||
margin-right: 8px;
|
||
}
|
||
.refresh-btn {
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
.screen-btn {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
</style> |