ChickenFarm/UI/VB.VUE/src/views/home.vue

<script setup lang="ts">
const name = ref("广明弥勒养殖")
onMounted(() => {
	document.querySelector("body")?.classList.add("is-home")
})
onBeforeUnmount(() => {
	document.querySelector("body")?.classList.remove("is-home")
})
</script>

<template>
	<div class="home-page">
		<div class="inner-header">
			<span class="title">
				<span class="me-5 fw-bold">{{ name }}</span>
				<small>系统管理平台</small>
			</span>
		</div>
		<!--Waves Container-->
		<div class="waves-box">
			<svg
				class="waves"
				xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 24 150 28"
				preserveAspectRatio="none"
				shape-rendering="auto">
				<defs>
					<path
						id="gentle-wave"
						d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.9)" />
				</g>
			</svg>
		</div>
		<!--Waves end-->
		<div class="footer"></div>
	</div>
</template>
<style lang="scss">
.home-page {
	width: 100%;
	height: calc(100vh - 105px);
	position: relative;
	text-align: center;
	background: linear-gradient(60deg, rgba(54, 58, 183, 1) 0, rgba(0, 172, 193, 1) 100%);
	color: white;

	.inner-header {
		height: 65%;
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		.title {
			font-family: "Lato", sans-serif;
			font-weight: 300;
			letter-spacing: 2px;
			font-size: 68px;
			color: white;
			small {
				font-size: 80%;
				color: #eee;
			}
		}
	}

	.waves-box {
		width: 100%;
		height: 15%;
		min-height: 100px;
		max-height: 150px;
		.waves {
			width: 100%;
			height: 100%;
		}
	}

	/* Animation */
	.parallax {
		& > use {
			animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
		}
		& > use:nth-child(1) {
			animation-delay: -2s;
			animation-duration: 7s;
		}
		& > use:nth-child(2) {
			animation-delay: -3s;
			animation-duration: 10s;
		}

		& > use:nth-child(3) {
			animation-delay: -4s;
			animation-duration: 13s;
		}

		& > use:nth-child(4) {
			animation-delay: -5s;
			animation-duration: 20s;
		}
	}

	.footer {
		position: relative;
		height: 22%;
		text-align: center;
		background-color: white;
		margin-top: -15px;
	}
}

@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0);
	}

	100% {
		transform: translate3d(85px, 0, 0);
	}
}
@media (min-width: 991.98px) {
	.home-page {
		height: calc(100vh - 134px);
	}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
	.home-page {
		.waves {
			height: 40px;
			min-height: 40px;
		}
		.title {
			font-size: 24px;
		}
	}
}
</style>