update
This commit is contained in:
toom1996
@ -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>
|
||||
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user