优化答题界面布局:调整内边距和间距

主要更改:
- 移动端优化:返回按钮和标题在同一行,标题左对齐
- 添加题目内边距:左右各 20px (移动端 12px),提升阅读体验
- 缩短顶部导航与题目距离:
  - PC端:180px → 135px
  - 平板:170px → 135px
  - 移动端:200px → 160px
- 更紧凑合理的布局,优化视觉层次

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yanlongqi 2025-11-05 11:35:01 +08:00
parent 5bfdfe71c1
commit 91f5e096f8

View File

@ -31,7 +31,7 @@
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
padding-top: 180px; // 为固定顶栏留出空间 padding-top: 140px; // 为固定顶栏留出空间,减少距离
} }
.header { .header {
@ -93,8 +93,8 @@
} }
.questionCard { .questionCard {
// 去掉卡片样式 // 去掉卡片样式,但添加左右内边距
padding: 0; padding: 0 20px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@ -145,7 +145,7 @@
.content { .content {
padding: 0 12px; padding: 0 12px;
padding-top: 200px; // 移动端顶栏更高 padding-top: 160px; // 移动端顶栏更高,调整距离
} }
.header { .header {
@ -162,10 +162,10 @@
.title { .title {
order: 2; order: 2;
flex: 1 1 100%; flex: 1;
text-align: center; text-align: left;
font-size: 16px !important; font-size: 16px !important;
margin-top: 4px !important; margin: 0 !important;
} }
.statsGroup { .statsGroup {
@ -192,6 +192,7 @@
} }
.questionCard { .questionCard {
padding: 0 12px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -215,7 +216,7 @@
.content { .content {
padding: 0 24px; padding: 0 24px;
padding-top: 170px; padding-top: 135px;
} }
.header { .header {
@ -233,7 +234,7 @@
.content { .content {
padding: 0 32px; padding: 0 32px;
padding-top: 170px; padding-top: 135px;
} }
.header { .header {