<template>
	<view class="container">
	   <Header :title="'邻里互助列表'"></Header>
		<!-- 蓝色背景 -->
		<view class="neighbor_head">
		</view>
	
	
		<!-- 白色底部区域 -->
		<view class="neighbor_body">
			<!-- 正式页面内容，但是需要留到90%的页面内容和旁边的间隙 -->
			<view class="body">
				<view class="text-with-block">
					<view class="left">
						<text class="text">邻里互助</text>
						<view class="slanted-block"></view>
					</view>
	
					<view class="right" @click="goPage('helpInfo')">
						<view>+</view>
	
						<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
					</view>
				</view>
	
				<view class="interact_body">
					<view class="body_item" @click="goPage('neighborDetail')">
						<view class="item_left">
							<view class="left_title">
								志愿服务
							</view>
							<view class="left_font">
								动员志愿者参与社区服务项目，如为老年人或行动不便的人士提供购物协助，或为社区公共空间进行美化工作。
							</view>
							<view class="left_botton">
								未解决
							</view>
	
						</view>
						<view class="item_right">
							<view class="right_nav">
								<image src="/static/imgs/index/nav.png" class="nav"></image>
								<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
							</view>
							<view class="right_name">
								樱桃小丸子
							</view>
							<view class="right_date">
								2025年3月24日
							</view>
	
						</view>
					</view>
					<view class="body_item">
						<view class="item_left">
							<view class="left_title">
								技能分享
							</view>
							<view class="left_font">
								组织技能交换活动，让有特定技能（如修理电器、烹饪、手工艺等）的邻居能够教其他人。这不仅能增进邻里关系，还能让大家学到新技能。
							</view>
							<view class="left_botton">
								未解决
							</view>
	
						</view>
						<view class="item_right">
							<view class="right_nav">
								<image src="/static/imgs/index/nav.png" class="nav"></image>
								<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
							</view>
							<view class="right_name">
								樱桃小丸子
							</view>
							<view class="right_date">
								2025年3月24日
							</view>
	
						</view>
	
					</view>
					
					<view class="body_item">
						<view class="item_left">
							<view class="left_title">
								日常帮助
							</view>
							<view class="left_font">
							鼓励邻居之间提供日常的帮助，比如帮忙照顾宠物、植物，或者在邻居外出时留意家里的安全
							</view>
							<view class="left_botton">
								未解决
							</view>
						
						</view>
						<view class="item_right">
							<view class="right_nav">
								<image src="/static/imgs/index/nav.png" class="nav"></image>
								<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
							</view>
							<view class="right_name">
								樱桃小丸子
							</view>
							<view class="right_date">
								2025年3月24日
							</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
		},
		methods: {
			// 跳转详情页面
			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 {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// background: #f8faff;
		background: #f8faff;
		// height: 100vh;
		// padding: 70rpx 0;
		// margin-top: 90rpx;
		padding-bottom: 400rpx;

		.neighbor_head {
			width: 100%;
			height: 360rpx;
			opacity: 1;
			background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
			position: relative;
		}


		.neighbor_body {
			width: 100%;
			// height: 300rpx;
			background: #fff;
			height: 650rpx;
			position: absolute;
			top: 340rpx;
			z-index: 9;

			.body {
				width: 90%;
				margin: 0 5%;
				position: absolute;
				top: -150rpx;
				z-index: 99;

				.text-with-block {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					height: 50rpx;

					.left {
						.text {
							font-size: 34rpx;
							font-weight: bold;
							color: #333;
							position: relative;
							z-index: 2;
							padding-left: 50rpx;
						}

						.slanted-block {
							position: absolute;
							left: 120rpx;
							top: 46rpx;
							transform: translateX(-50%) skewX(-40deg);
							width: 166rpx;
							height: 24rpx;
							background-color: #80B3FF;
							z-index: 1;
						}
					}

					.right {
						font-size: 26rpx;
						color: #3B8CFF;
						text-decoration: none;
						cursor: pointer;
						// margin-top: 20rpx;
						margin-right: 20rpx;

						view {
							color: #fff;
							width: 32rpx;
							height: 32rpx;
							line-height: 28rpx;
							border: 4rpx solid #fff;
							border-radius: 50%;
							text-align: center;
							font-weight: 500;
							font-size: 34rpx;
						}
					}
				}

				.interact_body {
					// display:list-item;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 26rpx;
					width: 100%;
					margin-top: -20rpx;

					.body_item {
						// width: 80%;
						margin: 40rpx auto;
						// height: 400rpx;
						background: #E8F3FF;
						border-radius: 20rpx;
						display: flex;
						align-items: flex-start;
						// gap: 20rpx;
						padding: 20rpx 30rpx;

						.item_left {
							// flex: 1;
							// display: flex;
							// flex-direction: column;
							// justify-content: space-between;
							// gap: 10rpx;
							width: 70%;
							margin-right: 10%;

							.left_title {
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								line-height: 80rpx;
							}

							.left_font {
								font-size: 22rpx;
								color: #3D3D3D;
								line-height: 1.5;
							}

							.left_botton {

								width: 134rpx;
								height: 30rpx;
								opacity: 1;
								line-height: 30rpx;
								padding: 10rpx 20rpx;
								background-color: #3881FF;
								color: #fff;
								font-size: 24rpx;
								text-align: center;
								border-radius: 10rpx;
								// width: fit-content;
								cursor: pointer;
								margin: 20rpx 0;
							}

							.end {
								background: #9FA3AB;
							}
						}

						.item_right {
							width: 100rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							gap: 10rpx;
							margin-top: 14rpx;

							.right_nav {
								width: 100rpx;
								height: 100rpx;
								background-color: #ccc;
								border-radius: 50%;
								/* 圆形头像 */
								text-align: center;
								line-height: 100rpx;
								font-size: 24rpx;
								color: #fff;
								position: relative;

								.nav {
									position: absolute;
									top: 0;
									left: 0;
									width: 100rpx;
									height: 100rpx;
									z-index: 2
								}

								.bg {
									position: absolute;
									z-index: 1;
									top: 20rpx;
									left: -118rpx;
									width: 260rpx;
									height: 260rpx;
								}
							}

							.right_name {
								width: 200rpx;
								font-size: 24rpx;
								font-weight: 900;
								color: #333;
								text-align: center;
								// padding-left: 62rpx;
							}

							.right_date {
								font-size: 24rpx;
								color: #999;
								width: 270rpx;
								text-align: left;
								padding-left: 62rpx;
								margin-top: 12rpx;
							}
						}
					}

					.interact_more {
						text-align: right;
						color: #3B8CFF;
						font-size: 24rpx;
					}
				}
			}
		}

		

		


	}
</style>