优化错题本页面UI和标题样式

主要改动:
1. 统一标题样式,与答题页面保持一致
   - 标题居中显示
   - 返回按钮使用绝对定位在左侧
   - 移除标题中的图标
   - Title组件level改为3
   - 响应式字体大小:移动端16px,PC端20px,超宽屏22px

2. 优化首页统计文案
   - 将"已刷"改为"已刷题目",更加清晰明确

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-08 04:33:12 +08:00
parent 2fbeb23947
commit fb5edce22f
3 changed files with 44 additions and 25 deletions

View File

@ -415,7 +415,7 @@ const Home: React.FC = () => {
<div className={styles.statDivider}></div> <div className={styles.statDivider}></div>
<div className={styles.statItem}> <div className={styles.statItem}>
<div className={styles.statValue}>{statistics.answered_questions}</div> <div className={styles.statValue}>{statistics.answered_questions}</div>
<div className={styles.statLabel}></div> <div className={styles.statLabel}></div>
</div> </div>
<div className={styles.statDivider}></div> <div className={styles.statDivider}></div>
<div className={styles.statItem}> <div className={styles.statItem}>

View File

@ -8,25 +8,33 @@
padding: 20px; padding: 20px;
padding-bottom: 16px; padding-bottom: 16px;
background: transparent; background: transparent;
} display: flex;
justify-content: center;
align-items: center;
position: relative;
.backButton { .backButton {
color: #007aff; color: #007aff;
margin-bottom: 12px; font-weight: 500;
transition: all 0.3s ease; padding: 4px 12px;
transition: all 0.3s ease;
position: absolute;
left: 20px;
&:hover { &:hover {
color: #0051d5; color: #0051d5;
transform: translateX(-4px); transform: translateX(-4px);
}
} }
}
.title { .title {
color: #1d1d1f !important; color: #1d1d1f !important;
margin: 0 !important; margin: 0 !important;
font-size: 28px; font-weight: 700;
font-weight: 700; font-size: 18px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
} }
// 统计卡片容器 // 统计卡片容器
@ -310,10 +318,16 @@
.header { .header {
padding: 16px; padding: 16px;
}
.title { .backButton {
font-size: 24px; font-size: 14px;
padding: 4px 8px;
left: 16px;
}
.title {
font-size: 16px !important;
}
} }
.statsContainer { .statsContainer {
@ -441,10 +455,10 @@
.header { .header {
padding: 32px 32px 24px; padding: 32px 32px 24px;
}
.title { .title {
font-size: 32px; font-size: 20px !important;
}
} }
.statsContainer { .statsContainer {
@ -508,4 +522,10 @@
.container { .container {
max-width: 1600px; max-width: 1600px;
} }
.header {
.title {
font-size: 22px !important;
}
}
} }

View File

@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { Card, List, Button, Tag, Typography, Space, message, Modal, Empty, Statistic, Progress, Select, Row, Col } from 'antd' import { Card, List, Button, Tag, Typography, Space, message, Modal, Empty, Statistic, Progress, Select, Row, Col } from 'antd'
import { import {
BookOutlined,
CloseCircleOutlined, CloseCircleOutlined,
ArrowLeftOutlined, ArrowLeftOutlined,
PlayCircleOutlined, PlayCircleOutlined,
@ -169,8 +168,8 @@ const WrongQuestions: React.FC = () => {
> >
</Button> </Button>
<Title level={2} className={styles.title}> <Title level={3} className={styles.title}>
<BookOutlined />
</Title> </Title>
</div> </div>