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 ( 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="bg-black/20 rounded-xl p-4 mb-4">
<div className="text-center"> <div className="text-center">
<div className="text-4xl font-mono text-white mb-2 leading-tight"> <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 }} whileTap={{ scale: 0.98 }}
onClick={handleDraw} onClick={handleDraw}
disabled={studentId.length !== 12 || isDrawing || isCheckingLimit || studentDrawCount >= maxDrawTimes || isDebouncing} 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" /> <Play className="w-6 h-6" />
<span>{isDrawing ? '抽奖中...' : <span>{isDrawing ? '抽奖中...' :
@@ -255,9 +256,9 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
</motion.button> </motion.button>
</div> </div>
{/* 屏幕键盘 - 140px*140px */} {/* 屏幕键盘 - 调整按钮大小以适应容器 */}
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-6"> <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-[10px]" style={{ width: '450px', height: '600px' }}> <div className="grid grid-cols-3 gap-1 w-full h-full flex-1 min-h-0">
{keys.flat().map((key, index) => { {keys.flat().map((key, index) => {
let content; let content;
@@ -276,7 +277,7 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
${typeof key === 'number' ? '' : 'text-lg'} ${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') { if (key === 'clear') {
content = <RotateCcw className="w-8 h-8" />; content = <RotateCcw className="w-8 h-8" />;
@@ -291,8 +292,8 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
key={index} key={index}
whileHover={isDrawing || isNumberKeyDisabled ? {} : { scale: 1.05 }} whileHover={isDrawing || isNumberKeyDisabled ? {} : { scale: 1.05 }}
whileTap={isDrawing || isNumberKeyDisabled ? {} : { scale: 0.95 }} whileTap={isDrawing || isNumberKeyDisabled ? {} : { scale: 0.95 }}
className={className} className={`${className} w-full h-full min-h-0`}
style={{ width: '140px', height: '140px', ...numberStyle }} style={{ ...numberStyle }}
disabled={isDrawing || isNumberKeyDisabled} disabled={isDrawing || isNumberKeyDisabled}
onClick={() => { onClick={() => {
if (key === 'clear') { if (key === 'clear') {
@@ -310,7 +311,7 @@ const ScreenKeyboard: React.FC<ScreenKeyboardProps> = ({ onStudentIdChange, onDr
})} })}
</div> </div>
</div> </div>
</div> </>
); );
} }