ec.uniapp-master/pages/aboutpay/paystate.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav>
		<view class="lf-p-30" style="margin: 0 auto;">
			<view class="confirm-card">
				<view class="state-btn" v-if="payState">
					<u-icon name="checkbox-mark" style="font-size: 100rpx;" class="lf-color-white"></u-icon>
				</view>
				<view class="state-btn1" v-else>
					<u-icon name="close" style="font-size: 100rpx;" class="lf-color-white"></u-icon>
				</view>
				<view>
					<text class="lf-font-32 lf-color-777 lf-m-r-10">支付</text>
					<text style="font-size: 72rpx;color: #15716E;" v-if="payState">¥478.50</text>
					<text style="font-size: 72rpx;color: #15716E;" v-else>失败</text>
				</view>
				<view>
					<button class="confirmcash-btn">返回首页</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payState: true
			}
		}
	}
</script>
<style scoped lang="scss">
	.state-btn {
		width: 220rpx;
		height: 220rpx;
		background: #15716E;
		margin-bottom: 30rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.state-btn1 {
		width: 220rpx;
		height: 220rpx;
		background: #777777;
		margin-bottom: 30rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.confirmcash-btn {
		width: 550rpx;
		height: 100rpx;
		background: white;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		color: #15716E;
		align-items: center;
		border: 1px solid #15716E;
		margin-top: 100rpx;
	}
	.confirm-card {
		padding: 30rpx 0;
		width: 686rpx;
		height: max-content;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
</style>