94 lines
3.7 KiB
HTML
94 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>系统登录</title>
|
||
|
|
<!-- Vue 3 CDN -->
|
||
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
||
|
|
<!-- Bootstrap 5 CDN -->
|
||
|
|
<link href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<!-- Bootstrap Icons -->
|
||
|
|
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||
|
|
<!-- 外部CSS -->
|
||
|
|
<link rel="stylesheet" href="login.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<div class="login-container">
|
||
|
|
<div class="login-card">
|
||
|
|
<div class="login-header">
|
||
|
|
<div class="login-logo">
|
||
|
|
<i class="bi bi-shield-lock"></i>
|
||
|
|
</div>
|
||
|
|
<h1 class="login-title">欢迎登录</h1>
|
||
|
|
<p class="login-subtitle">请输入您的账号信息</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="errorMessage" class="alert alert-danger" role="alert">
|
||
|
|
<i class="bi bi-exclamation-triangle me-2"></i>
|
||
|
|
{{ errorMessage }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form @submit.prevent="handleLogin">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">用户名</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="form-control"
|
||
|
|
placeholder="请输入用户名"
|
||
|
|
v-model="form.username"
|
||
|
|
required
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">密码</label>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
class="form-control"
|
||
|
|
placeholder="请输入密码"
|
||
|
|
v-model="form.password"
|
||
|
|
required
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group form-check">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
class="form-check-input"
|
||
|
|
id="rememberMe"
|
||
|
|
v-model="form.rememberMe"
|
||
|
|
>
|
||
|
|
<label class="form-check-label" for="rememberMe">
|
||
|
|
记住我
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="btn btn-login"
|
||
|
|
:disabled="loading"
|
||
|
|
>
|
||
|
|
<span v-if="loading">
|
||
|
|
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||
|
|
登录中...
|
||
|
|
</span>
|
||
|
|
<span v-else>
|
||
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>
|
||
|
|
登录
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="login-footer">
|
||
|
|
<a href="#" class="forgot-password">忘记密码？</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 外部JS -->
|
||
|
|
<script src="login.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|