修复排行榜切换样式问题

1. 修复巨大的蓝色方块问题
2. 调整滑块宽度计算和容器样式
3. 优化切换按钮的布局和样式

🤖 Generated with [Claude Code](https://claude.com/claude-code)&#10;&#10;Co-Authored-By: Claude <noreply@anthropic.com>

web/src/pages/Home.module.less

@@ -473,12 +473,12 @@
   }
 
   .rankingSwitch {
-    display: flex;
+    display: inline-flex;
     background: #f5f5f5;
     border-radius: 20px;
     padding: 4px;
     margin-bottom: 16px;
-    width: fit-content;
+    position: relative;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
@@ -493,16 +493,13 @@
     color: #666;
     transition: all 0.3s ease;
     position: relative;
-    z-index: 1;
+    z-index: 2;
+    min-width: 80px;
+    text-align: center;
 
     &:hover {
       color: #333;
     }
-
-    &.active {
-      color: #fff;
-      font-weight: 600;
-    }
   }
 
   .rankingSwitchSlider {
@@ -514,6 +511,7 @@
     border-radius: 16px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
+    z-index: 1;
   }
 
   .rankingCard {

web/src/pages/Home.tsx

@@ -693,7 +693,7 @@ const Home: React.FC = () => {
         <Title level={4} className={styles.sectionTitle}>
           <TrophyOutlined /> 排行榜
         </Title>
-        <div className={styles.rankingSwitch}>
+        <div className={styles.rankingSwitch} style={{ width: '200px' }}>
           <div
             className={styles.rankingSwitchButton}
             onClick={() => switchRankingType('daily')}