<template>
    <van-grid :class="cardAttr?.goodsCradclass" :column-num="cardAttr?.columnNum" :gutter="props.cardAttr?.gutter" class="goods-crad">
        <van-grid-item v-for="(item, index) in goodsList" :key="index"   :class="cardAttr?.itemClass">
            <transition appear  appear-to-class="card-appear-to-class"  appear-active-class="card-appear-active-class">
                <div class="card-body">
                    <van-image :src="item.img" />
                    <div class="name_text">{{ item.name }}</div>
                    <div class="auther_text">{{ item.auther }}</div>
                </div>
            </transition>
        </van-grid-item>
    </van-grid>
</template>
  
<script setup lang="ts" >

const props = defineProps({
    goodsList: {
        type: Array<any>,
        default: () => {
            return [];
        },
    },
    cardAttr: {
        type: Object,
        default: () => {
            return {
                columnNum: 2,
                gutter: 6,
                itemClass: "recommend_item",
            };
        },
    },
});

</script>
<style lang="scss" >
.goods-crad {
    .recommend_item {
        border-radius: 10px;
        max-width: 50%;

        .van-grid-item__content {
            border-radius: 10px;
        }

        .van-grid-item__content--surround::after {
            border-width: 0;
        }
    }

    .van-grid-item {
        max-width: 50%;
    }
}
</style>
<style lang="scss" scoped>

.goods-crad {
    padding-top: 10px;
    padding-bottom: 10px;

    .card-body {
        text-align: center;
    }

    .name_text {
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        width: 100%;
        text-align: center;
        margin-top: 6px;
        font-size: 14px;
    }

    .auther_text {
        margin-top: 6px;
        font-size: 12px;
        color: #ccc;
        text-align: center;
    }

    /** 卡片过渡动画 */

    .card-appear-to-class {
        transform: scale(1);
    }

    .card-appear-active-class {
        transition: transform 2s ease;
    }
}

.boutique-crad {
    flex-wrap: nowrap !important;
    overflow-x: scroll;

    .boutique_item {
        width: 25%;
    }
}
</style>
  