GoodsList / GoodsListItem

12-2项目总结报告：
goods: {
pop: {list: goods}
new:
sell:
}
home请求到goods数据之后，交给GoodsList展示，
GoodsListItem负责展示每一条数据。
GoodsList
GoodsListItem

热更新并不是对整个页面的刷新，本地服务器并不是完全刷新，对代码进行了部分更新。

tab-control–监听点击，传index，根据index决定显示goods的type；

<template>
    <div class="goods-list">
        <goods-list-item v-for="(item, index) in goods[0]" v-bind:goods-item="item" :key="index" class="goods-item">
        </goods-list-item>
    </div>
</template>

<script>
  import GoodsListItem from "./GoodsListItem";
  export default {
    name: "GoodsList",
    components: {
      GoodsListItem
    },
    props: {
      goods: {
        type: Array,
        default() {
          return []
        }
      }
    },
    created() {
      console.log(this.goods);
    }
  }
</script>

<style scoped>
    .goods-list {
        display: flex;
        justify-content: space-around;
        /*一行转换不了会自动换行*/
        flex-wrap: wrap;
        padding: 2px;
    }

</style>

<template>
    <div class="goods-item">
        <img :src="goodsItem.show.img" alt="">
        <div class="goods-info">
            <p>{{goodsItem.title}}</p>
            <span class="price">{{goodsItem.price}}</span>
            <span class="collect">{{goodsItem.cfav}}</span>
        </div>
    </div>
    
</template>

<script>
  export default {
    name: "GoodsListItem",
    props: {
      goodsItem: {
        type: Object,
        default(){
          return {}
        }
      }
    }
  }
</script>

<style scoped>
    .goods-item {
        padding-bottom: 40px;
        position: relative;
        width: 48%;
    }

    .goods-item img {
        width: 100%;
        border-radius: 5px;
    }

    .goods-info {
        font-size: 12px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
        overflow: hidden;
        text-align: center;
    }

    .goods-info p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 3px;
    }

    .goods-info .price {
        color: var(--color-high-text);
        margin-right: 20px;
    }

    .goods-info .collect {
        position: relative;
    }

    .goods-info .collect::before {
        content: '';
        position: absolute;
        left: -15px;
        top: -1px;
        width: 14px;
        height: 14px;
        background: url("../../../assets/img/common/collect.svg") 0 0/14px 14px;
    }
</style>