ZhiHuiJiaoWu_UniApp/pages/student/my/my.vue

<!--我的-首页-->
<template>
	<view class="main_box">
		<view style="background:#29D3B4;">
			<!--用户信息-->
			<view class="user_section">
				<view class="box">
					<view class="left">
						<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
						<view class="name">包子皮</view>
					</view>
					<view class="right">
						<image src="@/static/images/index/setup.png" style="width: 50rpx;height: 50rpx;"></image>
					</view>
				</view>
			</view>

			<!--统计信息-->
			<view class="count_section">
				<view class="main">
					<view class="course_box">
						<view class="top">
							<view class="item">
								<view class="num">1234</view>
								<view class="intro">总授课数/节</view>
							</view>
							<view class="item">
								<view class="num">4</view>
								<view class="intro">总授班级/个</view>
							</view>
							<view class="item">
								<view class="num">1234</view>
								<view class="intro">总负责学员/名
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom"></view>
				<view class="bg_box bg_top"></view>
				<view class="bg_box bg_bottom"></view>
			</view>
		</view>



		<view class="main_section">
			<view class="section_box">
				<view class="item" style="border-radius: 16rpx 16rpx 0 0;">
					<view>课时消耗</view>
				</view>

				<view class="item">
					<view>我的成员</view>
					<view></view>
				</view>

				<view class="item">
					<view>我的合同</view>
					<view></view>
				</view>
			</view>

			<view class="section_box">
				<view class="item">
					<view>我的教练</view>
					<view></view>
				</view>
				<view class="item">
					<view>负责人</view>
					<view></view>
				</view>
				<view class="item">
					<view>意见反馈</view>
					<view></view>
				</view>
			</view>
		</view>

		<!--    底部导航-->
		<AQTabber />
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import AQTabber from "@/components/AQ/AQTabber.vue"


	export default {
		components: {
			AQTabber,
		},
		data() {
			return {
				formData: {},
				tabType: '1', //1=班级成员,2=作业任务
				Atype: 1, //1=作业完成,2=作业未提交
			}
		},
		onLoad() {},
		methods: {
			//切换tab
			tabChange(tabType) {
				this.tabType = tabType
			},

			//打开课程详情
			openViewCourseInfo(item) {
				uni.navigateTo({
					url: '/pages/coach/course/info'
				})
			},
			//打开学员详情页
			openViewStudentInfo(item) {
				uni.navigateTo({
					url: '/pages/coach/student/info'
				})
			},

			//打开体测报告
			openViewPhysicalExamination(item) {
				uni.navigateTo({
					url: '/pages/coach/student/physical_examination'
				})
			},

			//打开作业任务
			opebViewWorkDetails(item) {
				uni.navigateTo({
					url: '/pages/coach/student/work_details'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
		min-height: 28vh;
	}

	//自定义导航栏
	.navbar_section {
		border: 1px solid #29D3B4;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29D3B4;

		.title {
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #fff;
		}
	}

	//用户信息
	.user_section {
		background-color: #29D3B4;
		padding-top: 58rpx;
		padding-bottom: 42rpx;
		color: #fff;
		font-size: 28rpx;

		.box {
			padding-left: 19rpx;
			padding-right: 29rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 15rpx;

			.left {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.pic {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
				}

				.name {
					font-size: 28rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.btn {
					min-height: 28rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	//统计信息
	.count_section {
		position: relative;

		.main {
			position: relative;
			z-index: 2;
			padding: 0rpx 24rpx;
			display: flex;
			justify-content: center;

			.course_box {
				padding: 42rpx 28rpx;
				width: 692rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				gap: 32rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 12rpx;

						.num {
							color: #29D3B4;
							font-size: 56rpx;
						}

						.intro {
							color: #AAAAAA;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.bg_box {
			z-index: 1;
			width: 100%;
			height: 150rpx;
		}

		.bg_top {
			position: absolute;
			top: 0;
			background-color: #29D3B4;
		}

		.bg_bottom {
			top: 50%;
			position: absolute;
			background-color: #292929;
		}
	}

	.main_section {
		margin-top: 20rpx;
		background: #292929 100%;
		padding: 0 24rpx;
		padding-top: 40rpx;
		padding-bottom: 150rpx;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		flex-direction: column;
		gap: 22rpx;

		.section_box {
			margin-bottom: 10rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 6rpx 24rpx;
			display: flex;
			flex-direction: column;
			.item {
				padding: 35rpx 78rpx;
				border-top: 1px solid #F2F2F2;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}

			.item:nth-child(1) {
				border-top: 0;
			}


		}

	}
</style>