<template>
    <view class="item">
        <image class="head"></image>
        <text class="title">商品名</text>
        <view class="price">
            <text>￥99</text>
            <text>￥299</text>
        </view>
        <view class="info">
            <text>剩余21件</text>
            <text>立即购买</text>
        </view>
    </view>
</template>
<script>
export default {
    name:"item"
}
</script>
<style lang="scss" scoped>
.item{
    width: 210rpx;
    .head{
        width: 210rpx;
        height: 131rpx;
        border-radius: 6rpx;

    }
    .title{
        font-size: 26rpx;
        color: #333;
        margin-top: 16rpx;
    }
    .price{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 19rpx;
        >text:first-child{
            font-size: 26rpx;
            color: #FF3131;
        }
        >text:last-child{
            font-size: 24rpx;
            color: #999;
        }

    }
    .info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 22rpx;
        margin-top: 19rpx;
        >text:first-child{
            color: #666;
        }
        >text:last-child{
            color: #FDD360;
        }
    }
}
</style>