update
This commit is contained in:
toom1996
@ -5,60 +5,165 @@ import '../assets/css1/style.css'
|
||||
import '../assets/css1/style5.css'
|
||||
import { newsIndex } from "../../utils/rpc";
|
||||
import { Image } from "astro:assets";
|
||||
import PaginationComponent from '../components/Pagination.astro'
|
||||
import BreadComponent from '../components/Breadcrumb.astro'
|
||||
const config = getConfig(Astro)
|
||||
|
||||
const {code, data} = await newsIndex(config.id);
|
||||
// 每页显示多少条
|
||||
const limit = 12
|
||||
|
||||
// 页码
|
||||
const { page = 1} = Astro.props;
|
||||
const {code, data, total = 0, about} = await newsIndex(config.id, limit, page);
|
||||
console.log(about)
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
---
|
||||
<Layout>
|
||||
<div class="site-content">
|
||||
<!-- Page-Header Section STARTS Here -->
|
||||
<div class="page-header text-center">
|
||||
<div class="container">
|
||||
<h1 class="page-title">新闻中心</h1>
|
||||
<ul id="breadcrumbs" class="breadcrumbs">
|
||||
<li>
|
||||
<a href='/' class='crumb'>首页</a> > <a href='/news' class='crumb'>新闻中心</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page-Header Section End Here -->
|
||||
<main class="site-content">
|
||||
|
||||
<!-- Blog Grid Section Start Here -->
|
||||
<section class="blog-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="blog-page">
|
||||
<div class="news-list-container">
|
||||
<div class="archive-head" style="grid-column: 1 / 3;grid-row: 1 / 2;">
|
||||
<BreadComponent data={[{title: '新闻中心', link: '/news'}]} />
|
||||
<div class="archive-description">
|
||||
<p>SEO教程，SEO入门课程，定期分析SEO技术，大量SEO实战案例，SEO学习课程，快速掌握SEO技术。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-list-row">
|
||||
{
|
||||
data?.map(e => {
|
||||
return <div class="col-lg-4 col-md-6">
|
||||
<div class="post-inner">
|
||||
<div class="entry-media">
|
||||
<a href={`/news/${e.id}`} title={`${e.title}`}>
|
||||
<Image loading="eager" style={`aspect-ratio: 4 / 3;object-fit: cover;`} src={e.cover} alt={e.title} width={100} height={100} />
|
||||
return <div class="">
|
||||
<div class="post-inner news-card">
|
||||
<div class="entry-media news-card-img">
|
||||
<a class="blog-image" href={`/news/${e.id}`} title={`${e.title}`}>
|
||||
<Image loading="lazy" style={`aspect-ratio: 4 / 3;object-fit: cover;`} src={e.cover} alt={e.title} width={100} height={100} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="inner-post">
|
||||
<div class="entry-header">
|
||||
<div class="entry-meta">
|
||||
<div class="inner-post news-card-body">
|
||||
<div class="entry-header news-card-header">
|
||||
<div class="entry-meta news-card-meta">
|
||||
<span class="posted-on">
|
||||
<span><time class="entry-date published">{e.created_at}</time></span>
|
||||
</span>
|
||||
</div>
|
||||
<a href={`/news/${e.id}`} title={`${e.title}`} class="entry-title">{e.title}</a>
|
||||
<h2><a href={`/news/${e.id}`} title={`${e.title}`} class="entry-title news-card-title">{e.title}</a></h2>
|
||||
</div>
|
||||
<p class="entry-summary">{e.description}</p>
|
||||
<p class="entry-summary news-card-summary">{e.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<PaginationComponent totalPages={total} currentPage={page} baseUrl={`/news/page/`} />
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog Grid Section End Here -->
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
<div class="slide-container">
|
||||
<div class="widget widget-tie divPrevious">
|
||||
<h3>最新文章</h3>
|
||||
<ul>
|
||||
{
|
||||
about?.map((item, index) => {
|
||||
return <li class={`previous-${index + 1}`}>
|
||||
<div class="previous-one-img">
|
||||
<a href={`news/${item.id}`} title={item.title}>
|
||||
<Image src={item.cover} alt={item.title} height={100} width={100}/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="previous-recent-title">
|
||||
<h4 class="title">
|
||||
<a href={`news/${item.id}`} title={item.title}>{item.title}</a>
|
||||
</h4>
|
||||
<span class="info">2025-02-27</span>
|
||||
</div>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.slide-container{
|
||||
padding:1rem;
|
||||
}
|
||||
.archive-head {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.widget {
|
||||
.title {
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
.news-list-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.news-card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
display: grid;
|
||||
flex-direction: row;
|
||||
grid-template-columns: 4fr 1.5fr;
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
flex: 0 0 260px;
|
||||
max-width: 260px;
|
||||
padding: 1rem;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.news-card-img {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.sidebar{float:left;margin-left:-360px;width:360px;position:relative}
|
||||
.widget{height:fit-content;background-color:#fff;border:1px solid #eee;overflow:hidden;padding:15px 20px 10px 20px;margin-bottom:20px}
|
||||
.widget-tie h3{padding-bottom:10px;margin-bottom:21px;border-bottom:1px solid #ebebeb;font-size:15px;position:relative}
|
||||
.widget-tie h3:after{content:"";width:70px;height:1px;background:#e94c3d;position:absolute;left:0;bottom:-1px}
|
||||
.widget ul{margin:0;list-style:none;padding:0;}
|
||||
.following{width:360px;}.following2{position:fixed;_position:absolute;top:65px;z-index:999;}
|
||||
/*divPrevious*/
|
||||
.divPrevious li{position:relative;margin-top:20px;overflow:hidden}
|
||||
.divPrevious li.previous-1{margin-bottom:0}
|
||||
.divPrevious li.previous-1 .previous-recent-title{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);padding:5px 15px;margin-left:0}
|
||||
.divPrevious li.previous-1 .previous-one-img{float:none;width:auto;height:auto;max-height:initial;position:relative;margin-top:0}
|
||||
.divPrevious li.previous-1 .previous-one-img img{width:320px;height:180px;vertical-align:middle}
|
||||
.divPrevious li.previous-1 .previous-recent-title h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.divPrevious li.previous-1 .previous-recent-title h4 a{color:#E4E4E4}
|
||||
.divPrevious li.previous-1 .previous-recent-title span{color:#CCC}
|
||||
.divPrevious li .previous-one-img{float:left;width:75px;height:auto;max-height:75px;position:relative;margin-top:3px}
|
||||
.divPrevious li .previous-one-img img{width:75px;height:auto;aspect-ratio: 4 / 3;object-fit: cover;}
|
||||
.divPrevious li .previous-recent-title{margin-left:85px}
|
||||
.divPrevious li .previous-recent-title h4{font-size:13px;font-weight:400;line-height:1.6;margin-bottom:0}
|
||||
.divPrevious li .previous-recent-title span{font-size:12px;color:#9A9A9A}
|
||||
</style>
|
||||
Reference in New Issue
Block a user