72 lines
2.5 KiB
HTML
72 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="./assets/css/login-style.css">
|
|
<title>cApi登录</title>
|
|
</head>
|
|
<body>
|
|
<!-- 左侧品牌区域 -->
|
|
<div class="brand-side">
|
|
<div class="brand-icon">
|
|
<i class="bi bi-shield-lock" style="color: #ecf0f1;"></i>
|
|
<i class="bi bi-key" style="color: #2ecc71;"></i>
|
|
<i class="bi bi-server" style="color: #1abc9c;"></i>
|
|
</div>
|
|
<div class="brand-title-group">
|
|
<h1>cApi管理系统</h1>
|
|
<div class="brand-divider"></div>
|
|
<p>安全、高效的一站式管理解决方案，为您的业务保驾护航</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧登录容器：固定宽度，避免变形 -->
|
|
<div class="login-container">
|
|
<div class="login-header">
|
|
<h2>系统登录</h2>
|
|
</div>
|
|
<form class="login-form" onsubmit="return handleLogin(event)">
|
|
<!-- 用户名输入组：结构扁平化，避免嵌套冲突 -->
|
|
<div class="form-group">
|
|
<label for="username">
|
|
账户
|
|
<span class="required-mark">*</span>
|
|
</label>
|
|
<!-- 输入框容器：仅包裹输入框+功能按钮，固定定位规则 -->
|
|
<div class="input-group">
|
|
<input type="text" id="username" placeholder="请输入用户名" required>
|
|
<i class="bi bi-person input-icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 密码输入组：同用户名结构，保持一致性 -->
|
|
<div class="form-group">
|
|
<label for="password">
|
|
密码
|
|
<span class="required-mark">*</span>
|
|
</label>
|
|
<div class="input-group">
|
|
<input type="password" id="password" placeholder="请输入密码" required>
|
|
<i class="bi bi-lock input-icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-login">登录</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 错误提示弹窗：固定层级，避免被遮挡 -->
|
|
<div class="modal" id="errorModal">
|
|
<div class="modal-content">
|
|
<i class="bi bi-exclamation-circle icon"></i>
|
|
<p id="errorMsg"></p>
|
|
<button onclick="closeModal()">确定</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./assets/js/login-script.js"></script>
|
|
</body>
|
|
</html>
|