<template>
    <view class="jy-card">
        <!-- 需要展示的图 -->

        <image class="jy-card-img" v-if="item.images && item.images[0]" :src="item.images[0].imageUrl" />
        <!-- 标题 -->
        <view class="jy-card-content">
            <view class="jy-card-title">{{ item.productName }}</view>
            <view class="jy-card-info">
                <!-- 价格 -->
                <view class="jy-card-price">￥<text class="jy-card-price-num">{{ item.price }}</text></view>
                <!-- 销量 -->
                <view class="jy-card-sales">销量：<text class="jy-card-sales-num">{{ `${item.sales ? item.sales + '+' : 0}`
                        }}</text></view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'

const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})
</script>
<style lang="scss" scoped>
.jy-card {
    width: 90%;
    height: 468rpx;
    border-radius: 14rpx;
    background: $uni-bg-color;

    &-img {
        //宽继承父元素
        width: 100%;
        height: 344rpx;
        //上面两个圆角
        border-top-left-radius: 14rpx;
        border-top-right-radius: 14rpx;
    }

    &-title {
        text-align: left;
        margin-bottom: 10rpx;
    }

    &-price {
        color: #FF7F37;
        font-size: $uni-font-size-sm;
        margin-right: 10rpx;

        &-num {
            font-size: $uni-font-size-lg;
        }
    }

    &-sales {
        color: #999999;
        font-size: $uni-font-size-sm;

        &-num {
            font-size: $uni-font-size-sm;
        }
    }

    &-content {
        padding: 10rpx;
    }

    &-info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}
</style>