优化错题本页面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.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}>
|
||||||
|
|||||||
@ -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;
|
||||||
|
padding: 4px 12px;
|
||||||
transition: all 0.3s ease;
|
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-align: center;
|
||||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 统计卡片容器
|
// 统计卡片容器
|
||||||
@ -310,10 +318,16 @@
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 24px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user