jiangximiniprogramSchool/pages/userCenter/teachingData/teachingData.vue

<template>
	<view class="teachingDataBg">
		<topNavbar title=""></topNavbar>
		<view class="topText">
			<view class="h3">专属您的</view>
			<view class="h4">教学数据</view>
		</view>
		<view class="pad">
			<view class="card">
				<view class="top_row">
					<view class="topItem">
						<view class="lab">历史服务学员</view>
						<view class="val">100人</view>
					</view>
					<view class="topItem">
						<view class="lab">结业人数</view>
						<view class="val">130人</view>
					</view>
					<view class="topItem">
						<view class="lab">服务中人数</view>
						<view class="val">13人</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="title">
			<view class="txt">结业率高达</view>
			<view class="num">90%</view>
		</view>
		<view class="ul">
			<view class="li">
				<view class="lab">科目一平均通过时间</view>
				<view class="val">12天</view>
			</view>
			<view class="li">
				<view class="lab">科目二平均通过时间</view>
				<view class="val">12天</view>
			</view>
			<view class="li">
				<view class="lab">科目三平均通过时间</view>
				<view class="val">12天</view>
			</view>
			<view class="li">
				<view class="lab">科目四平均通过时间</view>
				<view class="val">12天</view>
			</view>
		</view>
		<view class="title">
			<view class="txt">平均拿证时间</view>
			<view class="num">47天</view>
		</view>
		<view class="btnBorder">立即分享</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.teachingDataBg {
		width: 100%;
		background: url('http://192.168.1.20:81/zhili/image/20230818/409dca21dfec44eb8477e056ee23e437.png') #f6f6f6 no-repeat;
		background-size: 100% 544rpx;
		min-height: 100vh;
		font-size: 28rpx;
		padding-bottom: 40rpx;
	  .topText {
	  	padding: 56rpx 34rpx 84rpx 34rpx;
	  	color: #fff;
	  	font-weight: 600;
	  
	  	.h3 {
	  		font-size: 42rpx;
	  	}
	  
	  	.h4 {
	  		font-size: 64rpx;
	  	}
	  }
	  .card {
	    .top_row {
			display: flex;
			height: 214rpx;
			margin-bottom: 14rpx;
	      .topItem {
			  flex: 1;
			  text-align: center;
	        .lab {
				font-size: 28rpx;
				color: #333;
				margin: 48rpx 0 24rpx 0;
	        }
	
	        .val {
				color: $themC;
				font-size: 40rpx;
				font-weight: 500;
	        }
	      }
	    }
	  }
	
	  .title {
		  display: flex;
		  align-items: center;
		  width: 100%;
		  height: 98rpx;
		  background: linear-gradient(188deg, #F6F6F6 0%, #80C1F6 100%, #80C1F6 100%);
		  margin-bottom: 40rpx;
		  color: #FFFFFF;
	    .txt {
			font-weight: 500;
			line-height: 56px;
			text-shadow: 0px 4px 6px #1274D6;
			font-size: 40rpx;
			margin: 0 40rpx 0 28rpx;
			font-weight: 500;
	    }
	
	    .num {
			font-size: 72rpx;
			text-shadow: 0px 4px 8px #084787;
	    }
	  }
	
	  .ul {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  padding: 0 28rpx;
	    .li {
			width: 49%;
			text-align: center;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			height: 196rpx;
	      .lab {
			font-size: 28rpx;
			margin: 36rpx 0 26rpx 0;
	      }
	
	      .val {
			font-size: 40rpx;
			color: $themC;
	      }
	    }
	  }
	
	  .btnBorder {
			width: 396rpx;
			margin: 79rpx auto;
	  }
	}
</style>