From 6523c30d9fe36cea39d20d080cd9476635489761 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Mon, 18 May 2026 13:57:05 +0800
Subject: [PATCH] =?UTF-8?q?about=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/directives/tween-animation.ts         |   9 +-
 src/pages/about-us/ecosystem.vue          |   1 +
 src/pages/about-us/index.vue              |   2 +
 src/pages/about-us/mission.vue            |   1 +
 src/pages/about-us/our-team.vue           | 149 ++++++++++++++++++----
 src/pages/about-us/strategic-partners.vue |  78 +++++++++++
 6 files changed, 214 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/about-us/strategic-partners.vue

diff --git a/src/directives/tween-animation.ts b/src/directives/tween-animation.ts
index 9841ca3..3d12db2 100644
--- a/src/directives/tween-animation.ts
+++ b/src/directives/tween-animation.ts
@@ -1,13 +1,14 @@
 import { gsap, } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 export default {
-	name: 'tween-animation',
-	mounted(el: HTMLElement) {
+	name: 'tween-Y',
+	mounted(el: HTMLElement, binding: any) {
+		const params = binding.value
 		// if(!binding.value.isGsap)return
 		let dom = document.querySelector('body')
 		gsap.registerPlugin(ScrollTrigger);
 		let tl1 = gsap.timeline();
-		tl1.from(el,1, {y:'30px',opacity:0},)
+		tl1.from(el,1, {y:params || '30px',opacity:0},)
 		ScrollTrigger.create({
 			trigger: el, // 触发器元素
 			start: "top 90%", // 滚动触发器的起始滚动位置
@@ -15,7 +16,7 @@ export default {
 			markers: false, // 开启标注功能
 			animation:tl1,
 			scroller:dom,//设置指定元素为滚动依据
-			scrub:2,
+			scrub:false,
 			// toggleActions: "play reset play reset",
 			// onUpdate:(v)=>{
 			// 	if(v.progress < 0.1){
diff --git a/src/pages/about-us/ecosystem.vue b/src/pages/about-us/ecosystem.vue
index 85be8f9..1bba77d 100644
--- a/src/pages/about-us/ecosystem.vue
+++ b/src/pages/about-us/ecosystem.vue
@@ -64,6 +64,7 @@
 			position: relative;
 			> img{
 				width: 100%;
+				height: 675px;
 			}
 			> .icon-bofang{
 				font-size: 100px;
diff --git a/src/pages/about-us/index.vue b/src/pages/about-us/index.vue
index 55225b9..49178a6 100644
--- a/src/pages/about-us/index.vue
+++ b/src/pages/about-us/index.vue
@@ -3,6 +3,7 @@ import Ecosystem from './ecosystem.vue'
 import Title from './title.vue'
 import Mission from './mission.vue'
 import OurTeam from './our-team.vue'
+import StrategicPartners from './strategic-partners.vue'
 defineExpose({})
 </script>
 <template>
@@ -14,6 +15,7 @@ defineExpose({})
 		<Ecosystem />
 		<Mission />
 		<OurTeam />
+		<StrategicPartners />
 	</div>
 </template>
 <style lang="less" scoped>
diff --git a/src/pages/about-us/mission.vue b/src/pages/about-us/mission.vue
index 94eb452..6ec4652 100644
--- a/src/pages/about-us/mission.vue
+++ b/src/pages/about-us/mission.vue
@@ -123,6 +123,7 @@ const {} = toRefs(data);
 					margin: 10px;
 					// width: 1120px;
 					width: 340px;
+					height: 503px;
 					position: relative;
 					> h2{
 						font-family: "Poppins", Sans-serif;
diff --git a/src/pages/about-us/our-team.vue b/src/pages/about-us/our-team.vue
index f274087..fb4698d 100644
--- a/src/pages/about-us/our-team.vue
+++ b/src/pages/about-us/our-team.vue
@@ -7,30 +7,32 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger'
 //const emit = defineEmits([
 //])
 const imgItem1 = ref(null)
-const imgItem2 = ref(null)
-const imgItem3 = ref(null)
-const imgItem4 = ref(null)
-const imgBox = ref(null)
 let data = reactive({
 })
 onMounted(()=>{
 	let dom = document.querySelector('body')
-	gsap.registerPlugin(ScrollTrigger);
-	let tl1 = gsap.timeline();
-	tl1.from(imgItem1.value,1, {y:'200px',opacity:0,ease:'power2.out'},0)
-	tl1.from(imgItem2.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.2) 
-	tl1.from(imgItem3.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.4)
-	tl1.from(imgItem4.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.6)
-	ScrollTrigger.create({
-		trigger: imgBox.value, // 触发器元素
-		start: "top 90%", // 滚动触发器的起始滚动位置
-		end: '100% 80%',   // 滚动触发器的结束滚动位置
-		markers: false, // 开启标注功能
-		animation:tl1,
-		scroller:dom,//设置指定元素为滚动依据
-		toggleActions: "play reset play reset",
-		scrub:false,
-	});
+	let ourListDom = document.querySelectorAll('.our-team-item')
+	ourListDom.forEach((item,index)=>{
+		gsap.registerPlugin(ScrollTrigger);
+		let tl1 = gsap.timeline();
+		let img = item.querySelector('.img')
+		let textTop = item.querySelector('.text p')
+		let textBottom = item.querySelector('.text .bottom-text')
+		tl1.from(img,1, {opacity:'0',ease:'power2.out'},0)
+		.from(textTop,1, {y:'20px',opacity:'0',ease:'power2.out'},0)
+		.from(textBottom,1, {y:'-20px',opacity:'0',ease:'power2.out'},0)
+		ScrollTrigger.create({
+			trigger: img, // 触发器元素
+			start: "top 90%", // 滚动触发器的起始滚动位置
+			end: '100% 80%',   // 滚动触发器的结束滚动位置
+			markers: false, // 开启标注功能
+			animation:tl1,
+			scroller:dom,//设置指定元素为滚动依据
+			// toggleActions: "play reset play reset",
+			scrub:false,
+		});
+	})
+	
 })
 onUnmounted(()=>{
 })
@@ -45,12 +47,70 @@ const {} = toRefs(data);
 	</section>
 	<section class="our-team-item bg1">
 		<div class="content">
-			<div class="text"></div>
+			<div class="text">
+				<p>
+					Prof Wong is Cheng Yik Hung Professor in Fashion of School of Fashion and Textiles at The Hong Kong Polytechnic University and currently serving as the Chief Executive Officer and Centre Director of 
+					<a href="https://www.aidlab.hk/">Laboratory for Artificial Intelligence in Design (AiDLab)</a>.
+					He is one of the inventors of the technologies to be commercialized in the start-up.
+				</p>
+				<div class="bottom-text" ref="bottomText">
+					<h4 class="name">Prof Calvin WONG</h4>
+					<h4 class="position">Co-Founder and Technical Advisor</h4>
+				</div>
+			</div>
 			<div class="img">
 				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_01-600x887.png" alt="">
 			</div>
 		</div>
 	</section>
+	<section class="our-team-item bg2">
+		<div class="content">
+			<div class="img">
+				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_02-600x887.png" alt="">
+			</div>
+			<div class="text">
+				<p>
+					Ms Wong is an accomplished C-level business executive with extensive experience in the fashion and luxury goods industries, building business across China and APAC and leading operations for renowned fashion houses such as DFS USA, Lane Crawford, Burberry Asia, Brunello Cucinelli and Versace Asia Pacific.
+				</p>
+				<div class="bottom-text" ref="bottomText">
+					<h4 class="name">Ms Kim WONG</h4>
+					<h4 class="position">Co-Founder and Chief Executive Officer</h4>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section class="our-team-item bg1">
+		<div class="content">
+			<div class="text">
+				<p>
+					Dr Zou is currently serving as Assistant Professor at School of Fashion and Textiles at The Hong Kong Polytechnic University. She is one of the inventors of the technologies to be commercialized in the start-up.
+				</p>
+				<div class="bottom-text" ref="bottomText">
+					<h4 class="name">Dr Aemika ZOU</h4>
+					<h4 class="position">Technical Advisor</h4>
+				</div>
+			</div>
+			<div class="img">
+				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_03-600x887.png" alt="">
+			</div>
+		</div>
+	</section>
+	<section class="our-team-item bg2">
+		<div class="content">
+			<div class="img">
+				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_04-600x887.png" alt="">
+			</div>
+			<div class="text">
+				<p>
+					Giovanni is currently the Chief Executive Officer Asia of Salvatore Ferragamo.
+				</p>
+				<div class="bottom-text" ref="bottomText">
+					<h4 class="name">Mr Giovanni DI SALVO</h4>
+					<h4 class="position">Advisory Member</h4>
+				</div>
+			</div>
+		</div>
+	</section>
 </template>
 <style lang="less" scoped>
 	.our-team{
@@ -75,9 +135,15 @@ const {} = toRefs(data);
 		width: 100%;
 		&.bg1{
 			background-color: #eeeeee;
+			.img{
+				text-align: right;
+			}
 		}
 		&.bg2{
 			background-color: #ffffff;
+			.img{
+				text-align: left;
+			}
 		}
 		> .content{
 			padding: 100px 0;
@@ -87,10 +153,49 @@ const {} = toRefs(data);
 			> div{
 				width: 50%;
 			}
+			> .text{
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				> p{
+					font-family: "Poppins", Sans-serif;
+					font-size: 16px;
+					font-weight: 600;
+					line-height: 1.6em;
+					color: #000000;
+					margin-bottom: 20px;
+					> a{
+						color: inherit;
+						font-size: inherit;
+						font-family: inherit;
+						line-height: inherit;
+						text-decoration: none;
+					}
+				}
+				> .bottom-text{
+					> .name{
+						font-family: "Poppins", Sans-serif;
+						font-size: 16px;
+						font-weight: 600;
+						color: #000000;
+						line-height: 1;
+						margin-bottom: 10px;
+					}
+					> .position{
+						font-family: "Poppins", Sans-serif;
+						font-size: 16px;
+						font-weight: 400;
+						color: #000000;
+						line-height: 1;
+					}
+				}
+
+			}
 			> .img{
-				text-align: right;
 				> img{
 					width: 100%;
+					height: 492px;
+					object-fit: cover;
 					max-width: 330px;
 				}
 			}
diff --git a/src/pages/about-us/strategic-partners.vue b/src/pages/about-us/strategic-partners.vue
new file mode 100644
index 0000000..34635b9
--- /dev/null
+++ b/src/pages/about-us/strategic-partners.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { gsap, TweenMax, TweenLite } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const imgItem1 = ref(null)
+let data = reactive({
+})
+onMounted(()=>{
+	
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="strategic-partners">
+		<div class="content">
+			<h2 v-tween-Y="'30px'">Strategic Partners</h2>
+			<div class="img-box" v-tween-Y="'30px'">
+				<a href="https://www.aidlab.hk/">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_01.png" alt="">
+				</a>
+				<a href="https://www.polyu.edu.hk/">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_02-1.png" alt="">
+				</a>
+				<a href="https://www.rca.ac.uk/">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_03-300x145.png" alt="">
+				</a>
+				<img src="https://code-create.com.hk/wp-content/uploads/2025/05/Eschange-600x130.jpg" alt="">
+			</div>
+		</div>
+	</section>
+</template>
+<style lang="less" scoped>
+	.strategic-partners{
+		width: 100%;
+		background-color: #fff;
+		> .content{
+			margin: 0 auto;
+			max-width: 1440px;
+			padding: 200px 0px 200px 0px;
+			> h2{
+				font-family: "Poppins", Sans-serif;
+				font-size: 40px;
+				font-weight: 600;
+				letter-spacing: 1px;
+				color: #000000;
+				margin-bottom: 30px;
+				text-align: center;
+			}
+			> .img-box{
+				width: 1110px;
+				margin: 0 auto;
+				margin-top: 40px;
+				display: flex;
+				height: 100px;
+				> a{
+					width: 25%;
+					> img{
+						object-fit: contain;
+						height: 100%;
+						width: 100%;
+					}
+				}
+				> img{
+					width: 25%;
+					object-fit: contain;
+					padding: 10px;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file