luoyangCoachApp/pages/userCenter/settled/settled.vue

<template>
	<view class="pageBgImg">
		<view class="searchBox">
			<topNavbar title="待结算记录"></topNavbar>
		</view>
		<view class="pad">
			<view class="searcBox">
				<searchRow placeholder="搜索学员姓名、学员手机号"/>
			</view>
			<view class="tabs">
				<view class="tab" v-for="(item,index) in tabData" :key="index" :class="{active: index==1}">{{ item.text }}</view>
			</view>
			<view class="total">12条记录</view>
			
			<view class="list">
				<view class="card">
					<view class="top_row">
						<view class="name">张三三</view>
						<view class="tag">第三阶段</view>
						<view class="price"><text>待结算金额：</text> ￥1333.3</view>
					</view>
					<view class="row">
						<view class="lab">学员确认</view>
						<view class="icon">
							<image src="@/static/images/index/radio_cli.png" mode=""></image>
							<!-- <image src="@/static/images/index/radio_nor.png" mode=""></image> -->
						</view>
						<view class="right">
							<view class="btnBg">确认</view>
						</view>
					</view>
					<view class="row">
						<view class="lab">教练确认</view>
						<view class="icon">
							<image src="@/static/images/index/radio_cli.png" mode=""></image>
							<!-- <image src="@/static/images/index/radio_nor.png" mode=""></image> -->
						</view>
						<view class="right">
							<view class="btnBg">确认</view>
						</view>
					</view>
					<view class="row">
						<view class="lab">驾校确认</view>
						<view class="icon">
							<image src="@/static/images/index/radio_cli.png" mode=""></image>
							<!-- <image src="@/static/images/index/radio_nor.png" mode=""></image> -->
						</view>
						<view class="right">
							2023/08/08 10:55:21
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [
					{text: '全部', id: 1},
					{text: '阶段二', id: 2},
					{text: '阶段三', id: 3},
					{text: '阶段五', id: 4}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searcBox {
		padding-top: 24rpx;
	}
	.total {
		font-size: 24rpx;
		color: #686B73;
		line-height: 74rpx;
		text-align: right;
		height: 74rpx;
	}
	.tabs {
		display: flex;
		justify-content: space-between;
		height: 110rpx;
		align-items: center;
		.tab {
			font-size: 28rpx;
			color: #fff;
			line-height: 110rpx;
			&.active {
				position: relative;
				&::before {
					content: '';
					width: 56rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 3rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 20rpx;
				}
			}
		}
	}
	.list {
	  .card {
		  padding: 0 32rpx;
	    .top_row {
			display: flex;
			border-bottom: 2rpx dashed #E8E9EC;
			height: 98rpx;
			align-items: center;
			width: 100%;
			margin-bottom: 12rpx;
	      .name {
			font-size: 32rpx;
			color: #333;
	      }
	
	      .tag {
			width: 144rpx;
			height: 60rpx;
			background: rgba(25,137,250,0.1);
			border-radius: 8rpx;
			font-size: 28rpx;
			color: $themC;
			text-align: center;
			margin-left: 10rpx;
			line-height: 60rpx;
	      }
	
	      .price {
			color: $themC;
			 margin-left: auto;
			font-size: 32rpx;
			font-weight: 500;
			text {
				font-size: 24rpx;
			}
	      }
	    }
	
	    .row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
	      .lab {
			color: #686B73;
	      }
	
	      .icon {
			  width: 32rpx;
			  height: 32rpx;
	      }
	
	      .right {
			  color: #686B73;
			  width: 300rpx;
			  display: flex;
			  justify-content: flex-end;
	        .btnBg {
				width: 130rpx;
	        }
	      }
	    }
	  }
	}
</style>