e722180c07
- UI框架：从 antd-mobile 迁移到 Ant Design，支持更好的跨平台体验 - 响应式设计：实现移动端、平板、PC端全方位适配 - 移动端：保留底部导航栏，优化触摸交互 - PC端：隐藏底部导航，采用居中布局 - 样式重构：所有组件样式迁移到 CSS Modules（.module.less） - 功能优化： - 练习题答题改进：始终返回正确答案便于用户学习 - 添加题目编号字段（question_id） - 修复判断题选项：由 A/B 改为 true/false - 组件优化： - TabBarLayout 重构，支持响应式显示/隐藏 - 所有页面组件采用 Ant Design 组件替换原 antd-mobile 组件 - 统一使用 @ant-design/icons 图标库 - 文档同步：更新 CLAUDE.md 中 UI 组件使用规范和响应式设计说明 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
899 B
Plaintext
64 lines
899 B
Plaintext
.layout {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
padding: 0;
|
|
background: white;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.menu {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
border-bottom: none;
|
|
|
|
:global {
|
|
.ant-menu-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60px;
|
|
margin: 0;
|
|
padding: 8px 0;
|
|
|
|
.anticon {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.ant-menu-item-selected {
|
|
background-color: transparent;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式设计 - 移动端
|
|
@media (max-width: 768px) {
|
|
.footer {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// 响应式设计 - PC端
|
|
@media (min-width: 769px) {
|
|
.footer {
|
|
display: none;
|
|
}
|
|
}
|