修改前端 项目改名

InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css

@@ -460,19 +460,48 @@ footer {
 }
 
 @media (max-width: 480px) {
+    body {
+        overflow-x: hidden;
+    }
+    
     .container {
-        margin: 8px auto;
-        padding: 6px;
+        margin: 8px;
+        padding: 8px;
+        max-width: calc(100vw - 16px);
+        width: calc(100vw - 16px);
+    }
+    
+    header {
+        padding: 12px 0 16px 0;
+        margin-bottom: 16px;
     }
     
     header h1 {
-        font-size: 1.6rem;
+        font-size: 1.5rem;
+        margin-bottom: 8px;
+    }
+    
+    .update-time {
+        font-size: 0.8rem;
+        padding: 6px 12px;
+    }
+    
+    .refresh-btn {
+        font-size: 0.8rem;
+        padding: 8px 16px;
+        margin-top: 12px;
     }
     
     .hot-item {
-        padding: 10px;
-        margin-bottom: 8px;
-        gap: 8px;
+        padding: 12px;
+        margin-bottom: 10px;
+        gap: 10px;
+        width: 100%;
+        min-width: 0;
+    }
+    
+    .hot-rank-container {
+        flex-shrink: 0;
     }
     
     .hot-rank {
@@ -484,36 +513,72 @@ footer {
         font-size: 0.75rem;
     }
     
+    .hot-content-wrapper {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+    }
+    
     .hot-title {
-        font-size: 0.85rem;
+        font-size: 0.9rem;
+        line-height: 1.3;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
     }
     
-    .hot-meta-row {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 6px;
-    }
-    
-    .hot-media-row {
+    .hot-bottom-row {
+        flex-wrap: wrap;
         gap: 8px;
     }
     
     .hot-time {
         font-size: 0.7rem;
+        flex-shrink: 0;
     }
     
     .hot-value {
         font-size: 0.65rem;
+        padding: 3px 8px;
+        flex-shrink: 0;
     }
     
     .hot-cover {
         width: 60px;
         height: 45px;
+        flex-shrink: 0;
     }
     
     .hot-link {
         font-size: 0.65rem;
         padding: 4px 8px;
+        flex-shrink: 0;
+    }
+    
+    .link-text {
+        font-size: 0.65rem;
+    }
+    
+    .loading {
+        padding: 30px;
+        font-size: 1rem;
+    }
+    
+    .loading-content {
+        padding: 20px;
+    }
+    
+    .loading-text p {
+        font-size: 0.9rem;
+    }
+    
+    footer {
+        margin-top: 20px;
+        padding-top: 16px;
+        font-size: 0.8rem;
     }
 }