jiangximiniprogramSchool/pages/indexEntry/settlement/detail/detail.vue

<template>
	<view class="pageBgImg ">
		<topNavbar title="结算明细"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="top_row">
					<view class="name">张三三</view>
					<view class="tab">第二阶段</view>
					<view class="price_row">
						<view class="jia">+</view>
						<view class="price">￥12256.33</view>
					</view>
				</view>
				<view class="row">
					<view class="text">学员确认</view>
					<view class="iconPass">
						<image src="@/static/images/index/radio_cli.png" mode=""></image>
					</view>
					<view class="text">2023/08/08 10:55:21</view>
				</view>
				<view class="row">
					<view class="text">教练确认</view>
					<view class="iconPass">
						<image src="@/static/images/index/radio_cli.png" mode=""></image>
					</view>
					<view class="text">2023/08/08 10:55:21</view>
				</view>
				<view class="row">
					<view class="text">驾校确认</view>
					<view class="iconPass">
						<image src="@/static/images/index/radio_cli.png" mode=""></image>
					</view>
					<view class="text">2023/08/08 10:55:21</view>
				</view>
			</view>
			<view class="card">
				<view class="row">
					<view class="text">学员手机号</view>
					<view class="text">182671031657</view>
				</view>
				<view class="row">
					<view class="text">到账时间</view>
					<view class="text">2023/08/08 10:55:21</view>
				</view>
				<view class="row">
					<view class="text">返款类型</view>
					<view class="text">三方确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	
	.card {
		padding: 0 28rpx;
		padding-bottom: 16rpx;
		margin-bottom: 20rpx;
	  .top_row {
		  display: flex;
		  align-items: center;
		  height: 98rpx;
		  border-bottom: 2px dashed #E8E9EC;
	    .name {
			font-size: 32rpx;
			font-weight: 500;
	    }
	
	    .tab {
			width: 144rpx;
			height: 60rpx;
			background: rgba(25,137,250,0.1);
			border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
			color: $themC;
			margin-left: 14rpx;
	    }
	
	    .price_row {
			color: $themC;
			margin-left: auto;
			display: flex;
			align-items: flex-end;
	      .jia {
				font-size: 24rpx;
	      }
	
	      .price {
			font-size: 32rpx;
	      }
	    }
	  }
	
	  .row {
		  height: 80rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
	    .text {
			color: #686B73;
	    }
	
	    .iconPass {
	      width: 32rpx;
		  height: 32rpx;
	    }
	  }
	}
</style>