luoyangCoachApp/pages/tabbar/student/comp/subject1Student.vue

<template>
	<view class="subject1">
		<view class="" v-for="(item,index) in list" :key="index">
			<view class="name">{{ item.studentName }} <text>{{ phoneShow(item.studentMobile)}}</text></view>
			<view class="row">
				<view class="timeItem">
					<view class="flex ">
						<view class="time">{{ item.totalTime }}</view>
						<view class="uni">分钟</view>
					</view>
					<view class="lab">已完成学时</view>
				</view>
				<view class="timeItem">
					<view class="flex ">
						<view class="time ">{{item.validTime}}</view>
						<view class="uni">分钟</view>
					</view>
					<view class="lab">应完成学时</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		methods: {
			phoneShow(phoneNumber) {
				 if (phoneNumber.length === 11) {
				    return phoneNumber.replace(phoneNumber.substr(3, 4), "****");
				  } else {
				    return phoneNumber;
				  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subject1 {
		border-top: 1rpx solid #EDEDED;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;

	}

	.name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;

		text {
			margin-left: 20rpx;
		}
	}

	.row {
		display: flex;

		&:first-child {
			border: none;
		}

		.timeItem {
			border-left: 1px solid #EDEDED;
			flex: 1;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24rpx;
			padding: 20rpx 0;

			&:first-child {
				border: none;
			}

			.flex {
				justify-content: center;

				.time {
					font-size: 36rpx;
					color: #333;
					font-weight: 700;
				}

				.uni {
					margin-top: -6rpx;
					margin-left: 4rpx;
				}
			}

			.lab {
				text-align: center;
			}
		}
	}
</style>