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">{{ $t('Mixi.IntroduceTitle') }}</h2>
				<p class="tip" translate-y-s="100%" opacity-s="0">{{ $t('Mixi.IntroduceDesc') }}</p>
				<button custom @click="scrollToJoin" translate-y-s="100%" opacity-s="0">
					{{ $t('MainHeader.ContactUs') }}
				</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="key-features">
			<div class="left" v-custom-animation.scroll="{ duration: '1s' }">
				<img
					src="@/assets/images/mixi/mixi_intro_01_bg.png"
					alt=""
					class="bg"
					translate-x="-60"
				/>
				<img
					src="@/assets/images/mixi/mixi_intro_01_panel.png"
					alt=""
					class="panel"
					translate-y-s="30"
					translate-y="-30"
				/>
			</div>
			<div class="right" v-custom-animation.once="{ duration: '1.5s' }">
				<h2 class="title" translate-y-s="30" opacity-s="0">{{ $t('Mixi.KeyFeatures') }}</h2>
				<ul translate-y-s="50" opacity-s="0">
					<li>{{ $t('Mixi.KeyFeaturesDesc1') }}</li>
					<li>{{ $t('Mixi.KeyFeaturesDesc2') }}</li>
				</ul>
			</div>
		</section>
		<section class="industry">
			<div class="content">
				<h2
					class="title"
					v-custom-animation.once="{ duration: '1s' }"
					translate-y-s="30"
					opacity-s="0"
				>
					{{ $t('Mixi.BenefitsToIndustry') }}
				</h2>
				<div class="box" v-custom-animation.once="{ duration: '1s' }">
					<div opacity-s="0" translate-x-s="150%">
						<img src="@/assets/images/mixi/feature-1.png" alt="" />
						<div class="text">{{ $t('Mixi.Industry1Text') }}</div>
					</div>
					<div opacity-s="0" translate-x-s="50%">
						<img src="@/assets/images/mixi/feature-2.png" alt="" />
						<div class="text">{{ $t('Mixi.Industry2Text') }}</div>
					</div>
					<div opacity-s="0" translate-x-s="-50%">
						<img src="@/assets/images/mixi/feature-3.png" alt="" />
						<div class="text">{{ $t('Mixi.Industry3Text') }}</div>
					</div>
					<div opacity-s="0" translate-x-s="-150%">
						<img src="@/assets/images/mixi/feature-4.png" alt="" />
						<div class="text">{{ $t('Mixi.Industry4Text') }}</div>
					</div>
				</div>
			</div>
		</section>
		<section class="email-input" ref="joinRef">
			<img src="@/assets/images/mixi/intro-bg.jpg" alt="" />
			<EmailBox
				@submit="submit"
				:title="$t('Mixi.EmailInputTitle')"
				:tip="$t('Mixi.EmailInputTip')"
			/>
		</section>
	</div>
</template>
<script setup lang="ts">
	import { useHead } from '@unhead/vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	import { ref } from 'vue'
	import EmailBox from '@/components/email-box.vue'
	import MyEvent from '@/tools/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)
	}
	useHead({
		title: 'Mixi - Code-Create',
		meta: [
			{
				name: 'description',
				content: `${t('Mixi.IntroduceDesc')} ${t('Mixi.IntroduceDesc')}`
			}
		]
	})
</script>

<style scoped lang="less">
	.mixi {
		> * {
			position: relative;
			z-index: 1;
			background-color: #f9f9f9;
		}
		--bg-height: 500px;
		> .bg {
			height: var(--bg-height);
			width: 100%;
			object-fit: cover;
			position: fixed;
			top: 0;
			z-index: 0;
		}
		> .header {
			height: var(--bg-height);
			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));
						}
					}
				}
			}
		}
		> .key-features {
			padding: 100px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			> div {
				flex: 1;
				padding: 15px;
				max-width: 720px;
			}
			> .left {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				> .bg {
					max-width: 500px;
					width: 70%;
					height: auto;
				}
				> .panel {
					max-width: 400px;
					width: 60%;
					height: auto;
					position: absolute;
					right: 80px;
					bottom: 100px;
				}
			}
			> .right {
				> .title {
					font-size: 38px;
					font-weight: 600;
					line-height: 48px;
					color: #222222;
					margin-bottom: 20px;
				}
				> ul {
					> li {
						text-align: start;
						font-family: 'Poppins', Sans-serif;
						font-size: 16px;
						font-weight: 400;
						line-height: 28px;
						color: #555555;
					}
				}
			}
		}
		> .industry {
			padding: 100px 0;
			> .content {
				max-width: 1230px;
				margin: 0 auto;
				> .title {
					text-align: center;
					margin-bottom: 25px;
					color: #222222;
					font-size: 44px;
					font-weight: 600;
					line-height: 56px;
				}
				> .box {
					display: flex;
					gap: 20px;
					> div {
						flex: 1;
						padding: 25px 30px;
						max-width: 720px;
						text-align: center;
						> img {
							width: 120px;
							height: 120px;
							margin-top: 40px;
							margin-bottom: 60px;
						}
						> .text {
							font-size: 16px;
							font-weight: 300;
							line-height: 24px;
							color: #555555;
						}
					}
				}
			}
		}
		> .email-input {
			position: relative;
			padding-bottom: 100px;
			> img {
				width: 100%;
				height: auto;
				max-height: 500px;
				object-fit: cover;
				display: block;
			}
			> .email-box {
				max-width: 860px;
				position: relative;
				margin-top: -150px;
			}
		}
		@media (max-width: 800px) {
			--bg-height: 275px;
			> .introduce {
				padding: 20px;
				> .box {
					> .tip {
						font-size: 12px;
					}
				}
			}
			> .video {
				padding: 40px 20px;
			}
			> .key-features {
				flex-direction: column;
				align-items: inherit;
				padding: 20px;
				> .left {
					> .bg {
						max-width: inherit;
					}
					> .panel {
						right: 50px;
						bottom: 0px;
					}
				}
				> .right {
					> .title {
						font-size: 36px;
					}
					> ul > li {
						font-size: 12px;
					}
				}
			}
			> .industry {
				padding: 20px;
				> .content {
					> .title {
						font-size: 36px;
					}
					> .box {
						flex-direction: column;
						gap: 0;
						> div {
							padding: 20px;
							> img {
								width: 100px;
								height: 100px;
								margin-top: 0;
								margin-bottom: 0;
							}
						}
					}
				}
			}
			> .email-input {
				position: relative;
				padding-bottom: 50px;
				> img {
					width: 100%;
					height: auto;
					max-height: 500px;
					object-fit: cover;
					display: block;
				}
				> .email-box {
					width: 90%;
					margin-top: -100px;
				}
			}
		}
	}
</style>