修改前端 项目改名

InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css

@@ -449,18 +449,42 @@ footer {
 }
 
 @media (max-width: 480px) {
+    body {
+        overflow-x: hidden;
+    }
+    
     .container {
-        margin: 8px auto;
-        padding: 14px;
+        margin: 8px;
+        padding: 12px;
+        max-width: calc(100vw - 16px);
+        width: calc(100vw - 16px);
+    }
+    
+    header {
+        margin-bottom: 20px;
+        padding-bottom: 16px;
     }
     
     header h1 {
-        font-size: 1.6rem;
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+    }
+    
+    .update-time {
+        font-size: 0.8rem;
+        padding: 6px 12px;
     }
     
     .topic-item {
         padding: 14px;
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        width: 100%;
+        min-width: 0;
+    }
+    
+    .topic-header {
+        width: 100%;
+        min-width: 0;
     }
     
     .topic-rank {
@@ -469,15 +493,66 @@ footer {
         min-width: 30px;
         width: 30px;
         height: 30px;
+        flex-shrink: 0;
+    }
+    
+    .topic-content {
+        flex: 1;
+        min-width: 0;
+        padding-right: 12px;
     }
     
     .topic-title {
         font-size: 0.95rem;
+        line-height: 1.4;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
     }
     
-    .topic-cover {
-        width: 80px;
-        height: 60px;
+    .topic-detail {
+        font-size: 0.85rem;
+        line-height: 1.5;
+        margin-bottom: 8px;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+    
+    .topic-stats {
+        gap: 8px;
+        font-size: 0.75rem;
+        flex-wrap: wrap;
+    }
+    
+    .short-content .topic-cover {
+        width: 70px;
+        height: 50px;
+        flex-shrink: 0;
+    }
+    
+    .long-content .topic-cover {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        margin-top: 10px;
+    }
+    
+    .loading {
+        padding: 30px;
+        font-size: 1rem;
+    }
+    
+    footer {
+        margin-top: 20px;
+        padding-top: 16px;
+        font-size: 0.8rem;
     }
 }