157 lines
3.2 KiB
Vue
157 lines
3.2 KiB
Vue
<template>
|
|
<div class="our-portfolio-item wow fadeInUp" :data-wow-delay="item.time" >
|
|
<img v-lazy="assetsUri('images/'+item.img+'.png')" class="our-portfolio-item-img" alt="">
|
|
<h3 class="our-portfolio-item-title">{{item.title}}</h3>
|
|
<p class="our-portfolio-item-content">{{item.content}}</p>
|
|
<nuxt-link :to="item.link" tag="a" class="our-portfolio-item-a">Read more<van-icon name="arrow" color="#F49F00" ></van-icon></nuxt-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
assetsUri
|
|
} from "../../utils";
|
|
|
|
export default {
|
|
name: "OurPortfolioItem",
|
|
data(){
|
|
return {
|
|
assetsUri
|
|
}
|
|
},
|
|
props:{
|
|
item:{
|
|
default:()=>{},
|
|
type:Object
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.our-portfolio-item{
|
|
max-width: 4.09rem;
|
|
width: 100%;
|
|
min-height: 4.97rem;
|
|
opacity: 1;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all .3s ease-in;
|
|
&-a{
|
|
display: block;
|
|
margin: 0 auto;
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .32rem;
|
|
color: #F49F00;
|
|
text-decoration: underline;
|
|
padding-bottom: .70rem;
|
|
margin-top: .32rem;
|
|
>i{
|
|
font-size: .12rem;
|
|
}
|
|
}
|
|
&:hover{
|
|
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
|
|
transform: scale(1.05);
|
|
}
|
|
&-title{
|
|
margin-top: .25rem;
|
|
font-size: .24rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .84rem;
|
|
color: #342927;
|
|
}
|
|
&-content{
|
|
margin: 0 auto;
|
|
max-width: 3.52rem;
|
|
min-height: 1.18rem;
|
|
padding-left: .3rem;
|
|
padding-right: .3rem;
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .32rem;
|
|
color: #302D2C;
|
|
}
|
|
&-img{
|
|
display: block;
|
|
width: .88rem;
|
|
height: .88rem;
|
|
margin: 77px auto 0;
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1250px) {
|
|
.our-portfolio-item{
|
|
margin-top: .5rem;
|
|
width: 4.09rem;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 830px) {
|
|
.our-portfolio-item{
|
|
margin-top: .5rem;
|
|
width: 100%;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.our-portfolio-item{
|
|
margin-top: .5rem;
|
|
max-width: 100%;
|
|
min-height: 4.97rem;
|
|
text-align: center;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
&-a{
|
|
margin: .45rem auto 0;
|
|
font-size: .3rem;
|
|
font-weight: 400;
|
|
line-height: .32rem;
|
|
padding-bottom: 1.1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
>i{
|
|
font-size: .24rem;
|
|
}
|
|
}
|
|
&:hover{
|
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
|
}
|
|
&-title{
|
|
margin-top: .52rem;
|
|
font-size: .4rem;
|
|
font-weight: bold;
|
|
line-height: .84rem;
|
|
}
|
|
&-content{
|
|
margin: .6rem auto 0;
|
|
max-width: 6.30rem;
|
|
min-height: 1.35rem;
|
|
padding-left: .3rem;
|
|
padding-right: .3rem;
|
|
font-weight: 400;
|
|
font-size: .24rem;
|
|
line-height: .34rem;
|
|
}
|
|
&-img{
|
|
display: block;
|
|
width: 2.42rem;
|
|
height: 2.42rem;
|
|
margin: .99rem auto 0;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|