jp-education-student/pages/teacher/message/messageNotification.vue

<template>
	<view>
		<u-navbar title="消息通知（100）" >
			<slot name="right">全部已读</slot>
		</u-navbar>
		<view class="message">
			 <view class="item" @click="gotoUrl('pages/teacher/message/messageList')">
			 	<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="title">
						系统公告
					</view>
					<view class="count">
						32条未读消息
					</view>
				</view>
				<view class="time">
					48分钟前
				</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="title">
			 						校内通知
			 					</view>
			 					<view class="count">
			 						5条未读消息
			 					</view>
			 				</view>
			 				<view class="time">
			 					刚刚
			 				</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="title">
			 						上课提醒
			 					</view>
			 					<view class="count">
			 						5条未读消息
			 					</view>
			 				</view>
			 				<view class="time">
			 					昨天 21:00
			 				</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-time-fill@1x.png" alt="">
					<view class="count">
						5
					</view>
			 	</view>
			 				<view class="content">
			 					<view class="title">
			 						请假条
			 					</view>
			 					<view class="count">
			 						5条未读消息
			 					</view>
			 				</view>
			 				<view class="time">
			 					2022-09-17 14:10
			 				</view>
			 </view>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
   .message{
	   padding: 0 16px;
	   .item{
		   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{
			   margin-left: 16px;
			   padding: 4px 0 ;
			   .title{
				   height: 22px;
				   line-height: 22px;
				   color: rgba(51, 51, 51, 1);
				   font-size: 16px;
				   font-weight: bold;
			   }
			   .count{
				   height: 17px;
				   line-height: 17px;
				   color: rgba(119, 119, 119, 1);
				   font-size: 12px;
				   margin-top: 4px;
			   }
		   }
		   .time{
			   padding-top: 4px;
			   margin-left: auto;
			   color: rgba(119, 119, 119, 1);
			   font-size: 12px;
			   font-family: PingFangSC-regular;
		   }
	   }
   }
   ::v-deep.u-slot-content{
	   justify-content: end;
	   margin-right: 32rpx;
	   color: rgba(13, 186, 199, 1);
   }
</style>