Abp Vnext 的 Vue3 实现版本
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

184 lines
4.6 KiB

@page
@model Lion.AbpPro.Pages.Login
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>后台服务登录</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container-fluid d-flex align-items-center justify-content-center min-vh-100">
<div class="row w-100 justify-content-center">
<div class="col-md-6">
<form class="form-horizontal" method="post" novalidate>
@Html.AntiForgeryToken()
<!-- 错误提示区域 -->
@if (TempData["ErrorMessage"] != null)
{
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="fas fa-exclamation-circle me-2"></i>@TempData["ErrorMessage"]
</div>
}
<span class="heading">后台服务登录</span>
@if (TempData["EnableTenant"] != null && (bool)TempData["EnableTenant"])
{
<div class="form-group">
<div class="input-group">
<span class="input-group-text"><i class="fas fa-building"></i></span>
<input type="text" class="form-control" name="tenantName" placeholder="租户名称(可选)">
</div>
</div>
}
<div class="form-group">
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" name="userName" placeholder="用户名" required>
</div>
</div>
<div class="form-group help">
<div class="input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" name="password" placeholder="密码" required>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">登录</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<style> body {
background: linear-gradient(120deg, #3498db, #8e44ad);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.form-horizontal {
background: rgba(255, 255, 255, 0.9);
padding-bottom: 40px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.form-horizontal .heading {
display: block;
font-size: 32px;
font-weight: 700;
padding: 35px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 30px;
color: #2c3e50;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.form-group {
padding: 0 30px;
margin: 0 0 25px 0;
position: relative;
}
.input-group {
border-radius: 30px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.input-group:focus-within {
box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
transform: translateY(-2px);
}
.input-group-text {
background: #3498db;
border: none;
color: white;
border-radius: 0;
width: 45px;
font-size: 16px;
}
.form-control {
border: none;
padding: 12px 15px;
height: 45px;
font-size: 15px;
box-shadow: none;
}
.form-control:focus {
box-shadow: none;
outline: 0 none;
background-color: #f8f9fa;
}
.form-control:required:valid {
border-left: 3px solid #28a745;
}
.form-control:required:invalid:not(:placeholder-shown) {
border-left: 3px solid #dc3545;
}
.form-horizontal .btn {
text-align: center;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(to right, #3498db, #8e44ad);
border-radius: 30px;
padding: 10px 25px;
border: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s ease 0s;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
width: 100%;
cursor: pointer;
}
.form-horizontal .btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6);
}
.form-horizontal .btn:active {
transform: translateY(0);
}
.container-fluid {
padding: 10px;
}
.form-group {
padding: 0 15px;
margin: 0 0 20px 0;
}
.form-horizontal .heading {
font-size: 26px;
padding: 25px 0;
margin-bottom: 25px;
}
</style>