Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create

src/directives/tween-animation.ts

@@ -1,13 +1,14 @@
 import { gsap, } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 export default {
-	name: 'tween-animation',
+	name: 'tween-Y',
-	mounted(el: HTMLElement) {
+	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){

src/pages/about-us/ecosystem.vue

@@ -64,6 +64,7 @@
 			position: relative;
 			> img{
 				width: 100%;
+				height: 675px;
 			}
 			> .icon-bofang{
 				font-size: 100px;

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>

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;

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 ourListDom = document.querySelectorAll('.our-team-item')
-	let tl1 = gsap.timeline();
+	ourListDom.forEach((item,index)=>{
-	tl1.from(imgItem1.value,1, {y:'200px',opacity:0,ease:'power2.out'},0)
+		gsap.registerPlugin(ScrollTrigger);
-	tl1.from(imgItem2.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.2) 
+		let tl1 = gsap.timeline();
-	tl1.from(imgItem3.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.4)
+		let img = item.querySelector('.img')
-	tl1.from(imgItem4.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.6)
+		let textTop = item.querySelector('.text p')
-	ScrollTrigger.create({
+		let textBottom = item.querySelector('.text .bottom-text')
-		trigger: imgBox.value, // 触发器元素
+		tl1.from(img,1, {opacity:'0',ease:'power2.out'},0)
-		start: "top 90%", // 滚动触发器的起始滚动位置
+		.from(textTop,1, {y:'20px',opacity:'0',ease:'power2.out'},0)
-		end: '100% 80%',   // 滚动触发器的结束滚动位置
+		.from(textBottom,1, {y:'-20px',opacity:'0',ease:'power2.out'},0)
-		markers: false, // 开启标注功能
+		ScrollTrigger.create({
-		animation:tl1,
+			trigger: img, // 触发器元素
-		scroller:dom,//设置指定元素为滚动依据
+			start: "top 90%", // 滚动触发器的起始滚动位置
-		toggleActions: "play reset play reset",
+			end: '100% 80%',   // 滚动触发器的结束滚动位置
-		scrub:false,
+			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;
 				}
 			}

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>