<template>
  <div class="product-list">
    <RecommendProductItem class="item" v-for="i in list" v-bind="i"></RecommendProductItem>
  </div>
</template>

<script>

import RecommendProductItem from './recommend-product-item';

export default {
  name: 'RecommendProductList',
  props: ['list'],
  components: {
    RecommendProductItem
  }
};
</script>

<style lang="scss" scoped>

.product-list {
  width: 100%;
  overflow: scroll;
  white-space: nowrap;
}

.item + .item {
  margin-left: 22px;
}

.item:first-child {
  margin-left: 40px;
}

.item:last-child {
  margin-right: 40px;
}
</style>