Blame view

apps/pages/article/components/detail/recommend-product-list.vue 791 Bytes
htoooth authored
1
<template>
htoooth authored
2
  <div class="product-list">
htoooth authored
3
    <RecommendProductItem class="item" v-for="(i, index) in list" v-bind="i" :key="index" @click.native="onClick(i.href)"></RecommendProductItem>
htoooth authored
4 5 6 7
  </div>
</template>

<script>
htoooth authored
8
htoooth authored
9
import RecommendProductItem from './recommend-product-item';
htoooth authored
10 11 12

export default {
  name: 'RecommendProductList',
htoooth authored
13
  props: ['list'],
htoooth authored
14 15
  components: {
    RecommendProductItem
htoooth authored
16 17 18 19 20 21
  },
  methods: {
    onClick(url) {
      console.log(url);
      this.$yoho.goNewPage({url});
    }
htoooth authored
22
  }
htoooth authored
23
};
htoooth authored
24 25
</script>
htoooth authored
26 27 28 29
<style lang="scss" scoped>

.product-list {
  width: 100%;
TaoHuang authored
30 31
  overflow-x: scroll;
  overflow-y: hidden;
htoooth authored
32
  white-space: nowrap;
TaoHuang authored
33
  display: flex;
htoooth authored
34 35 36 37 38 39 40 41 42
}

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

.item:first-child {
  margin-left: 40px;
}
htoooth authored
43
htoooth authored
44 45 46
.item:last-child {
  margin-right: 40px;
}
htoooth authored
47
</style>