344 lines
9.0 KiB
Vue
344 lines
9.0 KiB
Vue
<template>
|
|
<div class="portfolio" >
|
|
<h2 class="portfolio-t wow fadeInUp" >Portfolio</h2>
|
|
<div class="portfolio-c" id="iPortfolio">
|
|
<div class="portfolio-c-l">
|
|
<!-- :style="{'position':position}"-->
|
|
<div class="portfolio-c-l-fixed" id="ball"
|
|
:style="{'position':position,'top':top,'bottom':bottom}"
|
|
>
|
|
<img class="portfolio-c-l-fixed-img" v-lazy="assetsUri('images/ball.png')" alt="">
|
|
<span>At LightLimX we believe tomorrow is built today.</span>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-c-r">
|
|
<ul class="portfolio-c-r-u">
|
|
<li class="portfolio-c-r-l" v-for="(group,index) in staticData" :key="'_'+index">
|
|
<h5 class="portfolio-c-r-l-t wow fadeInUp">{{group.title}}</h5>
|
|
<div class="portfolio-c-r-l-d" >
|
|
<img v-lazy="assetsUri(item)" data-wow-delay=".4s" class="wow fadeInRight" v-for="(item,ind) in group.images" :key="ind+'_'" alt="">
|
|
<img v-if="group.images&&(group.images.length%3<3)" style="opacity: 0" alt="">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-card">
|
|
<div class="portfolio-card-item wow fadeInUp" :data-wow-delay="`${0.4+(index*0.2)}s`" v-for="(item,index) in cards" :key="'cards_'+index">
|
|
<img v-lazy="assetsUri(item.img)" v-if="item.img" class="portfolio-card-item-img" alt="">
|
|
<span class="portfolio-card-item-btn" @click="$router.push({path:item.link})">
|
|
{{item.btnText}}
|
|
<van-icon name="arrow" class="portfolio-card-item-btn-icon"></van-icon>
|
|
</span>
|
|
<p>{{item.text}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {assetsUri} from "../../utils";
|
|
|
|
export default {
|
|
name: "Portfolio",
|
|
props:{
|
|
// staticData:{
|
|
// default:()=>[],
|
|
// type:Array
|
|
// },
|
|
position:{
|
|
default:'sticky',
|
|
type:String
|
|
},
|
|
top:{
|
|
default:'0px',
|
|
type:String
|
|
},
|
|
bottom:{
|
|
default:'initial',
|
|
type:String
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
assetsUri,
|
|
cards:[
|
|
{
|
|
img:'images/apply.png',
|
|
btnText:'Apply For Investment',
|
|
text:'We invert and partner with projects outside of our accelerator',
|
|
link:'/contact'
|
|
},
|
|
{
|
|
img:'images/invest.png',
|
|
btnText:'Invest With Us',
|
|
text:'Join our 1000-strong deal-sharing investor network',
|
|
link:'/contact'
|
|
},
|
|
],
|
|
staticData:[
|
|
{
|
|
title:'Infrastructure',
|
|
images:[
|
|
'images/portfolio/组 723@2x.png',
|
|
'images/portfolio/组 698@2x.png',
|
|
'images/portfolio/组 699@2x.png',
|
|
'images/portfolio/组 722@2x.png',
|
|
]
|
|
}, {
|
|
title:'Web 3.0',
|
|
images:[
|
|
'images/portfolio/组 713@2x.png',
|
|
'images/portfolio/组 714@2x.png',
|
|
'images/portfolio/组 715@2x.png',
|
|
'images/portfolio/组 718@2x.png',
|
|
'images/portfolio/组 717@2x.png',
|
|
'images/portfolio/组 716@2x.png',
|
|
'images/portfolio/组 864@2x.png',
|
|
'images/portfolio/组 719@2x.png',
|
|
]
|
|
}, {
|
|
title:'GameFi',
|
|
images:[
|
|
'images/portfolio/组 712@2x.png',
|
|
'images/portfolio/组 711@2x.png',
|
|
'images/portfolio/组 710@2x.png',
|
|
'images/portfolio/组 707@2x.png',
|
|
'images/portfolio/组 708@2x.png',
|
|
'images/portfolio/组 709@2x.png',
|
|
'images/portfolio/组 706@2x.png',
|
|
'images/portfolio/组 705@2x.png'
|
|
]
|
|
},
|
|
{
|
|
title:'SocialFi',
|
|
images:[
|
|
'images/portfolio/组 702@2x.png',
|
|
'images/portfolio/组 703@2x.png',
|
|
'images/portfolio/组 704@2x.png',
|
|
'images/portfolio/组 701@2x.png',
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.portfolio{
|
|
padding-bottom: 1.04rem;
|
|
&-card{
|
|
margin-top: 1.86rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
&-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: .99rem;
|
|
>p{
|
|
text-align: center;
|
|
max-width: 4.76rem;
|
|
margin-top: .42rem;
|
|
font-size: .24rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .48rem;
|
|
color: #9B9B9B;
|
|
}
|
|
&-img{
|
|
display: block;
|
|
width: 2.24rem;
|
|
height: 2.24rem;
|
|
}
|
|
&-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: .67rem;
|
|
width: 3.80rem;
|
|
height: .6rem;
|
|
background: #EDEDED;
|
|
border-radius: .1rem;
|
|
font-size: .24rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #302D2C;
|
|
line-height: .6rem;
|
|
cursor: pointer;
|
|
&-icon{
|
|
display: inline-block;
|
|
margin-left: .2rem;
|
|
color: #342927 ;
|
|
font-size: .12rem;
|
|
}
|
|
&:hover{
|
|
background-color: #F49F00;
|
|
transition: background-color .3s ease-in;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&-t{
|
|
padding-top: 1.38rem;
|
|
padding-bottom: .94rem;
|
|
text-align: center;
|
|
font-size: .6rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .84rem;
|
|
color: #FFFFFF;
|
|
}
|
|
&-c{
|
|
display: flex;
|
|
position: relative;
|
|
justify-content: flex-end;
|
|
&-l{
|
|
&-fixed{
|
|
width: calc(100% - 7.8rem);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: all .3s ease-in;
|
|
&-img{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 5.53rem;
|
|
max-height: 5.53rem;
|
|
margin: 0 auto;
|
|
}
|
|
>span{
|
|
display: block;
|
|
max-width: 3.07rem;
|
|
font-size: .30rem;
|
|
font-family: Manrope;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
line-height: .6rem;
|
|
color: #9B9B9B;
|
|
margin: 0 auto;
|
|
margin-top: -.6rem;
|
|
}
|
|
}
|
|
}
|
|
&-r{
|
|
max-width: 7.8rem;
|
|
flex: 1;
|
|
&-u{
|
|
overflow-x: hidden;
|
|
padding: 0 .3rem;
|
|
padding-top: .37rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
&-l{
|
|
margin-top: .27rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
&-t{
|
|
display: inline-block;
|
|
margin: 0 auto .54rem;
|
|
border: 1px solid #393939;
|
|
border-radius: .29rem;
|
|
font-size: .24rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #F49F00;
|
|
padding: 10px .35rem;
|
|
box-sizing: border-box;
|
|
}
|
|
&-d{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
img{
|
|
display: block;
|
|
width: 2.06rem;
|
|
height: 1.33rem;
|
|
margin-bottom: .36rem;
|
|
cursor: pointer;
|
|
transition: all .3s ease-in;
|
|
&:hover{
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 1250px) {
|
|
.portfolio{
|
|
&-c{
|
|
&-l{
|
|
&-fixed{
|
|
>span{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.portfolio{
|
|
padding-bottom: 1.04rem;
|
|
&-card{
|
|
margin-top: 1.43rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
&-t{
|
|
padding-top: 1.43rem;
|
|
padding-bottom: 0;
|
|
}
|
|
&-c{
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
&-l{
|
|
&-fixed{
|
|
width: 100% !important;
|
|
img{
|
|
margin: 0 auto;
|
|
}
|
|
>span{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&-r{
|
|
flex: 1;
|
|
&-u{
|
|
padding-top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
&-l{
|
|
margin-top: .6rem;
|
|
&:first-child{
|
|
margin-top: -0rem;
|
|
}
|
|
&-t{
|
|
margin: 0 auto .54rem;
|
|
border-radius: .4rem;
|
|
font-size: .4rem;
|
|
padding: .10rem .35rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|