<template>
	<view class="container">
		<view class="price">￥35.5</view>
		<view class="pay-time">
			支付剩余时间 <text>11:20</text>
		</view>
		<view class="box-model order-info">
			<view class="title">肯德基代点餐</view>
			<view class="content">
				<view>
					<text>订单编号</text>
					<text>20241217114838079876502</text>
				</view>
				<view>
					<text>订单状态</text>
					<text>待付款</text>
				</view>
			</view>
		</view>
		<view class="box-model pay-type">
			<view class="title">支付方式</view>
			<view class="content">
				<view>
					<view class="pay">
						<image src="../../static/order-type1.png"></image>
						<view>支付宝支付</view>
					</view>
					<view class="status select" >
						<u-icon name="checkbox-mark" color="#fff"></u-icon>
					</view>
				</view>
				<view>
					<view class="pay">
						<image src="../../static/order-type2.png"></image>
						<view>微信支付</view>
					</view>
					<view class="status">
						<u-icon name="checkbox-mark" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<view>确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #f0f0f0;
		overflow: scroll;
		font-family: Avenir, Helvetica, Arial, sans-serif;

		.price {
			font-weight: 600;
			color: rgba(0, 0, 0, .9);
			text-align: center;
			font-size: 80rpx;
			padding: 100rpx 0 0rpx 0;
		}

		.pay-time {
			font-weight: 400;
			color: rgba(0, 0, 0, .9);
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 30rpx;

			text {
				color: #d90209;
			}
		}

		.box-model {
			// width: 9.2rem;
			margin: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 1rpx 1rpx 5rpx 0 rgba(0, 0, 0, .08);
			padding: 30rpx;

			.title {
				font-weight: 600;
				color: rgba(0, 0, 0, .9);
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}
		}

		.order-info {


			.content {
				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, .9);

					&>text:last-child {
						color: rgba(0, 0, 0, .5);
					}
				}
			}
		}

		.pay-type {

			.content {
				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, .9);
					background: #fff;
					border-radius: 80rpx;
					border: 1rpx solid #e9e9e9;
					padding:30rpx;
				}
			}

			.pay {
				display: flex;
				align-items: center;
				image {
					width: 66rpx;
					height: 66rpx;
					margin-right:20rpx;
				}
			}

			.status {
				border: 1rpx solid rgba(0, 0, 0, .4);
				width:50rpx;
				height:50rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 50rpx;
			}
			.select{
				background-color: #fcdb28;
				border: 1rpx solid #fcdb28;
			}
		}
		.btn{
			width:100%;
			position: fixed;
			bottom:64rpx;
			left:0;
			&>view{
				margin:20rpx;
				background: #fcdb28;
				text-align: center;
				padding:20rpx 0;
				font-size: 30rpx;
				border-radius: 40rpx;
			}
		}
		
	}
</style>