hg_zlxc_h5/pages/payRecords/payRecords.vue

<template>
	<view class="main pageBg">
		<view class="ul">
			<view class="li">
				<view class="top_row">
					<view class="cover">
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<view class="schoolName">xx驾校</view>
					<view class="status">支付成功</view>
				</view>
				<view class="textCon">
					<view class="text_row">
						<text>订单编号</text>
						<text>xxxxxx</text>
					</view>
					<view class="text_row">
						<text>报名班型</text>
						<text>xxxxxx</text>
					</view>
					<view class="text_row">
						<text>支付金额</text>
						<text>xxxxxx</text>
					</view>
					<view class="text_row">
						<text>支付方式</text>
						<text>xxxxxx</text>
					</view>
					<view class="text_row">
						<text>支付日期</text>
						<text>xxxxxx</text>
					</view>
					<view class="text_row">
						<text>报名学员</text>
						<text>xxxxxx</text>
					</view>
				</view>
				<view class="btn_row">
					<view class="btn border">下载缴费凭证</view>
					<view class="btn bgLinear">下载签约合同</view>
				</view>
			</view>
		</view>
		<view class="noData">
			<view class="iconImg">
				<image src="@/static/images/third_img_fail@2x.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		.noData {
			width: calc(100vh - 100rpx);
			display: flex;
			.iconImg {
				width: 400rpx;
				height: 274rpx;
				margin: auto;
			}
		}
	  .ul {
		  width: 100%;
		  padding: 16rpx 32rpx;
	    .li {
			height: 654rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			width: 100%;
			margin-bottom: 16rpx;
			padding: 0 32rpx;
	      .top_row {
			  display: flex;
			  align-items: center;
			  height: 104rpx;
			  justify-content: space-between;
	        .cover {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				overflow: hidden;
	        }
	
	        .schoolName {
				font-size: 32rpx;
				color: #363A44;
				font-weight: 600;
				flex: 1;
				width: 0;
				padding: 0 0 0 16rpx;
	        }
	
	        .status {
				font-size: 28rpx;
				color: #1989FA;
	        }
	      }
	
	      .textCon {
			  width: 100%;
			  padding-bottom: 16rpx;
	        .text_row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 0rpx;
	          text {
				font-size: 28rpx;
	          }
	        }
	      }
	
	      .btn_row {
			  display: flex;
			  justify-content: flex-end;
			  height: 112rpx;
			  align-items: center;
			  border-top: 1px solid #E8E9EC;
	        .btn.border {
				border: 1px solid rgba(53, 147, 251, 1);
				color: $themC;
	        }
	
	        .btn {
				width: 202rpx;
				height: 56rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 56rpx;
				border-radius: 36rpx;
				margin-left: 16rpx;
				color: #fff;
	        }
	      }
	    }
	  }
	}
</style>