1.代码

           tailwind.config = { theme: { extend: {  // 定义主色调，适合机器/工业系统的蓝色  colors: { primary: \'#1E40AF\', secondary: \'#3B82F6\',  }, } } }    @layer utilities { /* 输入框聚焦效果 */ .input-focus { @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none; } /* 按钮悬停动画 */ .btn-effect { @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5; } }   
  
  
 
        
机器登录系统
 
 
  
     
  设备ID  
  
  
   
  
    
  访问密钥  
  
  
       
  
    
  验证码  
 
  
   
   
  
 8A3Z 
 
  
     登录设备     
  设备注册  忘记密钥 
 
 
  
 © 2023 工业设备管理系统 - 版本 1.0.0 
 
  // 显示/隐藏访问密钥功能 const toggleKey = document.getElementById(\'toggleKey\'); const accessKey = document.getElementById(\'accessKey\'); toggleKey.addEventListener(\'click\', () => { // 切换输入框类型 const type = accessKey.getAttribute(\'type\') === \'password\' ? \'text\' : \'password\'; accessKey.setAttribute(\'type\', type); // 切换图标 const icon = toggleKey.querySelector(\'i\'); icon.classList.toggle(\'fa-eye\'); icon.classList.toggle(\'fa-eye-slash\'); }); // 刷新验证码功能 const captchaImg = document.getElementById(\'captchaImg\'); // 生成随机验证码 function generateCaptcha() { const chars = \'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ\'; let captcha = \'\'; for (let i = 0; i  { captchaImg.textContent = generateCaptcha(); }); // 表单提交处理 const loginForm = document.getElementById(\'loginForm\'); loginForm.addEventListener(\'submit\', (e) => { // 阻止表单默认提交行为 e.preventDefault(); // 获取表单数据 const deviceId = document.getElementById(\'deviceId\').value; const accessKey = document.getElementById(\'accessKey\').value; const captcha = document.getElementById(\'captcha\').value; // 简单验证 if (!deviceId || !accessKey || !captcha) { alert(\'请填写完整信息\'); return; } // 获取提交按钮并修改状态 const submitBtn = loginForm.querySelector(\'button[type=\"submit\"]\'); const originalText = submitBtn.textContent; submitBtn.disabled = true; submitBtn.innerHTML = \' 登录中...\'; // 模拟登录请求延迟 setTimeout(() => { // 这里是模拟登录成功，实际应用中会调用API alert(`设备 ${deviceId} 登录成功！`); // 恢复按钮状态 submitBtn.disabled = false; submitBtn.textContent = originalText; }, 1500); }); 

 2.运行界面