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

<template>
	<view class="productItem" @click="$emit('click')">
	    <view class="picture-shop">
	        <image :src="item.image && item.image.split(',')[0]" mode="aspectFill"></image>
	    </view>
	    <view class="price-shop">
			<view class="title">{{item.name}}</view>
			<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 class="bottom-price">
	            <text style="font-size: 30rpx; ">￥{{item.price}}</text>元/{{item.unit}}
	        </view>
	    </view>
	    <view class="buy-shop" v-if="btn">
	        <uv-button 
	        type="primary" 
	        shape="circle" 
	        text="立即购买"></uv-button>
	    </view>
	</view>
</template>

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

<style scoped lang="scss">

.productItem {
    width: 95%;
    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;
	padding: 20rpx;

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

    // /deep/
    .picture-shop {
        display: flex;
		margin-right: 20rpx;
        image {
            width: 200rpx;
            height: 150rpx;
			border-radius: 10rpx;
        }
    }

    .price-shop {
		flex: 1;
		.title{
			font-size: 28rpx;
			font-weight: 600;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.tag-shop {
			display: flex;
			gap: 10rpx;
			margin-top: 10rpx;
		}
		.bottom-price {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #DC2828;
			text {
				font-weight: 700;
			}
		}
    }
	
	.buy-shop {
	    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>