JiangxiMiniProgram/pages/indexEntry/enroll/payment/payment.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="支付订单"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="orderInfo">
					<view class="schoolName">翔力驾校</view>
					<view class="price">
						<text class="uint">￥</text>1000.13
					</view>
					<view class="num">交易单号：65465879312</view>
				</view>
			</view>
			<view class="card">
				<view class="pay">
					<view class="h2">选择支付方式</view>
					<view class="row">
						<view class="wxIcon">
							<image src="@/static/images/index/wxicon.png" mode=""></image>
						</view>
						<view class="text">微信支付</view>
						<view class="icon">
							<u-icon name="arrow-right" size="14" color="#686B73"  ></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="btnBg" @click="$goPage('/pages/indexEntry/enroll/paymentSuccess/paymentSuccess')">确认支付</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.card {
		width: 100%;
		margin-bottom: 20rpx;
	  .orderInfo {
		  text-align: center;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  height: 306rpx;
	    .schoolName {
			font-size: 24rpx;
			color: #333;
	    }
	
	    .price {
			font-size: 72rpx;
			font-weight: 600;
			padding: 30rpx 0 30rpx 0;
	      text.uint {
			font-size: 44rpx;
			font-weight: 600;
	      }
	    }
	
	    .num {
			font-size: 24rpx;
			color: #ADADAD;
	    }
	  }
	}
	.pay {
		padding: 40rpx 48rpx;
		.h2 {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 24rpx;
		}
		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.wxIcon {
				width: 48rpx;
				height: 48rpx;
			}
			.text {
				margin-left: 20rpx;
				flex: 1;
				text-align: left;
			}
			
		}
	}
	.btnBg {
		margin: 100rpx auto;
		width: 396rpx;
	}
</style>