消息中心 消息列表

App.vue

@@ -35,9 +35,12 @@
 	} 
 /deep/.u-divider{
 	color: rgba(182, 189, 195, 1);
-	font-size: 12px;
-	font-weight: bold;
-}
+	font-size: 24rpx;
+}
+/* tabs标签 */
+/deep/.u-tab-item{
+			  font-weight: normal !important;
+		  }
 	.uni-icon-success-no-circle:before {
 	    content: "" !important ;
 		display: none;

pages.json

@@ -132,6 +132,33 @@
             }
             
         }
+        ,{
+            "path" : "pages/storeManagement/equipmentRetrieval/equipmentDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/storeManagement/messageCenter/messageCenter",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/storeManagement/messageCenter/messageList",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 
 	

pages/storeManagement/messageCenter/messageCenter.vue

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

pages/storeManagement/messageCenter/messageList.vue

@@ -0,0 +1,143 @@
+
+<template>
+	<view>
+		<u-navbar title="巡检消息" ></u-navbar>
+		
+		<view class="main">
+			<view class="item" v-for="item in 2">
+				<view class="date">
+					2023-01-02 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 ">
+							孙斌
+							
+						</view>
+					</view>
+					<view class="infos">
+						<view class="info-name">
+							巡检日期：
+						</view>
+						<view class="info-content">
+                  2023/03/15-2023/03/20
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			
+			
+			
+			<u-divider bg-color="#f2f2f2">没有更多数据了</u-divider>
+			
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		padding-bottom: 60px;
+	}
+	.main{
+		padding: 32rpx;
+		.item{
+			margin-bottom: 48rpx;
+			.date{
+				margin:0 auto 32rpx;
+				width: 39.3%;
+				height: 56rpx;
+				line-height: 56rpx;
+				border-radius: 50px;
+				background-color: #c3c5c5;
+				color: rgba(255, 255, 255, 1);
+				font-size: 24rpx;
+				text-align: center;
+			}
+			.message-infos{
+				padding: 40rpx ;
+				border-radius: 12px;
+				background-color: rgba(255, 255, 255, 1);
+				color: rgba(16, 16, 16, 1);
+				font-size: 28rpx;
+				border: 1px solid rgba(232, 232, 232, 1);
+				.title{
+					color: rgba(51, 51, 51, 1);
+					font-size: 36rpx;
+					font-weight: bold;
+					margin-bottom: 32rpx;
+				}
+				.details{
+					color: #777777;
+					margin-bottom: 24rpx;
+					line-height: 40rpx;
+				}
+				.infos{
+					display: flex;
+					margin-bottom: 16rpx;
+					.info-name{
+						color: rgba(136, 136, 136, 1);
+						
+						width: 150rpx;
+						font-size: 28rpx;
+						margin-right: 32rpx;
+						
+					}
+					.info-content{
+						flex: 1;
+						colot:#101010;
+						
+					}
+					.location{
+						color: #101010;
+						font-weight: bold;
+					}
+					.temperature{
+						color: #43c9d3;
+					}
+				}
+				
+			}
+		}
+	}
+  
+  
+</style>