<template>
	<view class="content">
		<view class="onecontent">
			<view class="onecontentabsolute"></view>
		</view>
		<view class="towcontent">
			<view class="towcontentone">
				<image class="towcontentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd1.png"
					mode="aspectFill"></image>
				<view class="towcontentonebox">
					<image class="towcontentoneboximage"
						src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd2.png" mode="aspectFill">
					</image>
					<view class="towcontentoneboxswiper">
						<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
							:interval="'3000'">
							<swiper-item class="swiperitem" v-for="(item, index) in orderfindWiningUserlist"
								:key="index">
								<view class="swiper-item">{{ item.userName }}* 免单{{ item.orderAmount }}元订单号：{{ item.orderNo }}
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="towcontentoness">
				<view class="towcontentonebox_box">
					订单数：10
				</view>
				<view class="towcontentonebox">
					<view class="towcontentoneboxswiper">
						<view class="swiper-item" style="margin-bottom: 32rpx;">
							<view class="swiper_itemone">
								免单状态
							</view>
							<view class="swiper_itemtow">
								订单号
							</view>
							<view class="swiper_itemthere">
								金额
							</view>
						</view>
						<view class="swiperitem" v-for="(item, index) in ordermineWinnerList" :key="index">
							<view class="swiper-item" style="margin-top: 32rpx;">
								<view class="swiper_itemone">
									{{ item.isRefund == true ? '已免单' : '待免单' }}
								</view>
								<view class="swiper_itemtow">
									{{ item.orderNo }}
								</view>
								<view class="swiper_itemthere">
									{{ item.orderAmount }}元
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="towcontenttow">
				注：每笔订单完成后30天内均有机会获得免单
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	reactive,
	ref
} from 'vue';
let orderfindWiningUserlist = ref([{
	userName: "王*",
	orderAmount: 12,
	orderNo: 213504512353548688546
}, {
	userName: "赵*",
	orderAmount: 48,
	orderNo: 65481188834105643623210
}, {
	userName: "钱*",
	orderAmount: 91,
	orderNo: 5891051346764518249444
}, {
	userName: "孙*",
	orderAmount: 84,
	orderNo: 688472546798742575342
}, {
	userName: "王",
	orderAmount: 73,
	orderNo: 597344582826533594131
}, {
	userName: "郑*",
	orderAmount: 98,
	orderNo: 469867684658481051627
}, {
	userName: "凯*",
	orderAmount: 95,
	orderNo: 895961781634536230631
},

])
let ordermineWinnerList = ref([{
	isRefund: true,
	orderNo: 895961781634536230631,
	orderAmount: "95"
},
{
	isRefund: true,
	orderAmount: 74,
	orderNo: 222674526516892311380
},
{
	isRefund: false,
	orderAmount: 23,
	orderNo: 862674526546892311380
},
])
</script>

<style scoped lang="scss">
page {
	background: #F9F9F9;
}

.content {
	.onecontent {
		width: 100%;
		height: 684.19rpx;
		position: relative;
		background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);

		.onecontentabsolute {
			position: absolute;
			top: 0;
			height: 534.19rpx;
			width: 100%;
			background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.towcontent {
		position: relative;
		padding: 0 28rpx;
		width: 100%;
		margin-top: -100rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);

		.towcontentone {
			position: relative;
			width: 100%;
			background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx 24rpx;

			.towcontentoneimage {
				position: absolute;
				top: -30rpx;
				left: 50%;
				transform: translatex(-50%);
				width: 118rpx;
				height: 46rpx;
			}

			.towcontentonebox {
				width: 100%;

				.towcontentoneboximage {
					width: 171.63rpx;
					height: 37.24rpx;
				}

				.towcontentoneboxswiper {
					width: 100%;
					padding-top: 24rpx;
					overflow: hidden;

					.swiper {
						height: 242rpx;

						.swiperitem {
							height: 40rpx;

							.swiper-item {
								display: block;
								height: 40rpx;
								text-align: left;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
							}
						}

					}

				}
			}
		}

		.towcontentoness {
			margin-top: 48rpx;
			width: 100%;
			background: rgba(255, 255, 255, 0.96);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			padding: 38rpx 48rpx;

			.towcontentonebox_box {
				margin: 0 auto;
				text-align: center;
				width: 262rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: #FFA436;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.towcontentonebox {
				width: 100%;

				.towcontentoneboximage {
					width: 171.63rpx;
					height: 37.24rpx;
				}

				.swiper-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.swiper_itemone {
						width: 25%;
						text-align: center;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.swiper_itemtow {
						width: auto;
						text-align: center;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.swiper_itemthere {
						width: 25%;
						text-align: center;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.towcontentoneboxswiper {
					width: 100%;
					// height: 242rpx;
					padding-top: 24rpx;
					overflow: hidden;

					.swiper {
						height: 230rpx;

						.swiperitem {
							height: 40rpx;

							.swiper-item {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.swiper_itemone {
									width: 25%;
									text-align: center;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
								}

								.swiper_itemtow {
									width: auto;
									text-align: center;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
								}

								.swiper_itemthere {
									width: 25%;
									text-align: center;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
								}
							}
						}

					}

				}
			}
		}

		.towcontenttow {
			margin-top: 32rpx;
			padding-bottom: 144rpx;
			text-align: center;
			width: 100%;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}
}
</style>