JiangxiMiniProgram/pages/mineEntry/myOrder/detail/comp/refundInfo.vue

<template>
	<view class="refundInfo">
		<view class="h1">退款申请</view>
		<view class="card">
			<view class="row">
				<view class="lab">退款原因</view>
				<view class="val">个人原因</view>
			</view>
			<view class="row">
				<view class="lab">退款金额</view>
				<view class="val">￥100.00</view>
			</view>
			<view class="border_bottom">
				<view class="date">申请时间：2023/08/06  09:12:33</view>
				<view class="date">退款完成时间：2023/08/10  09:12:33</view>
			</view>
		</view>
		<view class="h1">收款信息</view>
		<view class="card">
			<view class="row">
				<view class="lab">持卡人</view>
				<view class="value">张三</view>
			</view>
			<view class="row">
				<view class="lab">手机号</view>
				<view class="value">
					<view class="flex-b">
						<view class="phone">18267103167</view>
						<view class="blue">已验证</view>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="lab">卡号</view>
				<view class="value">79879465454148</view>
			</view>
			<view class="row">
				<view class="lab">开户行</view>
				<view class="value">招商银行</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.refundInfo {
		width: 100%;
	  .h1 {
		line-height: 96rpx;
	  }
	
	  .card {
		  padding: 12rpx 28rpx;
	    .row {
			display: flex;
			font-size: 28rpx;
			padding: 16rpx 0;
	      .lab {
			  font-weight: 500;
			  width: 164rpx;
	      }
	
	      .val {
			&.blue {
				color: $themC;
				font-weight: 500;
			}
	      }
	    }
	
	    .border_bottom {
			margin-top: 16rpx;
			padding-bottom: 12rpx;
			border-top: 2rpx solid #E8E9EC;
	      .date {
			padding: 14rpx 0;
			color: #ADADAD;
	      }
	    }
	  }
	
	  .row {
		  
	    .lab {
	  	
	    }
	  	
	    .value {
			color: #333;
			display: flex;
			flex: 1;
			.flex-b { width: 100%;}
			.blue {
				color: $themC;
				font-weight: 500;
			}
	    }
	  }
	}
</style>