ert/draw
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修正

Browse Source
This commit is contained in:
四喜科技
2025-10-17 01:19:29 +08:00
parent bcf220f4ad
commit a98cc968d6
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ScreenKeyboard.tsx
View File

@@ -205,9 +205,9 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
];
return (
<div className="flex flex-col items-center space-y-6">
<>
{/* 学号显示区域 */}
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 w-full max-w-md">
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 mb-6 w-full">
<div className="bg-black/20 rounded-xl p-4 mb-4">
<div className="text-center">
<div className="text-4xl font-mono text-white mb-2 leading-tight">
@@ -244,7 +244,8 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
whileTap={{ scale: 0.98 }}
onClick={handleDraw}
disabled={studentId.length !== 12 || isDrawing || isCheckingLimit || studentDrawCount >= maxDrawTimes || isDebouncing}
className="w-full py-6 bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 disabled:from-gray-500 disabled:to-gray-600 disabled:cursor-not-allowed text-white font-bold text-xl rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center space-x-2"
className="py-6 bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 disabled:from-gray-500 disabled:to-gray-600 disabled:cursor-not-allowed text-white font-bold text-xl rounded-xl shadow-lg transition-all duration-200 flex items-center justify-center space-x-2"
style={{ width: '100%' }}
>
<Play className="w-6 h-6" />
<span>{isDrawing ? '抽奖中...' :
@@ -255,9 +256,9 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
</motion.button>
</div>
{/* 屏幕键盘 - 140px*140px */}
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-6">
<div className="grid grid-cols-3 gap-[10px]" style={{ width: '450px', height: '600px' }}>
{/* 屏幕键盘 - 调整按钮大小以适应容器 */}
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-2 w-full h-full flex flex-col min-h-0">
<div className="grid grid-cols-3 gap-1 w-full h-full flex-1 min-h-0">
{keys.flat().map((key, index) => {
let content;
@@ -276,7 +277,7 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
${typeof key === 'number' ? '' : 'text-lg'}
`;
const numberStyle = /^[0-9]$/.test(key) ? { fontSize: '112px', lineHeight: '140px' } : {};
const numberStyle = /^[0-9]$/.test(key) ? { fontSize: 'clamp(2rem, 6vw, 5rem)' } : {};
if (key === 'clear') {
content = <RotateCcw className="w-8 h-8" />;
@@ -291,8 +292,8 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
key={index}
whileHover={isDrawing || isNumberKeyDisabled ? {} : { scale: 1.05 }}
whileTap={isDrawing || isNumberKeyDisabled ? {} : { scale: 0.95 }}
className={className}
style={{ width: '140px', height: '140px', ...numberStyle }}
className={`${className} w-full h-full min-h-0`}
style={{ ...numberStyle }}
disabled={isDrawing || isNumberKeyDisabled}
onClick={() => {
if (key === 'clear') {
@@ -310,7 +311,7 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
})}
</div>
</div>
</div>
</>
);
}