<template>
  <div class="transfer-top-list-con">
    <m-nav-bar light background="transparent" />
    <div class="empty-top" />
    <div class="list-con">
      <list-item
        v-for="(item, index) of list"
        :key="`list-item-${index}`"
        :data="item"
        :index="index"
      />
      <div class="text-bottom">（显示销量前十的10个商品）</div>
    </div>
    
  </div>
</template>

<script>
import ListItem from "./list-item.vue";
export default {
  components: { ListItem },
  data() {
    return {
      list: [{}, {}, {}, {}, {}, {}, {}, {}],
    };
  },
};
</script>

<style lang="less">
.transfer-top-list-con {
  background: url(~@/assets/img/top-list-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #f5f7fb;
  background-position: center -32px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  > .empty-top {
    height: 120px;
  }
  > .list-con {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px;
  }
  > .list-con .text-bottom {
      margin-top: 50px;
    text-align: center;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>