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)
		},
		intInterval: function () {
			//1个小时读取一次
			setInterval(() => {
				this.getData()
			}, 3600000)
		},
		startClock() {
			// 立即执行一次，避免首次显示为空
			this.updateTime();
			// 每秒更新一次
			this.timer = setInterval(this.updateTime, 6000);
		},
		stopClock() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		updateTime() {
			const now = new Date();
			// 格式化为 YYYY-MM-DD HH:mm:ss
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			// const hours = String(now.getHours()).padStart(2, '0');
			// const minutes = String(now.getMinutes()).padStart(2, '0');
			// const seconds = String(now.getSeconds()).padStart(2, '0');

			this.sysHeadTime = `${year}-${month}-${day}`;
		}
	},
	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.startClock();
	},
	beforeDestroy() {
		this.stopClock();
	}
}
</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>