mini页面

src/directives/custom-animation.js

@@ -105,6 +105,7 @@ export default {
 			isActive: false,
 			transition,
 		}
+		console.log(config)
 		els.set(el, config)
 		add(el, root, config)
 	},
@@ -176,14 +177,21 @@ async function handleScroll({ target: root }) {
 		const offsetHeight = root === document ? window.innerHeight : rootEl.offsetHeight
 		const offsetTop = rootEl.offsetTop
 		const scrollTop = rootEl.scrollTop
-		const elTop_bottom = offsetHeight - (el.offsetTop - offsetTop - rootEl.scrollTop)
+		const elTop_bottom = offsetHeight - (getDocumentTop(el) - offsetTop - rootEl.scrollTop)
 		const maxHeight = offsetHeight + el.offsetHeight
 		const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))
+		console.log(p)
 		children.forEach((item) => {
 			setDocumentStyles(el, item, p)
 		})
 	})
 }
+function getDocumentTop(el, root = document, offset = 0) {
+	const parent = el.parentElement
+	offset = offset + el.offsetTop
+	if (parent && parent !== document.documentElement) return getDocumentTop(parent, root, offset)
+	return offset
+}
 function getChildren(el, oneself = true) {
 	const children = Array.from(el.querySelectorAll(typesStr))
 	if (oneself && Object.values(T).some(v => hasAttr(el, v))) children.push(el)

src/lang/en.ts

@@ -30,4 +30,18 @@ export default {
 	StayUpToDate: "Stay up to date with our e-newsletter",
 	EmailAddress: 'Email Address',
 	Submit: 'Submit',
+	Mixi: {
+		IntroduceTitle: "Best-in-class Precise Fashion Attribute and Colour Recognition System",
+		IntroduceDesc: "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.",
+		KeyFeatures: "Key Features",
+		KeyFeaturesDesc1: "An intelligent tool that facilitates accurate product search and auto tagging by automatically recognising the design elements in uploaded fashion images",
+		KeyFeaturesDesc2: "A precise, customisable and flexible colour search tool that can accurately distinguish more than 2,300 spot colours",
+		BenefitsToIndustry: "Benefits to Industry",
+		Industry1Text: 'Snap & Search: enhances the online shopping experience',
+		Industry2Text: 'Drives sales by enabling shoppers to search for products in their desired colour in seconds',
+		Industry3Text: 'Generates more accurate data for recommendations and analysis',
+		Industry4Text: 'Improves efficiency and shopping experience in e-commerce and omnichannel shopping',
+		EmailInputTitle: 'Interested in Mixi?',
+		EmailInputTip: 'We will contact you for customized plan.',
+	},
 }

src/lang/zh-cn.ts

@@ -30,4 +30,18 @@ export default {
 	StayUpToDate: '通过我们的电子通讯掌握最新动态',
 	EmailAddress: '电邮地址',
 	Submit: '提交',
+	Mixi: {
+		IntroduceTitle: "精准时装属性及颜色辨识系统(Mixi)",
+		IntroduceDesc: "Mixi是人工智能细粒度时装属性及颜色识别工具，主要用于网上购物平台和实体店。 顾客在使用Mixi的时候，可以轻松找到具有他/她喜欢的时装属性及颜色的时装项目。",
+		KeyFeatures: "技术特点",
+		KeyFeaturesDesc1: "作为智能工具通过自动识别设计元素，促进搜寻产品的准确度和自动标记上载的时装图片",
+		KeyFeaturesDesc2: "一个精确、客制化和灵活的颜色搜寻工具，可以准确地区分多于2,300种专色",
+		BenefitsToIndustry: "对行业的好处",
+		Industry1Text: '通过影像搜寻去加强网上购物体验',
+		Industry2Text: '顾客通过快速搜寻他们喜欢的颜色去推动销售额',
+		Industry3Text: '为建议及分析生成更准确的数据',
+		Industry4Text: '加强电子商务和全渠道零售购物的效率和购物体验',
+		EmailInputTitle: '有兴趣使用精准时装属性及颜色辨识系统 (Mixi)？',
+		EmailInputTip: '请留下电邮地址，以获取度身订造的计划',
+	},
 }

src/lang/zh-tw.ts

@@ -30,4 +30,18 @@ export default {
 	StayUpToDate: '通過我們的電子通訊掌握最新動態',
 	EmailAddress: '電郵地址',
 	Submit: '提交',
+	Mixi: {
+		IntroduceTitle: "精準時裝屬性及顏色辨識系統(Mixi)",
+		IntroduceDesc: "Mixi是人工智能細粒度時裝屬性及顏色識別工具，主要用於網上購物平台和實體店。 顧客在使用Mixi的時候，可以輕鬆找到具有他/她喜歡的時裝屬性及顏色的時裝項目。",
+		KeyFeatures: "技術特點",
+		KeyFeaturesDesc1: "作為智能工具通過自動識別設計元素，促進搜尋產品的準確度和自動標記上載的時裝圖片",
+		KeyFeaturesDesc2: "一個精確、客製化和靈活的顏色搜尋工具，可以準確地區分多於2,300種專色",
+		BenefitsToIndustry: "對行業的好處",
+		Industry1Text: '通過影像搜尋去加強網上購物體驗',
+		Industry2Text: '顧客通過快速搜尋他們喜歡的顏色去推動銷售額',
+		Industry3Text: '為建議及分析生成更準確的數據',
+		Industry4Text: '加強電子商務和全渠道零售購物的效率和購物體驗',
+		EmailInputTitle: '有興趣使用精準時裝屬性及顏色辨識系統 (Mixi)？',
+		EmailInputTip: '請留下電郵地址，以獲取度身訂造的計劃',
+	},
 }

src/pages/mixi/index.vue

@@ -13,17 +13,10 @@
 		</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>
+				<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">
-					CONTACT US
+					{{ $t('MainHeader.ContactUs') }}
 				</button>
 			</div>
 		</section>
@@ -36,11 +29,66 @@
 				<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('Interested in Mixi?')"
-				:tip="$t('We will contact you for customized plan.')"
+				:title="$t('Mixi.EmailInputTitle')"
+				:tip="$t('Mixi.EmailInputTip')"
 			/>
 		</section>
 	</div>
@@ -169,10 +217,107 @@
 				}
 			}
 		}
+		> .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 {
+					width: 400px;
+					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 {
-			padding: 100px;
+			position: relative;
+			padding-bottom: 250px;
+			> img {
+				width: 100%;
+				height: auto;
+				max-height: 500px;
+				object-fit: cover;
+				display: block;
+			}
 			> .email-box {
 				max-width: 860px;
+				position: absolute;
+				bottom: 100px;
+				left: 50%;
+				transform: translateX(-50%);
 			}
 		}
 	}