305 lines
9.8 KiB
HTML
305 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<!-- 引入头部 -->
|
|
<head th:replace="~{./public/header :: header}"></head>
|
|
<body class="no-padding">
|
|
<!-- header -->
|
|
<div th:replace="~{./public/common_header::common_header}"></div>
|
|
|
|
<!-- login-wrapper -->
|
|
<div class="login-wrapper">
|
|
<div class="login-card-box">
|
|
<!-- 左侧插图 -->
|
|
<div class="login-card-pic">
|
|
<div class="login-card-pic-text">
|
|
<h1>小蚂蚁云官方网站</h1>
|
|
<p>赋能开发者，助力企业发展，全方位提供数据中台解决方案!</p>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧表单 -->
|
|
<form class="layui-form login-card-form">
|
|
<h2>用户登录</h2>
|
|
<div class="layui-form-item input-icon-group">
|
|
<i class="layui-icon layui-icon-username input-icon-left"></i>
|
|
<input class="layui-input" name="username" type="text" placeholder="请输入账号(邮箱)"
|
|
lay-verType="tips" lay-verify="required" required/>
|
|
</div>
|
|
<div class="layui-form-item input-icon-group">
|
|
<i class="layui-icon layui-icon-password input-icon-left"></i>
|
|
<input class="layui-input" name="password" type="password" placeholder="请输入登录密码"
|
|
lay-verType="tips" lay-verify="required" required/>
|
|
</div>
|
|
<div class="layui-form-item input-icon-group login-captcha-group">
|
|
<i class="layui-icon layui-icon-auz input-icon-left"></i>
|
|
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
|
|
autocomplete="off" lay-verType="tips" lay-verify="required" required/>
|
|
<img class="login-captcha" src="/captcha"/>
|
|
</div>
|
|
<div class="layui-form-item layui-text">
|
|
<a href="/register">账号注册</a>
|
|
<a href="/forget">忘记密码?</a>
|
|
</div>
|
|
<div>
|
|
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="userLogin" lay-submit>登 录</button>
|
|
</div>
|
|
<div class="login-oauth-group">
|
|
<div class="login-oauth-title"><span>其他登录方式</span></div>
|
|
<div class="login-oauth-icons">
|
|
<a id="goWxLogin" href="javascript:;" title="微信登录"><i class="layui-icon layui-icon-login-wechat"></i></a>
|
|
<a id="goQqLogin" href="javascript:;" title="QQ登录"><i class="layui-icon layui-icon-login-qq"></i></a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.login-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.login-wrapper:before {
|
|
display: none;
|
|
}
|
|
.login-card-box {
|
|
display: flex;
|
|
width: 920px;
|
|
max-width: 96%;
|
|
height: 510px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 30px rgba(0,0,0,0.18);
|
|
}
|
|
.login-card-pic {
|
|
flex: 1;
|
|
padding: 32px 8px;
|
|
box-sizing: border-box;
|
|
background-color: #1681fd;
|
|
background-image: url('/static/assets/images/login-img.png');
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
background-size: contain;
|
|
text-align: center;
|
|
}
|
|
.login-card-pic-text h1 {
|
|
color: #ffffff;
|
|
font-size: 28px;
|
|
margin: 0 0 6px;
|
|
font-weight: 400;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
.login-card-pic-text p {
|
|
color: rgba(255,255,255,0.8);
|
|
font-size: 16px;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
.login-card-form {
|
|
width: 400px;
|
|
padding: 36px 40px 28px !important;
|
|
box-sizing: border-box;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
.login-card-form h2 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #0b1a33;
|
|
text-align: left;
|
|
margin-bottom: 24px;
|
|
}
|
|
.login-card-form .input-icon-group .layui-input {
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
border-color: #e8edf5;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.login-card-form .input-icon-group .layui-input:focus {
|
|
border-color: #1681fd;
|
|
box-shadow: 0 0 0 3px rgba(22,129,253,0.1);
|
|
}
|
|
.login-card-form .input-icon-group .input-icon-left {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #b0bec5;
|
|
}
|
|
.login-card-form .login-captcha-group .login-captcha {
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
}
|
|
.login-card-form .layui-btn-fluid {
|
|
height: 46px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: 4px;
|
|
background: #1681fd;
|
|
border: none;
|
|
box-shadow: 0 4px 14px rgba(22,129,253,0.3);
|
|
transition: box-shadow 0.3s, transform 0.2s;
|
|
}
|
|
.login-card-form .layui-btn-fluid:hover {
|
|
background: #1270e0;
|
|
box-shadow: 0 6px 20px rgba(22,129,253,0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
.login-card-form .layui-text {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
align-items: center;
|
|
margin-bottom: 18px;
|
|
padding: 0;
|
|
}
|
|
.login-card-form .layui-text a:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.login-card-form .layui-text a {
|
|
color: #1681fd;
|
|
font-size: 13px;
|
|
}
|
|
.login-card-form .login-oauth-group {
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
}
|
|
.login-oauth-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.login-oauth-title span {
|
|
font-size: 12px;
|
|
color: #8b9ab5;
|
|
padding: 0 12px;
|
|
background: #fff;
|
|
position: relative;
|
|
}
|
|
.login-oauth-title:before,
|
|
.login-oauth-title:after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #e8edf5;
|
|
}
|
|
.login-oauth-icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
}
|
|
.login-oauth-icons a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
border: 1px solid #e8edf5;
|
|
color: #1681fd;
|
|
font-size: 20px;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
.login-oauth-icons a:hover {
|
|
border-color: #1681fd;
|
|
background: rgba(22,129,253,0.08);
|
|
color: #1681fd;
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.login-card-box {
|
|
flex-direction: column;
|
|
width: 400px;
|
|
height: auto;
|
|
}
|
|
.login-card-pic {
|
|
width: 100%;
|
|
padding: 20px 12px 100px;
|
|
background-size: auto 100px;
|
|
}
|
|
.login-card-form {
|
|
width: 100%;
|
|
padding: 28px 24px 24px !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- js部分 -->
|
|
<!-- 引入脚部 -->
|
|
<script type="text/javascript" src="/static/assets/layui/layui.js"></script>
|
|
<script type="text/javascript" src="/static/assets/js/common.js"></script>
|
|
<script>
|
|
layui.use(['layer', 'form'], function () {
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
var form = layui.form;
|
|
|
|
/**
|
|
* 登录表单提交
|
|
* 将表单数据以JSON格式POST到/login接口
|
|
* 成功后跳转至用户订单页，失败则刷新验证码并弹出错误提示
|
|
*/
|
|
form.on('submit(userLogin)', function (data) {
|
|
var loadIndex = layer.load(2);
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/login',
|
|
data: JSON.stringify(data.field),
|
|
contentType: "application/json",
|
|
dataType: "json",
|
|
beforeSend: function () {
|
|
// TODO...
|
|
},
|
|
success: function (res) {
|
|
layer.close(loadIndex);
|
|
if (res.code == 0) {
|
|
layer.msg('登录成功', {
|
|
icon: 1,
|
|
time: 1500
|
|
});
|
|
|
|
// 延迟3秒
|
|
setTimeout(function () {
|
|
// 跳转后台首页
|
|
location.replace('/user/order');
|
|
}, 2000);
|
|
|
|
return false;
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2, anim: 6});
|
|
|
|
/* 刷新验证码 */
|
|
$('img.login-captcha').click(function () {
|
|
this.src = '/captcha?t=' + (new Date).getTime();
|
|
}).trigger('click');
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg("AJAX请求异常");
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
|
|
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
|
|
$('img.login-captcha').click(function () {
|
|
this.src = '/captcha?t=' + (new Date).getTime();
|
|
}).trigger('click');
|
|
|
|
/* QQ登录 - 暂未开放 */
|
|
$('#goQqLogin').click(function () {
|
|
layui.layer.msg('抱歉，QQ登录暂未开放', {icon: 5, anim: 6});
|
|
});
|
|
|
|
/* 微信登录 - 暂未开放 */
|
|
$('#goWxLogin').click(function () {
|
|
layui.layer.msg('抱歉，微信登录暂未开放', {icon: 5, anim: 6});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |