diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 9cb8ef5..f9ab11b 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -34,7 +34,7 @@ if (totalPages <= 7) {
     {showPages.map(page =>
       typeof page == 'number' ? (
         <li class={page == currentPage ? 'active' : ''}>
-          <a href={getPageUrl(page)}>{page}</a>
+          <a title={`第${page}页`} href={getPageUrl(page)}>{page}</a>
         </li>
       ) : (
         <li class="ellipsis">{page}</li>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a08b695..c9319f4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,8 @@ import { getConfig } from "../../utils/config";
 import { newsIndex } from "../../utils/rpc";
 import { Image } from "astro:assets";
 const config = getConfig(Astro);
-const { code, data } = await newsIndex(config.id, 3, 1);
+const { code, data, guess } = await newsIndex(config.id, 20, 1);
+console.log(data)
 ---
 
 <Layout>
@@ -214,41 +215,89 @@ const { code, data } = await newsIndex(config.id, 3, 1);
 	</div>
 	<div class="news">
 		<div class="container">
-			<div class="section_title_wrapper mb-60 text-center">
-				<h2 class="section-title team_title_h3">最新资讯</h2>
+			<div class="team-head text-center">
+				<h3>最新资讯</h3>
+				<p style="width:unset;margin-bottom:1rem">
+					霍尔果斯飞驰广告有限公司专注于提供从基础到进阶的SEO优化策略、广告投放方案、内容运营实战技巧以及网站转化率提升解决方案。同时，我们也持续分享最新的科技动态、财经洞察、软件评测等多类型优质资讯，助力用户在数字时代高效获取价值信息。
+				</p>
 			</div>
 			<div class="row">
-				{
-					data.map((item) => {
-						return (
-							<div class="col-xl-4 col-lg-4 col-md-6">
-								<div class="blog">
-									<a title={item.title} href={`/news/${item.id}`}>
-										<div class="blog__image">
-											<Image
-												class="blog-image"
-												width={100}
-												height={100}
-												alt={item.title}
-												src={item.cover}
-											/>
+				<div class="xznews-container width-1200">
+					<div class="xznews-box">
+							<div class="xznews-box-f xznews-box-width news-box">
+								<div class="xznews-f-pitem">
+									{
+										data?.slice(0, 2).map((e, index) => (
+											<a title={e.title} class="pitem-item" target="_blank" href={`/news/${e.id}`}>
+												<div class="item-img-wrapper">
+													<Image src={e.cover} alt={e.title} class="item-img" height={100} width={100} />
+												</div>
+												<div class="item-title">{e.title}</div>
+											</a>
+										))
+									}
+								</div>
+								{
+									data?.slice(2, 3).map((e, index) => (
+										<div style="padding:.5rem">
+											<a title={e.title} class="xznews-f-fitem" target="_blank" href={`/news/${e.id}`}>
+											<Image src={e.cover} alt={e.title} class="f-item-img" height={100} width={100} />
+											<div class="fitem-tip">{e.title}</div>
+										</a>
 										</div>
-										<div class="blog__meta">
-											<span>{item.created_at}</span>
-											<div>
-												<h2 class="title">
-													{item.title}
-												</h2>
+									))
+								}
+							</div>
+							<div class="xznews-box-s xznews-box-width2 news-box">
+								<div class="xznews-s-list spc-list">
+									{
+										data?.slice(3, 10).map((e, index) => (
+											<div class="es">
+												<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>
-										<a title={`${item.column_tag}`} href={item.column_tag_url}><span class="label label-success">{item.column_tag}</span></a>
-										<a title={`${item.second_column_tag}`} href={item.second_column_tag_url}><span class="label label-info">{item.second_column_tag}</span></a>
-									</a>
+										))
+									}
+								</div>
+								<div class="xznews-s-list">
+									{
+										data?.slice(10, 17).map((e, index) => (
+											<div class="es">
+												<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>
-						);
-					})
-				}
+							<div class="xznews-box-t xznews-box-width3 news-box">
+								<div class="t-list">
+										{
+											data?.slice(18, 20).map((e, index) => (
+												<div>
+													<a class="t-item-spc" target="_blank" title={e.title} href={`/news/${e.id}`}>
+														<div class="item-img-wrapper">
+															<Image src={e.cover} alt={e.title} class="item-img" height={100} width={100} />
+														</div>
+														<div class="t-item-box">
+															<div class="t-item-title">{e.title}</div>
+														</div>
+													</a>
+												</div>
+											))
+										}
+										{
+											guess?.slice(0, 9).map((e, index) => (
+												<div>
+													<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 es">{e.title}</div>
+													</a>
+												</div>
+											))
+										}
+								</div>
+							</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -277,10 +326,127 @@ const { code, data } = await newsIndex(config.id, 3, 1);
 			margin-top: .5rem;
 		}
 	}
+	.news-box {
+		overflow: hidden;
+	}
+
+	.xznews-box {
+		a {
+			color: #333333;
+		}
+		.t-list {
+			line-height: 30px;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+
+		.spc-item {
+			font-weight: bold;
+		}
+		.xznews-f-pitem {
+			display: grid;
+			flex-direction: row;
+			grid-template-columns: 1fr 1fr;
+		}
+
+		.pitem-item {
+			padding: .5rem;
+		}
+
+		.item-img-wrapper {
+			aspect-ratio: 16 / 9;
+			width: 100%;
+			overflow: hidden;
+		}
+
+		.item-img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.t-item-spc {
+			display: grid;
+    		grid-template-columns: 1fr 1fr;
+			gap: .5rem;
+		}
+
+		.t-item-box {
+			display: flex;
+    		align-items: center;
+		}
+
+		.t-item {
+			display: flex;
+		}
+
+		.es {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+		display: grid;
+		gap:1rem;
+		flex-direction: row;
+		grid-template-columns: 1.3fr 1fr 1fr;
+	}
+
+	.xznews-box .xznews-box-f .xznews-f-pitem .pitem-item .item-title,.fitem-tip {
+		margin-top:.3rem;
+		font-size: 16px;
+		color: #1A1A1A;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		text-align: center;
+	}
+	.xznews-box .xznews-box-s .xznews-s-list .s-list-item {
+		position: relative;
+		/* padding-left: 20px; */
+		font-size: 16px;
+		color: #333333;
+		line-height: 32px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		/* line-height: 34px; */
+		cursor: pointer;
+	}
+	.xznews-container .xznews-box .xznews-box-s .spc-list {
+		border-bottom: 1px dashed #E5E5E5;
+		padding-bottom: 10px;
+		margin-bottom: 10px;
+	}
+
+	.xznews-box .xznews-box-t .t-list .t-item-spc .t-item-box .t-item-title {
+                font-size: 14px;
+                color: #333333;
+                line-height: 21px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                margin-bottom: 5px;
+                cursor: pointer;
+	}
 
 	@media screen and (max-width: 768px) {
 		.blog {
 			padding: 1rem;
-		}	
+		}
+
+		.xznews-box {
+			padding:1rem;
+			display: flex;
+			flex-direction: column;
+		}
 	}
+	
 </style>
\ No newline at end of file