148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<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="mission">
|
|
<div class="content">
|
|
<h2>Mission</h2>
|
|
<p>To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry</p>
|
|
</div>
|
|
</section>
|
|
<section class="mission-focus-area">
|
|
<div class="content">
|
|
<h2>Focus Area</h2>
|
|
<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>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.mission{
|
|
width: 100%;
|
|
background-color: #eeeeee;
|
|
> .content{
|
|
margin: 0 auto;
|
|
max-width: 730px;
|
|
padding: 200px 0px 200px 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
> h2{
|
|
margin-bottom: 30px;
|
|
color: #000000;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
font-family: "Poppins", Sans-serif;
|
|
}
|
|
> p{
|
|
color: #555;
|
|
font-size: 16px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.mission-focus-area{
|
|
width: 100%;
|
|
background-color: #f9f9f9;
|
|
> .content{
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
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;
|
|
height: 503px;
|
|
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: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |