jp-housekeep-manage/pages/mine/message.vue

<template>
	<view>
		<view class="navbar-c">
			<view class="back" >
				<u-icon name="arrow-left" color="#101010" size="36"></u-icon>
			</view>
			<view class="title">
				消息 (1)
		
				
					<image class="img" src="@/assets/img/riLine-brush-2-line.svg"></image>
				
		
			</view>
		
		</view>
		<!-- 消息列表 -->
		
			<view class="message-list" >
				<view class="message-item"  >
					<view class="icon ">
						<image class="img" src="@/assets/img/antFill-notification.svg" mode=""></image>
						<view class="dot" >
							
						</view>
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								停电通知
							</view>
							<view class="title-time" >
								01-02
							</view>
							
						</view>
						<view class="value" >
							接电力部门通知，明天（1月25日）因台区用电调…
						</view>
					</view>
				</view>
				<view class="message-item"  >
					<view class="icon icon2">
						<image class="img" src="@/assets/img/antFill-account-book.svg" mode=""></image>
						
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								低额提醒
							</view>
							<view class="title-time" >
								01-02
							</view>
							
						</view>
						<view class="value" >
							用户您好，贵司账户余额不足100元，请尽快充值…
						</view>
					</view>
				</view>
				<view class="message-item"  >
					<view class="icon icon3">
						<image class="img" src="@/assets/img/fas fa-bell.svg" mode=""></image>
						
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								故障告警
							</view>
							<view class="title-time" >
								01-02
							</view>
							
						</view>
						<view class="value" >
							本园区11楼所在楼层电表网络故障，我们会尽快处…
						</view>
					</view>
				</view>
				
				<view class="message-item"  >
					<view class="icon icon4">
						<image class="img" src="@/assets/img/fas fa-exclamation-triangle Copy 1.svg" mode=""></image>
						
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								欠费告警
							</view>
							<view class="title-time" >
								01-02
							</view>
							
						</view>
						<view class="value" >
							用户您好，截止2月18日0时，贵司账户余额已不足…
						</view>
					</view>
				</view>
				
				<view class="message-item"  >
					<view class="icon icon5">
						<image class="img" src="@/assets/img/fas fa-chart-pie.svg" mode=""></image>
						
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								电费月度账单
							</view>
							<view class="title-time" >
								01-02
							</view>
							
						</view>
						<view class="value" >
							截止2024年01月，您家电表止码8652，用电128…
						</view>
					</view>
				</view>
				
				
				
				<view class="message-item"  >
					<view class="icon icon6">
						<image class="img" src="@/assets/img/md-watch_later.svg" mode=""></image>
						
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								租约到期提醒
							</view>
							<view class="title-time" >
								01-02
							</view>
							
						</view>
						<view class="value" >
							用户您好，您的租约即将于2月14日到期，如需续…
						</view>
					</view>
				</view>
				
			</view>
			
		
		<energyCenterTabbar :current="2"></energyCenterTabbar>
	</view>
</template>

<script>
	import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
	export default {
		components: {
			energyCenterTabbar
		},
		data() {
			return {
				
			}
		},
		onLoad() {
		
			
		},
		onShow() {
			
			this.prefetch()
		},
		methods: {
			
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.navbar-c{
	.img{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50px;
		background-color: rgba(232,232,232,1);
	}	
    
		
	}
	
	.message-list{
		background-color: #fff;
		.message-item{
			display: flex;
			
			padding: 32rpx;
			border-bottom: 1px solid rgba(240,240,240,1);
			.icon{
				width: 96rpx;
				height: 96rpx;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
			.img{
				width: 56rpx;
				height: 56rpx;
				filter: drop-shadow(0px 2px 4px  rgba(0,75,23,0.67));
			}
			.dot{
				width: 20rpx;
				height: 20rpx;
				border-radius:999px;
				background-color: rgba(255,0,0,1);
				position: absolute;
				top:-6rpx;
				right:-6rpx;
			}
			}
			.icon2{
				background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);
				color: rgba(255,255,255,1);
				.img{
					filter: drop-shadow(0px 2px 4px  rgba(24,90,198,1));
				}
			}
			.icon3{
				background: linear-gradient(180.29deg, rgba(255,214,125,1) 0.9%,rgba(255,150,0,1) 100.4%);
			.img{
				filter: drop-shadow(0px 2px 4px  rgba(182,77,0,1));
			}
			}
			.icon4{
background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
			
			.img{
				filter: drop-shadow( 0px 2px 4px  rgba(192,0,0,0.5));
			}
			}
			.icon5{
				background: linear-gradient(178.44deg, rgba(122,232,227,1) 3.96%,rgba(57,182,182,1) 100.6%);
			.img{
				filter: drop-shadow( 0px 2px 4px  rgba(0,130,118,1));
			}
			
			}
			.icon6{
				background: linear-gradient(179.2deg, rgba(168,178,238,1) 6.28%,rgba(123,123,240,1) 96.94%);
			.img{
				filter: drop-shadow( 0px 2px 2px  rgba(52,0,255,0.75));
			}
			}
			.content{
				flex:1;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title-name{
						color: rgb(16,16,16);
						font-size: 32rpx;
					}
					.title-time{
						color: rgb(140,140,140);
						font-size: 24rpx;
					}
				}
				.value{
					width: 560rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10rpx;
	
					font-size: 24rpx
				}
			}
		}
	}

</style>