web/src/pages/Home.module.less

@@ -472,48 +472,6 @@
     }
   }
 
-  .rankingSwitch {
-    display: inline-flex;
-    background: #f5f5f5;
-    border-radius: 20px;
-    padding: 4px;
-    margin-bottom: 16px;
-    position: relative;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  .rankingSwitchButton {
-    padding: 6px 16px;
-    border: none;
-    background: transparent;
-    border-radius: 16px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    color: #666;
-    transition: all 0.3s ease;
-    position: relative;
-    z-index: 2;
-    min-width: 80px;
-    text-align: center;
-
-    &:hover {
-      color: #333;
-    }
-  }
-
-  .rankingSwitchSlider {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    height: calc(100% - 8px);
-    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
-    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 {
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.9);

web/src/pages/Home.tsx

@@ -108,7 +108,6 @@ const Home: React.FC = () => {
   const [totalRanking, setTotalRanking] = useState<questionApi.UserStats[]>([])
   const [rankingLoading, setRankingLoading] = useState(false)
   const [rankingType, setRankingType] = useState<'daily' | 'total'>('daily') // 排行榜类型：每日或总榜
-  const [sliderPosition, setSliderPosition] = useState<'left' | 'right'>('left') // 滑块位置
 
   // 答题设置状态
   const [autoNext, setAutoNext] = useState(() => {
@@ -177,12 +176,6 @@ const Home: React.FC = () => {
     }
   }
 
-  // 切换排行榜类型
-  const switchRankingType = (type: 'daily' | 'total') => {
-    setRankingType(type)
-    setSliderPosition(type === 'daily' ? 'left' : 'right')
-  }
-
   // 加载用户信息
   useEffect(() => {
     const token = localStorage.getItem('token')
@@ -693,26 +686,20 @@ const Home: React.FC = () => {
         <Title level={4} className={styles.sectionTitle}>
           <TrophyOutlined /> 排行榜
         </Title>
-        <div className={styles.rankingSwitch} style={{ width: '200px' }}>
-          <div
-            className={styles.rankingSwitchButton}
-            onClick={() => switchRankingType('daily')}
+        <div style={{ marginBottom: 16 }}>
+          <Button
+            type={rankingType === 'daily' ? 'primary' : 'default'}
+            onClick={() => setRankingType('daily')}
+            style={{ marginRight: 8 }}
           >
             今日排行榜
-          </div>
-          <div
-            className={styles.rankingSwitchButton}
-            onClick={() => switchRankingType('total')}
+          </Button>
+          <Button
+            type={rankingType === 'total' ? 'primary' : 'default'}
+            onClick={() => setRankingType('total')}
           >
             总排行榜
-          </div>
-          <div
-            className={styles.rankingSwitchSlider}
-            style={{
-              width: 'calc(50% - 4px)',
-              left: sliderPosition === 'left' ? '4px' : 'calc(50% + 0px)',
-            }}
-          />
+          </Button>
         </div>
         {rankingLoading ? (
           <Card className={styles.rankingCard} loading={true} />