uni-coods.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <view class="goods-item">
  3. <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
  4. <view class="name">{{data.name}}</view>
  5. <view class="price">
  6. <view><text>{{data.price}}</text>乐豆</view>
  7. <view><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. props: {
  14. imgHeight: {
  15. type: Number,
  16. default: 250
  17. },
  18. data:{
  19. type: Object,
  20. default: function(){
  21. return {}
  22. }
  23. }
  24. },
  25. data() {
  26. return {
  27. loadingImg: '/static/loading.gif',
  28. errorImg: '/static/imgError.png'
  29. }
  30. }
  31. }
  32. </script>
  33. <style lang="scss">
  34. .goods-item{
  35. background: #FFFFFF;
  36. box-shadow: 1px 1px 3px #eee;
  37. width: 48%;
  38. margin-bottom: 35upx;
  39. .name{
  40. padding: 10upx 20upx 0;
  41. }
  42. .price{
  43. display: flex;
  44. align-items: center;
  45. justify-content: space-between;
  46. padding: 15upx 20upx;
  47. text{
  48. color: red;
  49. font-size: 36upx;
  50. margin-right: 6upx;
  51. }
  52. >view{
  53. &:first-child{
  54. font-size: 22upx;
  55. }
  56. }
  57. }
  58. }
  59. </style>