<template>
	<view class="container">
		<!-- 引入头部组件 -->
		<Header :title="'社区公告'"></Header>
		<view class="content">
			<view class="content_wapper">
				<view class="notice-list">
					<view class="notice_item" @click="goPage('serviceNoticeDetail')">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					<view class="notice_item">
						<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
						<view class="notice-content">
							<view class="notice-title">小区电梯维修通知</view>
							<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
							<view class="notice-date">2025-03-29</view>
						</view>
					</view>
					
				
				</view>
				
			</view>

		</view>
		<Footer></Footer>
	</view>

</template>

<script>
	import Header from '@/components/header_common.vue';
	import Footer from '@/components/footer_common.vue';
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				title: '',
				content: '',
				fileList: []
			};
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},
			afterRead(event) {
				// 读取完成后的回调函数
				const {
					file
				} = event;
				this.fileList.push(file);
			},
			publish() {
				// 发布逻辑
				console.log('发布:', this.title, this.content, this.fileList);
			},
			// 跳转详情页面
			goPage(page){
				uni.navigateTo({
				  url: `/pages/${page}/index`,
				  // url: '/pages/helpInfo/index', 
				  success: () => {
				    console.log('切换到tabBar页面成功');
				  },
				  fail: (err) => {
				    console.error('切换到tabBar页面失败:', err);
				  }
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {

		width: 100%;
		min-height: 100vh;
		/* 占满整个视口高度 */
		opacity: 1;
		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
		position: relative;
	 
		.content {
			width: 100%;
			position: absolute;
			margin-top: 200rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: rgba(255, 255, 255, 0.65);
			// padding-bottom: 60rpx;
			   padding-bottom: 200rpx;
			.content_wapper{
				margin-top:60rpx ;
				.notice-list {
					display: flex;
					flex-direction: column;
					gap: 20rpx;
				
					.notice_item {
						width: 90%;
						margin: 0 auto;
						display: flex;
						border-radius: 10rpx;
						overflow: hidden;
						background: rgba(255, 255, 255, 1);
						border: 1rpx solid rgba(59, 140, 255, 1);
						box-shadow: 2rpx 2rpx 4rpx rgba(59, 140, 255, 0.25);
				
				
				
						.notice-image {
							width: 180rpx;
							height: 178rpx;
							object-fit: cover;
						}
				
						.notice-content {
							flex: 1;
							padding: 20rpx;
							background-color: #fff;
				
							.notice-title {
								font-size: 30rpx;
								font-weight: bold;
								color: #4a90e2;
								margin-bottom: 10rpx;
							}
				
							.notice-description {
								font-size: 24rpx;
								color: #7D7D7D;
								margin-bottom: 10rpx;
								height: 80rpx;
								line-height: 40rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
							}
				
							.notice-date {
								font-size: 24rpx;
								color: #7D7D7D;
								text-align: right;
							}
						}
					}
				}
				
			}
			
			
		}

	}
</style>