jp-housekeep-electric/pages/businessHall/message/message.vue

<template>
	<view>
		<u-navbar title="消息 (1)"  title-color="#101010" ></u-navbar>
		<!-- 消息列表 -->
		<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，用电12888888
					</view>
				</view>
			</view>
		</view>
		
		<Tabbar :current="1" ></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.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;
			}
			.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);
			}
			.icon3{
				background: linear-gradient(180.29deg, rgba(255,214,125,1) 0.9%,rgba(255,150,0,1) 100.4%);
			}
			.icon4{
background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
			}
			.icon5{
				background: linear-gradient(178.44deg, rgba(122,232,227,1) 3.96%,rgba(57,182,182,1) 100.6%);
			}
			.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>