forum

2026-02-12 16:31:05 +08:00
parent 70c8608110
commit 1919ab2227
14 changed files with 1090 additions and 4 deletions
--- a/miniprogram/src/pages/forum/index.scss
+++ b/miniprogram/src/pages/forum/index.scss
@@ -0,0 +1,219 @@
+.forum-page {
+  min-height: 100vh;
+  background-color: #000;
+  padding-bottom: 40px;
+  color: #fff;
+
+  .hero-section {
+    padding: 40px 20px 20px;
+    text-align: center;
+    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.1) 100%);
+
+    .title {
+      font-size: 24px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #fff;
+      
+      .highlight {
+        color: #00b96b;
+      }
+    }
+
+    .subtitle {
+      color: #888;
+      font-size: 14px;
+      margin-bottom: 20px;
+    }
+
+    .search-box {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+
+      .at-search-bar {
+        flex: 1;
+        background-color: transparent;
+        padding: 0;
+        
+        &::after {
+          border-bottom: none;
+        }
+
+        .at-search-bar__input-cnt {
+          background-color: rgba(255, 255, 255, 0.1);
+          border: 1px solid #333;
+          border-radius: 8px;
+        }
+
+        .at-search-bar__input {
+          color: #fff;
+        }
+      }
+
+      .create-btn {
+        background-color: #00b96b;
+        color: #fff;
+        border: none;
+        border-radius: 8px;
+        padding: 0 16px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .tabs-wrapper {
+    background-color: #000;
+    
+    .at-tabs__item {
+      color: #888;
+      
+      &--active {
+        color: #00b96b;
+        font-weight: bold;
+      }
+    }
+    
+    .at-tabs__item-underline {
+      background-color: #00b96b;
+    }
+  }
+
+  .topic-list {
+    padding: 10px;
+
+    .topic-card {
+      background: rgba(20,20,20,0.6);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 12px;
+      position: relative;
+
+      &.pinned {
+        border-color: rgba(0, 185, 107, 0.4);
+        box-shadow: 0 0 10px rgba(0, 185, 107, 0.1);
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 8px;
+
+        .tag {
+          font-size: 10px;
+          padding: 2px 6px;
+          border-radius: 4px;
+          border: 1px solid #444;
+          
+          &.pinned-tag {
+            border-color: #ff4d4f;
+            color: #ff4d4f;
+          }
+          
+          &.verified-tag {
+            border-color: #00b96b;
+            color: #00b96b;
+          }
+        }
+
+        .card-title {
+          font-size: 16px;
+          font-weight: bold;
+          color: #fff;
+          flex: 1;
+        }
+      }
+
+      .card-content {
+        font-size: 14px;
+        color: #aaa;
+        margin-bottom: 12px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      .card-image {
+        margin-bottom: 12px;
+        
+        image {
+          width: 100%;
+          max-height: 150px;
+          border-radius: 8px;
+          object-fit: cover;
+        }
+      }
+
+      .card-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        color: #666;
+
+        .author-info {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .avatar {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+          }
+
+          .nickname {
+            &.star {
+              color: #ffd700;
+              font-weight: bold;
+            }
+          }
+        }
+
+        .stats {
+          display: flex;
+          gap: 12px;
+          
+          .stat-item {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 40px;
+    color: #666;
+  }
+  
+  .fab {
+    position: fixed;
+    right: 20px;
+    bottom: 40px;
+    width: 50px;
+    height: 50px;
+    background-color: #00b96b;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 185, 107, 0.4);
+    z-index: 100;
+    
+    .at-icon {
+      font-size: 24px;
+      color: #fff;
+    }
+  }
+}