消息列表

components/ParentsTabbar.vue

@@ -34,7 +34,7 @@
 						iconPath: "chat",
 						selectedIconPath: "chat-fill",
 						text: '消息',
-						pagePath2: "/pages/parents/news/news",
+						pagePath2: "/pages/parents/messageNotification/messageNotification",
 						count: 99,
 						isDot: false,
 						customIcon: false,

pages.json

@@ -219,8 +219,9 @@
             }
             
         }
+        
         ,{
-            "path" : "pages/parents/news/news",
+            "path" : "pages/parents/mine/mine",
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "",
@@ -229,7 +230,7 @@
             
         }
         ,{
-            "path" : "pages/parents/mine/mine",
+            "path" : "pages/parents/course/courseDetails",
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "",
@@ -238,7 +239,7 @@
             
         }
         ,{
-            "path" : "pages/parents/course/courseDetails",
+            "path" : "pages/parents/course/coursePrediction",
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "",
@@ -246,8 +247,9 @@
             }
             
         }
+       
         ,{
-            "path" : "pages/parents/course/coursePrediction",
+            "path" : "pages/parents/search/searchResult",
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "",
@@ -256,7 +258,7 @@
             
         }
         ,{
-            "path" : "pages/parents/search/search",
+            "path" : "pages/parents/messageNotification/messageNotification",
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "",
@@ -265,7 +267,7 @@
             
         }
         ,{
-            "path" : "pages/parents/search/searchResult",
+            "path" : "pages/parents/messageNotification/messageList",
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "",

pages/parents/messageNotification/messageList.vue

@@ -0,0 +1,216 @@
+<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>

pages/parents/messageNotification/messageNotification.vue

@@ -0,0 +1,231 @@
+<template>
+	<view>
+		<u-navbar title="消息通知（100）">
+			<slot name="right">全部已读</slot>
+		</u-navbar>
+		<view class="message">
+			<view class="item">
+				<view class="icon-box">
+					<img src="../../../assets/img/riFill-volume-up-fill@1x.png" alt="">
+					<view class="count">
+						32
+					</view>
+				</view>
+				<view class="content">
+					<view class="head">
+						<view class="title">
+							系统公告
+						</view>
+						<view class="time">
+							48分钟前
+						</view>
+					</view>
+					<view class="count">
+						32条未读消息
+					</view>
+				</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-feedback-fill@1x.png" alt="">
+					<view class="count">
+						5
+					</view>
+				</view>
+				<view class="content">
+					<view class="head">
+						<view class="title">
+							校内通知
+						</view>
+						<view class="time">
+							刚刚
+						</view>
+					</view>
+					<view class="count">
+						5条未读消息
+					</view>
+				</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-notification-4-fill@1x.png" alt="">
+					<view class="count">
+						5
+					</view>
+				</view>
+				<view class="content">
+					<view class="head">
+						<view class="title">
+							上课提醒
+						</view>
+						<view class="time">
+							昨天 21:00
+						</view>
+					</view>
+					
+					<view class="count">
+						5条未读消息
+					</view>
+				</view>
+				
+			</view>
+			
+			<view class="item">
+				<view class="icon-box"
+					style="background: linear-gradient(182.18deg, rgba(79,226,157,1) 2.83%,rgba(0,185,98,1) 99.31%);">
+					<img src="../../../assets/img/riFill-contacts-book-fill@1x.png" alt="">
+					<view class="count">
+						1
+					</view>
+				</view>
+				<view class="content">
+					<view class="head">
+						<view class="title">
+							续费提醒
+						</view>
+						<view class="time">
+							2022-09-17 14:10
+						</view>
+					</view>
+					
+					<view class="count">
+						周梓轩同学剩余课时不足，如需续课可与老师联系周梓轩同学剩余课时不足，如需续课可与老师联系
+					</view>
+				</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-temp-cold-fill@1x.png" alt="">
+					
+				</view>
+				<view class="content">
+					<view class="head">
+						<view class="title">
+							测温记录
+						</view>
+						<view class="time">
+							2023-01-03 14:10
+						</view>
+					</view>
+					
+					<view class="count">
+周梓轩 2023-01-03 14:10:01 体温正常
+					</view>
+				</view>
+				
+			</view>
+
+		</view>
+		<ParentsTabbar :current="2" ref="tabbarMain"></ParentsTabbar>
+	</view>
+</template>
+
+<script>
+	import ParentsTabbar from '@/components/ParentsTabbar.vue'
+	 
+	export default {
+		components: {
+			ParentsTabbar
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #fff;
+	}
+
+	.message {
+		padding: 0 16px;
+
+		.item {
+			width: 100%;
+			margin-top: 24px;
+			display: flex;
+
+			.icon-box {
+				width: 52px;
+				height: 52px;
+				background: linear-gradient(180deg, rgba(91, 160, 242, 1) 1%, rgba(26, 118, 226, 1) 100%);
+				border-radius: 999px;
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.count {
+					width: 20px;
+			 	   height: 16px;
+					line-height: 16px;
+					border-radius: 8px;
+					background-color: rgba(238, 49, 56, 1);
+					color: rgba(255, 255, 255, 1);
+					font-size: 11px;
+					text-align: center;
+					position: absolute;
+					top: 0rpx;
+			 	right: -8rpx;
+				}
+
+
+			}
+
+			.content {
+				flex: 1;
+				margin-left: 16px;
+				padding: 4px 0;
+                 .head{
+					 display: flex;
+				 }
+				.title {
+				 height: 22px;
+					line-height: 22px;
+					color: rgba(51, 51, 51, 1);
+					font-size: 16px;
+					font-weight: bold;
+				}
+
+				.count {
+					width:548rpx;
+					height: 17px;
+					line-height: 17px;
+					color: rgba(119, 119, 119, 1);
+					font-size: 12px;
+					margin-top: 4px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			.time {
+				padding-top: 4px;
+				margin-left: auto;
+				color: rgba(119, 119, 119, 1);
+				font-size: 12px;
+				font-family: PingFangSC-regular;
+			}
+		}
+	}
+
+	/deep/.u-slot-content {
+		justify-content: end;
+		margin-right: 32rpx;
+		color: rgba(13, 186, 199, 1);
+	}
+</style>

pages/parents/news/news.vue

@@ -1,27 +0,0 @@
-<template>
-	<view>
-		news
-		<ParentsTabbar :current="2" ref="tabbarMain"></ParentsTabbar>
-	</view>
-</template>
-
-<script>
-	import ParentsTabbar from '@/components/ParentsTabbar.vue'
-	export default {
-		components:{
-			ParentsTabbar
-		},
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>