<template>
	<view class="product-container">
		<view class="product-tips">
			支付享立减1元
		</view>
		<view class="product-price display">
			<view class="price">
				￥<text>{{detail.price}}</text>/{{detail.brand}}
			</view>
			<view class="ori">
				原价{{detail.show_price}}
			</view>
		</view>
		<view class="product-type display">
			{{detail.name}}
		</view>
		<view class="product-btn" @click="$emit('buy-event',detail)">
			立即购买
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		detail:{
			type:Object,
			require:true,
		}
	})
</script>

<style scoped lang="scss">
.product-container{
	width:292rpx;
	height:318rpx;
	background: url('../../../static/xyyk/bg-product.png') no-repeat;
	background-size: 100% 100%;
	margin-top:30rpx;
	.product-tips{
		font-weight: 400;
		font-size: 20rpx;
		color: #B05619;
		box-sizing: border-box;
		padding-left:40rpx;
	}
	.display{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.product-price{
		color: #FD613F;
		.price{
			font-weight: 400;
			font-size: 40rpx;
			text{
				font-weight:bold;
				font-size: 60rpx;
			}
		}
		.ori{
			font-size: 24rpx;
			color: #E18B72;
			font-weight:400;
			text-decoration-line: line-through;
		}
	}
	.product-type{
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top:40rpx;
	}
	.product-btn{
		width: 218rpx;
		height: 60rpx;
		background: linear-gradient( 90deg, #FFD888 0%, #FFE39E 100%);
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #A83203;
		text-align: center;
		line-height: 60rpx;
		margin:16rpx auto 0;
	}
}
</style>