进一步优化排行榜切换样式以符合整体主题 1. 统一使用主题色#007aff替代之前的蓝色渐变 2. 使切换容器样式与卡片样式保持一致 3. 添加按钮active状态样式 4. 优化毛玻璃效果和阴影以匹配整体设计
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d7926615f1
commit
df76625007
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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')}
|
||||||
>
|
>
|
||||||
总排行榜
|
总排行榜
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user