jp-education-student/pages/parents/homePage/homePage.vue

<template>
	<view>
		<view class="navigation">
			<view class="title">
				启航教培管家·家长端
			</view>
			<view class="identity">
				<view class="picture">
					<img src="../../../assets/img/photo@1x.png" alt="">
				</view>
				<view class="name">
					周梓轩
				</view>
				<view class="icon">
					<img src="../../../assets/img/riLine-exchange-line@1x.png" alt="">
				</view>
			</view>
		</view>
		<view class="head">
			<view class="wrap">
				<u-swiper :list="list"></u-swiper>
			</view>

		</view>
		<view class="my-app">
			<view class="app-items">
				<view class="item" @click="gotoUrl('pages/parents/classSchedule/classSchedule')">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%)">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						课程表
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-quill-pen-fill@1x.png" alt="">
					</view>
					<view class="text">
						请假
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
					</view>
					<view class="text">
						机构报名
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-folder-user-fill@1x(1).png" alt="">
					</view>
					<view class="text">
						学员文件
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
						<img src="../../../assets/img/riFill-bank-card-fill@1x.png" alt="">
					</view>
					<view class="text">
						缴费记录
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						签到记录
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						测温记录
					</view>
				</view>
				<view class="item">
					<view class="icon-box"
						style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
						<img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
					</view>
					<view class="text">
						校长信箱
					</view>
				</view>
			</view>
		</view>

		<!-- 最近课程 -->
		<view class="course">
			<view class="title">
				<img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
			</view>
			<view class="course-infos">
				<view class="info-box" @click="gotoUrl('pages/teacher/callNames/classCall')">
					<view class="position today">
						今
					</view>
					<view class="class-name">
						周开琴书法班1
					</view>
					<view class="location-time">
						<view class="location">
							4楼6教室
						</view>
						<view class="time">
							09:30-10:45
						</view>
					</view>
					<view class="date">
						2023.1.3
					</view>
				</view>
				<view class="info-box info-box2">
					<view class="position tomorrow">
						明
					</view>
					<view class="class-name">
						周开琴书法班2
					</view>
					<view class="location-time">
						<view class="location">
							4楼6教室
						</view>
						<view class="time">
							09:30-10:45
						</view>
					</view>
					<view class="date">
						2023.1.4
					</view>
				</view>
			</view>
		</view>


		<!-- 课程推荐 -->
		<view class="recommend">
			<view class="title">
				<view class="title">
					<img src="../../../assets/img/riFill-award-fill@1x.png" alt="">最近课程
				</view>
			</view>
			<view class="classify">
				<view class="item chosen">
					全部
				</view>
				<view class="item">
					精品试听
				</view>
				<view class="item">
					为您优选
				</view>
				<view class="item">
					机构推荐
				</view>
			</view>
			
			<view class="infos-box">
				<view class="picture">
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						魔方记忆力
					</view>
					<view class="tips">
						<view class="item">
							基础入门
						</view>
						<view class="item">
							思维训练
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="photo">
								<img src="../../../assets/img/teacher.png" alt="">
							</view>
							<view class="name">
								鲁老师
							</view>
						</view>
						<view class="price">
							低至30元/课
						</view>
					</view>
				</view>
			</view>
<view class="infos-box">
				<view class="picture">
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						跆拳道
					</view>
					<view class="tips">
						<view class="item">
							强身健体
						</view>
						<view class="item">
							磨练意志
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="photo">
								<img src="../../../assets/img/teacher.png" alt="">
							</view>
							<view class="name">
								鲁老师
							</view>
						</view>
						<view class="price">
							低至30元/课
						</view>
					</view>
				</view>
			</view>
			<view class="infos-box">
				<view class="picture">
					<img src="../../../assets/img/classify1.png" alt="">
				</view>
				<view class="infos">
					<view class="name">
						中国舞十级班
					</view>
					<view class="tips">
						<view class="item">
							专业考证
						</view>
						<view class="item">
							限时报名
						</view>
					</view>
					<view class="teacher-price">
						<view class="teacher">
							<view class="photo">
								<img src="../../../assets/img/teacher.png" alt="">
							</view>
							<view class="name">
								鲁老师
							</view>
						</view>
						<view class="price">
							低至30元/课
						</view>
					</view>
				</view>
			</view>
			<u-divider>没有更多了</u-divider>
		</view>
		<ParentsTabbar :current="0" ref="tabbarMain"></ParentsTabbar>
	</view>
</template>

