bandhuBuy-uniapp/src/components/product/product.vue

<script lang="ts" setup>
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  width: {
    type: [Number, String],
    default: 260,
  },
  height: {
    type: [Number, String],
    default: 260,
  },
})
</script>

<template>
  <view
    class="flex flex-[0.5] flex-col items-center border-1 border-#E0E0E0 border-solid pb-8rpx"
    :style="{ width: Number.isFinite(width) ? `${width}rpx` : width }"
  >
    <view :style="{ width: Number.isFinite(width) ? `${width}rpx` : width, height: Number.isFinite(height) ? `${height}rpx` : height }">
      <image
        :src="item.image"
        class="h-full w-full"
        mode="aspectFit"
      />
    </view>
    <view class="box-border w-full px-8rpx text-24rpx">
      <view class="truncate">
        {{ item.title }}
      </view>
      <view class="flex items-center justify-between">
        <view class="text-24rpx text-#FF334A font-bold">
          ৳ {{ item.price }}
        </view>
        <view class="text-24rpx text-#898989">
          {{ item.sold }} Sold
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>