移动端适配

frontend/src/components/activity/activity.module.less

@@ -173,6 +173,60 @@
   }
 }
 
+.activityTitle {
+  font-size: 28px;
+  margin-bottom: 16px;
+  color: #fff;
+  line-height: 1.3;
+
+  @media (max-width: 768px) {
+    font-size: 22px;
+    margin-bottom: 12px;
+  }
+}
+
+.metaInfo {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 16px;
+  color: rgba(255, 255, 255, 0.7);
+  flex-wrap: wrap;
+
+  @media (max-width: 768px) {
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+}
+
+.metaItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+
+  @media (max-width: 768px) {
+    font-size: 13px;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 4px 8px;
+    border-radius: 4px;
+  }
+}
+
+.statusWrapper {
+  display: flex;
+  gap: 10px;
+}
+
+.headerGradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50%;
+  background: linear-gradient(to top, #1f1f1f, transparent);
+}
+
 .time {
   color: var(--text-secondary);
   font-size: 14px;
@@ -188,6 +242,11 @@
   min-height: 300px;
   width: 100%;
   overflow: hidden;
+
+  @media (max-width: 768px) {
+    height: 40vh;
+    min-height: 250px;
+  }
 }
 
 .detailImage {
@@ -202,6 +261,11 @@
   position: relative;
   z-index: 10;
   padding: 0 var(--spacing-lg) 100px; /* Bottom padding for fixed footer */
+
+  @media (max-width: 768px) {
+    padding: 0 var(--spacing-md) 80px;
+    margin-top: -40px;
+  }
 }
 
 .infoCard {
@@ -211,6 +275,11 @@
   box-shadow: var(--box-shadow-base);
   margin-bottom: var(--spacing-lg);
   border: 1px solid var(--border-color);
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
 }
 
 .richText {
@@ -218,6 +287,10 @@
   line-height: 1.8;
   font-size: 16px;
   
+  @media (max-width: 768px) {
+    font-size: 15px;
+  }
+  
   img {
     max-width: 100%;
     border-radius: var(--border-radius-base);
@@ -227,6 +300,11 @@
   h1, h2, h3 {
     color: var(--text-primary);
     margin-top: var(--spacing-lg);
+    
+    @media (max-width: 768px) {
+      margin-top: var(--spacing-md);
+      font-size: 1.2em; /* slightly smaller headings */
+    }
   }
 }