!79 AdminLTE风格登录页

Merge pull request !79 from finally44177/master
This commit is contained in:
Argo 2020-03-18 16:23:27 +08:00 committed by Gitee
commit 159fa782c0
3 changed files with 520 additions and 0 deletions

View File

@ -0,0 +1,295 @@
@model LoginModel
@{
ViewBag.Title = Model.Title;
Layout = "_Layout";
}
@section css {
<environment include="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="~/lib/sweetalert/sweetalert2.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/lib/sweetalert/sweetalert2.min.css" rel="stylesheet" />
</environment>
<link href="~/lib/captcha/slidercaptcha.css" rel="stylesheet" />
<link href="~/css/theme.css" rel="stylesheet" asp-append-version="true" />
<link href="~/css/login-lte.css" rel="stylesheet" asp-append-version="true" />
<link href="~/css/login-responsive-lte.css" rel="stylesheet" asp-append-version="true" />
}
@section javascript {
<environment include="Development">
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"></script>
<script src="~/lib/validate/jquery.validate.js"></script>
<script src="~/lib/validate/localization/messages_zh.js"></script>
<script src="~/lib/sweetalert/sweetalert2.js" rel="stylesheet"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/validate/jquery.validate.min.js"></script>
<script src="~/lib/validate/localization/messages_zh.min.js"></script>
<script src="~/lib/sweetalert/sweetalert2.min.js" rel="stylesheet"></script>
</environment>
<script src="~/lib/captcha/longbow.slidercaptcha.js"></script>
<script src="~/lib/longbow/longbow.common.js"></script>
<script src="~/lib/longbow/longbow.validate.js"></script>
<script src="~/js/login.js" asp-append-version="true"></script>
}
<div class="container">
<input id="imgUrl" type="hidden" value="@Model.ImageLibUrl" />
<div class="card">
<div class="card-body login-card-body p-0 pt-5 pb-3">
<h5 class="login-box-msg">XXXX集团有限公司</h5>
<div class="login-logo">@Model.Title</div>
</div>
<div class="card-body">
<form id="login" method="post" class="form-signin" data-demo="@Model.IsDemo">
<div class="" data-auth="@Model.AuthFailed" data-toggle="LgbValidate" data-valid-button="button[type='submit']">
<div class="alert alert-danger d-none" asp-condition="@Model.AuthFailed">用户名或密码错误!</div>
<div id="loginUser" class="form-group">
<div class="input-group">
<div class="input-group-prepend" data-toggle="tooltip" title="用户名">
<div class="input-group-text">
<span class="fa fa-user"></span>
</div>
</div>
<input type="text" name="userName" class="form-control" data-toggle="tooltip" placeholder="用户名" maxlength="16" data-required-msg="请输入用户名" value="" autofocus data-valid="true" />
</div>
</div>
<div id="loginPwd" class="form-group">
<div class="input-group">
<div class="input-group-prepend" data-toggle="tooltip" title="密码">
<div class="input-group-text">
<span class="fa fa-lock"></span>
</div>
</div>
<input type="password" name="password" class="form-control" value="" data-toggle="tooltip" placeholder="密码" maxlength="16" autocomplete="off" data-required-msg="请输入密码" data-valid="true" />
</div>
</div>
<div asp-condition="@Model.AllowMobile">
<div id="loginMobile" class="form-group d-none">
<div class="input-group">
<div class="input-group-prepend" data-toggle="tooltip" title="手机号码">
<div class="input-group-text">
<span class="fa fa-phone"></span>
</div>
</div>
<input type="tel" id="phone" name="phone" class="form-control digits" data-toggle="tooltip" placeholder="手机号码" minlength="11" maxlength="11" data-required-msg="请输入手机号码" value="" data-valid="true" />
</div>
</div>
<div id="loginSMS" class="form-group d-none">
<div class="input-group">
<div class="input-group-prepend" data-toggle="tooltip" title="验证码">
<div class="input-group-text">
<span class="fa fa-key"></span>
</div>
</div>
<input type="number" id="code" name="code" class="form-control digits" data-toggle="tooltip" disabled value="" placeholder="验证码" maxlength="4" data-required-msg="请输入验证码" data-valid="true" />
<div class="input-group-append">
<button type="button" id="btnSendCode" class="btn btn-sms" data-toggle="tooltip" title="点击发送验证码">发送验证码</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col">
<div class="rememberPwd" onselectstart="return false">
<i class="fa fa-square-o"></i>
<span>记住密码自动登录</span>
<input id="remember" name="remember" type="hidden" value="false" />
</div>
</div>
</div>
<button class="btn btn-login btn-block" data-oauth="@Model.AllowOAuth" type="submit">登 录</button>
<div class="d-flex justify-content-between">
<a href="#" data-method="register">申请账号</a>
<a href="#" data-method="forgot">忘记密码</a>
</div>
<div asp-condition="@Model.AllowOAuth">
<div class="login-other">
<span class="text-muted">
其他方式登录
</span>
</div>
<div class="d-flex justify-content-between">
<div asp-condition="@Model.AllowMobile">
<a id="loginType" data-value="username" href="#" class="">短信验证登录</a>
</div>
<div class="login-list">
<div class="item ml-1 mr-1">
<a href="~/Account/Gitee" data-toggle="tooltip" title="使用 Gitee 帐号登录">
<img class="item" src="~/images/gitee.svg" />
</a>
</div>
<div class="item ml-1 mr-1">
<a href="~/Account/GitHub" data-toggle="tooltip" title="使用 GitHub 帐号登录">
<img class="item" src="~/images/git.svg" />
</a>
</div>
<div class="item ml-1 mr-1">
<a href="#" data-toggle="tooltip" title="使用微信扫描登录">
<img class="item" src="~/images/weixin.svg" />
</a>
</div>
<div class="item ml-1 mr-1">
<a href="~/Account/Tencent" data-toggle="tooltip" title="使用 QQ 账号登录">
<img class="item" src="~/images/qq.svg" />
</a>
</div>
<div class="item ml-1 mr-1">
<a href="~/Account/Alipay" data-toggle="tooltip" title="使用支付宝账号登录">
<img class="item" src="~/images/zhifubao.svg" />
</a>
</div>
</div>
</div>
</div>
<div class="slidercaptcha @(Model.ShowOAuth ? "card oauth" : "card")">
<div class="card-header">
<span>请完成安全验证</span>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="card-body"><div id="captcha"></div></div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="#btnSubmit" data-valid-modal="#dialogNew">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">新用户注册</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="userName">登录名称:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-user-plus"></span>
</div>
</div>
<input type="text" id="userName" autocomplete="off" class="form-control" placeholder="登录账号不可为空" userName="true" minlength="4" maxlength="16" remote="api/Register" data-remote-msg="此用户已存在" data-valid="true" />
</div>
</div>
<div class="form-group">
<label for="displayName">显示名称:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-user-circle-o"></span>
</div>
</div>
<input type="text" id="displayName" class="form-control" value="" placeholder="显示名称不可为空" maxlength="20" data-valid="true" />
</div>
</div>
<div class="form-group">
<label for="password">密码:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-lock"></span>
</div>
</div>
<input type="password" id="password" class="form-control" value="" placeholder="密码不可为空" maxlength="16" data-valid="true" autocomplete="off" />
</div>
</div>
<div class="form-group">
<label for="assurePassword">确认密码:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-lock"></span>
</div>
</div>
<input type="password" id="assurePassword" class="form-control" value="" placeholder="确认密码" maxlength="16" equalTo="#password" data-valid="true" autocomplete="off" />
</div>
</div>
<div class="form-group">
<label for="description">申请理由:</label>
<textarea id="description" class="form-control" placeholder="申请理由500字以内" rows="3" maxlength="500" data-valid="true"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<i class="fa fa-save"></i>
<span>提交</span>
</button>
<div class="slidercaptcha forgot reg card">
<div class="card-header">
<span>请完成安全验证</span>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="card-body"><div id="regcap"></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="dialogForgot" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="#btnForgot" data-valid-modal="#dialogForgot">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabelForgot">忘记密码</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="f_userName">登录账号:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-user-plus"></span>
</div>
</div>
<input type="text" id="f_userName" autocomplete="off" class="form-control" placeholder="登录账号不可为空" minlength="4" maxlength="16" data-valid="true" />
</div>
</div>
<div class="form-group">
<label for="f_displayName">显示名称:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<span class="fa fa-user-circle-o"></span>
</div>
</div>
<input type="text" id="f_displayName" class="form-control" value="" placeholder="显示名称不可为空" maxlength="20" data-valid="true" />
</div>
</div>
<div class="form-group">
<label for="f_desc">申请理由:</label>
<textarea id="f_desc" class="form-control" placeholder="申请理由500字以内" rows="3" maxlength="500" data-valid="true">我是用户XXX我的手机号是XXXXXX由于密码忘记请将密码重置为123登录后我自行更改谢谢管理员</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-danger" id="btnForgot">
<i class="fa fa-send-o"></i>
<span>提交</span>
</button>
<div class="slidercaptcha forgot card">
<div class="card-header">
<span>请完成安全验证</span>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="card-body"><div id="forgotcap"></div></div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,181 @@
body {
color: #666;
background-color: #e9ecef;
align-items: center;
}
.card {
border-top-color: #3c8dbc;
color: #444;
}
.card:hover {
border-top-color: #2c6ca2;
}
.login-card-body {
background-color: #3c8dbc !important;
}
.login-box-msg {
margin: 0;
padding: 0 20px 20px;
text-align: center;
color: #fff;
}
.login-logo {
font-size: 2.1rem;
font-weight: 300;
margin-bottom: .9rem;
text-align: center;
color: #fff;
}
.form-control {
border-radius: 0;
}
.form-signin-heading {
margin: 0;
padding: 20px 15px;
text-align: center;
background-color: #41cac0;
border-radius: 5px 5px 0 0;
color: #fff;
}
.login-wrap {
display: flex;
flex-direction: column;
margin: 1rem;
}
.login-wrap .rememberPwd {
cursor: pointer;
color: #333;
margin-left: 2px;
}
.login-wrap .rememberPwd i {
width: 13px;
}
.login-wrap .card, .login-wrap .card:hover, .modal .card, .modal .card:hover {
border: 1px solid #84bbe2;
}
.btn-login {
background-color: #f8f9fa;
border-color: #ddd;
color: #444;
margin-bottom: 0.75rem;
outline: none !important;
margin-top: -0.25rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0;
border-width: 1px;
box-shadow: none;
}
.btn-login.hover, .btn-login:active, .btn-login:hover {
background-color: #e9ecef;
color: #2b2b2b;
font-size: 1.25rem;
}
.btn-sms {
border-radius: 0;
}
.input-group-text {
background-color: #e9ecef;
border-color: #ced4da;
color: #666;
}
.form-control, .input-group-append .btn {
/*border-color: #1ca0e9 !important;*/
}
.slidercaptcha {
display: none;
background-color: #00adec;
border-radius: 4px;
box-shadow: 0 0 10px #fff;
height: 274px;
width: 286px;
z-index: 1080;
position: absolute;
}
.slidercaptcha canvas:first-child {
border-radius: 4px;
border: solid 1px #0076c9;
}
.slidercaptcha .close {
color: #fff;
margin-top: -2px;
}
.slidercaptcha.oauth {
height: 210px;
}
.slidercaptcha.card .card-body {
padding: 0.75rem 0 0 0;
}
.slidercaptcha.card .card-header {
background-image: none;
background-color: rgba(0, 0, 0, 0.03);
color: #fff;
}
.slidercaptcha.card .card-header .close:hover {
color: #fff;
}
.slidercaptcha.forgot, .slidercaptcha.reg {
bottom: 52px;
}
.login-other {
display: table;
text-align: center;
white-space: nowrap;
margin: 0.25rem 0 0.625rem 0;
}
.login-other:before, .login-other:after {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC");
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
background-repeat: no-repeat;
}
.login-other:before {
background-position: right 1em top 50%;
}
.login-other:after {
background-position: left 1em top 50%;
}
.login-list {
display: flex;
}
.login-list .item {
width: 24px;
height: 24px;
}
.login-wrap .btn-sms {
width: 140px;
}

View File

@ -0,0 +1,44 @@
@media (max-width: 767px) {
.form-signin {
margin: 0 auto;
max-width: 320px;
}
}
@media (min-width: 768px) {
/*body {
background-color: #5bc0de;
background: url('../images/bg2.jpg') fixed no-repeat;
background-size: 100% 100%;
}*/
.container {
width: 500px;
margin: 0 auto;
}
.form-signin-heading {
padding: 28px 0;
background-color: transparent;
}
.login-wrap {
width: 300px;
height: 274px;
position: relative;
left: 346px;
justify-content: center;
}
.slidercaptcha {
width: 300px;
}
.slidercaptcha, .slidercaptcha.oauth {
height: 280px;
}
.slidercaptcha.card .card-body {
padding: 15px 15px 0 15px;
}
}