product.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <script lang="ts" setup>
  2. const props = defineProps({
  3. item: {
  4. type: Object,
  5. required: true,
  6. },
  7. width: {
  8. type: [Number, String],
  9. default: 260,
  10. },
  11. height: {
  12. type: [Number, String],
  13. default: 260,
  14. },
  15. })
  16. </script>
  17. <template>
  18. <view
  19. class="flex flex-[0.5] flex-col items-center border-1 border-#E0E0E0 border-solid pb-8rpx"
  20. :style="{ width: Number.isFinite(width) ? `${width}rpx` : width }"
  21. >
  22. <view :style="{ width: Number.isFinite(width) ? `${width}rpx` : width, height: Number.isFinite(height) ? `${height}rpx` : height }">
  23. <image
  24. :src="item.image"
  25. class="h-full w-full"
  26. mode="aspectFit"
  27. />
  28. </view>
  29. <view class="box-border w-full px-8rpx text-24rpx">
  30. <view class="truncate">
  31. {{ item.title }}
  32. </view>
  33. <view class="flex items-center justify-between">
  34. <view class="text-24rpx text-#FF334A font-bold">
  35. ৳ {{ item.price }}
  36. </view>
  37. <view class="text-24rpx text-#898989">
  38. {{ item.sold }} Sold
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </template>
  44. <style lang="scss" scoped>
  45. //
  46. </style>