163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
<template>
|
|
<div class="innovation-block">
|
|
<h3 class="innovation-block-h3">Articles</h3>
|
|
<div class="innovation-block-lists">
|
|
<div class="innovation-block-item wow fadeInUp" v-for="(item,index) in staticData" :key="'in_'+index" @click="handleLink(item.url)">
|
|
<img v-lazy="item.logo" class="innovation-block-item-img" alt="">
|
|
<h4 class="innovation-block-item-t">{{item.title}}</h4>
|
|
<p class="innovation-block-item-p">{{item.introduce}}</p>
|
|
<span>{{item.auth}}</span>
|
|
<small>{{item.created_at}}</small>
|
|
</div>
|
|
<div class="innovation-block-item" v-if="staticData.length%3>0">
|
|
<img src="" style="opacity: 0" class="innovation-block-item-img" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "InnovationBlock",
|
|
props:{
|
|
staticData:{
|
|
default:()=>[],
|
|
type:Array
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods:{
|
|
handleLink(link){
|
|
if(!link){
|
|
return
|
|
}
|
|
window.location.href=link
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.innovation-block{
|
|
padding-top: 1.17rem;
|
|
&-h3{
|
|
font-size: .2rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #302D2C;
|
|
}
|
|
&-lists{
|
|
margin-top: .58rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
&-item{
|
|
margin-bottom: .72rem;
|
|
&-img{
|
|
display: block;
|
|
width: 3.9rem;
|
|
height: 2.92rem;
|
|
}
|
|
&-t{
|
|
margin-top: .33rem;
|
|
font-size: .2rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .36rem;
|
|
color: #302D2C;
|
|
max-width: 3.45rem;
|
|
}
|
|
&-p{
|
|
max-width: 3.74rem;
|
|
margin-top: .16rem;
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .26rem;
|
|
color: #9B9B9B;
|
|
}
|
|
>span{
|
|
margin-top: .24rem;
|
|
display: block;
|
|
font-size: .14rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .3rem;
|
|
color: #9B9B9B;
|
|
}
|
|
>small{
|
|
font-size: .14rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .3rem;
|
|
color: #9B9B9B;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width:1200px ) {
|
|
.innovation-block{
|
|
&-h3{
|
|
padding-left: .3rem;
|
|
}
|
|
&-lists{
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width:802px ) {
|
|
.innovation-block{
|
|
&-lists{
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width:768px ) {
|
|
.innovation-block{
|
|
padding-top: .5rem;
|
|
&-h3{
|
|
margin-top: 0;
|
|
font-size: .4rem;
|
|
padding-left: .3rem;
|
|
}
|
|
&-lists{
|
|
margin-top: .42rem;
|
|
justify-content: space-around;
|
|
}
|
|
&-item{
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
padding: 0 .3rem;
|
|
&-img{
|
|
width: 100%;
|
|
}
|
|
&-t{
|
|
margin-top: .2rem;
|
|
font-size: .2rem;
|
|
line-height: .36rem;
|
|
max-width: 6.21rem;
|
|
}
|
|
&-p{
|
|
max-width: 6.62rem;
|
|
margin-top: .18rem;
|
|
font-size: .28rem;
|
|
line-height: .34rem;
|
|
}
|
|
>span{
|
|
margin-top: .5rem;
|
|
font-size: .24rem;
|
|
line-height: .3rem;
|
|
}
|
|
>small{
|
|
font-size: .24rem;
|
|
line-height: .3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|