优化错题本页面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:
parent
2fbeb23947
commit
fb5edce22f
@ -415,7 +415,7 @@ const Home: React.FC = () => {
|
||||
<div className={styles.statDivider}></div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statValue}>{statistics.answered_questions}</div>
|
||||
<div className={styles.statLabel}>已刷</div>
|
||||
<div className={styles.statLabel}>已刷题目</div>
|
||||
</div>
|
||||
<div className={styles.statDivider}></div>
|
||||
<div className={styles.statItem}>
|
||||
|
||||
@ -8,25 +8,33 @@
|
||||
padding: 20px;
|
||||
padding-bottom: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.backButton {
|
||||
color: #007aff;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
.backButton {
|
||||
color: #007aff;
|
||||
font-weight: 500;
|
||||
padding: 4px 12px;
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
|
||||
&:hover {
|
||||
color: #0051d5;
|
||||
transform: translateX(-4px);
|
||||
&:hover {
|
||||
color: #0051d5;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #1d1d1f !important;
|
||||
margin: 0 !important;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
.title {
|
||||
color: #1d1d1f !important;
|
||||
margin: 0 !important;
|
||||
font-weight: 700;
|
||||
font-size: 18px !important;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片容器
|
||||
@ -310,10 +318,16 @@
|
||||
|
||||
.header {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
.backButton {
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.statsContainer {
|
||||
@ -441,10 +455,10 @@
|
||||
|
||||
.header {
|
||||
padding: 32px 32px 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
.title {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.statsContainer {
|
||||
@ -508,4 +522,10 @@
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
.header {
|
||||
.title {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Card, List, Button, Tag, Typography, Space, message, Modal, Empty, Statistic, Progress, Select, Row, Col } from 'antd'
|
||||
import {
|
||||
BookOutlined,
|
||||
CloseCircleOutlined,
|
||||
ArrowLeftOutlined,
|
||||
PlayCircleOutlined,
|
||||
@ -169,8 +168,8 @@ const WrongQuestions: React.FC = () => {
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
<Title level={2} className={styles.title}>
|
||||
<BookOutlined /> 错题本
|
||||
<Title level={3} className={styles.title}>
|
||||
错题本
|
||||
</Title>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user