去掉导航和题目内容的卡片样式,简化界面

主要更改:
- 移除顶部导航的卡片背景和边框:只保留毛玻璃背景效果
- 移除顶栏底部的分隔线:去掉 box-shadow 和 border-bottom
- 移除题目卡片样式:QuestionCard 从 Card 组件改为 div,去掉所有卡片装饰
- 调整内容区顶部间距:减少 padding-top,更紧凑的布局
- 简化视觉层次:整体界面更加扁平化和现代化

🤖 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:28:22 +08:00
parent 18b92e5452
commit 5bfdfe71c1
2 changed files with 11 additions and 31 deletions

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'
import { Card, Space, Tag, Typography, Radio, Checkbox, Input, Button } from 'antd'
import { Space, Tag, Typography, Radio, Checkbox, Input, Button } from 'antd'
import type { Question, AnswerResult as AnswerResultType } from '../types/question'
import AnswerResult from './AnswerResult'
import styles from '../pages/Question.module.less'
@ -151,7 +151,7 @@ const QuestionCard: React.FC<QuestionCardProps> = ({
}
return (
<Card className={styles.questionCard}>
<div className={styles.questionCard}>
<Space size="small" style={{ marginBottom: 16, alignItems: 'center' }}>
<Title level={5} style={{ margin: 0, display: 'inline' }}>
{question.question_id}
@ -188,7 +188,7 @@ const QuestionCard: React.FC<QuestionCardProps> = ({
</Button>
)}
</div>
</Card>
</div>
)
}

View File

@ -15,8 +15,6 @@
background: rgba(250, 250, 250, 0.85);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
}
.topBarContent {
@ -26,23 +24,14 @@
}
.topBarCard {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
padding: 16px 20px;
border-radius: 16px;
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.05),
0 1px 4px rgba(0, 0, 0, 0.03),
0 0 0 1px rgba(0, 0, 0, 0.03);
border: 0.5px solid rgba(0, 0, 0, 0.04);
// 移除卡片样式
}
.content {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
padding-top: 200px; // 为固定顶栏留出空间
padding-top: 180px; // 为固定顶栏留出空间
}
.header {
@ -104,15 +93,8 @@
}
.questionCard {
border-radius: 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow:
0 2px 16px rgba(0, 0, 0, 0.06),
0 1px 8px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.03);
border: 0.5px solid rgba(0, 0, 0, 0.04);
// 去掉卡片样式
padding: 0;
margin-bottom: 24px;
}
@ -158,13 +140,12 @@
}
.topBarCard {
padding: 12px 16px;
border-radius: 12px;
// 移除卡片样式
}
.content {
padding: 0 12px;
padding-top: 240px; // 移动端顶栏更高
padding-top: 200px; // 移动端顶栏更高
}
.header {
@ -211,7 +192,6 @@
}
.questionCard {
border-radius: 16px;
margin-bottom: 16px;
}
@ -235,7 +215,7 @@
.content {
padding: 0 24px;
padding-top: 190px;
padding-top: 170px;
}
.header {
@ -253,7 +233,7 @@
.content {
padding: 0 32px;
padding-top: 190px;
padding-top: 170px;
}
.header {