wx-qhb/pageD/homepage/component/goodsCard.vue

<template>
  <view class="card" @click="$emit('toDetail', itemInfo)">
    <image class="goods-img" :src="itemInfo.goods.image" mode=""></image>
    <view class="describe">
      {{ itemInfo.goods.name_cn }}
    </view>
    <view class="price-sale">
      <view class="price">
        <text style="font-size: 20rpx">￥</text>
        <text>{{ itemInfo.goods.price.split(".")[0] }}</text
        >.
        <text style="font-size: 20rpx">{{
          itemInfo.goods.price.split(".")[1]
        }}</text>
      </view>
      <view class="sale"> 销量 {{ itemInfo.goods.sale_num }} </view>
    </view>
    <view class="evaluate">
      <view style="margin-right: 12rpx">
        {{ itemInfo.goods.comment_num }}评价
      </view>
      <view> {{ itemInfo.goods.comment_good_rapporto }}%好评 </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemInfo: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.card {
  width: 324rpx;
  margin-bottom: 20rpx;
  .goods-img {
    width: 324rpx;
    height: 324rpx;
    border-radius: 16rpx;
  }

  .describe {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
    width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 20rpx;
  }
  .price-sale {
    display: flex;
    margin-top: 16rpx;
    align-items: flex-end;
    .price {
      color: #f83224;
      font-weight: 600;
    }
    .sale {
      font-size: 20rpx;
      color: #333;
      opacity: 0.8;
      margin-bottom: 4rpx;
      margin-left: 10rpx;
    }
  }
  .evaluate {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #777;
    margin-top: 16rpx;
  }
}
</style>