134 lines
3.2 KiB
Vue
134 lines
3.2 KiB
Vue
<template>
|
|
<header class="header relative">
|
|
<div>
|
|
<span class="header--logo">
|
|
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
|
</span>
|
|
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
|
</div>
|
|
<span class="header--wing absolute company">
|
|
设计单位: 中建材智能自动化研究院
|
|
</span>
|
|
<span class="header--wing absolute datetime">
|
|
{{ moment(today).format('YYYY.M.D dddd HH:mm:ss') }}
|
|
</span>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
export default {
|
|
name: "Header",
|
|
data() {
|
|
return {
|
|
today: new Date(),
|
|
time: "00:00:00",
|
|
moment
|
|
};
|
|
},
|
|
computed: {
|
|
date() {
|
|
return this.today.toLocaleDateString().replaceAll("/", ".");
|
|
},
|
|
week() {
|
|
return [
|
|
"星期日",
|
|
"星期一",
|
|
"星期二",
|
|
"星期三",
|
|
"星期四",
|
|
"星期五",
|
|
"星期六",
|
|
][this.today.getDay()];
|
|
},
|
|
},
|
|
mounted() {
|
|
moment.locale('zh-cn')
|
|
// this.time = this.getTime().join(":");
|
|
setInterval(() => {
|
|
this.today = new Date()
|
|
// this.time = this.getTime().join(":");
|
|
}, 1000);
|
|
},
|
|
methods: {
|
|
getTime() {
|
|
const now = new Date();
|
|
return [
|
|
now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
|
|
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
|
|
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
|
|
];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
@import "../../assets/styles/variables";
|
|
|
|
header {
|
|
background: url(../../assets/header-wings.png) left 12% top 72px / 95% no-repeat, url(../../assets/header.png) center / 100% 100% no-repeat;
|
|
// background-size: 100% 100%;
|
|
// background-size: cover;
|
|
// background-position: bottom;
|
|
height: adjust(h(580px));
|
|
width: adjust(w(21120px));
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
>div {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: adjust(8px);
|
|
margin-left: adjust(64px);
|
|
|
|
.header--logo {
|
|
width: adjust(128px);
|
|
height: adjust(h(337px));
|
|
background: url(../../assets/logo.png) center/contain no-repeat;
|
|
}
|
|
|
|
h1 {
|
|
margin-left: adjust(20px);
|
|
font-size: adjust(40px);
|
|
user-select: none;
|
|
letter-spacing: adjust(6px);
|
|
font-weight: 600;
|
|
color: $main-color;
|
|
font-family: "微软雅黑", sans-serif;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header--wing {
|
|
top: adjust(h(128px));
|
|
left: 0;
|
|
bottom: adjust(10px);
|
|
height: adjust(h(130px));
|
|
}
|
|
|
|
.company {
|
|
margin-left: adjust(w(3800px));
|
|
height: adjust(h(130px));
|
|
font-size: adjust(h(100px));
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: lighten($main-color, 8);
|
|
letter-spacing: 2px;
|
|
// background: red;
|
|
// width: adjust(w(1320px));
|
|
// background: url("../../assets/company.png") center/cover no-repeat;
|
|
}
|
|
|
|
.datetime {
|
|
color: $main-color;
|
|
font-size: adjust(h(100px));
|
|
text-align: center;
|
|
margin-left: adjust(w(15520px));
|
|
height: adjust(h(130px));
|
|
// width: adjust(w(1764px));
|
|
// background: url("../../assets/date.png") center/cover no-repeat;
|
|
}
|
|
</style>
|