<script>
	import ParentsTabbar from '@/components/ParentsTabbar.vue'
	export default {
		components: {
			ParentsTabbar
		},
		data() {
			return {
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
	}
	.navigation {
      display: flex;
	  justify-content: space-between;
	  height: 44px;
	  background-color: rgba(13, 186, 199, 1);
	  padding: 0 16px;
	  .title{
		  line-height: 44px;
		  color: #ffffff;
		  font-size: 20px
	  }
	  .identity{
		  display: flex;
		  align-items:center;
		  .picture{
			  width: 24px;
			  height: 24px;
			  border-radius: 50px;
			  overflow: hidden;
			  margin-right: 4px;
			  img{
				  width: 100%;
				  height: 100%;
				  vertical-align: middle;
			  }
			  
		  }
		  .name{
			  margin-right: 4px;
			  color: rgba(255, 255, 255, 1);
		  }
		  .icon{
			  img{
				  vertical-align: middle;
			  }
		  }
	  }
		
		
	}

	.head {
		background: linear-gradient(179.89deg, rgba(13, 186, 199, 1) 61.7%, rgba(244, 246, 246, 1) 97.7%);
		padding-bottom: 100px;

		.wrap {
			padding: 16px;
		}

	}


	.my-app {
		margin: -100px 16px 16px 16px;
		border-radius: 12px 12px 0px 0px;
		padding: 16px;
		background-color: #fff;


		.app-items {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 40rpx;

				.icon-box {
					width: 40px;
					height: 40px;
					text-align: center;
					border-radius: 8px;
					position: relative;

					.count {
						width: 28px;
						height: 16px;
						line-height: 16px;
						border-radius: 50px;
						background-color: rgba(238, 49, 56, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 10px;
						text-align: center;
						position: absolute;
						top: -16rpx;
						right: -28rpx;
					}

					img {
						margin: 8px 0;


					}
				}

				.text {
					margin-top: 16rpx;
				}
			}
		}

	}

	// 最近课程
	.course {

		margin: auto;
		margin-top: 16px;
		width: 91.4%;

		.title {
			height: 20px;
			line-height: 20px;
			margin-bottom: 14px;
			color: #333333;
			font-weight: bold;

			img {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.course-infos {
			display: flex;
			justify-content: space-between;

			.info-box {
				border-top: 2px solid #0DBAC7;
				background: linear-gradient(to right, #E4F8E3, #dcf5f6);
				width: 47.8%;
				padding: 24rpx 0 14rpx 24rpx;
				box-shadow: 2px 2px 2px 2px #e7e9e9;
				border-radius: 8px;
				position: relative;

				.position {
					width: 48rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: absolute;
					top: 0;
					right: 16rpx;
					text-align: center;
					border-radius: 0px 0px 4px 4px;
					font-size: 12px;
					color: #fff;
				}

				.today {
					background-color: #0DBAC7;
				}

				.tomorrow {
					background-color: #0086FF;
				}

				.class-name {
					height: 20px;
					color: rgba(51, 51, 51, 1);
					font-size: 14px;
				}

				.location-time {
					margin-top: 8rpx;
					display: flex;
					justify-content: start;
					color: rgba(119, 119, 119, 1);
					font-size: 12px;

					.time {
						margin-left: 8rpx;
					}
				}

				.date {
					color: rgba(119, 119, 119, 1);
					font-size: 12px;
					margin-top: 8rpx;
				}
			}

			.info-box2 {
				border-top: 2px solid #0086FF;
			}
		}
	}

.recommend{
	margin:32px 16px ;
	.title {
		height: 20px;
		line-height: 20px;
		margin-bottom: 14px;
		color: #333333;
		font-weight: bold;
	
		img {
			vertical-align: middle;
			margin-right: 8px;
		}
	}
	.classify{
		display: flex;
		margin-bottom: 24px;
		.item{
			border-radius: 12px;
			line-height: 32px;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(119, 119, 119, 1);
			text-align: center;
			border: 1px solid rgba(204, 204, 204, 1);
			padding: 0 8px;
			margin-left: 12px;
		}
		.chosen{
			border: 1px solid rgba(13, 186, 199, 1);
			color: rgba(13, 186, 199, 1);
		}
	}
	.infos-box{
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		padding: 12px;
		margin-bottom: 12px;
		display: flex;
		.picture{
			width: 200rpx;
			height: 200rpx;
			border-radius: 4px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.infos{
			flex: 1;
			margin-left: 12px;
			.name{
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
			}
			.tips{
				display: flex;
				margin-top: 8px;
				.item{
					padding: 0 8px;
					line-height: 20px;
					border-radius: 4px;
					background-color: rgba(241, 243, 244, 1);
					color: rgba(16, 16, 16, 1);
					font-size: 12px;
					margin-right: 8px;
				}
			}
			.teacher-price{
				margin-top: 44rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.teacher{
					display: flex;
					align-items: center;
					.photo{
						width: 32px;
						height: 32px;
						border-radius: 50px;
						overflow: hidden;
						margin-right: 8px;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.price{
					color: rgba(255, 61, 0, 1);
				}
			}
		}
	}
}

</style>