Board / HH-board-2026 · Files

<template>
	<!-- 头部 -->
	<div class="header">
		<div class="header-conter">
			<div class="header-conter-cursor-left">
				<img src="../assets/img/boxshow.png" alt="" srcset="" class="cursor-left" />
				<dv-decoration-6 class="datav-one" style="width: 20vh; height: 2vw" />
			</div>

			<div class="header-conter-test">
				<div class="test sys-title-zhuti">{{ title }}</div>
				<div class="header-title-zhuti-animate">
					<ul class="center-animate center-left-animate">
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<ul class="center-animate center-right-animate">
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>

			<div class="header-conter-cursor-right">
				<img src="../assets/img/boxshow.png" alt="" srcset="" class="cursor-right" />
				<dv-decoration-6 class="datav-tow" style="width: 20vh; height: 2vw" />
			</div>
		</div>
		<p class="head-time" id="head_time">&nbsp;{{ sysHeadTime }}</p>
		<p style="position: absolute;right: 35px; top: 3%;font-size: 1.2vw;color: #ffffff;">v:{{ sysHeadVer }}</p>
	</div>
</template>
<script>
export default {
	props: ['title', 'sysInitTimeNum'],
	data() {
		return {
			active: '/home',
			sysHeadTime: '',
			sysHeadVer: '',
			sysData: {},
		}
	},
	methods: {
		// getData() {
		// 	let opt = {
		// 		urlSuffix: window.appConfig.baseUrlOnLine6 + 'api/BulletinBoard/Mes/V1/getTimestamp',
		// 		logTitle: 'getTimestamp',
		// 		isUrlALL: true,
		// 		headers: false,
		// 		isHanderAjaxSuccessActionLoad: true,
		// 	}
		// 	''.ajax(this, opt, null)
		// },
		updateCurrentTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
			const day = String(now.getDate()).padStart(2, '0');
			this.sysHeadTime = `${year}-${month}-${day}`;
		},
		intInterval: function () {
			//1个小时读取一次
			setInterval(() => {
				// this.getData()
				this.updateCurrentTime();
			}, 3600000)
		},
	},
	created() {
		this.active = this.$route.path
		this.sysHeadVer = window.appConfig.ver
	},
	computed: {},
	mounted() {
		//eslint-disable-next-line no-debugger
		debugger
		//this.getData()
		// 本地一定要测试定时器 会存在数据多次绑定问题4
		this.intInterval()
		this.updateCurrentTime();
	},
}
</script>
<style lang="scss" scoped>
.header {
	width: 100%;
	height: 11vh;
	background: url('../assets/img/fh-title.png') no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	.datav-one {
		margin: 5vh 0 0 5vw;
	}

	.datav-tow {
		margin: -0.7vh 0 0 15vw;
	}

	.header-conter {
		position: relative;
		display: flex;
		width: 100%;
		height: 11vh;

		.header-conter-cursor-left {
			width: 30%;
			height: 100%;
		}

		.header-conter-test {
			width: 40%;
			height: 100%;
			background: url('../assets/img/fh-title1.png') no-repeat 4.5vw 5.2vh;
			background-size: 30vw;

			.test {
				margin: auto;
				text-align: center;
				padding-top: 3vh;

				img {
					width: 105px;
					margin-right: 10px;
				}

				transform: translateY(-0.6vh);
				// color: #fff;
				text-align: center;
				font-size: 2.5vw;
				font-weight: bold;
				// background-image: -webkit-linear-gradient(bottom, #0fccff, #fff);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}

			.header-title-zhuti-animate {
				display: flex;
				margin: auto;
				// border: 1px red solid;
				position: relative;

				.center-left-animate {
					position: absolute;
					right: 26vw;
					top: -1vw;
					transform: skewX(-45deg);
				}

				.center-right-animate {
					position: absolute;
					right: 13vw;
					top: -1vw;
					transform: skewX(45deg);
				}
			}
		}

		.header-conter-cursor-right {
			width: 30%;
			height: 100%;
		}
	}

	.head-time {
		color: #ffffff;
		font-size: 1.2vw;
		position: absolute;
		top: 3%;
		right: 11.5vw;
		font-family: electronicFont;
	}
}

.center-animate {
	display: flex;
	width: 2.2105vw;
}

.center-animate li {
	flex: 1;
	height: 0.3158vw;
	background-image: linear-gradient(to right, rgba(11, 178, 249, 1), rgba(11, 178, 249, 1));
}

.center-animate li+li {
	margin-left: 0.2632vw;
}

.center-left-animate li:nth-child(1) {
	animation: mymove 2s infinite;
	animation-delay: 0.5s;
}

.center-left-animate li:nth-child(2) {
	animation: mymove 2s infinite;
	animation-delay: 1s;
}

.center-left-animate li:nth-child(3) {
	animation: mymove 2s infinite;
	animation-delay: 1.5s;
}

.center-right-animate li:nth-child(3) {
	animation: mymove 2s infinite;
	animation-delay: 0.5s;
}

.center-right-animate li:nth-child(2) {
	animation: mymove 2s infinite;
	animation-delay: 1s;
}

.center-right-animate li:nth-child(1) {
	animation: mymove 2s infinite;
	animation-delay: 1.5s;
}

@keyframes mymove {
	0% {
		background: rgba(11, 178, 249, 0.4);
	}

	30% {
		background: rgba(11, 178, 249, 1);
	}

	100% {
		background: rgba(11, 178, 249, 0);
	}
}

ol,
ul {
	list-style: none;
}

.cursor-left {
	width: 25%;
	float: left;
	margin-top: 4.9vh;
	animation: flying 6s ease-in infinite;
}

@keyframes flying {
	0% {
		margin-left: 0;
		transform: translateX(0vw);
	}

	100% {
		margin-left: 15vw;
		transform: translateX(15vw);
	}
}

.cursor-right {
	width: 25%;
	margin: 4.9vh 0 0 22vw;
	animation: meng 6s ease-in infinite;
}

@keyframes meng {
	0% {
		margin-left: 22vw;
		transform: translateX(0vw);
	}

	100% {
		margin-left: -5vw;
		transform: translateX(-5vw);
	}
}

//看板标题炫酷效果
.sys-title-zhuti {
	background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #cc00cc 30%, #ccccff 40%, #00ffff 50%, #ccccff 60%, #cc00cc 70%, #cc00ff 80%, #66ffff 90%, blue 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-background-size: 200% 100%;
	-webkit-animation: masked-animation 4s linear infinite;
}

@keyframes masked-animation {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -100% 0;
	}
}
</style>