storeItem.vue 680 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <div class="store-item">
  3. <el-image :src="productImage" />
  4. <div class="store-name">{{ productName }}</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. props: {
  10. productImage: {
  11. type: String,
  12. default: () => ''
  13. },
  14. productName: {
  15. type: String,
  16. default: () => ''
  17. }
  18. },
  19. data() {
  20. return {
  21. }
  22. }
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. .store-item {
  27. padding: 10px;
  28. margin: 10px 0;
  29. display: flex;
  30. align-items: center;
  31. background: #66666636;
  32. margin-bottom: 10px;
  33. .el-image {
  34. width: 80px;
  35. height: 80px;
  36. margin-right: 10px;
  37. }
  38. .store-name {
  39. width: calc(100% - 80px);
  40. }
  41. }
  42. </style>