311 lines
10 KiB
Vue
311 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="fullpage-container">
|
||
|
|
<section-view :css-style="{'background-color':bgColors[0],'transition': 'background-color .3s ease-in'}">
|
||
|
|
<section-limit-x >
|
||
|
|
</section-limit-x>
|
||
|
|
</section-view>
|
||
|
|
<about-us id="aboutUs" :css-style="{'background-color':activeColor,'transition': 'background-color .3s ease-in'}" >
|
||
|
|
<lottie-animation
|
||
|
|
:style="{'opacity':activeColor===bgColors[1]?'1':'0'}"
|
||
|
|
:loop="true"
|
||
|
|
:speed="1000"
|
||
|
|
:autoPlay="true"
|
||
|
|
ref="anim"
|
||
|
|
:animationData="require('@/assets/data/q3.json')"
|
||
|
|
/>
|
||
|
|
</about-us>
|
||
|
|
<focus-areas id="focusAreas" :css-style="{backgroundColor:bgColors[2],'transition': 'background-color .3s ease-in'}"></focus-areas>
|
||
|
|
<our-portfolio id="ourPortfolio" :css-style="{'position':'relative','z-index':'1',backgroundColor:activeColor2,'transition': 'background-color .3s ease-in'}">
|
||
|
|
<our-portfolio-item :style="{'opacity':activeColor2==='#fff'?'1':'0'}" v-for="(item) in portfolios" :key="item.title" :item="item"></our-portfolio-item>
|
||
|
|
</our-portfolio>
|
||
|
|
<div id="portfolio" :style="{'background-color':bgColors[4],'transition': 'background-color .3s ease-in'}">
|
||
|
|
<div class="home-wrap">
|
||
|
|
<portfolio :position="position" :top="top" :bottom="bottom" :staticData="portfolio"></portfolio>
|
||
|
|
<partners :partners="partners" :showPartners="showPartners" ></partners>
|
||
|
|
<our-founders><banner :images="banners"></banner></our-founders>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<section-view id="situation" :css-style="{'background-color':activeColor3,'transition': 'background-color .3s ease-in'}">
|
||
|
|
<situation :style="{'opacity':activeColor3=='#fff'?'1':'0'}">
|
||
|
|
<email-footer ></email-footer>
|
||
|
|
</situation>
|
||
|
|
</section-view>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import LottieAnimation from 'lottie-web-vue'
|
||
|
|
import SectionLimitX from "../components/SectionLimitX/index";
|
||
|
|
import AboutUs from "../components/AboutUs/index";
|
||
|
|
import FocusAreas from "../components/FocusAreas/index";
|
||
|
|
import OurPortfolio from "../components/OurPortfolio/index";
|
||
|
|
import {portfolios} from "../assets/js/static";
|
||
|
|
import OurPortfolioItem from "../components/OurPortfolioItem/index";
|
||
|
|
import SectionView from "../components/SectionView/index";
|
||
|
|
import Portfolio from "../components/Portfolio/index";
|
||
|
|
import Partners from "../components/Partners/index";
|
||
|
|
import OurFounders from "../components/OurFounders/index";
|
||
|
|
import Banner from "../components/Banners/index";
|
||
|
|
import Situation from "../components/Situation/index";
|
||
|
|
import EmailFooter from "../components/EmailFooter/index";
|
||
|
|
import {hanldePortflioData} from "../utils/filter";
|
||
|
|
import animateMixin from '../utils/animateMixin'
|
||
|
|
export default {
|
||
|
|
name: 'IndexPage',
|
||
|
|
layout:'index',
|
||
|
|
mixins:[animateMixin],
|
||
|
|
components:{
|
||
|
|
EmailFooter,
|
||
|
|
Situation,
|
||
|
|
Banner,
|
||
|
|
OurFounders,
|
||
|
|
Partners,
|
||
|
|
Portfolio,
|
||
|
|
SectionView,
|
||
|
|
OurPortfolioItem,
|
||
|
|
OurPortfolio,
|
||
|
|
FocusAreas,
|
||
|
|
AboutUs,
|
||
|
|
SectionLimitX,
|
||
|
|
LottieAnimation
|
||
|
|
},
|
||
|
|
head() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
title: this.title,
|
||
|
|
meta: [
|
||
|
|
{
|
||
|
|
hid: 'description',
|
||
|
|
name: 'description',
|
||
|
|
content: 'My custom description'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.activeColor=this.bgColors[1]
|
||
|
|
this.activeColor2=this.bgColors[3]
|
||
|
|
this.activeColor3=this.bgColors[5]
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.handleScroll()
|
||
|
|
window.addEventListener('scroll',this.handleScroll)
|
||
|
|
|
||
|
|
},
|
||
|
|
async asyncData(config) {
|
||
|
|
const {$axios,$config,payload}=config;
|
||
|
|
if(payload){
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// const {baseURL}=$config
|
||
|
|
// const result=await Promise.all([
|
||
|
|
// $axios.$get(`${baseURL}/partners/index?page=1&size=10`),
|
||
|
|
// $axios.$get(`${baseURL}/portfolio/index?page=1&size=99`),
|
||
|
|
// $axios.$get(`${baseURL}/carousel/index?page=1&size=10`),
|
||
|
|
// ])
|
||
|
|
// if(!result.length){
|
||
|
|
// return {}
|
||
|
|
// }
|
||
|
|
// console.log(result[1].content,'result',result[2].content)
|
||
|
|
// if(!result[1].content){
|
||
|
|
// return {partners:result[0].content, banners:result[2].content,}
|
||
|
|
// }
|
||
|
|
// const myPortfolio=await hanldePortflioData(result[1].content)
|
||
|
|
// return {partners:result[0].content, banners:result[2].content,portfolio:myPortfolio}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
handleScroll(){
|
||
|
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||
|
|
// const opacity = Math.abs(Math.round(scrollTop)) / 300;
|
||
|
|
const clientWidth=document.documentElement.clientWidth;
|
||
|
|
if(clientWidth>768){
|
||
|
|
if(scrollTop>300){
|
||
|
|
this.activeColor=this.bgColors[1]
|
||
|
|
}else if(scrollTop<=300){
|
||
|
|
this.activeColor=this.bgColors[0]
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
this.activeColor=this.bgColors[1]
|
||
|
|
}
|
||
|
|
if(clientWidth<751){
|
||
|
|
this.position='sticky'
|
||
|
|
this.top='0'
|
||
|
|
this.bottom='initial';
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const focusAreasDom= document.getElementById('focusAreas');
|
||
|
|
const ourPortfolioDom= document.getElementById('ourPortfolio');
|
||
|
|
const situationDom= document.getElementById('situation');
|
||
|
|
const focusAreasSetTop=focusAreasDom.offsetTop;
|
||
|
|
const ourPortfolioDomSetTop=ourPortfolioDom.offsetTop;
|
||
|
|
const situationDomTop=situationDom.offsetTop;
|
||
|
|
if(scrollTop>(focusAreasSetTop-300)){
|
||
|
|
this.activeColor=this.bgColors[0]
|
||
|
|
this.activeColor2=this.bgColors[4]
|
||
|
|
}
|
||
|
|
if(scrollTop>(ourPortfolioDomSetTop-300)){
|
||
|
|
this.activeColor2='#fff'
|
||
|
|
}
|
||
|
|
if(scrollTop<(situationDomTop-300)){
|
||
|
|
this.activeColor3=this.bgColors[4]
|
||
|
|
}
|
||
|
|
if(scrollTop>(situationDomTop-300)){
|
||
|
|
this.activeColor3='#fff'
|
||
|
|
}
|
||
|
|
// else if(scrollTop<=300){
|
||
|
|
// this.activeColor=this.bgColors[0]
|
||
|
|
// }
|
||
|
|
const portfolioDom= document.getElementById('iPortfolio');
|
||
|
|
const portfolioOffSetTop=portfolioDom.offsetTop;
|
||
|
|
|
||
|
|
const portfolioHeight=portfolioDom.offsetHeight;
|
||
|
|
const partnersDom= document.getElementById('partners');
|
||
|
|
const partnersSetTop=partnersDom.offsetTop;
|
||
|
|
this.showPartners=scrollTop>(partnersSetTop-300)
|
||
|
|
const layoutHeight= document.getElementById('layout-header').offsetHeight;
|
||
|
|
const ballHeight= document.getElementById('ball').offsetHeight;
|
||
|
|
const portfolioTop=portfolioOffSetTop;
|
||
|
|
if(scrollTop>portfolioTop){
|
||
|
|
if(scrollTop>(portfolioHeight+portfolioTop-ballHeight)){
|
||
|
|
this.position='absolute'
|
||
|
|
this.bottom=0+'px';
|
||
|
|
this.top='initial';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.position='fixed'
|
||
|
|
this.top=layoutHeight+'px';
|
||
|
|
this.bottom='initial';
|
||
|
|
}else if(scrollTop<=portfolioTop){
|
||
|
|
this.position='absolute'
|
||
|
|
this.top='0'
|
||
|
|
this.bottom='initial';
|
||
|
|
}
|
||
|
|
// console.log(portfolioTop,'offSetTop',scrollTop,'clientWidth')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
destroyed(){
|
||
|
|
window.removeEventListener('scroll',this.handleScroll)
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
top:'0',
|
||
|
|
bottom:'initial',
|
||
|
|
position:'sticky',
|
||
|
|
activeColor:'#2E2C2C',
|
||
|
|
activeColor2:'#2E2C2C',
|
||
|
|
activeColor3:'#2E2C2C',
|
||
|
|
showPartners:false,
|
||
|
|
bgColors:[
|
||
|
|
'#2E2C2C','#fff','#000','#fff','#292727','#fff'
|
||
|
|
],
|
||
|
|
partners:[
|
||
|
|
{
|
||
|
|
logo:'images/partners/组 764@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 761@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 762@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 763@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 756@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 757@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 758@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 759@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 755@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 752@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 753@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 754@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 751@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 750@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 749@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 748@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 744@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 745@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 746@2x.png',
|
||
|
|
}, {
|
||
|
|
logo:'images/partners/组 747@2x.png',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
logo:'images/partners/组 743@2x.png',
|
||
|
|
},
|
||
|
|
// ------------------------------------
|
||
|
|
{
|
||
|
|
logo:'images/partners/组 742@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 741@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 740@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 736@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 737@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 738@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 739@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 732@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 733@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 734@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 735@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 731@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 730@2x.png',
|
||
|
|
},
|
||
|
|
// --------------------------------
|
||
|
|
{
|
||
|
|
logo:'images/partners/组 729@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 728@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 727@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 726@2x.png',
|
||
|
|
},{
|
||
|
|
logo:'images/partners/组 725@2x.png',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
banners:[
|
||
|
|
{
|
||
|
|
logo:'images/banners/图层 1@2x.png'
|
||
|
|
}, {
|
||
|
|
logo:'images/banners/图层 2@2x.png'
|
||
|
|
}, {
|
||
|
|
logo:'images/banners/图层 3@2x.png'
|
||
|
|
}, {
|
||
|
|
logo:'images/banners/图层-4@2x.png'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
portfolio:[],
|
||
|
|
title:'LightLimX',
|
||
|
|
portfolios
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.home-wrap{
|
||
|
|
/*max-width: 12;*/
|
||
|
|
max-width: 13rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
</style>
|