<template>
	<view class="container">
		<view class="contnet">
			<!-- 轮播图部分 -->
			<view class="content_swiper">
				<u-swiper :list="list1" height="340" indicator indicatorMode="line"></u-swiper>
				    <!-- <u-button type="primary">按钮</u-button> -->
					<!-- <image src="/static/imgs/index/swiper.png"></image> -->
			</view>

			<!-- 天气和穿搭贴士 -->
			<view class="content_news">
				<view class="weather">
					<view class="weather_date">
						星期一 4月7日<br />
						2025
					</view>
					<view class="weather_info">
						<view class="weather_number">
							19ºC
						</view>
						<view class="weather_font">
							多云
						</view>
					</view>
					<view>
						<image src="/static/imgs/index/color.png" class="img_color"></image>
					</view>

				</view>
				<!-- <view class="news">
					<image src="/static/imgs/index/news.png"></image>
				</view> -->
				<!-- 穿搭贴士 -->
				<view class="content_tips">
					<view class="tips_title">
						<view class="tips_item">
							<view class="title_img_h">
								<image src="/static/imgs/index/tips_title.png"></image>
							</view>
							<view class="title_font_h">穿搭贴士</view>
						</view>
					</view>

					<view class="tips_title">
						<view class="title_font_b">开衫</view>
						<view class="title_img">
							<image src="/static/imgs/index/jacket.png"></image>
						</view>

					</view>
					<view class="tips_title">
						<view class="title_font_b">西装裤</view>
						<view class="title_img">
							<image src="/static/imgs/index/pants.png"></image>
						</view>
					</view>
					<view class="tips_title">
						<view class="title_font_b">乐福鞋</view>
						<view class="title_img">
							<image src="/static/imgs/index/shoe.png"></image>
						</view>
					</view>

				</view>


				<!-- <image src="/static/imgs/index/swiper.png"></image> -->
			</view>

			<!-- 新闻 -->
			<view class="news_content">
				<view class="news_img">
					<image src="/static/imgs/index/news.png"></image>
				</view>
				<view class="news_font">
					<h1 class="logo">NEWS</h1>
					<h3 class="title">2025年清明节假期国内出游1.26亿人次</h3>
					<view class="content">
						文化和旅游部4月7日公布2025年清明节假期女化和旅游市场情况。经文化假期3天，全国国内出游1.26亿人次，同比增长…
					</view>
				</view>

			</view>


			<!-- ai速递 -->
			<view class="content_ai">
				<view class="ai_title">
					<view class="ai">
						<image src="/static/imgs/index/ai_titile.png"></image>
					</view>
					<view class="more">
						<image src="/static/imgs/index/more.png"></image>
					</view>
				</view>
				<view class="ai_body">
					<view class="body_item">
						<image src="/static/imgs/ai/zhengceijiedu.png"></image>
						<view>政策解读</view>
					</view>
					<view class="body_item">
						<image src="/static/imgs/ai/shanshiguanjia.png"></image>
						<view>膳食管家</view>
					</view>
					<view class="body_item">
						<image src="/static/imgs/ai/shenghuozixun.png"></image>
						<view>生活咨询</view>
					</view>
					<view class="body_item">
						<image src="/static/imgs/ai/more.png"></image>
						<view class="more_font">敬情期待</view>
					</view>
				</view>
			</view>

			<!-- 邻里互动 -->
			<view class="content_ai">
				<view class="ai_title">
					<view class="ai interact">
						<image src="/static/imgs/index/interact_title.png"></image>
					</view>
					<view class="more">
						<image src="/static/imgs/index/more.png"></image>
					</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="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 end">
								已解决
							</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 Footer from '@/components/footer_common.vue';

	export default {
		components: {
			Footer
		},
		data() {
			return {
				list1: [
					"/static/imgs/index/swiper.png",
					"/static/imgs/index/swiper.png",
					"/static/imgs/index/swiper.png",
				],

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		background: #f8faff;
		height: 100%;
		padding: 70rpx 0;
		margin-top: 90rpx;


		.contnet {
			width: 90%;
			margin: 0 auto;
			border-radius: 20rpx;


			.content_swiper {
				width: 100%;
				height: 360rpx;

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

			.content_news {
				display: flex;
				align-items: center;
				gap: 20rpx;
				width: 100%;
				margin: 50rpx 0;

				.weather {
					flex: 1;
					text-align: center;
					// padding: 20rpx;
					border-radius: 10rpx;
					color: #fff;
					font-size: 28rpx;
					height: 240rpx;

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

				}


				.weather {
					width: 60%;
					padding: 0 30rpx;
					height: 180rpx;
					position: relative;
					margin-bottom: -30rpx;
					background: rgba(141, 186, 252, 0.55);
					box-shadow: 2rpx 2rpx 15rpx rgba(0, 0, 0, 0.25);

					// background: linear-gradient(208.92deg, rgba(209, 227, 255, 1) 0%, rgba(128, 179, 255, 1) 100%);
					// box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 2px 4px rgba(0, 0, 0, 0.25), 4px 8px 35px rgba(128, 179, 255, 0.8);

					.img_weather {
						position: absolute;
						height: 200rpx;
						bottom: 10rpx;
						left: 0;
						right: 0;
					}

					.img_color {
						position: absolute;
						height: 200rpx;
						bottom: 10rpx;
						top: -56rpx;
						right: 0;
						z-index: 99;
						width: 120rpx;
						height: 120rpx;
					}

					.weather_date {
						padding-top: 10rpx;
						opacity: 1;
						font-size: 26rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 46rpx;
						color: rgba(255, 255, 255, 1);
						text-align: left;
						vertical-align: middle;

					}

					.weather_number {
						text-align: left;
						opacity: 1;
						font-size: 44rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 70rpx;
						color: #fff;
						opacity: 0.8;

					}

					.weather_info {
						display: flex;
						align-items: center;

						opacity: 1;
						font-size: 44rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 70rpx;
						color: #fff;
						opacity: 0.8;

						.weather_number {
							margin-right: 20rpx;
						}

						.weather_font {
							font-size: 32rpx;
							text-align: right;
							width: 56%;
						}
					}
				}

				.content_tips {
					width: 42%;
					// background-color: #fff;
					border-radius: 20rpx;
					opacity: 1;
					padding: 20rpx;
					position: relative;
					height: 176rpx;
					background: rgba(148, 196, 255, 0.29);
					box-shadow: 0px 0px 20rpx rgba(128, 179, 255, 0.33);

					.tips_title {
						display: flex;
						align-items: center;

						.tips_item {
							position: absolute;
							top: -34rpx;
							right: 20rpx;
							display: flex;
							align-items: center;

							.title_img_h {
								margin-right: 10rpx;
								// margin-top: 10rpx;

								image {
									margin-top: 10rpx;
									width: 38rpx;
									height: 38rpx;
								}
							}

							.title_font_h {
								font-size: 34rpx;
								color: #333;
								font-weight: bold;
							}


						}

						.title_font_b {
							width: 65%;
							font-size: 28rpx;
							color: #333;
							margin-top: 6rpx;
							// height: 36rpx;
							height: 46rpx;
							line-height: 46rpx;
							// font-weight: bold; 
							text-align: left;
							padding-left: 16rpx;
						}

						.title_img {
							// margin-top: 6rpx;
							image {
							    margin-top: 2rpx;
								width: 44rpx;
								height: 44rpx;
								
							}
						}

					}
				}

			}


			.news_content {
				margin: 50rpx 0;
				width: 100%;
				position: relative;

				.news_img {
					height: 220rpx;
					background-color: #744037;
					border-radius: 20rpx;
					position: relative;

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

					}

					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(255, 255, 255, 0.15);
						pointer-events: none;
					}
				}

				.news_font {
					position: absolute;
					z-index: 99;
					top: 0;
					left: 0;
					color: #fff;
					padding: 20rpx;

					.logo {
						font-weight: 900;
						font-size: 34rpx;
					}

					.title {
						margin-top: 12rpx;
						font-size: 30rpx;
					}

					.content {
						font-size: 22rpx;
						margin-top: 16rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						line-height: 1.5;
						max-height: calc(1.5em * 2);
					}
				}

			}

			.content_ai {
				width: 100%;
				padding: 20rpx;
				margin: 50rpx 0;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;


				.ai_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;


					.ai {
						width: 110rpx;
						height: 40rpx;

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

					.interact {
						width: 140rpx;
					}

					.more {
						width: 28rpx;
						height: 28rpx;

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

				.ai_body {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 26rpx;
					width: 100%;
					margin-top: 36rpx;

					.body_item {
						width: 100%;
						height: 450rpx;
						// background-color: #f0f0f0;
						border-radius: 26rpx;
						opacity: 1;
						box-shadow: 8rpx 8rpx 8rpx rgba(0, 0, 0, 0.25);
						position: relative;

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

						view {
							width: 70%;
							position: absolute;
							bottom: 40rpx;
							left: 46%;
							transform: translateX(-50%);
							z-index: 99;
							color: #fff;
							font-size: 32rpx;
							font-weight: bold;
							text-align: left;
							// background-color: rgba(0, 0, 0, 0.5);
							padding: 10rpx 20rpx;
							border-radius: 10rpx;
						}

						.more_font {
							position: absolute;
							top: 64%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 99;
							color: #2E2E2E;
							font-size: 36rpx;
							font-weight: bold;
							text-align: center;
							padding: 10rpx 20rpx;
							border-radius: 10rpx;

						}
					}
				}

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

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

			}
		}
	}
</style>