<template>
	<u-overlay :show="show" class="flex">
		<view class="box flex flex-col">
			<u-icon name="close" @click="close" class="icon" color="white" size="50"></u-icon>
			<view class="content">
				<view class="x-between flex">
					<text class="money" v-for="item in moneyList" :key="item">{{item}}</text>
				</view>
				<u--input class="mt-2" inputAlign="center" style="background-color: white;" placeholder="请输入其他金额" border="surround" v-model="value" @change="change"></u--input>
			</view>
			<text class="font-pay">支付</text>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		name: "reward",
		props: ["show"],
		data() {
			return {
				moneyList: ["1元", "2元", "3元"],
				value:""
			};
		},
		methods: {
			close() {
				this.$emit("onClose")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mt-2{
		margin-top: 24rpx;
	}
	.mt-5{
		margin-top: 50rpx;
	}
	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-col {
		flex-direction: column;
	}

	.x-between {
		justify-content: space-between;
	}
	.icon{
		position: absolute;
		top: 380rpx;
		right: 150rpx;
	}
	.money {
		display: inline-block;
		width: 112rpx;
		height: 64rpx;
		line-height: 64rpx;
		background-color: #FEE287;
		color: #FF7A00;
		border-radius: 10rpx;
		text-align: center;
	}
	.font-pay{
		color: white;
		font-size: 26rpx;
		font-weight: bold;
		transform: translate(0,50rpx);
	}
	.box {
		width: 560rpx;
		height: 678rpx;
		background-image: url("../../../static/images/reword/bg-reward.png");
		background-repeat: no-repeat;
		background-size: contain;

		.content {
			width: 360rpx;
			text-align: center;
			margin-top: 300rpx;
		}
	}
</style>