luoyang-uniapp-app/pages/mineEntry/carLearProgress/carLearProgress.vue

<template>
	<view class="pageBg">
		<view class="tabs">
			<view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
			<view class="rightPad"></view>
		</view>
		<view class="pad learnStatus">
			<view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目一阶段</view>
					<view class="btn status">已完成</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
			</view>
			<!-- <view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目一考试</view>
					<view class="btn status">已预约</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
				<view class="flex-b bg">
					<view class="row">
						<view class="text">科目二</view>
						<view class="btn" @click="$goPage('/pages/carEntry/evaluate/evaluate')">去评价</view>
					</view>
				</view>
			</view> -->
			<view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目二考试</view>
					<view class="btn">已预约</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
				<view class="bg">
					<view class="row">
						<view class="text">考试场地：某某科目二考场</view>
					</view>
					<view class="row">
						<view class="text">考试时间：2023-08-23 10:00:00</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="flex-b top_row">
					<view class="lab">科目一考试</view>
					<view class="btn red status">未通过</view>
				</view>
				<view class="date-row">2023-08-09 22:52:12</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [{
						text: '全部',
						id: 10
					},
					{
						text: '科目一',
						id: 1
					},
					{
						text: '科目二',
						id: 2
					},
					{
						text: '科目三',
						id: 3
					},
					{
						text: '科目四',
						id: 4
					},
				],
				currentTab: 10,
			}
		},
		methods: {
			scroll(e) {
				console.log(e)
			},
			changeTab(val) {
				this.currentTab = val.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../tabbar/learnCar/comp/comp.scss';
	.date-row {
		line-height: 88rpx;
		color: #999;
		border-top: 1px solid #F6F7FA;
	}
	.top_row {
		height: 88rpx;
	}
	.red {
		background-color: #FF7D7D !important;
	}
	.tabs {
		display: flex;
		justify-content: space-between;
		.tab {
			min-width: 108rpx;
			height: 88rpx;
			font-size: 28rpx;
			color: #333;
			text-align: center;
			line-height: 88rpx;
			margin-right: 28rpx;
	
			&.active {
				color: $themC;
				position: relative;
				&::before {
					position: absolute;
					content: '';
					width: 34rpx;
					height: 4rpx;
					background: #3776FF;
					border-radius: 2rpx;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			
		}
		.rightPad {
			min-width: 10rpx;
			height: 60rpx;
			
		}
	}
	.learnStatus {
		margin-top: 24rpx;
	}
</style>