toom1996/huoerguosifeichi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
toom1996
2025-07-15 17:01:05 +08:00
parent 07000f31bc
commit 2b0276f57c
3 changed files with 84 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/pages/news/[...slug].astro
View File

@ -31,50 +31,51 @@ if (!data || code !== 0) {
</div>
<main class="news-main">
<div class="news-container">
<article class="news-detail-content">
<!-- <span class="news-date">发布于: {data.created_at}</span> -->
<header>
<h1 class="title" title="标题">{data.title}</h1>
</header>
<article class="news-detail-content">
<div class="top-icon"></div>
<div class="news-content" set:html={data.content}>
</div>
<div class="news-navigation">
{
data.prevNews && (
<div>
<span>上一篇: </span>
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
</div>
)
}
{
data.nextNews && (
<div>
<span>下一篇: </span>
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
</div>
)
}
</div>
<Fragment set:html={data.content} />
</article>
<div>
<p>原文地址: xxx</p>
</div>
<!-- <aside class="news-sidebar">
<div class="related-news">
<h3>相关新闻</h3>
<ul>
{data.about.map(item => (
<li>
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
<span class="related-title">{item.title}</span>
{/* <span class="related-date">{item.date}</span> */}
</a>
</li>
))}
</ul>
</div>
</aside> -->
<div class="news-navigation">
{
data.prevNews && (
<div>
<span>上一篇: </span>
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
</div>
)
}
{
data.nextNews && (
<div>
<span>下一篇: </span>
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
</div>
)
}
</div>
</div>
<aside class="news-sidebar">
<div class="related-news">
<h3>相关推荐</h3>
<ul>
{data.about.map(item => (
<li>
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
<span class="related-title">{item.title}</span>
{/* <span class="related-date">{item.date}</span> */}
</a>
</li>
))}
</ul>
</div>
</aside>
</main>
</Layout>
<style is:inline>
@ -89,15 +90,25 @@ if (!data || code !== 0) {
height: auto;
}
</style>
<style>
<style>
article {
width: 50rem;
.news-main {
display: grid;
flex-direction: row;
grid-template-columns: 4fr 1.5fr;
}
/* .news-main {
margin-top: 5rem;
} */
@media (max-width: 1024px) {
.news-main {
display: flex;
flex-direction: column;
}
}
.news-container {
display: flex;
flex-direction: column;
}
.top-icon {
@ -120,8 +131,9 @@ if (!data || code !== 0) {
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.title {
font-size: 2.5rem;
font-size: 2rem;
text-align: left;
font-weight: 700;
color: var(--text-primary);
@ -140,14 +152,6 @@ if (!data || code !== 0) {
color: var(--text-primary);
}
/* .news-date, .news-author {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
} */
.news-author a {
color: black;
text-decoration: none;
@ -185,11 +189,11 @@ if (!data || code !== 0) {
}
.news-container {
/* max-width: 1200px; */
max-width: 1200px;
/* margin: -2rem auto 0; */
/* padding: 0 1.5rem 3rem; */
/* display: grid; */
/* grid-template-columns: 1fr 320px; */
padding: 0 1.5rem 3rem;
display: grid;
grid-template-columns: 3fr 1fr;
/* gap: 2.5rem; */
position: relative;
@ -199,7 +203,7 @@ if (!data || code !== 0) {
.news-detail-content {
border-right: 1px solid var(--text-primary);
padding: 3rem;
/* padding: 3rem; */
position: relative;
overflow: hidden;
}
@ -244,24 +248,11 @@ if (!data || code !== 0) {
}
.news-sidebar {
position: sticky;
/* position: sticky; */
top: 2rem;
height: fit-content;
}
.related-news {
padding: 1rem;
/* box-shadow: var(--shadow-lg); */
}
.related-news h3 {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--text-primary);
}
.related-news ul {
list-style: none;
padding: 0;
@ -281,14 +272,12 @@ if (!data || code !== 0) {
}
.related-news a {
color: #000000;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
/* color: var(--text-secondary); */
/* color: black; */
transition: all 0.3s ease;
padding: 0.4rem;
padding: 0.3rem;
border-radius: var(--radius-md);
}
@ -315,7 +304,6 @@ if (!data || code !== 0) {
@media (max-width: 480px) {
.news-detail-content {
padding: 1.5rem;
border: none;
}