留言板/留言板详情/消息中心/设置页面样式优化

pages/message/message.vue

@@ -12,7 +12,8 @@
 		<scroll-view scroll-y class="message-list">
 			<view v-for="(msg,index) in messages" :key="index" class="msg-item u-flex u-row-between" @click="viewMessage(msg)">
 				<view class="u-flex">
-					<u-icon :name="msg.icon" size="48" :color="msg.read ? '#ccc' : 'cornflowerblue'"></u-icon>
+					<!-- <u-icon :name="msg.icon" size="48" :color="msg.read ? '#ccc' : 'cornflowerblue'"></u-icon> -->
+					<image :src="msg.icon"></image>
 					<view class="msg-content u-m-l-20">
 						<view class="msg-title u-font-16">{{ msg.title }}</view>
 						<view class="msg-desc u-tips-color u-font-12 u-line-2">{{ msg.desc }}</view>
@@ -39,21 +40,21 @@ export default {
 					title: '账单提醒',
 					desc: '您的本月房租账单已生成，请在到期日前完成支付。',
 					time: '2025-10-29 09:12',
-					icon: 'file-text',
+					icon: '/static/icon/msg-1.png',
 					read: false
 				},
 				{
 					title: '系统通知',
 					desc: '恭喜您成功升级为魔力会员，快来看看新增的特权吧！',
 					time: '2025-10-28 18:46',
-					icon: 'bell',
+					icon: '/static/icon/msg-2.png',
 					read: true
 				},
 				{
 					title: '活动优惠',
 					desc: '限时会员活动，租惠卡用户房租95折，快来参与！',
 					time: '2025-10-27 14:03',
-					icon: 'gift',
+					icon: '/static/icon/msg-3.png',
 					read: false
 				}
 			],
@@ -76,7 +77,7 @@ export default {
 
 <style lang="scss" scoped>
 .message-page {
-	background-color: #f7f8fa;
+	background-color: #ffffff;
 	min-height: 100vh;
 }
 
@@ -86,13 +87,16 @@ export default {
 }
 
 .msg-item {
-	background: #fff;
-	border-radius: 16rpx;
-	padding: 30rpx 20rpx;
+	padding: 20rpx;
 	margin-bottom: 20rpx;
 	align-items: flex-start;
 	position: relative;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+	border-bottom: 1px solid #E6E6E6;
+	
+	image{
+		width: 88rpx;
+		height: 88rpx;
+	}
 }
 
 .msg-content {
@@ -112,11 +116,15 @@ export default {
 	justify-content: space-between;
 }
 
+.msg-time{
+	position: absolute;
+}
+
 .unread-dot {
 	width: 14rpx;
 	height: 14rpx;
 	background-color: #ff4d4f;
 	border-radius: 50%;
-	margin-top: 10rpx;
+	margin-top: 50rpx;
 }
 </style>