<!-- 
    filename: Header.vue
    author: liubin
    date: 2023-12-05 14:30:46
    description: 顶部标题
-->

<template>
	<header class="kiln-header">
		<h1
			style="
				font-size: 32px;
				margin-bottom: 36px;
				color: #0ee8e4;
				letter-spacing: 5px;
			">
			窑炉生产运行驾驶舱
		</h1>
		<!-- left: 312px; -->
		<div
			class="firm"
			style="
				position: absolute;
				bottom: 24px;
				left: 16.5vw;
				color: #fff;
				font-size: 16px;
				letter-spacing: 1px;
			">
			单位: 河南汇融科技服务有限公司
		</div>
		<div
			class="datetime"
			style="
				position: absolute;
				bottom: 18px;
				right: 15.5vw;
				color: #fff;
				font-size: 16px;
				letter-spacing: 1px;
                display: flex;
                align-items: center;
                gap: 16px;
			">
			<DateBtnGroup />
			{{ new Date().toLocaleString() }}
		</div>
	</header>
</template>

<script>
import DateBtnGroup from './DateBtnGroup.vue';
export default {
	name: 'KilnHeader',
	components: { DateBtnGroup },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.kiln-header {
	background: url('../assets/head.png') no-repeat;
	height: 88px;
	background-size: 100%;
	background-position: 0 0;
	display: grid;
	place-content: center;
	position: relative;
}
</style>
