update

src/assets/css/theme-style.css

@@ -1,3 +1,20 @@
+
+main {
+	flex: 1;
+	padding: 3rem;
+	/* max-width: 1200px; */
+	margin: 0 auto;
+	width: 100%;
+	box-sizing: border-box;
+	/* background: var(--background-light); */
+}
+
+@media only screen and (max-width: 767.98px) {
+	main {
+		padding: 1rem;
+	}
+}
+
 html, body{
     font-family: 'Microsoft YaHei,SimSun,Arial,SimHei';
     font-size: 100%;

src/pages/news.astro

@@ -38,7 +38,7 @@ if (!data || code !== 0) {
                                 <div class="post-inner">
                                     <div class="entry-media">                           
                                         <a  href={`/news/${e.id}`} title={`${e.title}`}>
-                                            <Image loading="eager" style={`aspect-ratio: 16 / 9;object-fit: contain;`} src={e.cover} alt={e.title} width={100} height={100} />
+                                            <Image loading="eager" style={`aspect-ratio: 4 / 3;object-fit: cover;`} src={e.cover} alt={e.title} width={100} height={100} />
                                         </a>
                                     </div>
                                     <div class="inner-post">

src/pages/news/[...slug].astro

@@ -31,50 +31,51 @@ if (!data || code !== 0) {
     </div>
   <main class="news-main">
     <div class="news-container">
-      <article class="news-detail-content">
+      <header>
-        <!-- <span class="news-date">发布于: {data.created_at}</span> -->
         <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}>
+        <Fragment 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>
       </article>
+      <div>
+        <p>原文地址: xxx</p>
+      </div>
 
-      <!-- <aside class="news-sidebar">
+      <div class="news-navigation">
-        <div class="related-news">
+        {
-          <h3>相关新闻</h3>
+          data.prevNews && (
-          <ul>
+            <div>
-            {data.about.map(item => (
+              <span>上一篇: </span>
-              <li>
+              <a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
-                <a class="news-link" title={item.title} href={`/news/${item.id}`}>
+            </div>
-                  <span class="related-title">{item.title}</span>
+          )
-                  {/* <span class="related-date">{item.date}</span> */}
+        }
-                </a>
+        {
-              </li>
+          data.nextNews && (
-            ))}
+          <div>
-          </ul>
+              <span>下一篇: </span>
-        </div>
+              <a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
-      </aside> -->
+          </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 {
+    .news-main {
-        width: 50rem;
+      display: grid;
+      flex-direction: row;
+      grid-template-columns: 4fr 1.5fr;
     }
 
-    /* .news-main {
+    @media (max-width: 1024px) {
-        margin-top: 5rem;
+        .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; */
+      padding: 0 1.5rem 3rem;
-      /* display: grid; */
+      display: grid;
-      /* grid-template-columns: 1fr 320px; */
+      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;
       }