| | |
|---|
| | | padding: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | font-family: Arial, sans-serif; |
|---|
| | | background-color: #f0f2f5; |
|---|
| | | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|---|
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | height: 100vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .login-container { |
|---|
| | | background-color: white; |
|---|
| | | padding: 40px; |
|---|
| | | border-radius: 8px; |
|---|
| | | box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|---|
| | | border-radius: 12px; |
|---|
| | | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|---|
| | | width: 100%; |
|---|
| | | max-width: 400px; |
|---|
| | | animation: fadeIn 0.5s ease-in-out; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes fadeIn { |
|---|
| | | from { |
|---|
| | | opacity: 0; |
|---|
| | | transform: translateY(20px); |
|---|
| | | } |
|---|
| | | to { |
|---|
| | | opacity: 1; |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | h2 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 30px; |
|---|
| | | color: #333; |
|---|
| | | font-size: 24px; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .form-group { |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | label { |
|---|
| | | display: block; |
|---|
| | | margin-bottom: 8px; |
|---|
| | | color: #666; |
|---|
| | | font-weight: 500; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input { |
|---|
| | | width: 100%; |
|---|
| | | padding: 10px; |
|---|
| | | border: 1px solid #ddd; |
|---|
| | | border-radius: 4px; |
|---|
| | | padding: 12px 16px; |
|---|
| | | border: 2px solid #e0e0e0; |
|---|
| | | border-radius: 8px; |
|---|
| | | font-size: 16px; |
|---|
| | | transition: border-color 0.3s ease; |
|---|
| | | } |
|---|
| | | |
|---|
| | | input:focus { |
|---|
| | | outline: none; |
|---|
| | | border-color: #667eea; |
|---|
| | | box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | button { |
|---|
| | | width: 100%; |
|---|
| | | padding: 12px; |
|---|
| | | background-color: #1890ff; |
|---|
| | | padding: 14px; |
|---|
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|---|
| | | color: white; |
|---|
| | | border: none; |
|---|
| | | border-radius: 4px; |
|---|
| | | border-radius: 8px; |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 600; |
|---|
| | | cursor: pointer; |
|---|
| | | margin-top: 10px; |
|---|
| | | transition: transform 0.2s ease; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:hover { |
|---|
| | | background-color: #40a9ff; |
|---|
| | | transform: translateY(-2px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:active { |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .error-message { |
|---|
| | | color: red; |
|---|
| | | margin-top: 10px; |
|---|
| | | color: #ff4d4f; |
|---|
| | | margin-top: 12px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div class="login-container"> |
|---|
| | | <h2>机器人日志系统</h2> |
|---|
| | | <form id="loginForm"> |
|---|
| | | <div class="form-group"> |
|---|
| | | <label for="username">用户名</label> |
|---|
| | | <input type="text" id="username" name="username" required> |
|---|
| | | </div> |
|---|
| | | <div class="form-group"> |
|---|
| | | <label for="password">密码</label> |
|---|
| | | <input type="password" id="password" name="password" required> |
|---|
| | | </div> |
|---|
| | | <button type="submit">登录</button> |
|---|
| | | <div id="errorMessage" class="error-message"></div> |
|---|
| | | </form> |
|---|
| | | </div> |
|---|
| | | <script> |
|---|
| | | document.getElementById('loginForm').addEventListener('submit', function(e) { |
|---|
| | | e.preventDefault(); |
|---|
| | | const username = document.getElementById('username').value; |
|---|
| | | const password = document.getElementById('password').value; |
|---|
| | | |
|---|
| | | // 简单的登录验证（实际项目中应该调用后端API） |
|---|
| | | if (username === 'admin' && password === 'admin123') { |
|---|
| | | // 存储登录状态 |
|---|
| | | localStorage.setItem('loggedIn', 'true'); |
|---|
| | | // 跳转到主页面 |
|---|
| | | window.location.href = '/'; |
|---|
| | | } else { |
|---|
| | | document.getElementById('errorMessage').textContent = '用户名或密码错误'; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <div class="login-container"> |
|---|
| | | <h2>机器人日志系统</h2> |
|---|
| | | <form id="loginForm"> |
|---|
| | | <div class="form-group"> |
|---|
| | | <label for="username">用户名</label> |
|---|
| | | <input type="text" id="username" name="username" required> |
|---|
| | | </div> |
|---|
| | | <div class="form-group"> |
|---|
| | | <label for="password">密码</label> |
|---|
| | | <input type="password" id="password" name="password" required> |
|---|
| | | </div> |
|---|
| | | <button type="submit">登录</button> |
|---|
| | | <div id="errorMessage" class="error-message"></div> |
|---|
| | | </form> |
|---|
| | | </div> |
|---|
| | | <script> |
|---|
| | | document.getElementById('loginForm').addEventListener('submit', function (e) { |
|---|
| | | e.preventDefault(); |
|---|
| | | const username = document.getElementById('username').value; |
|---|
| | | const password = document.getElementById('password').value; |
|---|
| | | const errorMessage = document.getElementById('errorMessage'); |
|---|
| | | |
|---|
| | | // 显示加载状态 |
|---|
| | | errorMessage.textContent = '登录中...'; |
|---|
| | | |
|---|
| | | // 调用后端登录接口 |
|---|
| | | fetch('/login/auth', { |
|---|
| | | method: 'POST', |
|---|
| | | headers: { |
|---|
| | | 'Content-Type': 'application/x-www-form-urlencoded' |
|---|
| | | }, |
|---|
| | | body: `user=${encodeURIComponent(username)}&pass=${encodeURIComponent(password)}` |
|---|
| | | }) |
|---|
| | | .then(response => response.json()) |
|---|
| | | .then(data => { |
|---|
| | | if (data && data.code === 200) { |
|---|
| | | // 登录成功，存储登录状态 |
|---|
| | | localStorage.setItem('loggedIn', 'true'); |
|---|
| | | // 跳转到主页面 |
|---|
| | | window.location.href = '/'; |
|---|
| | | } else { |
|---|
| | | // 登录失败，显示错误信息 |
|---|
| | | errorMessage.textContent = data.message || '用户名或密码错误'; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .catch(error => { |
|---|
| | | // 网络错误，显示错误信息 |
|---|
| | | errorMessage.textContent = '登录失败，请稍后重试'; |
|---|
| | | console.error('登录失败:', error); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
