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