170 lines
3.4 KiB
JavaScript
170 lines
3.4 KiB
JavaScript
import { alpha } from '@mui/material/styles';
|
|
|
|
export const blindTestStyles = theme => ({
|
|
// 容器
|
|
container: {
|
|
p: 3,
|
|
height: 'calc(100vh - 64px)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
bgcolor: 'background.default'
|
|
},
|
|
|
|
// 头部
|
|
header: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
mb: 2
|
|
},
|
|
headerTitle: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 1.5
|
|
},
|
|
|
|
// 进度和问题区域
|
|
questionPaper: {
|
|
p: 3,
|
|
borderRadius: 3,
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
boxShadow: 'none',
|
|
bgcolor: theme.palette.background.paper
|
|
},
|
|
|
|
// 回答区域容器
|
|
answersContainer: {
|
|
display: 'flex',
|
|
gap: 3,
|
|
flex: 1,
|
|
minHeight: 0, // 关键：允许 flex 子项收缩
|
|
mt: 2
|
|
},
|
|
|
|
// 单个回答卡片
|
|
answerPaper: {
|
|
width: 'calc(50% - 12px)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
borderRadius: 3,
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
boxShadow: 'none',
|
|
overflow: 'hidden',
|
|
bgcolor: theme.palette.background.paper
|
|
},
|
|
answerHeader: {
|
|
p: 2,
|
|
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
bgcolor: theme.palette.background.default
|
|
},
|
|
answerContent: {
|
|
flex: 1,
|
|
overflow: 'auto',
|
|
p: 3,
|
|
// 增加滚动条美化
|
|
'&::-webkit-scrollbar': {
|
|
width: '8px'
|
|
},
|
|
'&::-webkit-scrollbar-track': {
|
|
background: 'transparent'
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: theme.palette.divider,
|
|
borderRadius: '4px'
|
|
},
|
|
'&::-webkit-scrollbar-thumb:hover': {
|
|
backgroundColor: theme.palette.text.disabled
|
|
}
|
|
},
|
|
answerFooter: {
|
|
p: 1.5,
|
|
borderTop: `1px solid ${theme.palette.divider}`,
|
|
bgcolor: theme.palette.background.default,
|
|
display: 'flex',
|
|
justifyContent: 'flex-end'
|
|
},
|
|
|
|
// 底部投票栏
|
|
voteBar: {
|
|
p: 1.5,
|
|
borderRadius: 4,
|
|
mx: 'auto',
|
|
width: 'fit-content',
|
|
minWidth: 800,
|
|
mt: 'auto',
|
|
bgcolor: alpha(theme.palette.background.paper, 0.8),
|
|
backdropFilter: 'blur(20px)',
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
boxShadow: theme.shadows[8]
|
|
},
|
|
voteButtons: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
gap: 2
|
|
},
|
|
voteBtn: {
|
|
flex: 1,
|
|
py: 1.2,
|
|
borderRadius: 3,
|
|
fontWeight: 600,
|
|
textTransform: 'none',
|
|
boxShadow: 'none',
|
|
'&:hover': {
|
|
boxShadow: theme.shadows[4]
|
|
}
|
|
},
|
|
|
|
// 结果页
|
|
resultContainer: {
|
|
height: 'calc(100vh - 64px)',
|
|
overflow: 'auto',
|
|
p: 3
|
|
},
|
|
resultContent: {
|
|
maxWidth: 1200,
|
|
mx: 'auto'
|
|
},
|
|
|
|
// 结果卡片
|
|
scoreCard: {
|
|
flex: 1,
|
|
borderRadius: 3,
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
boxShadow: 'none',
|
|
transition: 'all 0.3s ease',
|
|
'&:hover': {
|
|
transform: 'translateY(-4px)',
|
|
boxShadow: theme.shadows[4]
|
|
}
|
|
},
|
|
scoreCardContent: {
|
|
textAlign: 'center',
|
|
py: 5
|
|
},
|
|
|
|
// 详细结果列表项
|
|
resultItem: {
|
|
mb: 2,
|
|
borderRadius: 3,
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
boxShadow: 'none',
|
|
overflow: 'hidden',
|
|
transition: 'all 0.2s ease'
|
|
},
|
|
resultItemHeader: {
|
|
p: 2.5,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
bgcolor: theme.palette.action.hover
|
|
}
|
|
}
|
|
});
|