alzq-onest-monitor/monitor_ui/src/views/integrated/visual/v-header.vue

<template>
	<div class="header">
		<div class="header-left">
			<!-- 时间-->
			<div class="date">
				<div class="day m-r-10">
					<span>{{today}}</span>
					<span>{{weekE}}</span>
				</div>
				<div class="week m-r-10">{{weekC}}</div>
				<div class="line m-r-10"></div>
				<div class="time">{{time}}</div>
			</div>
		</div>
		<!--中间LOGO -->
		<router-link class="title" to="/integrated/index" exact><img
				src="@/assets/images/integrated/bigdata-header-nav-left2.png" />
			<h3><img class="logo" src="@/assets/images/integrated/logo-small.png" />态势感知平台 监控中心
			</h3><img src="@/assets/images/integrated/bigdata-header-nav-right2.png" />
		</router-link>
		<!--中间导航-->
		<div class="bignav">
			<img src="@/assets/images/integrated/bigdata-header-nav-left2.png" />
			<router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list" exact>
				{{navbar.name}}
			</router-link>
			<img src="@/assets/images/integrated/bigdata-header-nav-right2.png" />
		</div>
		<!-- 右侧5个中心 -->
		<VfastMenu></VfastMenu>
	</div>
</template>

<script>
	let aDate = new Date();
	let month = aDate.getMonth() < 9 ? "0" + (aDate.getMonth() + 1) : aDate.getMonth() + 1;
	let date = aDate.getDate() <= 9 ? "0" + aDate.getDate() : aDate.getDate();
	let day = aDate.getDay();
	let weekCh = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
	let weekEn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
		"Saturday");

	import VfastMenu from './v-fastmenu.vue' //头部右侧菜单




	export default {
		components: {
			VfastMenu,
		},
		data() {
			return {
				navbar: [{
						name: '监控中心',
						path: '/integrated/monitor',
					},
					{
						name: '数字林业',
						path: '/integrated/forest',
					},
					{
						name: '数字农业',
						path: '/',
					},
					{
						name: '数字水利',
						path: '/',
					},
					{
						name: '数字环保',
						path: '/',
					},
					{
						name: '数字应急',
						path: '/',
					},
					{
						name: '数字交通',
						path: '/',
					},
					{
						name: '数字资源',
						path: '/',
					},
					{
						name: '数字消防',
						path: '/',
					},

				],


				// 右上时钟
				today: aDate.getFullYear() + "." + month + "." + date,
				weekE: weekEn[day].toUpperCase(),
				weekC: weekCh[day],
				time: aDate.toTimeString().substring(0, 8),
				interval: '',
				websocketURL: '',
				yjCount: 0,



			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				// 右上时钟
				this.interval = setInterval(() => {
					let aDate = new Date();
					let month = aDate.getMonth() < 9 ? "0" + (aDate.getMonth() + 1) : aDate.getMonth() + 1;
					let date = aDate.getDate() <= 9 ? "0" + aDate.getDate() : aDate.getDate();
					let day = aDate.getDay();
					let weekCh = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
					let weekEn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
						"Saturday");
					this.today = aDate.getFullYear() + "." + month + "." + date;
					this.weekC = weekCh[day];
					this.weekE = weekEn[day].toUpperCase();
					this.time = aDate.toTimeString().substring(0, 8);
					// console.log(this.today, this.weekC, this.weekE ,this.time);

				}, 1000)
			}
		},
		beforeDestroy() {
			// 右上时钟
			clearInterval(this.interval);
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
	.header {
		width: 100%;
		background: #a7ec12;
		background: url(../../../assets/images/visual/v-header.png) repeat-x;
		height: 2.5rem;
		display: flex;
		align-items: center;
		z-index: 10000000;
		position: absolute;
		top: 0;

		.title {
			display: flex;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);

			h3 {
				display: flex;
				align-items: center;
				text-align: center;
				color: $white;
				font-size: 1.8rem;
				font-family: $fontFk;
				background: url(../../../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;

				img {
					margin-right: .5rem;
				}
			}
		}

		.bignav {
			height: 40px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 2.4rem;
			z-index: 1000;
			border-radius: 5px;
			display: flex;
			justify-content: cetner;
			align-items: center;

			.bignav-list {
				background: url(../../../assets/images/integrated/bigdata-header-nav-re2.png) repeat-x center;
				float: left;
				display: flex;
				justify-content: cetner;
				align-items: center;
				color: $white;
				height: 40px;
				font-size: 12px;
				padding: 0 23px;
				cursor: pointer;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				transition: all 0.3s ease-in-out;
			}

			.router-link-active,
			.bignav-list:hover {
				filter: brightness(2.3);
				-webkit-transform: translateY(-1px);
				transform: translateY(-1px);
				color: $inBlueHover;
				border-bottom: 1px solid $inBlueHover;
				transition: all 0.3s ease-in-out;

			}
		}

		.header-left {
			height: 5vh;
			position: absolute;
			left: 10px;
			display: flex;
			font-size: 1rem;
			align-items: center;
			color: $inBlue;

			.date {
				flex: 1;
				display: flex;
				align-items: center;

				.day {
					display: flex;
					flex-direction: column;
					font-size: 14px;
				}

				.day span:nth-child(2) {
					font-size: 10px;
					text-align: right;
				}

				.week {
					font-size: 13px;
					writing-mode: tb-rl;

				}

				.time {
					font-size: 2rem;

				}

				.line {
					width: 1px;
					height: 1.5rem;
					background: $inBlue;
					margin: 0 .4rem;
				}
			}

		}
	}

</style>