登录界面效果:
- 用户名、密码、验证码为空时提示不能为空
- 验证码可以在点击时刷新、点击回车键时即可登录
Html的样式可供参考,且这个样式具有响应式:
<style>
.auth-wrapper {
min-height: 100vh;
position: relative;
background: url('../../Areas/BaseImage/image/auth-bg.jpg') no-repeat center center;
background-size: cover;
}
</style>
<div class="container-fluid p-0">
<div class="auth-wrapper d-flex justify-content-center align-items-center">
<div class="card">
<div class="card-body">
<div class="text-center">
<span class="db h2">图书管理系统</span>
<h5 class="font-medium mb-3 mt-5"></h5>
</div>
<!-- Form -->
<div class="row">
<div class="col-12">
<form id="fmLogin" method="post">
@*用户名*@
<div class="form-group form-row">
<label class="sr-only" for="userName">
用户名
</label>
<div class="col-12">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-addon"><i class="layui-icon layui-icon-user"></i></div>
</div>
<input type="text" name="userName" id="userName" value="@ViewBag.UserNumber" class="form-control" placeholder="用户名" />
</div>
</div>
</div>
@*密码*@
<div class="form-group form-row">
<label class="sr-only" for="userPassword">
密码
</label>
<div class="col-12">
<div class="input-group">