YXGJ/components/collectLists/product.vue

<template>
    <view class="list-box">
        <navigator class="item" :url="'/packageCase/product/detail?id=' + item.sa_fadid" v-for="item in list"
            :key="item.sa_fadid" hover-class="navigator-hover">
            <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
            <view class="title u-line-1">
                {{ item.name }}
            </view>
        </navigator>
    </view>
</template>

<script>
export default {
    name: "list",
    props: {
        list: {
            type: Array
        }
    },
    methods: {
        handleList(list) {
            return list.map(v => {
                v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sa_fad") || v.attinfos[0]) : uni.getStorageSync("site").logo || ''
                return v
            })
        }
    },
}
</script>

<style lang="scss">
.list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 173px;
        height: 207px;
        margin-top: 10px;
        border-radius: 5px;
        overflow: hidden;
        flex-shrink: 0;

        .image {
            width: 173px;
            height: 172px;
            background: #F5F5F5;
            border-radius: 5px;
        }

        .title {
            width: 100%;
            height: 25px;
            line-height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            text-align: center;
        }
    }
}
</style>