<template>
    <div v-for="(item, index) in arr" :key="index">
        <div class="recent_sale_list">
            <img :src="getImg(item.pic[0].url)" alt="" class="recent_sale_list_three_img" />
            <div class="recent_sale_list_three_con">
                <div class="title">{{ item.name }}</div>
                <div class="limit">
                    <div class="limit_tip">限量</div>
                    <div class="limit_number">{{ item.total }}份</div>
                </div>
                <div class="price">
                    <div class="price_tip">¥</div>
                    <div class="price_number">{{ item.price }}</div>
                </div>
            </div>
            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        arr: {
            type: Array,
            default: () => {
                return [];
            }
        },
        type: {
            type: String,
            default: 'collection'
        }
    }
};
</script>

<style lang="less" scoped>
.recent_sale_list {
    background: #1e222c;
    border-radius: 18px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    .recent_sale_list_three_img {
        width: 120px;
        height: 120px;
        border-radius: 18px;
        margin-right: 12px;
    }
    .recent_sale_list_three_con {
        padding-top: 16px;
        box-sizing: border-box;
        .title {
            width: calc(100vw - 165px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 22px;
            margin-bottom: 12px;
        }
        .limit {
            display: flex;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            margin-bottom: 12px;
            .limit_tip {
                width: 36px;
                height: 18px;
                background: #f9ddb3;
                border-radius: 3px 0px 0px 3px;
                color: #282d3a;
                line-height: 18px;
                text-align: center;
            }
            .limit_number {
                height: 18px;
                background: #323743;
                border-radius: 0px 3px 3px 0px;
                padding: 0px 6px;
                box-sizing: border-box;
                color: #f9ddb3;
                line-height: 18px;
            }
        }
        .price {
            display: flex;
            .price_tip {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 22px;
                margin-top: 2px;
                margin-right: 4px;
            }
            .price_number {
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 24px;
            }
        }
    }
    .bottom_texture {
        width: 115px;
        height: 100px;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
}
</style>