进一步优化排行榜切换样式以符合整体主题

1. 统一使用主题色#007aff替代之前的蓝色渐变
2. 使切换容器样式与卡片样式保持一致
3. 添加按钮active状态样式
4. 优化毛玻璃效果和阴影以匹配整体设计

🤖 Generated with [Claude Code](https://claude.com/claude-code)&#10;&#10;Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-17 21:31:14 +08:00
parent d7926615f1
commit df76625007
2 changed files with 18 additions and 7 deletions

View File

@ -474,12 +474,18 @@
.rankingSwitch { .rankingSwitch {
display: inline-flex; display: inline-flex;
background: #f5f5f5; background: rgba(255, 255, 255, 0.8);
border-radius: 20px; border-radius: 20px;
padding: 4px; padding: 4px;
margin-bottom: 16px; margin-bottom: 16px;
position: relative; position: relative;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow:
0 2px 8px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(0, 0, 0, 0.03);
border: 0.5px solid rgba(0, 0, 0, 0.04);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
} }
.rankingSwitchButton { .rankingSwitchButton {
@ -500,6 +506,11 @@
&:hover { &:hover {
color: #333; color: #333;
} }
&.active {
color: #fff;
font-weight: 600;
}
} }
.rankingSwitchSlider { .rankingSwitchSlider {
@ -507,10 +518,10 @@
top: 4px; top: 4px;
left: 4px; left: 4px;
height: calc(100% - 8px); height: calc(100% - 8px);
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%); background: linear-gradient(135deg, #007aff 0%, #007aff 100%);
border-radius: 16px; border-radius: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
z-index: 1; z-index: 1;
} }

View File

@ -693,15 +693,15 @@ const Home: React.FC = () => {
<Title level={4} className={styles.sectionTitle}> <Title level={4} className={styles.sectionTitle}>
<TrophyOutlined /> <TrophyOutlined />
</Title> </Title>
<div className={styles.rankingSwitch} style={{ width: '200px' }}> <div className={styles.rankingSwitch}>
<div <div
className={styles.rankingSwitchButton} className={`${styles.rankingSwitchButton} ${rankingType === 'daily' ? styles.active : ''}`}
onClick={() => switchRankingType('daily')} onClick={() => switchRankingType('daily')}
> >
</div> </div>
<div <div
className={styles.rankingSwitchButton} className={`${styles.rankingSwitchButton} ${rankingType === 'total' ? styles.active : ''}`}
onClick={() => switchRankingType('total')} onClick={() => switchRankingType('total')}
> >