<template>
	<view class="container">
		<!-- 蓝色背景 -->
		<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">
						<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_left">
							<view class="left_title">
								寻找拼车伙伴
							</view>
							<view class="left_font">
								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费
							</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">
								每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费
							</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="interact_more">
						查看更多
					</view>

				</view>
			</view>
		</view>
		<view class="around_service">
			<view class="service_body">
				<view class="text-with-block">
					<text class="text">周边服务</text>
					<view class="slanted-block"></view>
				</view>

				<view class="service_shop">
					<view class="shop-title-container">
						<view class="shop_title">附近美食</view>
						<view class="shop-more">更多 ></view>
					</view>

					<view class="nearby-food">
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>

						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>

						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>

						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
					</view>
					<view class="shop-title-container">
						<view class="shop_title">超市便利</view>
						<view class="shop-more">更多 ></view>
					</view>
					<view class="nearby-food">
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
					
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
					
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
					
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
					</view>
				
				   
				</view>

			</view>
		</view>
		
		<view class="around_service" style="margin-top: 30rpx!important;">
			<view class="service_body">
				<view class="text-with-block">
					<text class="text">社工导师</text>
					<view class="slanted-block"></view>
				</view>
		
				<view class="service_shop">
					<view class="nearby-food">
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
		
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
		
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
		
						<view class="food-item">
							<view class="food-image">
								<image src="/static/imgs/service/service_shop.png"></image>
							</view>
							<view class="food-info">
								<view class="food-title">胖哥俩蟹肉煲蟹肉煲蟹肉煲蟹肉煲</view>
								<view class="food-distance">距离：651米</view>
							</view>
						</view>
					</view>
					
				
				   
				</view>
		
			</view>
		</view>


		<!-- 引入底部 -->
		<Footer></Footer>
	</view>
</template>

<script>
	import Footer from '@/components/footer_common.vue';

	export default {
		components: {
			Footer
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</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;
					}
				}
			}
		}

		.around_service {
			width: 100%;
			margin-top: 680rpx;
			padding-bottom: 30px;
			background: #fff;

			.text-with-block {
				position: relative;
				// 1height: 260rpx;
				background-color: #fff;
				// margin-top: 36rpx;
				padding: 20rpx;

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

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

			.service_body {
				width: 90%;
				margin: 0 auto;

				.service_shop {
					.shop-title-container {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx;
						background-color: #fff;

						// border-bottom: 1rpx solid #eee;
						.shop_title {
							color: #2e2e2e;
							font-size: 22rpx;
							height: 60rpx;
							line-height: 60rpx;
							padding-left: 20rpx;
						}

						.shop-more {
							font-size: 22rpx; 
							color: #3B8CFF;
							display: flex;
							align-items: center; 

							&::after {
								content: '>';
								// margin-left: 10rpx; 
							}
						}

					}


					.nearby-food {
						display: flex;
						flex-wrap: wrap;
						gap: 20rpx;

						.food-item {
							width: calc(24% - 10rpx); // 适应4个并排，考虑间隙
							background-color: #fff;
							border-radius: 16rpx;
							overflow: hidden;
							// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
							transition: transform 0.3s;



							.food-image {
								width: 160rpx;
								height: 160rpx;
								border-top-left-radius: 16rpx;
								border-top-right-radius: 16rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.food-info {
								// padding: 10rpx 20rpx;
								text-align: center;

								.food-title {
									width: 160rpx;
									font-size: 22rpx;
									color: #2e2e2e;
									// margin-bottom: 10rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.food-distance {
									font-size: 18rpx;
									color: #999;
									text-align: right !important;
								}
							}
						}

					}

				}

			}
		}


	}
</style>