<template>
	<view class="consumptionDetail">
		<view class="contentWrapper">
			<view class="wrapper">
				<view class="topBg" :style="'background-image: url('+this.$ImgUrl + 'user/greyBgTop.png'+')'">
					<view class="line"></view>
				</view>
				<view class="title">东门食堂-早餐</view>
				<view class="amount">-24.50</view>
				<view class="status">待支付</view>
				<view class="rowItem">
					<view class="label">学生姓名</view>
					<view class="value">安小智</view>
				</view>
				<view class="rowItem">
					<view class="label">年级班级</view>
					<view class="value">三年级/101班</view>
				</view>
				<view class="rowItem">
					<view class="label">手续费</view>
					<view class="value"> 0.02</view>
				</view>
				<view class="rowItem">
					<view class="label">消费设备</view>
					<view class="value">消费机-1</view>
				</view>
				<view class="rowItem">
					<view class="label">消费场景</view>
					<view class="value">食堂</view>
				</view>
				<view class="rowItem">
					<view class="label">消费时间</view>
					<view class="value">2022-06-11 07:00.00</view>
				</view>
				<view class="rowItem">
					<view class="label">交易订单号</view>
					<view class="value">4202000000000000000000</view>
				</view>
				<view class="btn">
					<view class="button">对此订单有疑问？</view>
				</view>
			</view>
			<view class="bottomBg" :style="'background-image: url('+this.$ImgUrl + 'user/greyBgBottom.png'+')'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ImgUrl: this.$ImgUrl,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.consumptionDetail {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background: #F1F1F3;

		.contentWrapper {
			padding: 25rpx 22rpx 0 25rpx;
			display: flex;
			flex-direction: column;



			.wrapper {
				margin: 0 8rpx;
				padding-top: 59rpx;
				width: 686rpx;
				display: flex;
				flex-direction: column;
				background: white;
				font-family: PingFangSC-Regular, PingFang SC;
				position: relative;

				.topBg {
					position: absolute;
					top: 0;
					left: -8rpx;
					width: 703rpx;
					height: 59rpx;
					background-size: cover;
					background-position: center center;
					z-index: 1;

					.line {
						width: 686rpx;
						height: 22rpx;
						margin-top: 9rpx;
						margin-left: 8rpx;
						background: linear-gradient(180deg, #D9D9D9 0%, #FFFFFF 100%);
						opacity: 0.75;
					}
				}

				.title {
					margin-top: 46rpx;
					width: 100%;
					height: 42rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					text-align: center;
				}

				.amount {
					margin-top: 4rpx;
					width: 100%;
					height: 90rpx;
					font-size: 64rpx;
					color: #333333;
					line-height: 90rpx;
					text-align: center;

				}

				.status {
					width: 100%;
					height: 45rpx;
					font-size: 32rpx;
					color: #FA6400;
					line-height: 45rpx;
					text-align: center;
					margin-bottom: 92rpx;
				}

				.rowItem {
					padding: 0 32rpx;
					margin-bottom: 37rpx;
					display: inline-flex;
					justify-content: space-between;
					height: 42rpx;
					line-height: 42rpx;
					font-size: 30rpx;
					color: #333333;

					.value {
						color: rgba(0, 0, 0, 0.5);
					}
				}

				.btn {
					padding: 49rpx 0 35rpx;

					.button {
						margin: 0 auto;
						width: 622rpx;
						height: 71rpx;
						line-height: 71rpx;
						background: #F1F1F3;
						border-radius: 12rpx;
						text-align: center;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.bottomBg {
				width: 686rpx;
				height: 29rpx;
				background-size: cover;
				background-position: center center;
				margin: 0 8rpx;
			}
		}
	}
</style>