building-materials-shop-uniapp-241014/components/productItem.vue

<template>
	<view class="productItem" @click="$emit('click')">
	    <view class="picture-shop">
	        <image :src="item.image" mode=""></image>
	    </view>
	    <view class="price-shop">
	        <view class="top-shop">
	            <text>{{item.name}}</text>
	            <view class="tag-shop">
	                <uv-tags :text="item.categoryName || '建材'" type="warning" plain size="mini"></uv-tags>
	                <uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
	            </view>
	        </view>
	        <view class="bottom-price">
	            <text style="font-size: 40rpx; ">￥{{item.price}}</text>元/{{item.unit}}
	        </view>
	    </view>
	    <view class="buy-shop">
	        <uv-button 
	        type="primary" 
	        shape="circle" 
	        text="立即购买"></uv-button>
	    </view>
	</view>
</template>

<script>
	export default {
		name:"productItem",
		props : ['item'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">

.productItem {
    width: 95%;
    height: 222rpx;
    display: flex;
    margin: 30rpx auto;
    background-color: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;

    &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }

    // /deep/
    .picture-shop {
        width: 240rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 200rpx;
            height: 150rpx;
        }
    }

    .price-shop {
        width: 250rpx;
        height: 100%;

        .top-shop {
            height: 100rpx;
            width: 100%;
            font-size: 32rpx;
            margin-top: 20rpx;
            text-align: center;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .tag-shop {
                display: flex;
                justify-content: space-around;
                margin-top: 10rpx;
            }

            .bottom-price {
                display: inline-block;
                font-size: 28rpx;
                color: #666;
                text {
                    color: #DC2828;
                    font-weight: 700;
                }
            }
        }

    }
	
	.buy-shop {
	    height: 100%;
	    width: 250rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	
	    :deep(.uv-button) {
	        transition: transform 0.2s;
	        &:active {
	            transform: scale(0.95);
	        }
	    }
	}

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }
}
</style>