uk_front/components/RowCard.vue

<template>
  <a :href="data.link" target="_target">
    <figure class="card">
      <div class="img" :style="{backgroundImage: 'url(' + data.image + ')'}"></div>
      <figcaption class="card-title">
        {{data.title}}
      </figcaption>
      <figcaption class="card-info">
        <p>{{data.update_time | setTime}}</p>
        <p>{{data.description}}</p>
      </figcaption>
    </figure>
  </a>
</template>

<script>
export default {
  props: {
    data: {},
  },
  filters:{
    setTime(val){
      let tempArr=val.split(' ')
      let timeStr=tempArr[0]
      let timeArr=timeStr.split('-')
      return `${timeArr[2]}-${timeArr[1]}-${timeArr[0]}`
    }
  }
};
</script>

<style lang="scss" scoped>
.card{
  border: 1px sold rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 8px rgba(0,0,0, 0.05);
  padding:20px;
  display: flex;
  margin-bottom:15px;
  cursor: pointer;
  transition: all 0.2s ease-out 0s;
  &:hover {
    transform: translate3d(0px, -5px, 1px);
    box-shadow: 0 0 8px rgba(0,0,0, 0.25);
    .card-title{
      color:#006DC9;
    }
    p{
      &:nth-child(1){
        color: #006DC9;
      }
    }
  }
  .img{
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
    width: 140px;
    height: 160px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .card-title{
    flex:1;
    display: flex;
    align-items: center;
    font-size: 32px;
    margin-left:26px;
  }
  .card-info{
    display: flex;
    flex-direction: column;
    justify-content:  flex-end;
    p{
      &:nth-child(1){
        text-align: right;
        margin-bottom:16px;
      }
      &:nth-child(2){
        color: #D16C61;
      }
    }
  }
}
</style>