pc_shop_site/components/bookCard.vue

<template>
  <div class="wrap">
    <a
      :href="cardData.filepath"
      target="_blank">
      <div class="item-left">
        <el-image
          lazy
          :src="comImg"
          fit="cover"
          style="width: 100%; height: 100%"></el-image>
      </div>
      <div class="item-right">
        <p class="title">{{ cardData.name || cardData.title }}</p>
        <p class="date">Publish on {{ cardData.create_time | formatTime }}</p>
      </div>
    </a>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  filters: {
    formatTime(val) {
      return dayjs(val).format('MMM D,YYYY')
    },
  },
  props: {
    cardData: {},
  },
  computed: {
    comImg() {
      return this.$utils.generateResizedImageUrl(this.cardData.img,400)
    },
  },
  methods: {
    beforeDataProcess(rawData) {
      return {
        name: rawData.name,
        id: rawData.value,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 460px;
  height: 232px;
  background: #f5f5f5;
  margin: 35px 20px 35px 0;
  cursor: pointer;
  position: relative;
  a {
    .item-left {
      position: absolute;
      left: 15px;
      transform: translate(0, -5%);
      width: 192px;
      height: 110%;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
      background-color: #fff;
    }
    .item-right {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      padding-left: 250px;
      .title {
        font-size: 18px;
        font-weight: 600;
        color: #000000;
        margin-bottom: 10px;
      }
      .date {
        font-size: 14px;
        font-weight: 400;
        color: #4a596c;
      }
    }
  }
}
.wrap:nth-of-type(2n) {
  margin-right: 0;
}
</style>