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

<template>
	<view class="pageBg">
		<view class="pad">
			<view class="card" v-for="(item,index) in list" :key="index" >
				<view class="h2">{{ item.text }}</view>
				<view class="con">
					<view class="item_row">
						<view class="item">
							<view class="val">{{ item.total }} <text>分钟</text></view>
							<view class="lab">已完成学时</view>
						</view>
						<view class="item">
							<view class="val">{{ item.time }} <text>分钟</text></view>
							<view class="lab">应完成学时</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { imgUrl } from '@/config/site.config'
	import { getStudentProcess } from '@/config/api.js'
	export default {
		data() {
			return {
				imgUrl: imgUrl+'carlearTimeBg.png',
				backgroundSize: '100% 100%',
				list: []
			}
		},
		onLoad() {
			this.getStudentProcessFn()
		},
		onPullDownRefresh() {
			this.getStudentProcessFn().then((res)=>{
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			async getStudentProcessFn() {
				const {data: res} = await getStudentProcess({studentId: this.studentId})
				this.list = [
					{total: res.subjectOneTotalTime, time: res.subjectOneValidTtime, text: '科目一'},
					{total: res.subjectTwoTotalTime, time: res.subjectTwoValidTtime, text: '科目二'},
					{total: res.subjectThreeTotalTime, time: res.subjectThreeValidTtime, text: '科目三'},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pad {
		marginp: 20rpx 0;
	}
	.card {
		width: 100%;
		height: 224rpx;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		// background: url('http://192.168.1.20:81/zhili/image/20230822/ca8f14281ac9412987b23ad43bfb50a1.png') no-repeat;
	  .h2 {
			height: 92rpx;
			line-height: 92rpx;
			text-align: center;
			// background-color: #A6E2FF;
			color: #333;
			font-size: 32rpx;
			font-weight: 700;
			border-bottom: 1rpx solid #F6F7FA;
	  }
	
	  .con {
		  width: 100%;
		  padding: 20rpx 0 0 0;
	    .item_row {
			display: flex;
			width: 100%;
			height: 90rpx;
			align-items: center;
			
	      .item {
			  flex: 1;
			  text-align: center;
			  display: flex;
			  flex-direction: column;
			  &:first-child {
				  border-right: 1rpx solid #F6F7FA;
			  }
	        .lab {
				font-size: 24rpx;
				color: #999;
	        }
	
	        .val {
				font-size: 36rpx;
				color: #333;
				font-weight: 700;
				margin-bottom: 6rpx;
				text {
					color: #999;
					font-weight: 400;
					font-size: 18rpx;
					margin-left: 10rpx;
					margin-top: -6rpx;
				}
	        }
	      }
	    }
	  }
	
	  .chain {
	  	width: 28rpx;
	  	height: 100rpx;
	  	position: absolute;
	  	top: -56rpx;
	  	&.left {
	  		left: 60rpx;
	  	}
	  	&.right {
	  		right: 60rpx !important;
	  	}
	  }
	}
</style>