<template>
	<view class="ticket-container">
		<view class="ticket-type">{{detail.product_name}}</view>
		<view class="ticket-content">
			<image src="../../../static/xyyk/icon-ticket.png" mode=""></image>
			<view class="ticket-name">{{detail.product_name}}</view>
			<view class="ticket-btn" @click="$emit('view-event',detail)">
				立即查看
			</view>
		</view>
	</view>
</template>

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

<style scoped lang="scss">
.ticket-container{
	width: 694rpx;
	height: 240rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #1A1A1A;
	box-sizing: border-box;
	padding:32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top:32rpx;
	.ticket-type{
		width:100%;
		height:32rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 32rpx;
	}
	.ticket-content{
		height:92rpx;
		display: flex;
		align-items: center;
		position: relative;
		image{
			width:92rpx;
			height:92rpx;
			margin-right: 22rpx;
		}
		.ticket-name{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			width:50%;
			overflow: hidden; /* 隐藏溢出内容 */
			text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
			white-space: nowrap; /* 禁止文本换行 */
		}
		.ticket-btn{
			position: absolute;
			right:0;
			width: 150rpx;
			height: 54rpx;
			background: #47A5FF;
			border-radius: 27rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height:54rpx ;
		}
	}
}
</style>