<!--
 * @Author: XHC
 * @Date: 2025-05-19 15:19:14
 * @LastEditors: XHC
 * @LastEditTime: 2025-05-23 15:30:08
 * @Description: 消息
-->
<template>
    <view class="message">
		<view class="notice">
			<view class="notice-list" v-for="(item, index) in noticeList" :key="index">
				<view class="title">
					<uni-icons fontFamily="iconfont" color="#1571F3" :size="24">{{'&#xe651;'}}</uni-icons>
					{{ item.title }}
				</view>
				<view class="info">{{ item.info }}</view>
				<view class="bottom">
					<view class="time"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</view>
					<view class="detail"><text>查看详情</text> <uni-icons type="right" color="#0F64B9" size="20" /></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

// 通知列表
const noticeList = reactive([
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
])
</script>

<style lang="scss" scoped>
.message {
	.notice {
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 20rpx;
		padding: 10rpx 0;
		.notice-list {
			margin: 20rpx;
			padding: 20rpx;
			background: #F1F6FD;
			border-radius: 10rpx;
			.title {
			   color: #004291;
			   font-weight: bold;
			   font-size: 32rpx;
		   }
		   .info, .bottom {
			   color: #75777A;
			   font-size: 23rpx;
			   padding: 20rpx 0;
			}
			.info {
			   border-bottom: 3rpx solid #fff;
		   }
		   .bottom, .detail {
				display: flex;
				justify-content: space-between;
    			align-items: center;
		   }
		}
	}
}
</style>