jp-housekeep-electric/pages/businessHall-test/recharge/paymentResult.vue

<template>
	<view>
		<u-navbar title="支付结果"  title-color="#101010" ></u-navbar>
		<view class="success-icon">
			<image class="img" src="@/assets/img/md-check_circle vRxbRvD.svg" mode=""></image>
		</view>
		<view class="success-text">
			支付成功

		</view>
		<!-- 支付详情 -->
		<view class="payment-infos">
			<view class="item">
				<view class="item-title">
					充值金额
				</view>
				<view class="item-value">
					1000元
				</view>
				
			</view>
			<view class="item">
				<view class="item-title">
					付款方式
				</view>
				<view class="item-value">
					微信支付
				</view>
				
			</view>
			<view class="item">
				<view class="item-title">
					订单号
				</view>
				<view class="item-value">
					T20230816112557708460925
				</view>
				
			</view>
			<view class="item">
				<view class="item-title">
					创建时间
				</view>
				<view class="item-value">
					2023-08-20 10:29:00
				</view>
				
			</view>
			<view class="item">
				<view class="item-title">
					支付时间
				</view>
				<view class="item-value">
					2023-08-20 10:29:30
				</view>
				
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<button class="btn1">完成</button>
			<button class="btn2">充值记录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.success-icon{
		width: 132rpx;
		height: 132rpx;
		margin: 48rpx auto; 
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.success-text{
		color: rgba(51,51,51,1);
		font-size: 48rpx;
		text-align: center;
	}
	// 支付详情
	.payment-infos{
		margin-top: 64rpx;
		padding: 0 80rpx;
		.item{
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;
			.item-title{
				color: rgb(119,119,119);
			}
			.item-value{
				color: rgb(51,51,51);
			}
		}
	}
	// 按钮
	.btns{
		display: flex;
		padding: 0 80rpx;
		margin-top: 80rpx;
		.btn1{
			width: 280rpx;
			height: 80rpx;
			background-color: rgba(255,255,255,1);
			color: rgba(51,51,51,1);
			font-size: 32rpx;
			border-radius: 50px;
			border: 1px solid rgba(223,223,223,1);
		}
		.btn2{
			width: 280rpx;
			height: 80rpx;
			border-radius: 50px;
			background-color: rgba(22,119,255,1);
			color: rgba(255,255,255,1);
			font-size: 32rpx;
			border: 0px solid rgba(187,187,187,1);
		}
	}

</style>