---
import Layout from '../layouts/Layout.astro';
import { getConfig } from "../../utils/config";
import { newsIndex } from "../../utils/rpc";

const config = getConfig(Astro);
const { code, data } = await newsIndex({
	websiteId: config.id
});
console.log(data)
---

<Layout>
	<!-- 顶部功能栏 -->
	<div id="VoBaoHead"></div>   
	<!-- 公用头部 -->
	<!-- banner -->
	<div class="head-banner min-width">
		<div class="swiper-container swiper-container-horizontal" id="swiper1">
			<div class="swiper-wrapper">
			</div>
		<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
	</div>
	<!-- 看攻略 -->
	<div class="news-container width-1200">
		<div class="news-head">
			<div class="news-head-title">看攻略</div>
			<div class="news-head-tip">精心准备的保险知识，让你投保不再盲目</div>
		</div>
	</div>
	<!-- 寿险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['11']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['11']?.desc}</div>
			</div>
			<a class="xznews-tip" href={data?.articles?.['11']?.url} target="_blank">+更多</a>
		</div>
		<div class="xznews-box">
				<div class="xznews-box-f xznews-box-width">
					<div class="xznews-f-pitem">
						{
							data?.articles?.['11']?.item?.slice(0, 2).map((e, index) => (
								<a class="pitem-item" target="_blank" href={`/news/${e.id}`}>
									<img src={e.cover} alt="" class="item-img" />
									<div class="item-title">{e.title}</div>
								</a>
							))
						}
					</div>
					{
						data?.articles?.['11']?.item?.slice(2, 3).map((e, index) => (
							<a class="xznews-f-fitem" target="_blank" href={`/news/${e.id}`}>
								<img src={e.cover} alt="" class="fitem-img" />
								<div class="fitem-tip">{e.title}</div>
							</a>
						))
					}
					{/* <a class="xznews-f-fitem" target="_blank" href="//news.vobao.com/article/1145627262119423674.shtml">
						<img src="https://res.vobao.com/res1/news/202507221349376851145627377685976963.jpg" alt="" class="fitem-img">
						<div class="fitem-tip">2025终身寿险排行榜前十名有哪些，2025终身寿险哪家保险公司好</div>
					</a> */}
				</div>
				<div class="xznews-box-s xznews-box-width2">
					<div class="xznews-s-list spc-list">
						{
							data?.articles?.['11']?.item?.slice(3, 10).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
					<div class="xznews-s-list">
						{
							data?.articles?.['11']?.item?.slice(10, 17).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
				</div>
				<div class="xznews-box-t xznews-box-width3">
					<div class="t-list">
							{
								data?.articles?.['11']?.item?.slice(18, 20).map((e, index) => (
									<a class="t-item-spc" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<img src={e.cover} alt="" class="t-item-img" />
										<div class="t-item-box">
											<div class="t-item-title">{e.title}</div>
											<div class="t-item-tip">{e.created_at}</div>
										</div>
									</a>
								))
							}
							{
								data?.articles?.['11']?.item?.slice(20, 30).map((e, index) => (
									<a class="t-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<div class="t-item-tip">{index + 1}</div>
										<div class="t-item-title">{e.title}</div>
									</a>
								))
							}
					</div>
				</div>
		</div>
	</div>
	<!-- 意外险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['12']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['12']?.desc}</div>
			</div>
			<a class="xznews-tip" target="_blank" href="//news.vobao.com/ceping/1/">+更多</a>
		</div>
		<div class="xznews-box">
				<div class="xznews-box-f xznews-box-width2">
					<div class="xznews-f-list">
						{
							data?.articles?.['12']?.item?.slice(0, 2).map((e, index) => (
								<a title={e.title} class="f-item-spc" target="_blank" href={`/news/${e.id}`}>
									<div class="item-spc-title">{e.title}</div>
									<div class="item-spc-cont">{e.description}</div>
								</a>
							))
						}
						{
							data?.articles?.['12']?.item?.slice(2, 5).map((e, index) => (
								<a title={e.title} class="f-item" target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
				</div>
				<div class="xznews-box-s xznews-box-width">
					{
						data?.articles?.['12']?.item?.slice(5, 6).map((e, index) => (
							<a class="s-img-item" target="_blank" href={`/news/${e.id}`}>
								<img src={e.cover} alt="" class="s-img" />
								<div class="s-img-tip">{e.title}</div>
							</a>
						))
					}
				</div>
				<div class="xznews-box-t xznews-box-width3">
					<div class="t-list t-list2">
						{
							data?.articles?.['12']?.item?.slice(6, 9).map((e, index) => (
								<a class="t-item-spc" title={e.title} target="_blank" href={`/news/${e.id}`}>
									<img src={e.cover} alt="" class="t-item-img" />
									<div class="t-item-box">
										<div class="t-item-title">{e.title}</div>
										<div class="t-item-tip">{e.created_at}</div>
									</div>
								</a>
							))
						}
					</div>
				</div>
		</div>
	</div>
	<!-- 医疗险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['13']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['13']?.desc}</div>
			</div>
			<a class="xznews-tip" target="_blank" href="//news.vobao.com/ceping/3/">+更多</a>
		</div>
		<div class="xznews-box">
			<div class="box-swiper">
				<div class="swiper-container swiper-container-horizontal" id="swiper2">
					<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
						{
							data?.articles?.['13']?.item?.slice(0, 3).map((e, index) => (
								<div class="swiper-slide swiper-slide-active" >
									<a class="box-swiper-item" title={e.title} target="_blank" href={`/news/${e.id}`}>
										<img src={e.cover} alt="" class="item-img" />
										<div class="item-title">{e.title}</div>
										<div class="item-cont">{e.description}</div>
									</a>
								</div>
							))
						}
					</div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
				<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" id="swiper-p2"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
			</div>
			<div class="box-swiper">
				<div class="swiper-container swiper-container-horizontal" id="swiper3">
					<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
						{
							data?.articles?.['13']?.item?.slice(3, 6).map((e, index) => (
								<div class="swiper-slide swiper-slide-active" >
										<a class="box-swiper-item" title={e.title} target="_blank" href={`/news/${e.id}`}>
											<img src={e.cover} alt="" class="item-img" />
											<div class="item-title">{e.title}</div>
											<div class="item-cont">{e.description}</div>
										</a>
								</div>
							))
						}
					</div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
				<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" id="swiper-p3"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
			</div>
			<div class="box-swiper">
				<div class="swiper-container swiper-container-horizontal" id="swiper4">
					<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
						{
							data?.articles?.['13']?.item?.slice(6, 9).map((e, index) => (
								<div class="swiper-slide swiper-slide-active" >
										<a class="box-swiper-item" title={e.title} target="_blank" href={`/news/${e.id}`}>
											<img src={e.cover} alt="" class="item-img" />
											<div class="item-title">{e.title}</div>
											<div class="item-cont">{e.description}</div>
										</a>
								</div>
							))
						}
					</div>
				<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
				<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" id="swiper-p4"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
			</div>
		</div>
	</div>
	<!-- 重疾险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['14']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['14']?.desc}</div>
			</div>
			<a class="xznews-tip" href="//news.vobao.com/ceping/2/" target="_blank">+更多</a>
		</div>
		<div class="xznews-box">
				<div class="xznews-box-f xznews-box-width">
					<div class="xznews-f-pitem">
						{
							data?.articles?.['14']?.item?.slice(0, 2).map((e, index) => (
								<a class="pitem-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
									<img src={e.cover} alt="" class="item-img" />
									<div class="item-title">{e.title}</div>
								</a>
							))
						}
					</div>
					{
						data?.articles?.['14']?.item?.slice(2, 3).map((e, index) => (
							<a class="xznews-f-fitem" target="_blank" title={e.title} href={`/news/${e.id}`}>
								<img src={e.cover} alt="" class="fitem-img" />
								<div class="fitem-tip">{e.title}</div>
							</a>
						))
					}
				</div>
				<div class="xznews-box-s xznews-box-width2">
					<div class="xznews-s-list spc-list">
						{
							data?.articles?.['14']?.item?.slice(3, 10).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
					<div class="xznews-s-list">
						{
							data?.articles?.['14']?.item?.slice(10, 17).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
				</div>
				<div class="xznews-box-t xznews-box-width3">
					<div class="t-list">
							{
								data?.articles?.['11']?.item?.slice(18, 20).map((e, index) => (
									<a class="t-item-spc" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<img src={e.cover} alt="" class="t-item-img" />
										<div class="t-item-box">
											<div class="t-item-title">{e.title}</div>
											<div class="t-item-tip">{e.created_at}</div>
										</div>
									</a>
								))
							}
							{
								data?.articles?.['11']?.item?.slice(20, 30).map((e, index) => (
									<a class="t-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<div class="t-item-tip">{index + 1}</div>
										<div class="t-item-title">{e.title}</div>
									</a>
								))
							}
					</div>
				</div>
		</div>
	</div>
	<!-- 少儿险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['15']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['15']?.desc}</div>
			</div>
			<a class="xznews-tip" href="//news.vobao.com/ceping/2/" target="_blank">+更多</a>
		</div>
		<div class="xznews-box">
				<div class="xznews-box-f xznews-box-width">
					<div class="xznews-f-pitem">
						{
							data?.articles?.['15']?.item?.slice(0, 2).map((e, index) => (
								<a class="pitem-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
									<img src={e.cover} alt="" class="item-img" />
									<div class="item-title">{e.title}</div>
								</a>
							))
						}
					</div>
					{
						data?.articles?.['15']?.item?.slice(2, 3).map((e, index) => (
							<a class="xznews-f-fitem" target="_blank" title={e.title} href={`/news/${e.id}`}>
								<img src={e.cover} alt="" class="fitem-img" />
								<div class="fitem-tip">{e.title}</div>
							</a>
						))
					}
				</div>
				<div class="xznews-box-s xznews-box-width2">
					<div class="xznews-s-list spc-list">
						{
							data?.articles?.['15']?.item?.slice(3, 10).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
					<div class="xznews-s-list">
						{
							data?.articles?.['15']?.item?.slice(10, 17).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
				</div>
				<div class="xznews-box-t xznews-box-width3">
					<div class="t-list">
							{
								data?.articles?.['15']?.item?.slice(18, 20).map((e, index) => (
									<a class="t-item-spc" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<img src={e.cover} alt="" class="t-item-img" />
										<div class="t-item-box">
											<div class="t-item-title">{e.title}</div>
											<div class="t-item-tip">{e.created_at}</div>
										</div>
									</a>
								))
							}
							{
								data?.articles?.['15']?.item?.slice(20, 30).map((e, index) => (
									<a class="t-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<div class="t-item-tip">{index + 1}</div>
										<div class="t-item-title">{e.title}</div>
									</a>
								))
							}
					</div>
				</div>
		</div>
	</div>
	<!-- 理财险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['16']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['16']?.desc}</div>
			</div>
			<a class="xznews-tip" target="_blank" href="//news.vobao.com/ceping/1/">+更多</a>
		</div>
		<div class="xznews-box">
				<div class="xznews-box-f xznews-box-width2">
					<div class="xznews-f-list">
						{
							data?.articles?.['16']?.item?.slice(0, 2).map((e, index) => (
								<a title={e.title} class="f-item-spc" target="_blank" href={`/news/${e.id}`}>
									<div class="item-spc-title">{e.title}</div>
									<div class="item-spc-cont">{e.description}</div>
								</a>
							))
						}
						{
							data?.articles?.['16']?.item?.slice(2, 5).map((e, index) => (
								<a title={e.title} class="f-item" target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
				</div>
				<div class="xznews-box-s xznews-box-width">
					{
						data?.articles?.['16']?.item?.slice(5, 6).map((e, index) => (
							<a class="s-img-item" target="_blank" href={`/news/${e.id}`}>
								<img src={e.cover} alt="" class="s-img" />
								<div class="s-img-tip">{e.title}</div>
							</a>
						))
					}
				</div>
				<div class="xznews-box-t xznews-box-width3">
					<div class="t-list t-list2">
						{
							data?.articles?.['16']?.item?.slice(6, 9).map((e, index) => (
								<a class="t-item-spc" title={e.title} target="_blank" href={`/news/${e.id}`}>
									<img src={e.cover} alt="" class="t-item-img" />
									<div class="t-item-box">
										<div class="t-item-title">{e.title}</div>
										<div class="t-item-tip">{e.created_at}</div>
									</div>
								</a>
							))
						}
					</div>
				</div>
		</div>
	</div>
	<!-- 养老险 -->
	<div class="xznews-container width-1200">
		<div class="xznews-head">
			<div class="xznews-title">
				<div class="xznews-bdtitle">{data?.articles?.['17']?.title}</div>
				<div class="xznews-tiptitle">{data?.articles?.['17']?.desc}</div>
			</div>
			<a class="xznews-tip" href="//news.vobao.com/ceping/2/" target="_blank">+更多</a>
		</div>
		<div class="xznews-box">
				<div class="xznews-box-f xznews-box-width">
					<div class="xznews-f-pitem">
						{
							data?.articles?.['17']?.item?.slice(0, 2).map((e, index) => (
								<a class="pitem-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
									<img src={e.cover} alt="" class="item-img" />
									<div class="item-title">{e.title}</div>
								</a>
							))
						}
					</div>
					{
						data?.articles?.['17']?.item?.slice(2, 3).map((e, index) => (
							<a class="xznews-f-fitem" target="_blank" title={e.title} href={`/news/${e.id}`}>
								<img src={e.cover} alt="" class="fitem-img" />
								<div class="fitem-tip">{e.title}</div>
							</a>
						))
					}
				</div>
				<div class="xznews-box-s xznews-box-width2">
					<div class="xznews-s-list spc-list">
						{
							data?.articles?.['15']?.item?.slice(3, 10).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
					<div class="xznews-s-list">
						{
							data?.articles?.['15']?.item?.slice(10, 17).map((e, index) => (
								<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
							))
						}
					</div>
				</div>
				<div class="xznews-box-t xznews-box-width3">
					<div class="t-list">
							{
								data?.articles?.['17']?.item?.slice(18, 20).map((e, index) => (
									<a class="t-item-spc" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<img src={e.cover} alt="" class="t-item-img" />
										<div class="t-item-box">
											<div class="t-item-title">{e.title}</div>
											<div class="t-item-tip">{e.created_at}</div>
										</div>
									</a>
								))
							}
							{
								data?.articles?.['17']?.item?.slice(20, 30).map((e, index) => (
									<a class="t-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
										<div class="t-item-tip">{index + 1}</div>
										<div class="t-item-title">{e.title}</div>
									</a>
								))
							}
					</div>
				</div>
		</div>
	</div>
</Layout>