fabc5c8f3e
主要改进： - 新增题目导航抽屉组件，支持快速跳转到任意题目 - 新增悬浮球导航按钮，实时显示答题进度和统计信息 - 优化顶部导航栏，移除进度条，简化为返回、标题和设置三个按钮 - 将答题设置改为弹窗模式，提供更好的交互体验 - 优化题目列表卡片设计，减小高度使其更紧凑 - 题目列表显示题号、分类标签、题目内容和答题状态 - 支持答题进度持久化，刷新页面不丢失进度 技术细节： - 使用 Ant Design 的 Drawer、Modal、Tag 等组件 - 采用 CSS Modules 实现样式隔离 - 使用 LocalStorage 保存答题进度和设置 - 响应式设计，适配移动端和PC端 - 修复 TypeScript 编译错误 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
202 lines
3.0 KiB
Plaintext
202 lines
3.0 KiB
Plaintext
.container {
|
|
min-height: 100vh;
|
|
background: #fafafa;
|
|
padding: 0;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
// 固定顶栏
|
|
.fixedTopBar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: rgba(250, 250, 250, 0.85);
|
|
backdrop-filter: blur(40px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
}
|
|
|
|
.topBarContent {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.topBarCard {
|
|
// 移除卡片样式
|
|
}
|
|
|
|
.content {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
padding-top: 80px; // 减少顶部空间，因为去掉了进度条
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.backButton {
|
|
color: #007aff;
|
|
font-weight: 500;
|
|
padding: 4px 12px;
|
|
|
|
&:hover {
|
|
color: #0051d5;
|
|
background: rgba(0, 122, 255, 0.08);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
color: #1d1d1f !important;
|
|
margin: 0 !important;
|
|
font-weight: 700;
|
|
font-size: 18px !important;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.settingsButton {
|
|
color: #8c8c8c;
|
|
font-weight: 500;
|
|
padding: 4px 12px;
|
|
|
|
&:hover {
|
|
color: #1d1d1f;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
}
|
|
}
|
|
|
|
.progressWrapper {
|
|
// 进度条容器
|
|
}
|
|
|
|
.questionCard {
|
|
// 去掉卡片样式，但添加左右内边距
|
|
padding: 0 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.questionNumber {
|
|
color: #6e6e73;
|
|
margin: 8px 0 16px 0 !important;
|
|
}
|
|
|
|
.questionContent {
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
color: #1d1d1f;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.fillInput {
|
|
border-bottom: 2px solid #007aff !important;
|
|
border-radius: 0 !important;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.buttonGroup {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.actionButtons {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
// 响应式设计 - 移动端
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding-bottom: 70px;
|
|
}
|
|
|
|
.topBarContent {
|
|
padding: 12px;
|
|
}
|
|
|
|
.topBarCard {
|
|
// 移除卡片样式
|
|
}
|
|
|
|
.content {
|
|
padding: 0 12px;
|
|
padding-top: 70px; // 移动端减少顶部距离
|
|
}
|
|
|
|
.header {
|
|
.backButton {
|
|
font-size: 14px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.settingsButton {
|
|
font-size: 14px;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
|
|
.questionCard {
|
|
padding: 0 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.questionContent {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.actionButtons {
|
|
button {
|
|
flex: 1;
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式设计 - 平板
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.topBarContent {
|
|
padding: 14px 24px;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 24px;
|
|
padding-top: 75px;
|
|
}
|
|
|
|
.header {
|
|
.title {
|
|
font-size: 20px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式设计 - PC端
|
|
@media (min-width: 1025px) {
|
|
.topBarContent {
|
|
padding: 18px 32px;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 32px;
|
|
padding-top: 85px;
|
|
}
|
|
|
|
.header {
|
|
.title {
|
|
font-size: 22px !important;
|
|
}
|
|
}
|
|
}
|