shop-app/src/components/product-list/product-item.vue

<template>
  <view class="product-item-container">
    <view class="is-collect"></view>
    <image :src="product.cover" class="w-328rpx" mode="widthFix"></image>
    <view class="product-name">{{ product.name }}</view>
    <view class="sell-rate">
      <view v-format="'number'" class="rate">
        {{ product.rate }}
        <image src="@/static/images/rate.svg" class="w-28rpx ml-8rpx" mode="widthFix"></image>
      </view>
      <view class="sold">{{ product.sold }} Sold</view>
    </view>
    <view class="price-cart">
      <view class="price">USD {{ product.price }}</view>
      <view class="cart">
        <image src="@/static/images/cart.svg" class="w-32rpx" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ProductSimpleType } from '@/types/product-type'

  defineOptions({
    name: 'ProductItem',
  })
  const { product } = defineProps<{ product: ProductSimpleType }>()
</script>

<style lang="scss" scoped>
  .product-item-container {
    position: relative;
    width: 328rpx;
    margin-bottom: 26rpx;

    &:nth-last-child(1),
    &:nth-last-child(2) {
      margin-bottom: 0;
    }

    .is-collect {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64rpx;
      height: 64rpx;
      background-color: $shop-white;
    }

    .product-name {
      height: 30rpx;
      margin-top: 16rpx;
      overflow: hidden;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 30rpx;
      color: $shop-text-3;
      white-space: nowrap;
    }

    .sell-rate {
      display: flex;
      align-items: center;
      margin-top: 16rpx;
      font-family: 'PingFang SC';
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 28rpx;
      color: $shop-text-9;

      .rate {
        display: flex;
        margin-right: 16rpx;
      }

      .sold {
        box-sizing: border-box;
        padding-left: 16rpx;
        border-left: 2rpx solid $shop-bg-line;
      }
    }

    .price-cart {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 48rpx; /* 157.143% */
      color: $shop-primary;

      .cart {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48rpx;
        height: 48rpx;
        background-color: $shop-primary;
        border-radius: 50%;
      }
    }
  }
</style>