<template>
	<view class="eat-box">
		<view class="eat" v-for="(item,index) in couponList" :key='item.id' @click="$utils.route.clickJumpType(item.$orig)">
			<image :src="item.fileUrl" mode="scaleToFill" class="img"></image>
			<view class="text-box">
				<text class="text-1">{{item.pictureName}}</text>
				<text class="text-2">{{item.dataDescribe.split(' ')[0]}}</text>
				<text class="text-3">{{item.dataDescribe.split(' ')[1]}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-home-coupon",
		props:{
			couponList:{
				type: Array,
				default:[]
			}
		}
	}
</script>

<style lang="scss">
		.eat-box {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;

			.eat {
				width: 158rpx;
				height: 240rpx;
				position: relative;

				.img {
					width: 100%;
					height: 100%;
				}

				.text-box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					width: 100%;
					transform: translateX(-50%);

					.text-1 {
						font-size: 24rpx;
						color: #0F0404;
						text-align: center;
					}

					.text-2 {
						margin-top: 5rpx;
						font-size: 20rpx;
						color: #FE3232;
						text-align: center;
					}

					.text-3 {
						font-size: 20rpx;
						color: #666666;
						text-align: center;
					}
				}

			}
		}
</style>
