Code-Create/src/pages/mixi/index.vue

<template>
	<div class="mixi">
		<img class="bg" src="@/assets/images/mixi/bg.jpg" alt="" />
		<section class="header">
			<img
				src="@/assets/images/mixi/logo-mixi.png"
				alt=""
				v-custom-animation.once
				duration="1s"
				translate-y-s="100%"
				opacity-s="0"
			/>
		</section>
		<section class="introduce">
			<div class="box" v-custom-animation.once="{ duration: '1.25s' }">
				<h2 class="title">
					Best-in-class Precise Fashion Attribute and Colour Recognition System
				</h2>
				<p class="tip" translate-y-s="100%" opacity-s="0">
					Mixi is an AI-based fine-grained fashion attribute and colour recognition tool
					that can be used for both online shopping platforms and bricks and mortar
					stores. Mixi allows the customer to easily find fashion items that possess
					his/her preferred fashion attributes and colours.
				</p>
				<button custom @click="scrollToJoin" translate-y-s="100%" opacity-s="0">
					CONTACT US
				</button>
			</div>
		</section>
		<section class="video">
			<div class="content" @click="playVideo">
				<img
					src="https://code-create.com.hk/wp-content/uploads/2022/11/mixi_video_thumb.jpg"
					alt=""
				/>
				<span class="iconfont icon-bofang"></span>
			</div>
		</section>
		<section class="email-input" ref="joinRef">
			<EmailBox
				@submit="submit"
				:title="$t('Interested in Mixi?')"
				:tip="$t('We will contact you for customized plan.')"
			/>
		</section>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import EmailBox from '@/components/email-box.vue'
	import MyEvent from '@/directives/myEvents'

	const playVideo = () => {
		MyEvent.emit('playVideo', {
			url: 'https://code-create.com.hk/wp-content/uploads/2022/11/mixi_video.mp4',
			poster: 'https://code-create.com.hk/wp-content/uploads/2022/11/mixi_video_thumb.jpg'
		})
	}
	const joinRef = ref(null)
	const scrollToJoin = () => {
		window.scrollTo({
			top: joinRef.value.offsetTop,
			behavior: 'smooth'
		})
	}
	const submit = (email: string) => {
		console.log(email)
	}
</script>

<style scoped lang="less">
	.mixi {
		> * {
			position: relative;
			z-index: 1;
			background-color: #f9f9f9;
		}

		> .bg {
			height: 500px;
			width: 100%;
			object-fit: cover;
			position: fixed;
			top: 0;
			z-index: 0;
		}
		> .header {
			height: 500px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: transparent;
			> img {
				max-width: 200px;
				width: 90%;
				height: auto;
			}
		}
		> .introduce {
			padding: 200px 0;
			background-color: #eeeeee;
			> .box {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 auto;
				width: 100%;
				max-width: 730px;
				text-align: center;
				> .title {
					color: #222;
					font-size: 24px;
					margin-bottom: 30px;
					text-transform: capitalize;
				}
				> .tip {
					color: #555;
					font-size: 16px;
					line-height: 25px;
					margin-bottom: 50px;
				}
				> button {
					width: auto;
					height: auto;
					border-radius: 40px;
					padding: 20px 40px;
					letter-spacing: 2px;
					text-transform: uppercase;
					font-weight: bold;
				}
			}
		}
		> .video {
			width: 100%;
			background-color: #463a37;
			padding: 100px 0;
			> .content {
				max-width: 1120px;
				margin: 0 auto;
				position: relative;
				cursor: pointer;
				> img {
					width: 100%;
					height: auto;
				}
				> .icon-bofang {
					font-size: 100px;
					color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					animation: identifier 2s ease-in-out infinite;
					transition: 0.3s all;
					@keyframes identifier {
						0% {
							transform: translate(-50%, -50%) scale(1);
							filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
						}
						50% {
							transform: translate(-50%, -50%) scale(0.95);
							filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));
						}
						100% {
							transform: translate(-50%, -50%) scale(1);
							filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
						}
					}
				}
			}
		}
		> .email-input {
			padding: 100px;
			> .email-box {
				max-width: 860px;
			}
		}
	}
</style>