forum

miniprogram/src/pages/forum/index.scss

@@ -65,20 +65,123 @@
     }
   }
 
+  .section-container {
+    margin: 0 10px 15px;
+    background: #141414; /* Darker card background */
+    border-radius: 12px;
+    padding: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      
+      .section-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+
+    .announcement-swiper {
+      height: 40px;
+      
+      .announcement-item {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        background: rgba(255, 255, 255, 0.05);
+        padding: 0 12px;
+        border-radius: 6px;
+        
+        .item-text {
+          font-size: 14px;
+          color: #ccc;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .star-users-scroll {
+      white-space: nowrap;
+      width: 100%;
+      
+      .star-user-card {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 20px;
+        width: 80px;
+        background: rgba(255, 255, 255, 0.05);
+        padding: 12px 8px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        
+        .user-avatar {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          border: 2px solid #ffd700;
+          margin-bottom: 8px;
+        }
+        
+        .user-name {
+          font-size: 12px;
+          font-weight: bold;
+          color: #fff;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-bottom: 2px;
+        }
+        
+        .user-title {
+          font-size: 10px;
+          color: #888;
+        }
+      }
+    }
+  }
+
   .tabs-wrapper {
     background-color: #000;
-    
+    margin-bottom: 10px;
+
+    /* Override Taro UI default white background */
+    .at-tabs {
+        background-color: transparent;
+        height: auto;
+    }
+
+    .at-tabs__header {
+        background-color: transparent;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        text-align: left;
+    }
+
     .at-tabs__item {
       color: #888;
+      font-size: 14px;
+      padding: 12px 24px;
       
       &--active {
         color: #00b96b;
         font-weight: bold;
+        font-size: 16px;
       }
     }
     
     .at-tabs__item-underline {
       background-color: #00b96b;
+      bottom: 0;
     }
   }