jp-education-student/pages/youth/messageNotification/messageNotification.vue

<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;
			}
		}
	}

	::v-deep.u-slot-content {
		justify-content: end;
		margin-right: 32rpx;
		color: rgba(13, 186, 199, 1);
	}
</style>