caimei-distribution-www/src/components/goods-card.vue

<template>
    <div class="goods-card" @click="$emit('handlerEmit', storeInfo)">
        <van-image :src="storeInfo.image"></van-image>
        <div class="info">{{ storeInfo.title || 'Prostrolane Nature-B珀洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液' }}</div>
    </div>
</template>

<script>
export default {
  props: {
    storeInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped lang="scss">
.goods-card {
  padding: 4.3vw 0;
  border-bottom: 1px solid #E1E1E1;
  background: #fff;
  display: flex;
  justify-content: space-between;
  ::v-deep .van-image {
    width: 21.6vw;
    height: 21.6vw;
    border-radius: 1.1vw;
  }
  .info {
    line-height: 6.4vw;
    margin-left: 3.2vw;
    height: 12.8vw;
    width: 67.3vw;
    color: #333333;
    font-size: 3.7vw;
    @include webkit-line-clamp(2)
  }
}
</style>