<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">
						<view class="item_header">
							<view class="left_section">
								<image class="avatar" src="/static/imgs/index/nav.png"></image>
								<view class="info">
									<text class="name">樱桃小丸子</text>
									<text class="date">03-24</text>
								</view>
							</view>
							<button class="help_button">求助</button>
						</view>
						
						<view class="body_content">
							<h3>寻找拼车伙伴</h3>
							<view class="content_font">
								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费。
							</view>
							<view class="content_img">
								<image src="/static/imgs/index/swiper.png"></image>
							</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_header{
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx;
							width: 100%;
							.left_section {
							  display: flex;
							  align-items: center;
							  width: 75%;
							  .avatar {
							    width: 80rpx;
							    height: 80rpx;
							    border-radius: 50%;
							    margin-right: 20rpx;
							  }
							  
							  .info {
							    display: flex;
							    flex-direction: column;
								.name {
								  font-size: 28rpx;
								  color: #2e2e2e;
								}
								.date {
								  font-size: 24rpx;
								  color: #2e2e2e;
								  margin-top: 10rpx;
								}
							  }
							}
							.help_button {
							  width: 120rpx;
							  height: 50rpx;
							  line-height: 50rpx;
							  text-align: center;
							  background-color: #1890ff;
							  color: #fff;
							  border-radius: 10rpx;
							  font-size: 24rpx;
							}
						}
						
						.body_content{
							h3{
								font-weight: 500;
								height: 80rpx;
								line-height: 80rpx;
								color:#000;
								font-size:32rpx ;
							}
							
							.content_font{
								font-weight: normal;
								color: #3d3d3d;
								font-size: 26rpx;
								line-height: 48rpx;
								margin-top: 20rpx;
							}
							
							.content_img{
								width: 100%;
								height: 315rpx ;
								margin: 40rpx 0;
									
								image{
									width: 100%;
									height: 100%;
								}
							}
							
						}

						
						
							
					}

					
				}
			}
		}






	}
</style>