goodsCard.vue 909 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <script setup>
  2. defineProps(['itemRow']);
  3. </script>
  4. <template>
  5. <view class="goods-card">
  6. <image class="goods-img" mode="aspectFill" :src="itemRow.picUrl" />
  7. <view class="goods-info">
  8. <text class="goods-title u-line-1">{{ itemRow.spuName }}</text>
  9. <text class="goods-desc u-line-1">{{ itemRow.introduction }}</text>
  10. </view>
  11. </view>
  12. </template>
  13. <style lang="scss" scoped>
  14. .goods-card {
  15. width: 100%;
  16. display: flex;
  17. flex-direction: column;
  18. border-radius: 16rpx;
  19. overflow: hidden;
  20. background: #fff;
  21. .goods-img {
  22. width: 342rpx;
  23. height: 342rpx;
  24. }
  25. .goods-info {
  26. width: 342rpx;
  27. padding: 16rpx;
  28. .goods-title {
  29. font-size: 28rpx;
  30. font-weight: 500;
  31. color: #3d3d3d;
  32. line-height: 40rpx;
  33. }
  34. .goods-desc {
  35. font-size: 24rpx;
  36. color: #9c9c9c;
  37. line-height: 34rpx;
  38. margin-top: 10rpx;
  39. }
  40. }
  41. }
  42. </style>