JP-Equipment-Jingli/pages/otherFunctions/messageCenter/messageCenter.vue

<template>
	<view>
		<u-navbar title="消息中心">
			<slot name="right">一键已读</slot>
		</u-navbar>
		<view class="message">
			<view class="message-item">
				<view class="icon" style="background: linear-gradient(180deg, rgba(218,230,245,1) 1%,rgba(180,206,238,1) 100%);">
					<img src="@/assets/img/riFill-volume-up-fill@1x.png" alt="">
				
				<view class="amount">
					80
				</view>
				</view>
				
				<view class="infos">
					<view class="head">
						<view class="title">
							系统公告
						</view>
						<view class="time">
							48分钟前
						</view>
					</view>
					<view class="unread">
						32条未读消息
					</view>
				</view>
			</view>
			
			<view class="message-item">
				<view class="icon" style="background: linear-gradient(180deg, rgba(226,219,251,1) 1%,rgba(207,195,255,1) 100%);">
					<img src="@/assets/img/riFill-chat-settings-fill@1x.png" alt="">
				
				<view class="amount">
					80
				</view>
				</view>
				
				<view class="infos">
					<view class="head">
						<view class="title">
							检验消息
						</view>
						<view class="time">
							10:00
						</view>
					</view>
					<view class="unread">
						32条未读消息
					</view>
				</view>
			</view>
			
			<view class="message-item">
				<view class="icon" style="background: linear-gradient(180deg, rgba(214,249,214,1) 1%,rgba(170,226,170,1) 100%);">
					<img src="@/assets/img/riFill-inbox-archive-fill@1x.png" alt="">
				
				<view class="amount">
					3
				</view>
				</view>
				
				<view class="infos">
					<view class="head">
						<view class="title">
							入库提醒
						</view>
						<view class="time">
							2天前
						</view>
					</view>
					<view class="unread">
						32条未读消息
					</view>
				</view>
			</view>
			
			<view class="message-item">
				<view class="icon" style="background: linear-gradient(180deg, rgba(249,235,225,1) 1%,rgba(238,206,182,1) 100%);">
					<img src="@/assets/img/riFill-inbox-unarchive-fill@1x.png" alt="">
				
				<view class="amount">
					4
				</view>
				</view>
				
				<view class="infos">
					<view class="head">
						<view class="title">
							出库提醒
						</view>
						<view class="time">
							2023/03/01 12:00
						</view>
					</view>
					<view class="unread">
						32条未读消息
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

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

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
		background-color: #fff;
	}
	/deep/.u-slot-content {
		justify-content: end;
		margin-right: 32rpx;
		color: rgba(51, 51, 51, 1);
	}
    .message{
		padding: 32rpx;
		 .message-item{
			 display: flex;
			 margin-bottom: 24rpx;
			 .icon{
				 width: 104rpx;
				 height: 104rpx;
				 border-radius: 8px;
				 text-align: center;
				 line-height: 104rpx;
				 position: relative;
				.amount{
					width: 40rpx;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 8rpx;
					background-color: rgba(255, 61, 0, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 22rpx;
					text-align: center;
					position: absolute;
					top: 0;
					right:-12rpx;
				}
				 img{
					 width: 56rpx;
					 height: 56rpx;
					 vertical-align: middle;
				 }
			 }
			 .infos{
				 display: flex;
				 flex:1;
				 flex-direction: column;
				 justify-content: space-around;
				 margin-left: 32rpx;
				 .head{
					 display: flex;
					 justify-content: space-between;
					 .title{
						 color: rgba(51, 51, 51, 1);
						 font-size: 32rpx;
					 }
					 .time{
						 color: rgba(119, 119, 119, 1);
						 font-size: 24rpx;
					 }
				 }
				 
				 .unread{
					 color: rgba(119, 119, 119, 1);
					 font-size: 24rpx;
				 }
			 }
		 }
	}
</style>