about页面

src/directives/tween-animation.ts

@@ -16,6 +16,7 @@ export default {
 			animation:tl1,
 			scroller:dom,//设置指定元素为滚动依据
 			scrub:2,
+			// toggleActions: "play reset play reset",
 			// onUpdate:(v)=>{
 			// 	if(v.progress < 0.1){
 			// 		v.trigger?.classList.remove('active')

src/pages/about-us/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import Ecosystem from './ecosystem.vue'
 import Title from './title.vue'
+import Mission from './mission.vue'
+import OurTeam from './our-team.vue'
 defineExpose({})
 </script>
 <template>
@@ -10,6 +12,8 @@ defineExpose({})
 		</div>
 		<Title />
 		<Ecosystem />
+		<Mission />
+		<OurTeam />
 	</div>
 </template>
 <style lang="less" scoped>

src/pages/about-us/mission.vue

@@ -6,9 +6,31 @@ 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,
+	});
 })
 onUnmounted(()=>{
 })
@@ -24,8 +46,24 @@ const {} = toRefs(data);
 	</section>
 	<section class="mission-focus-area">
 		<div class="content">
-			<div class="img-box">
+			<h2>Focus Area</h2>
-				<img src="https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg" alt="">
+			<div class="img-box" ref="imgBox">
+				<div class="img-item" ref="imgItem1">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_01.png" alt="">
+					<h2>Elevate Operation Efficiency</h2>
+				</div>
+				<div class="img-item" ref="imgItem2">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_02-1-600x888.png" alt="">
+					<h2>Vertical Design Platform</h2>
+				</div>
+				<div class="img-item" ref="imgItem3">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_03-1-600x887.png" alt="">
+					<h2>Education</h2>
+				</div>
+				<div class="img-item" ref="imgItem4">
+					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_04-1-600x888.png" alt="">
+					<h2>Community</h2>
+				</div>
 			</div>
 		</div>
 	</section>
@@ -57,21 +95,51 @@ const {} = toRefs(data);
 
 		}
 	}
-	.mission-video{
+	.mission-focus-area{
 		width: 100%;
-		background-color: #463a37;
+		background-color: #f9f9f9;
 		> .content{
-			max-width: 1200px;
+			max-width: 1440px;
 			margin: 0 auto;
-			padding: 100px 0;
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			flex-direction: column;
+			> h2{
+				font-family: "Poppins", Sans-serif;
+				font-size: 40px;
+				font-weight: 600;
+				letter-spacing: 1px;
+				color: #000000;
+				margin: 100px auto;
+			}
 			> .img-box{
+				padding: 10px;
 				margin: 0 auto;
+				margin-bottom: 20px;
 				position: relative;
+				display: flex;
+				> .img-item{
+					margin: 10px;
+					// width: 1120px;
+					width: 340px;
+					position: relative;
+					> h2{
+						font-family: "Poppins", Sans-serif;
+						font-weight: 600;
+						line-height: 1.3em;
+						letter-spacing: 2px;
+						color: #FFFFFF;
+						width: 320px;
+						position: absolute;
+						bottom: 25%;
+						text-align: center;
+						left: 50%;
+						transform: translateX(-50%);
+					}
 					> img{
-					width: 1120px;
+						width: 100%;
+					}
 				}
 			}
 		}

src/pages/about-us/our-team.vue

@@ -0,0 +1,99 @@
+<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)
+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,
+	});
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="our-team">
+		<div class="content">
+			<h2>Our Team</h2>
+		</div>
+	</section>
+	<section class="our-team-item bg1">
+		<div class="content">
+			<div class="text"></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>
+</template>
+<style lang="less" scoped>
+	.our-team{
+		width: 100%;
+		background-color: #f9f9f9;
+		> .content{
+			margin: 0 auto;
+			max-width: 730px;
+			padding: 100px 0px 100px 0px;
+			> h2{
+				text-align: center;
+				margin-bottom: 30px;
+				color: #000000;
+				font-size: 40px;
+				font-weight: 600;
+				letter-spacing: 1px;
+				font-family: "Poppins", Sans-serif;
+			}
+		}
+	}
+	.our-team-item{
+		width: 100%;
+		&.bg1{
+			background-color: #eeeeee;
+		}
+		&.bg2{
+			background-color: #ffffff;
+		}
+		> .content{
+			padding: 100px 0;
+			max-width: 960px;
+			margin: 0 auto;
+			display: flex;
+			> div{
+				width: 50%;
+			}
+			> .img{
+				text-align: right;
+				> img{
+					width: 100%;
+					max-width: 330px;
+				}
+			}
+		}
+	}
+</style>