1.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 确保页面在各种设备上正确缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机器登录</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome图标库 -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义主题 -->
<script>
tailwind.config = {
theme: {
extend: {
// 定义主色调，适合机器/工业系统的蓝色
colors: {
primary: '#1E40AF',
secondary: '#3B82F6',
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@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;
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
<!-- 登录卡片容器 -->
<div class="w-full max-w-md">
<!-- 登录卡片 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<!-- 卡片头部 -->
<div class="bg-primary p-6 text-white">
<div class="flex items-center justify-center">
<!-- 机器图标 -->
<i class="fa fa-microchip text-3xl mr-3"></i>
<!-- 标题 -->
<h1 class="text-2xl font-bold">机器登录系统</h1>
</div>
</div>
<!-- 卡片主体 - 登录表单 -->
<div class="p-6">
<form id="loginForm" class="space-y-4">
<!-- 设备ID输入 -->
<div>
<label for="deviceId" class="block text-sm font-medium text-gray-700 mb-1">
设备ID
</label>
<div class="relative">
<!-- 图标 -->
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<i class="fa fa-id-card"></i>
</div>
<!-- 输入框 -->
<input
type="text"
id="deviceId"
required
placeholder="请输入设备唯一ID"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus"
>
</div>
</div>
<!-- 访问密钥输入 -->
<div>
<label for="accessKey" class="block text-sm font-medium text-gray-700 mb-1">
访问密钥
</label>
<div class="relative">
<!-- 图标 -->
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<i class="fa fa-key"></i>
</div>
<!-- 输入框 -->
<input
type="password"
id="accessKey"
required
placeholder="请输入访问密钥"
class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg input-focus"
>
<!-- 显示/隐藏密码按钮 -->
<button
type="button"
id="toggleKey"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
<i class="fa fa-eye-slash"></i>
</button>
</div>
</div>
<!-- 验证码 -->
<div>
<label for="captcha" class="block text-sm font-medium text-gray-700 mb-1">
验证码
</label>
<div class="flex gap-2">
<div class="relative flex-1">
<!-- 图标 -->
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<i class="fa fa-shield"></i>
</div>
<!-- 输入框 -->
<input
type="text"
id="captcha"
required
placeholder="输入验证码"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus"
>
</div>
<!-- 验证码图片 -->
<div
id="captchaImg"
class="w-24 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-700 font-bold cursor-pointer select-none"
>
8A3Z
</div>
</div>
</div>
<!-- 登录按钮 -->
<button
type="submit"
class="w-full bg-primary text-white py-2 px-4 rounded-lg font-medium btn-effect"
>
登录设备
</button>
</form>
<!-- 辅助链接 -->
<div class="mt-6 text-center text-sm">
<a href="#" class="text-secondary hover:underline mr-4">设备注册</a>
<a href="#" class="text-secondary hover:underline">忘记密钥</a>
</div>
</div>
</div>
<!-- 页脚信息 -->
<div class="mt-4 text-center text-gray-500 text-xs">
© 2023 工业设备管理系统 - 版本 1.0.0
</div>
</div>
<script>
// 显示/隐藏访问密钥功能
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 < 4; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
return captcha;
}
// 点击刷新验证码
captchaImg.addEventListener('click', () => {
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 = '<i class="fa fa-spinner fa-spin mr-1"></i> 登录中...';
// 模拟登录请求延迟
setTimeout(() => {
// 这里是模拟登录成功，实际应用中会调用API
alert(`设备 ${deviceId} 登录成功！`);
// 恢复按钮状态
submitBtn.disabled = false;
submitBtn.textContent = originalText;
}, 1500);
});
</script>
</body>
</html>
2.运行界面
