zh_order_food_xcx/pages-takeout/confirm-order.vue

<template>
	<view class="confirm-order-box iPhone-bottom flex-common-css box-border-box">
		<view class="bg-box"></view>
		<Nav title='提交订单' bgckgroundBox='transparent'></Nav>
		
		<view class="scroll-view-css box-border-box p-24">
			<view class="box-card box-border-box mb-20 bgc-f">
				<view class="box-input box-border-box p-b-20 mb-20">
					<view class="flex-justify-space mb-12">
						<view class="fs-36 fw-600 text-overflow-ellipsis w570">
							重庆工商职业学校3栋1楼503重庆工 商职业学校3栋1楼503重庆工商职业学校3栋1楼503重庆工 商职业学校3栋1楼503
						</view>
						<image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
					</view>
					<view class="">
						<span class="mr-24 fs-28 fc-9">张晓鹏</span><span class="fs-28 fc-9">18883660721</span>
					</view>
				</view>
				<view class="box-input flex-justify-space box-border-box p-b-20 mb-20">
					<view class="fs-28 fw-600">配送方式</view>
					<view class="fs-24 fw-400 sd-box fc-FB3D03">送达宿舍</view>
				</view>
			</view>
			
			
			
			<view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
				<view class="fs-28 fw-600 w158">支付方式</view>
				<view class="wx-box display-flex">
					<image src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
					<view class="fs-28 fw-400 ml-10">微信支付</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-box box-border-box p-24">
			<view class="flex-justify-space">
				<view class="align-items-flex-end box-1">
					<span class="fs-28 fc-f fw-600">￥</span>
					<span class="fs-44 fc-f fw-600">19.5</span>
				</view>
				<view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
	}
</script>

<style scoped lang="scss">
	.right-icon{
		width: 32rpx;
		height: 32rpx;
	}
	.w570{
		width: 570rpx;
	}
	.sd-box{
		padding: 3rpx 16rpx;
		height: 40rpx;
		background: rgba(251,61,3,0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	
	.confirm-order-box{
		position: relative;
		.bg-box{
			width: 100%;
			height: 448rpx;
			filter: blur(80rpx);
			background: linear-gradient(to right,rgba(176, 252, 250, 0.6),rgba(249,246,224,0.87),rgba(249,246,224,0.87));
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.bottom-box{
			background-color: #fff;
			.box-1{
				flex: 1;
				height: 100rpx;
				background: #333;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-sizing: border-box;
				padding-left: 32rpx;
				padding-bottom: 20rpx;
			}
			.box-2{
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #41ABF5;
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				text-align: center;
			}
		}
		
		.box-card{
			width: 100%;
			min-height: 88rpx;
			border-radius: 20rpx;
			padding: 24rpx 24rpx 0 24rpx;
		}
		.wx-box{
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.box-input{
			border-bottom: 2rpx solid #F9F9F9;
			
		}
	}
</style>