1

2025-09-17 22:55:20 +08:00
parent 46fc702dfd
commit 721d0c10e4
11 changed files with 1078 additions and 3 deletions
--- a/src/user_pages/follow/index.scss
+++ b/src/user_pages/follow/index.scss
@@ -0,0 +1,178 @@
+// 球友关注页面样式
+.follow_page {
+  min-height: 100vh;
+  background: #FAFAFA;
+  
+  // 导航栏内容
+  .navbar_content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 44px;
+    
+    .navbar_back {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      margin-left: 10px;
+      
+      .back_icon {
+        width: 8px;
+        height: 16px;
+        background: url("data:image/svg+xml,%3Csvg width='8' height='16' viewBox='0 0 8 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66667 2L1.33333 8L6.66667 14' stroke='%23000000' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
+        background-size: contain;
+      }
+    }
+    
+    .navbar_title {
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+      letter-spacing: 1.9%;
+      color: #000000;
+      position: absolute;
+      left: 50px;
+    }
+    
+    .navbar_action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 83px;
+      height: 30px;
+      margin-right: 7px;
+      
+      .action_icon {
+        width: 20px;
+        height: 20px;
+        background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ccircle cx='5' cy='10' r='1.5' fill='%23191919'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23191919'/%3E%3Ccircle cx='15' cy='10' r='1.5' fill='%23191919'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+  
+  // 标签页导航
+  .tab_navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 30px;
+    background: #ffffff;
+    height: 44px;
+    overflow-x: auto;
+    margin-top: 110px;
+    
+ 
+    
+    .tab_item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 4px;
+      position: relative;
+      flex-shrink: 0;
+      min-width: fit-content;
+      
+      .tab_text {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: -1.64%;
+        color: rgba(0, 0, 0, 0.5);
+        transition: all 0.2s ease;
+        white-space: nowrap;
+        
+        // 小屏幕适配
+        @media (max-width: 375px) {
+          font-size: 13px;
+        }
+      }
+      
+      // 推荐图标
+      .recommend_icon {
+        .icon_container {
+          width: 10px;
+          height: 10px;
+          position: relative;
+          
+          .star_icon {
+            width: 100%;
+            height: 100%;
+            
+            &::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0.83L6.09 3.09L8.75 3.09L6.58 4.91L7.25 7.17L5 5.83L2.75 7.17L3.42 4.91L1.25 3.09L3.91 3.09L5 0.83Z' stroke='%238C8C8C' stroke-width='0.83' fill='%238C8C8C'/%3E%3C/svg%3E") no-repeat center;
+              background-size: contain;
+            }
+          }
+        }
+      }
+      
+      // 激活状态
+      &.active {
+        /* 添加调试背景色 */
+        
+        .tab_text {
+          font-weight: 600 !important;
+          color: #000000 !important;
+        }
+        
+        // 下边框
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: #000000 !important;
+          z-index: 1;
+        }
+      }
+      
+      // 移除默认的粉丝标签激活样式，完全依赖 active 类
+    }
+  }
+  
+  // 用户列表容器
+  .user_list_container {
+    flex: 1;
+    margin-top: 12px;
+    background: #ffffff;
+    
+    // 加载状态提示
+    .loading_tip,
+    .empty_tip,
+    .load_more_tip {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40px 20px;
+      
+      text {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+    }
+    
+    .empty_tip {
+      padding: 80px 20px;
+    }
+    
+    .load_more_tip {
+      padding: 20px;
+    }
+  }
+}