style: blog &announcement detail

Author: dajiangjunok

src/pages/announcement/[id]/index.module.css

@@ -139,7 +139,7 @@
 .metaItem {
   display: flex;
   align-items: flex-start;
-  height: 14px;
+  min-height: 20px;
   gap: 1rem;
 }
 
@@ -843,11 +843,28 @@
     grid-template-columns: 1fr;
     gap: 1.5rem;
   }
+
+  .coverContainer {
+    width: 100%;
+    max-width: 500px;
+    height: auto;
+    margin: 0 auto;
+  }
 }
 
 @media (max-width: 768px) {
+  .header {
+    padding: 0.75rem 0;
+  }
+
   .headerContent {
     padding: 0 1rem;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .backLink {
+    font-size: 14px;
   }
 
   .headerActions {
@@ -857,22 +874,36 @@
   .actionButton {
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
+    min-width: auto;
   }
 
   .hero {
-    padding: 2rem 0;
+    padding: 1.5rem 0;
   }
 
   .heroContent {
     padding: 0 1rem;
+    gap: 1.5rem;
   }
 
   .title {
-    font-size: 2rem;
+    font-size: 1.75rem;
+    line-height: 1.3;
+  }
+
+  .description {
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  .coverContainer {
+    width: 100%;
+    max-width: 400px;
+    height: 250px;
   }
 
   .main {
-    padding: 2rem 1rem;
+    padding: 1.5rem 1rem;
   }
 
   .section {
@@ -896,25 +927,95 @@
   .organizerContact {
     justify-content: center;
   }
+
+  .metaInfo {
+    gap: 0.75rem;
+  }
+
+  .metaItem {
+    gap: 0.75rem;
+    height: auto;
+    min-height: 20px;
+  }
+
+  .metaText {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    word-break: break-word;
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 480px) {
   .headerContent {
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.75rem;
     align-items: stretch;
   }
 
+  .backLink {
+    justify-content: center;
+  }
+
   .headerActions {
     justify-content: center;
+    width: 100%;
+  }
+
+  .actionButton {
+    flex: 1;
+    max-width: 120px;
+  }
+
+  .hero {
+    padding: 1rem 0;
+  }
+
+  .heroContent {
+    gap: 1rem;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .description {
+    font-size: 0.95rem;
+  }
+
+  .coverContainer {
+    height: 200px;
+    max-width: 300px;
   }
 
   .metaInfo {
-    gap: 0.75rem;
+    gap: 0.5rem;
   }
 
   .metaItem {
     gap: 0.75rem;
+    flex-direction: row;
+    align-items: flex-start;
+    height: auto;
+  }
+
+  .metaIcon {
+    align-self: flex-start;
+    margin-top: 0.125rem;
+    flex-shrink: 0;
+  }
+
+  .metaText {
+    font-size: 0.875rem;
+    padding-left: 0;
+    margin-top: 0;
+    margin-left: 0;
+    line-height: 1.4;
+    flex: 1;
+  }
+
+  .main {
+    padding: 1rem;
   }
 
   .section {
@@ -926,4 +1027,127 @@
   .shareCard {
     padding: 1rem;
   }
+
+  .tags {
+    gap: 0.25rem;
+  }
+
+  .tag {
+    font-size: 0.75rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
 }
+/* 内容区域移动端优化 */
+@media (max-width: 768px) {
+  /* 针对 marked-paper 的移动端优化 */
+  .main .marked-paper {
+    padding: 1rem 0.75rem;
+    margin: 0;
+    border-radius: 8px;
+  }
+
+  .main .prose {
+    font-size: 0.95rem;
+    line-height: 1.7;
+  }
+
+  .main .prose h1 {
+    font-size: 1.5rem;
+    margin: 1.5rem 0 1rem 0;
+  }
+
+  .main .prose h2 {
+    font-size: 1.25rem;
+    margin: 1.25rem 0 0.75rem 0;
+  }
+
+  .main .prose h3 {
+    font-size: 1.125rem;
+    margin: 1rem 0 0.5rem 0;
+  }
+
+  .main .prose p {
+    margin: 0.75rem 0;
+  }
+
+  .main .prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    margin: 1rem 0;
+  }
+
+  .main .prose pre {
+    padding: 0.75rem;
+    font-size: 0.8125rem;
+    overflow-x: auto;
+    border-radius: 6px;
+  }
+
+  .main .prose code {
+    font-size: 0.8125rem;
+    padding: 0.125rem 0.25rem;
+  }
+
+  .main .prose blockquote {
+    margin: 1rem 0;
+    padding: 0.75rem 1rem;
+    border-left: 3px solid var(--primary-600);
+  }
+
+  .main .prose ul, .main .prose ol {
+    padding-left: 1.5rem;
+    margin: 0.75rem 0;
+  }
+
+  .main .prose li {
+    margin: 0.25rem 0;
+  }
+
+  .main .prose table {
+    width: 100%;
+    overflow-x: auto;
+    display: block;
+    white-space: nowrap;
+  }
+
+  .main .prose table tbody {
+    display: table;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .main .marked-paper {
+    padding: 0.75rem 0.5rem;
+  }
+
+  .main .prose {
+    font-size: 0.9rem;
+  }
+
+  .main .prose h1 {
+    font-size: 1.375rem;
+  }
+
+  .main .prose h2 {
+    font-size: 1.125rem;
+  }
+
+  .main .prose h3 {
+    font-size: 1rem;
+  }
+
+  .main .prose pre {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .main .prose code {
+    font-size: 0.75rem;
+  }
+
+  .main .prose table {
+    font-size: 0.75rem;
+  }
+}