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 }} time:{{ sysInitTimeNum }}</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)
		},
		intInterval: function() {
			//1个小时读取一次
			setInterval(() => {
				this.getData()
			}, 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()
	},
}
</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>