aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

about页面

Browse Source
This commit is contained in:
X1627315083@163.com
2026-05-18 11:33:26 +08:00
parent e36b17642f
commit 4af58134fd
4 changed files with 180 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/directives/tween-animation.ts
View File

@@ -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')

4
src/pages/about-us/index.vue
View File

@@ -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>

84
src/pages/about-us/mission.vue
View File

@@ -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">
<img src="https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg" alt="">
<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>
@@ -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;
> img{
width: 1120px;
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: 100%;
}
}
}
}

99
src/pages/about-us/our-team.vue Normal file
View File

@@ -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>