问题列表选项的优化
This commit is contained in:
yanlongqi
parent
c545f908df
commit
f3360aab48
@ -2,13 +2,14 @@
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 16px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
@ -21,7 +22,13 @@
|
||||
}
|
||||
|
||||
.filterCard {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
@ -29,9 +36,13 @@
|
||||
}
|
||||
|
||||
.tabsCard {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 12px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -39,20 +50,27 @@
|
||||
}
|
||||
|
||||
.questionCard {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.questionHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.questionId {
|
||||
@ -64,14 +82,40 @@
|
||||
}
|
||||
|
||||
.questionContent {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.contentText {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
margin: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
color: #262626;
|
||||
flex: 1;
|
||||
|
||||
:global(.ant-typography) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.trueFalseAnswer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.trueFalseTag {
|
||||
font-size: 14px;
|
||||
padding: 4px 12px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.blankAnswer {
|
||||
@ -89,33 +133,61 @@
|
||||
.options {
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
padding: 8px 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.correctOption {
|
||||
background-color: #f6ffed;
|
||||
padding: 8px;
|
||||
margin: 0 -12px;
|
||||
padding-left: 11px; // 精确补偿：12(容器) - 12(margin) + 1(border) + 11 = 12px，与普通选项对齐
|
||||
padding-right: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-bottom: 1px solid #b7eb8f !important;
|
||||
|
||||
&:not(:last-child) {
|
||||
// 保持与父元素的 border-bottom 和 margin-bottom
|
||||
}
|
||||
}
|
||||
|
||||
.correctTag {
|
||||
margin-left: auto;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.answerSection {
|
||||
background-color: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.answerText {
|
||||
margin: 8px 0 0 0;
|
||||
margin: 6px 0 0 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
|
||||
:global(.ant-typography) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 悬浮按钮组样式美化
|
||||
@ -169,19 +241,83 @@
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 12px;
|
||||
padding: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filterCard {
|
||||
margin-bottom: 10px;
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabsCard {
|
||||
margin-bottom: 10px;
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 10px 12px 12px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.questionCard {
|
||||
margin-bottom: 8px;
|
||||
|
||||
:global {
|
||||
.ant-card-body {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.questionHeader {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.questionNumber {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.questionContent {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.trueFalseAnswer {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.options {
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.correctOption {
|
||||
margin: 0 -10px; // 匹配移动端容器的padding
|
||||
padding-left: 9px; // 精确补偿：10(容器) - 10(margin) + 1(border) + 9 = 10px
|
||||
}
|
||||
|
||||
.answerSection {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
// 移动端悬浮按钮适配
|
||||
:global {
|
||||
.ant-float-btn-group {
|
||||
|
||||
@ -149,7 +149,7 @@ const QuestionList: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染选项
|
||||
// 渲染选项（选择题和多选题）
|
||||
const renderOptions = (question: Question) => {
|
||||
// 判断题不显示选项
|
||||
if (question.type === 'true-false') {
|
||||
@ -160,14 +160,33 @@ const QuestionList: React.FC = () => {
|
||||
return null
|
||||
}
|
||||
|
||||
// 判断选项是否为正确答案
|
||||
const isCorrectOption = (key: string): boolean => {
|
||||
if (question.type === 'multiple-selection' && Array.isArray(question.answer)) {
|
||||
return question.answer.includes(key)
|
||||
}
|
||||
return question.answer === key
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.options}>
|
||||
{question.options.map(opt => (
|
||||
<div key={opt.key} className={styles.option}>
|
||||
<Tag color="blue">{opt.key}</Tag>
|
||||
<Text>{opt.value}</Text>
|
||||
</div>
|
||||
))}
|
||||
{question.options.map(opt => {
|
||||
const isCorrect = isCorrectOption(opt.key)
|
||||
return (
|
||||
<div
|
||||
key={opt.key}
|
||||
className={`${styles.option} ${isCorrect ? styles.correctOption : ''}`}
|
||||
>
|
||||
<Tag color={isCorrect ? 'success' : 'blue'}>{opt.key}</Tag>
|
||||
<Text>{opt.value}</Text>
|
||||
{isCorrect && (
|
||||
<Tag color="success" className={styles.correctTag}>
|
||||
<CheckCircleOutlined /> 正确答案
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -293,17 +312,34 @@ const QuestionList: React.FC = () => {
|
||||
: question.content
|
||||
}
|
||||
</Paragraph>
|
||||
|
||||
{/* 判断题：在题目右侧显示答案标签 */}
|
||||
{question.type === 'true-false' && (
|
||||
<div className={styles.trueFalseAnswer}>
|
||||
<Tag
|
||||
color={question.answer === true ? 'success' : 'error'}
|
||||
className={styles.trueFalseTag}
|
||||
>
|
||||
<CheckCircleOutlined /> {question.answer === true ? '正确' : '错误'}
|
||||
</Tag>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 选项 */}
|
||||
{renderOptions(question)}
|
||||
|
||||
{/* 答案 - 填空题不显示答案区域，因为答案已经在横线上方 */}
|
||||
{question.type !== 'fill-in-blank' && (
|
||||
{/* 答案区域 */}
|
||||
{/* 填空题：答案已经在横线上方，不需要显示 */}
|
||||
{/* 选择题和多选题：答案已经标注在选项上，不需要显示 */}
|
||||
{/* 判断题：答案已经在题目右侧，不需要显示 */}
|
||||
{/* 论述题：不展示答案 */}
|
||||
{/* 简答题：需要显示答案 */}
|
||||
{question.type === 'short-answer' && (
|
||||
<div className={styles.answerSection}>
|
||||
<Space size="small">
|
||||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||||
<Text strong>正确答案：</Text>
|
||||
<Text strong>参考答案：</Text>
|
||||
</Space>
|
||||
<Paragraph className={styles.answerText}>
|
||||
{formatAnswer(question)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user