jp-education-student/pages/parents/messageNotification/messageList.vue

<template>
	<view>
		<u-navbar back-text="消息通知" ></u-navbar>
		
		<view class="main">
			<view class="item">
				<view class="date">
					今日 12:00

				</view>
				<view class="message-infos">
					<view class="title">
						续费提醒
					</view>
					<view class="infos">
						<view class="info-name">
							学员:
						</view>
						<view class="info-content">
							周梓轩
						</view>
					</view>
					<view class="infos">
						<view class="info-name">
							班级:
						</view>
						<view class="info-content">
							芭蕾舞新生班
						</view>
					</view>
					<view class="infos">
						<view class="info-name">
							剩余课时：
						</view>
						<view class="info-content remaining">
							2
						</view>
					</view>
					<view class="infos">
						<view class="info-name">
							备注：
						</view>
						<view class="info-content">
							周梓轩同学剩余课时不足，如需续课可联系夏老师13872354255
						</view>
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="date">
					2023-01-03 星期一
			
				</view>
				<view class="message-infos" style="padding-bottom: 10px;">
					<view class="title" style="margin-bottom: 7px;">
						校内通知
					</view>
					
					<view class="details">
						通知公告通知公告通知公告通知公告通知公告通知公告通知公告通知公告！
					</view>
					<u-line color="#F4F2F2" />
					<view class="check">
						点击查看详情 
						<view class="icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item">
							<view class="date">
								2023-01-01 星期六

			
							</view>
							<view class="message-infos">
								<view class="title">
									测温记录
								</view>
								<view class="infos">
									<view class="info-name">
										学员:
									</view>
									<view class="info-content">
										周梓轩
									</view>
								</view>
								<view class="infos">
									<view class="info-name">
										体温：
									</view>
									<view class="info-content temperature">
										36.3℃ 正常
									</view>
								</view>
								<view class="infos">
									<view class="info-name">
										设备：
									</view>
									<view class="info-content location">
										
										青少年宫二楼一教室
								
									</view>
								</view>
								<view class="infos">
									<view class="info-name">
										时间：
									</view>
									<view class="info-content">
										
									
										2023-01-03 14:10:01
									</view>
								</view>
							</view>
						</view>
			<u-divider>没有更多数据了</u-divider>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 60px;
	}
	.main{
		padding: 16px;
		.item{
			margin-bottom: 24px;
			.date{
				margin:0 auto 16px;
				width: 39.3%;
				height: 28px;
				line-height: 28px;
				border-radius: 50px;
				background-color: #c3c5c5;
				color: rgba(255, 255, 255, 1);
				font-size: 12px;
				text-align: center;
			}
			.message-infos{
				padding: 20px ;
				border-radius: 12px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(16, 16, 16, 1);
				font-size: 14px;
				border: 1px solid rgba(232, 232, 232, 1);
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 16px;
				}
				.details{
					color: #777777;
					margin-bottom: 12px;
					line-height: 20px;
				}
				.infos{
					display: flex;
					margin-bottom: 8px;
					.info-name{
						color: rgba(136, 136, 136, 1);
						
						width: 150rpx;
						font-size: 28rpx;
						margin-right: 32rpx;
						
					}
					.info-content{
						flex: 1;
						colot:#101010;
						
					}
					.remaining{
						color: red;
					}
					.location{
						color: #101010;
						font-weight: bold;
					}
					.temperature{
						color: #43c9d3;
					}
				}
				.check{
					margin-top: 10px;
					color: #777777;
					.icon{
						float: right;
					}
				}
			}
		}
	}
  
  
</style>